How to manage authentication with Laravel Passport and Vue.js

When building SPA with Vue and Laravel it is important to handle the login / logout functionality properly. Using Laravel passport can make this easier but it must be setup correctly. The steps below detail how to ensure that logging in and out is smooth and handled in a secure way.

1. Install Laravel Passport according to the Laravel Passport Instructions. Ensure that the api Guard is swapped out for Passport in the config.

2. Ensure that the Laravel passport middleware \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class is added to the Laravel middleware kernel.php file.

3. In Vue app.js file ensure that axios is installed and setup have the required headers passed on each axios request. Something like this:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

4. Ensure that the normal login routes are setup in the web routes file. These can be auto generated by running php artisan make:auth or just added manually to the routes.

Route::post('login', 'Auth\LoginController@login');
Route::get('logout', 'Auth\LoginController@logout');

5. In the Auth/LoginController the logout method form the AuthenticatesUsers trait needs to be overridden with the following:

public function logout(Request $request)
{
    $this->guard()->logout();

    $request->session()->invalidate();

    $request->session()->regenerateToken(); 

    return $request->session()->token();
}

6. Now when we use axios to hit the web login route a laravel_token cookie will be created. When the logout route is called the session will be destoryed and the laravel_token cookie will be removed from browser. Also a new csrf token be passed back. It is important to then set the new csrf token as the new axios csrf header to ensure that the user can log back in if so desired witgout refreshing the SPA page.

7. Now everything is setup. This methods means all csrf, and session is stored in laravel_token HTTP only cookie, so no need to store any access_tokens in local storage etc. which eliminates any xss vulnerability. Laravel will authenticate by passing the this token back and forth on each request. The cookie is HTTP only so cannot be accessed by any script on browser.