1. Set Up Laravel Backend

• Install Laravel: Start by creating a new Laravel project if you don't have one already.

composer create-project --prefer-dist laravel/laravel my-laravel-app
cd my-laravel-app

Install JWT Package: Use the tymon/jwt-auth package to manage JWTs.

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

Publish the JWT Config

composer require tymon/jwt-auth

Generate JWT Secret:

php artisan jwt:secret

Set Up User Authentication:

• In config/auth.php, set the guard to api and driver to jwt:

'guards' => [
    'api' => [
        'driver' => 'jwt',
        'provider' => 'users',
    ],
],

Create Auth Routes: Define routes for login and register in routes/api.php:

Route::post('register', [AuthController::class, 'register']);
Route::post('login', [AuthController::class, 'login']);

2. Set Up Vue.js Frontend

• Create a Vue.js Project: Set up a Vue.js project using Vue CLI or Vite.

vue create vue-auth-app
cd vue-auth-app
npm install axios vue-router

Install Axios: Axios will be used to communicate with the Laravel backend.

npm install axios

3. Create Authentication Components in Vue.js

• Login Component: Create a Login.vue component with a form to input username and password. On form submission, make an API request to the Laravel backend.

<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="email" type="email" placeholder="Email" required />
      <input v-model="password" type="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    login() {
      axios.post('http://localhost:8000/api/login', {
        email: this.email,
        password: this.password,
      })
      .then(response => {
        localStorage.setItem('token', response.data.token); // Store JWT in local storage
        this.$router.push({ name: 'dashboard' });
      })
      .catch(error => {
        console.error("Authentication failed: ", error);
      });
    },
  },
};
</script>

Protected Routes: Use Axios to send the JWT token with each request to protected routes:

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;

4. Handle JWT Expiration & Logout

• Create a Logout Method: Implement logout functionality to remove the JWT token from local storage and redirect the user.

logout() {
  localStorage.removeItem('token');
  this.$router.push({ name: 'login' });
}

• Handle Token Expiration: On the backend, ensure JWT expiration is handled properly, and on the frontend, check if the token is valid before making requests.

5. Test the Authentication Flow

• Test Registration: Register a new user on the Laravel API using the register route.
• Test Login: Log in with the registered credentials to receive a JWT.
• Test Protected Routes: Access protected routes in Vue.js, ensuring the JWT is required for authentication.

Conclusion

Integrating JWT authentication in a Vue.js application using Laravel as the backend ensures a secure and scalable authentication system. By following these steps—setting up Laravel for JWT authentication, creating Vue.js components, and managing JWT tokens in the frontend—you can create a secure and seamless login process. JWT's stateless nature makes it an excellent choice for modern applications, ensuring that the system remains flexible and efficient. With proper token management and route protection, this setup will allow for a secure and smooth user experience.