Refresh Tokens on the Frontend: Architecture & Implementation

Short summary

This guide covers refresh token architecture for modern SPAs, explaining why splitting access and refresh tokens balances security and UX. It details best practices: storing access tokens in memory and refresh tokens in HttpOnly Secure cookies, avoiding localStorage due to XSS risks, and implementing token rotation so stolen tokens self-invalidate. A practical Axios implementation with request interceptors and concurrent-refresh queuing is provided.

• •Store access tokens in memory and refresh tokens in HttpOnly Secure cookies — never localStorage
• •Implement token rotation so each refresh invalidates the old refresh token, limiting theft impact
• •Use Axios interceptors to auto-detect 401s, call /auth/refresh, and retry queued requests

Generated with AI, which can make mistakes.