How to safely store and use authentication tokens in React?

Question

Accepted Answer

**Token storage** is a critical security aspect. Improper storage can lead to XSS attacks. **System design context:** Authentication token management is one of the most security-sensitive parts of any web application. A compromised token gives an attacker full access to the user's account. The storage method you choose determines the attack surface: localStorage is accessible to any JavaScript on the page, while HttpOnly cookies are invisible to JS entirely. **Storage options:** **1. HttpOnly Cookies (recommended):** ```http Set-Cookie: token=eyJhbGci...; HttpOnly; Secure; SameSite=Strict; Path=/ ``` - JavaScript CANNOT read cookie → XSS cannot steal the token. - Browser automatically sends cookie with every request. - Safest option. **2. In-memory (via state):** ```jsx function AuthProvider({ children }) { const [token, setToken] = useState(null); const login = async (email, password) => { const res = await fetch("/api/login", { method: "POST", body: JSON.stringify({ email, password }), }); const data = await res.json(); setToken(data.token); // Only in memory! }; return ( {children} ); } ``` - Token lives only in memory in the tab. - When tab is closed — token disappears. - XSS can steal via document.cookie → UNSAFE for localStorage. **3. localStorage (NOT recommended for tokens):** ```jsx // BAD: XSS can read it localStorage.setItem("token", jwt); ``` **Sending token:** ```jsx // With HttpOnly cookie — automatically (credentials: "include") fetch("/api/data", { credentials: "include" }); // With Bearer token (in-memory) fetch("/api/data", { headers: { Authorization: `Bearer ${token}` }, }); ``` **Refresh Token pattern:** ```tsx // Access token: short-lived (15 min), stored in memory // Refresh token: long-lived (7 days), stored in HttpOnly cookie async function fetchWithAuth(url, options) { let res = await fetch(url, { ...options, credentials: "include" }); if (res.status === 401) { // Access token expired — refresh const refreshRes = await fetch("/api/refresh", { credentials: "include" }); if (refreshRes.ok) { res = await fetch(url, { ...options, credentials: "include" }); } else { // Refresh token also expired — redirect to login window.location.href = "/login"; } } return res; } ``` **Security checklist:** - Always use `Secure`, `HttpOnly`, `SameSite=Strict` on auth cookies. - Implement token rotation — issue new tokens on each refresh. - Set short expiration times for access tokens (15-30 minutes). - Never log tokens to console or analytics in production.

React: How to safely store and use authentication tokens in React?