Opinions for implementing Laravel Passport or any key based authentication.

Hello everyone,

I have developed a small blog website using Laravel, Vuejs and Vue Router. I am mostly looking for advice on best practices and design patterns and of course security related issues that might appear this way.

The project is targeted for personal use and of course for anyone out there that might be looking for something similar.

When i started the project, i decided since it's just a small blog based app with only one user able to log in at any given time, not to use Laravel Passport or anything of that sort. So i just added laravel's basic Authentication to get the user to log in and then laravel servers just as an API.

The whole back end is a vuejs app, so all the routing and data manipulation are being done with vue router and axios. A small note here is that the JavaScript for the front end and the back end are 2 compliantly different files.

The way i structured the project was that i have a route group under oath that implements the auth middleware and that's where everything for the back end is under, followed from a route group that again implements the auth middleware with a prefix of manage and thats for the vue router to handle the routing.

 Auth::routes(['register' => false]);

Route::prefix('oath')->middleware('auth')->group(function () {

    Route::resource('/users', 'Backend\Oath\UsersController');

    Route::resource('/posts', 'Backend\Oath\Posts\PostsController');

    Route::get('/posts/actions/published', 'Backend\Oath\Posts\PostActionController@published')
           ->name('posts.published');

    Route::get('/posts/actions/drafts', 'Backend\Oath\Posts\PostActionController@drafts')
          ->name('posts.drafts');
    Route::patch('/post/actions/{publish}/{post}', 'Backend\Oath\Posts\PostActionController@status')
           ->name('post.status');

    Route::get('/post/markdown/images', 'Backend\Oath\Markdown  \MarkdownController@index')->name('markdown.images');
    Route::post('/post/markdown/upload', 'Backend\Oath\Markdown\MarkdownController@upload')->name('markdown.upload');
    Route::delete('/post/markdown/{image}', 'Backend\Oath\Markdown\MarkdownController@destroy')->name('markdown.destroy');

    Route::resource('/categories', 'Backend\Oath\CategoriesController');

    Route::resource('/subscribers', 'Backend\Oath\SubscribersController');

    Route::resource('/socialAccount', 'Backend\Oath\SocialAccountsController');

    Route::get('/search/{term}', 'Backend\Oath\Posts\SearchController')->name('search.title');

});

   Route::prefix('manage')->middleware('auth')->group(function () {
        Route::get('/{any}', 'Backend\DashboardController@index')->where('any', '.*');
});

Then, i followed a similar approach for the frontend, under api is all the data related stuff for the fornt end and the one route under {any} that excludes the /api via a regular expression and thats to handle routing.

Route::prefix('api')->group(function () {

     Route::get('/index', 'Frontend\CategoriesController@index')->name('index');

 Route::get('/categories', 'Frontend\CategoriesController@fetchCategories')->name('categories');

     Route::get('/{name}/posts', 'Frontend\CategoriesController@posts')->name('category.posts');

     Route::get('/post/{slug}', 'Frontend\CategoriesController@post')->name('post');

     Route::post('/subscribers', 'Frontend\SubscribersController@submit')->name('subscribers.submit');

     Route::post('/subscribers/cancel/{email}/{token}', 'Frontend\SubscribersController@cancel')
         ->name('subscribers.cancel');
});

Route::get('/{any}', 'Frontend\MainController@index')->where('any', '^(?!api).*$');

I havent really seen someone using this kind of approach to go about solving a similar problem, so i was wondering if it would be a better approach to just add Passport or any key based authentication for the api calls on the backend