How to Refresh Token in React: Simple Guide with Example

In React, you refresh a token by calling a refresh API endpoint before the current token expires, then updating the stored token (usually in localStorage or context). Use useEffect or interceptors (like in Axios) to trigger the refresh automatically and keep the user logged in without interruptions.

Syntax

Refreshing a token in React typically involves these parts:

• Refresh API call: A function that sends the current refresh token to the server and receives a new access token.
• Storage update: Save the new token in localStorage, sessionStorage, or React state.
• Automatic trigger: Use useEffect or HTTP client interceptors to call the refresh function before token expiry.

javascript

async function refreshToken() {
  const response = await fetch('/api/refresh-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ refreshToken: localStorage.getItem('refreshToken') })
  });
  const data = await response.json();
  if (data.accessToken) {
    localStorage.setItem('accessToken', data.accessToken);
  }
  return data.accessToken;
}

Example

This example shows a React component that refreshes the token automatically every 14 minutes using setInterval. It stores tokens in localStorage and updates the access token silently.

javascript

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

function TokenRefresher() {
  const [accessToken, setAccessToken] = useState(localStorage.getItem('accessToken'));

  async function refreshToken() {
    try {
      const response = await fetch('/api/refresh-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ refreshToken: localStorage.getItem('refreshToken') })
      });
      const data = await response.json();
      if (data.accessToken) {
        localStorage.setItem('accessToken', data.accessToken);
        setAccessToken(data.accessToken);
      }
    } catch (error) {
      console.error('Failed to refresh token', error);
    }
  }

  useEffect(() => {
    const interval = setInterval(() => {
      refreshToken();
    }, 14 * 60 * 1000); // refresh every 14 minutes

    return () => clearInterval(interval);
  }, []);

  return <div>Current Access Token: {accessToken}</div>;
}

export default TokenRefresher;

Output

Current Access Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Common Pitfalls

Common mistakes when refreshing tokens in React include:

• Not handling token refresh failures, which can cause infinite loops or logout issues.
• Refreshing tokens too frequently or too late, causing expired tokens to be used.
• Storing tokens insecurely or not updating the token in all places it is used.
• Forgetting to clear intervals or subscriptions, causing memory leaks.

javascript

/* Wrong: Refreshing token without error handling */
async function refreshToken() {
  const response = await fetch('/api/refresh-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ refreshToken: localStorage.getItem('refreshToken') })
  });
  const data = await response.json();
  localStorage.setItem('accessToken', data.accessToken); // No check if accessToken exists
}

/* Right: With error handling and token check */
async function refreshToken() {
  try {
    const response = await fetch('/api/refresh-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refreshToken: localStorage.getItem('refreshToken') })
    });
    const data = await response.json();
    if (data.accessToken) {
      localStorage.setItem('accessToken', data.accessToken);
    } else {
      throw new Error('No access token received');
    }
  } catch (error) {
    console.error('Token refresh failed:', error);
    // Optionally logout user or redirect
  }
}

Quick Reference

• Use localStorage or React context to store tokens.
• Call refresh API before token expires (e.g., 1-2 minutes early).
• Use useEffect with setInterval or HTTP interceptors for automatic refresh.
• Always handle errors to avoid app crashes or infinite loops.
• Clear timers on component unmount to prevent memory leaks.

Key Takeaways

Refresh tokens by calling a refresh API before the access token expires to keep users logged in.

Store and update tokens securely in localStorage or React state for consistent access.

Use useEffect with setInterval or HTTP client interceptors to automate token refresh.

Always handle errors during refresh to avoid app crashes or infinite loops.

Clear intervals or subscriptions on component unmount to prevent memory leaks.