Frontend

JWT Authentication in Vue.js: Complete Guide

Vue.js is a progressive JavaScript framework for building web interfaces. Vue apps commonly use JWT for stateless authentication, with Pinia or Vuex managing the auth state and Vue Router guards protecting routes. This guide walks you through everything you need to implement robust JWT authentication in Vue.js, from choosing the right library to writing production-ready code.

Recommended JWT Library for Vue.js

jwt-decode

The recommended library for handling JWT authentication in Vue.js. It provides a mature API, active maintenance, and wide community adoption — making it the go-to choice for production applications built with Vue.js.

Whether you are building a small prototype or a large-scale enterprise application, jwt-decode gives you the tools to generate, sign, verify, and decode JWT tokens with confidence. It supports all major signing algorithms including HS256, RS256, and ES256, and integrates naturally with the Vue.js ecosystem.

JWT Authentication Code Example

Below is a practical code example showing how to implement JWT authentication in Vue.js using jwt-decode. This snippet demonstrates the core pattern you will use in most applications:

Vue.js — JWT Examplejwt-decode

import { jwtDecode } from 'jwt-decode';
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({ token: null, user: null }),
  actions: {
    async login(credentials) {
      const { data } = await api.post('/login', credentials);
      this.token = data.token;
      this.user = jwtDecode(data.token);
      localStorage.setItem('token', data.token);
    },
    logout() {
      this.token = null;
      this.user = null;
      localStorage.removeItem('token');
    },
  },
});

This example shows the essential JWT workflow in Vue.js. In production, make sure to store secrets in environment variables, use HTTPS, and implement proper error handling for token expiration and revocation.

How to Set Up JWT in Vue.js

Follow these steps to get JWT authentication working in your Vue.js project. Each step builds on the previous one, so we recommend following them in order:

1
Install dependencies: npm install jwt-decode pinia
2
Create Pinia auth store with login/logout actions
3
Add axios interceptor to attach Bearer token
4
Set up router beforeEach guard for protected routes
5
Create useAuth composable for components

Key Features of JWT Auth in Vue.js

When you implement JWT authentication in Vue.js, you gain access to several powerful capabilities that make your application more secure and scalable:

Pinia auth store

Router navigation guards

Axios interceptors for tokens

Composable auth hooks

Why Use JWT Authentication in Vue.js?

Vue.js is widely used for building modern web applications and APIs, and JWT has become the de facto standard for stateless authentication. By combining Vue.js with JWT, you get a scalable authentication system that does not require server-side session storage.

JWT tokens are self-contained, meaning they carry all the information needed to identify a user and their permissions. This makes them ideal for microservice architectures, mobile backends, and single-page applications built with Vue.js. Each request includes the token, so your server can verify identity without a database lookup.

The jwt-decode library makes it straightforward to implement JWT in Vue.js. You can generate tokens on login, verify them on each request, and handle token refresh to keep users authenticated without interruption. Combined with proper security practices — such as short expiration times, refresh token rotation, and secure storage — JWT provides a robust foundation for any authentication system.

Best Practices for JWT in Vue.js

When implementing JWT authentication in Vue.js, follow these best practices to keep your application secure:

Use strong secrets: Always use a long, random secret key for signing tokens. Store it in environment variables, never in source code.
Set short expiration times: Access tokens should expire quickly (15–30 minutes). Use refresh tokens for longer sessions.
Validate on every request: Always verify the token signature and check expiration before granting access to protected resources.
Use HTTPS: JWT tokens sent over plain HTTP can be intercepted. Always use HTTPS in production to protect tokens in transit.
Handle token refresh: Implement a refresh token flow so users are not logged out when their access token expires. Rotate refresh tokens to prevent replay attacks.
Do not store sensitive data in tokens: JWT payloads are Base64-encoded, not encrypted. Avoid putting passwords or other sensitive information in claims.

Decode & Inspect JWT Tokens Instantly

Use our free online JWT Decoder to inspect any token — view the header, payload, claims, and expiration status right in your browser. No sign-up required.

Try JWT Decoder Pro →