How to handle user authentication using Laravel Sanctum and vue js

Handling user authentication using Laravel Sanctum and Vue.js involves setting up Sanctum on the Laravel backend to issue API tokens and creating a frontend in Vue.js to manage the authentication process. Here's a step-by-step guide:

1. Set up Laravel Sanctum:

   • Install Laravel Sanctum by running composer require laravel/sanctum.

   • Publish Sanctum configuration by running php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider".

   • Run migrations to create necessary tables: php artisan migrate.

   • Configure Sanctum in config/auth.php by adding Sanctum's middleware to the api guard:

     phpCopy code
     'guards' => [
         'api' => [
             'driver' => 'sanctum',
             'provider' => 'users',
             'hash' => false,
         ],
     ],
     

2. Set up API routes:

   • Define routes for authentication in routes/api.php:

     phpCopy code
     Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
         return $request->user();
     });
     
     Route::post('/login', [AuthController::class, 'login']);
     Route::post('/register', [AuthController::class, 'register']);
     Route::post('/logout', [AuthController::class, 'logout'])->middleware('auth:sanctum');
     

3. Create Authentication Controller:

   • Create AuthController using Artisan: php artisan make:controller AuthController.
   • Implement login, register, and logout methods in AuthController.

4. Set up Vue.js frontend:

   • Create Vue components for login, register, and logout.
   • Use Vue Router to manage routes for login, register, and logout pages.

5. Make API Requests from Vue.js:

   • Use Axios or any other HTTP client library to make API requests to your Laravel backend.
   • Send login credentials to the /login route to authenticate users.
   • Send registration data to the /register route to create new users.
   • Send a POST request to the /logout route to invalidate the user's token.

6. Handle Authentication State:

   • Store the authentication token (received upon successful login) securely in the frontend (usually in local storage or cookies).
   • Create a Vuex store or use Vue's reactive data to manage the user's authentication state throughout the application.

7. Protect Routes:

   • Use navigation guards in Vue Router to protect routes that require authentication. Redirect users to the login page if they are not authenticated.

8. Implement Authentication Logic:

   • Based on the authentication state, display different components or options in your Vue.js application (e.g., display user profile if authenticated, show login/register forms otherwise).

9. Handle Token Expiry and Refresh:

   • Implement token expiry checks in your frontend to handle token expiration. When a token expires, prompt the user to log in again.
   • Implement token refreshing if your backend supports token refresh functionality. This involves sending a refresh token to the server to obtain a new access token.

10. Test thoroughly:

    • Test the authentication flow thoroughly to ensure that users can log in, register, and log out correctly. Test edge cases like invalid credentials, expired tokens, etc.

By following these steps, you can set up user authentication using Laravel Sanctum and Vue.js, providing a secure and seamless experience for your users.