How to Handle Authentication Token in React: Best Practices

In React, handle authentication tokens by securely storing them in localStorage or sessionStorage and managing them with state using hooks like useState or useContext. Always send tokens in HTTP headers for API requests and clear them on logout to keep user sessions safe.

Why This Happens

Developers often try to store authentication tokens directly in React component state without persisting them, causing tokens to be lost on page reloads. This leads to users being logged out unexpectedly.

javascript

import React, { useState } from 'react';

function App() {
  const [token, setToken] = useState(null);

  function login() {
    // Simulate getting token from server
    setToken('abc123token');
  }

  return (
    <div>
      <button onClick={login}>Login</button>
      <p>Token: {token}</p>
    </div>
  );
}

export default App;

Output

Token: abc123token (displays only until page reload, then token is lost)

The Fix

Store the token in localStorage to keep it after page reloads, and sync it with React state using useEffect. Also, send the token in API request headers for authentication.

javascript

import React, { useState, useEffect } from 'react';

function App() {
  const [token, setToken] = useState(() => localStorage.getItem('authToken'));

  useEffect(() => {
    if (token) {
      localStorage.setItem('authToken', token);
    } else {
      localStorage.removeItem('authToken');
    }
  }, [token]);

  function login() {
    const newToken = 'abc123token';
    setToken(newToken);
  }

  function logout() {
    setToken(null);
  }

  async function fetchData() {
    if (!token) return;
    const response = await fetch('/api/data', {
      headers: { Authorization: `Bearer ${token}` }
    });
    // handle response
  }

  return (
    <div>
      {token ? (
        <>
          <p>Logged in with token: {token}</p>
          <button onClick={logout}>Logout</button>
          <button onClick={fetchData}>Fetch Data</button>
        </>
      ) : (
        <button onClick={login}>Login</button>
      )}
    </div>
  );
}

export default App;

Output

Token persists after page reload; user stays logged in; API requests include token in headers

Prevention

Always store tokens in localStorage or sessionStorage to persist user sessions. Use React context or state management libraries to share token state across components. Clear tokens on logout to avoid security risks. Avoid storing tokens in plain React state only, as it resets on reload.

Use HTTPS to protect tokens in transit and consider HttpOnly cookies for better security if backend supports it.

Related Errors

Token lost on page reload: Happens when token is only in React state, fix by using localStorage.

Token not sent in API requests: Ensure you add Authorization header with Bearer <token>.

Token exposure risks: Avoid storing tokens in places accessible by third-party scripts to reduce XSS risks.

Key Takeaways

Store authentication tokens in localStorage or sessionStorage to persist across reloads.

Sync token storage with React state using hooks like useState and useEffect.

Always send tokens in Authorization headers for API calls.

Clear tokens on logout to protect user sessions.

Consider security best practices like HTTPS and HttpOnly cookies.