How to store JWT in Vue securely
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Storing JWT tokens securely in Vue applications is crucial for preventing XSS attacks and maintaining robust authentication security. As the creator of CoreUI with extensive Vue security experience since 2014, I’ve implemented secure token storage in numerous enterprise applications. The most secure approach uses httpOnly cookies for token storage combined with memory-based state management for temporary access. This method prevents JavaScript access to tokens while maintaining seamless authentication flow throughout the application.
Implement secure JWT storage using httpOnly cookies with a Pinia store for authentication state management.
// stores/auth.js
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
isAuthenticated: false,
accessToken: null // Stored in memory only
}),
actions: {
async login(credentials) {
try {
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(credentials),
credentials: 'include' // Include httpOnly cookies
})
if (response.ok) {
const data = await response.json()
// JWT stored in httpOnly cookie by server
this.user = data.user
this.isAuthenticated = true
// Short-lived access token in memory
this.accessToken = data.accessToken
}
} catch (error) {
throw new Error('Login failed')
}
},
async logout() {
await fetch('/api/logout', {
method: 'POST',
credentials: 'include'
})
this.user = null
this.isAuthenticated = false
this.accessToken = null
},
async refreshToken() {
try {
const response = await fetch('/api/refresh', {
method: 'POST',
credentials: 'include'
})
if (response.ok) {
const data = await response.json()
this.accessToken = data.accessToken
return true
}
} catch (error) {
this.logout()
return false
}
}
}
})
This code implements secure JWT storage where refresh tokens are stored in httpOnly cookies (set by the server) and short-lived access tokens are kept in memory. The credentials: 'include' option ensures cookies are sent with requests. This approach prevents XSS attacks since JavaScript cannot access httpOnly cookies, while the memory-based access token provides performance benefits.
Best Practice Note:
This is the secure token storage pattern we implement in CoreUI Pro enterprise applications for maximum security. Always use HTTPS in production and implement proper CSRF protection when using cookie-based authentication to prevent security vulnerabilities.
