Understanding JWT in React Applications

Published: March 26, 2025 By: JWT Decode Team Category: Authentication

JSON Web Tokens (JWT) have become the industry standard for implementing authentication in modern web applications, especially in React-based front-end applications. In this comprehensive guide, we'll explore how to properly implement JWT authentication in React applications.

What is JWT?
JWT Authentication Flow in React
Implementing JWT Authentication
Storing JWT Tokens Securely
Creating Protected Routes
Implementing Token Refresh
Handling JWT Expiration
Best Practices and Security Considerations

What is JWT?

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed.

A JWT token consists of three parts:

Header: Contains the type of token and the signing algorithm being used
Payload: Contains the claims or the JWT data
Signature: Used to verify that the sender of the JWT is who it says it is

// Sample JWT Structure
xxxx.yyyy.zzzz

// Where:
// xxxx is the encoded header
// yyyy is the encoded payload
// zzzz is the signature

JWT Authentication Flow in React

The typical JWT authentication flow in a React application works as follows:

User enters credentials and submits the login form
React app sends credentials to the authentication server
Server validates credentials and returns a JWT if valid
React app stores the JWT (typically in localStorage or httpOnly cookie)
For subsequent requests, the JWT is included in the Authorization header
Server validates the JWT for protected routes
When user logs out, the token is removed from storage

Implementing JWT Authentication

Let's look at how to implement JWT authentication in a React application:

1. Login Component

// Login.js
import React, { useState } from 'react';
import axios from 'axios';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://api.example.com/login', {
        username,
        password
      });
      
      // Store the token
      localStorage.setItem('token', response.data.token);
      
      // Redirect or update state
      window.location.href = '/dashboard';
    } catch (err) {
      setError('Invalid credentials');
    }
  };

  return (
    
      Login
      {error && {error}}
      
        
          Username
           setUsername(e.target.value)}
            required
          />
        
        
          Password
           setPassword(e.target.value)}
            required
          />
        
        
      
    
  );
}

2. API Service with Axios

// apiService.js
import axios from 'axios';

const API_URL = 'https://api.example.com';

// Create an axios instance
const apiClient = axios.create({
  baseURL: API_URL,
});

// Add a request interceptor to add the auth token to requests
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Add a response interceptor to handle token expiry
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    
    // If the error is 401 and we haven't already tried to refresh the token
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      
      try {
        // Call your refresh token endpoint
        const refreshResponse = await axios.post(`${API_URL}/refresh-token`, {
          refreshToken: localStorage.getItem('refreshToken'),
        });
        
        const { token } = refreshResponse.data;
        localStorage.setItem('token', token);
        
        // Retry the original request with the new token
        originalRequest.headers['Authorization'] = `Bearer ${token}`;
        return axios(originalRequest);
      } catch (refreshError) {
        // If refresh token fails, redirect to login
        localStorage.removeItem('token');
        localStorage.removeItem('refreshToken');
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }
    
    return Promise.reject(error);
  }
);

Storing JWT Tokens Securely

There are several options for storing JWT tokens in a React application:

1. localStorage

Simple but vulnerable to XSS attacks:

// Store token
localStorage.setItem('token', jwtToken);

// Retrieve token
const token = localStorage.getItem('token');

// Remove token on logout
localStorage.removeItem('token');

2. httpOnly Cookies

More secure as JavaScript cannot access these cookies:

// Backend sets the cookie
res.cookie('token', token, { 
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'strict',
  maxAge: 3600000 // 1 hour
});

Note: When using httpOnly cookies, the browser will automatically include the cookie with each request to the same domain, so no need to manually attach tokens.

3. React Context + Memory State

For short-lived sessions, keeping the token in a React Context can be an option:

// AuthContext.js
import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(null);
  
  const login = (newToken) => {
    setToken(newToken);
  };
  
  const logout = () => {
    setToken(null);
  };
  
  return (
    
      {children}
    
  );
};

export const useAuth = () => useContext(AuthContext);

Creating Protected Routes

React Router v6 makes it easy to implement protected routes:

// ProtectedRoute.js
import { Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = () => {
  const isAuthenticated = !!localStorage.getItem('token');
  
  // If not authenticated, redirect to login
  if (!isAuthenticated) {
    return ;
  }
  
  // If authenticated, render the child routes
  return ;
};

// In your Routes configuration:
import { Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Login from './Login';

function AppRoutes() {
  return (
    
      } />
      
      {/* Protected Routes */}
      }>
        } />
        } />
      
      
      } />
    
  );
}

Implementing Token Refresh

To handle token expiration, implement a refresh token mechanism:

// refreshToken.js
import axios from 'axios';

const refreshToken = async () => {
  try {
    const refreshToken = localStorage.getItem('refreshToken');
    
    if (!refreshToken) {
      throw new Error('No refresh token available');
    }
    
    const response = await axios.post('https://api.example.com/refresh-token', {
      refreshToken
    });
    
    const { token, newRefreshToken } = response.data;
    
    // Update tokens in storage
    localStorage.setItem('token', token);
    localStorage.setItem('refreshToken', newRefreshToken);
    
    return token;
  } catch (error) {
    // If refresh fails, clear auth state and redirect to login
    localStorage.removeItem('token');
    localStorage.removeItem('refreshToken');
    window.location.href = '/login';
    throw error;
  }
};

Handling JWT Expiration

You can decode the JWT to check its expiration:

// jwtUtils.js
import jwtDecode from 'jwt-decode';

export const isTokenExpired = (token) => {
  try {
    const decoded = jwtDecode(token);
    const currentTime = Date.now() / 1000;
    
    // Check if the token is expired
    if (decoded.exp < currentTime) {
      return true;
    }
    
    return false;
  } catch (error) {
    // If there's an error decoding the token, consider it expired
    return true;
  }
};

export const getTimeUntilExpiry = (token) => {
  try {
    const decoded = jwtDecode(token);
    const currentTime = Date.now() / 1000;
    
    // Return seconds until expiry
    return decoded.exp - currentTime;
  } catch (error) {
    return 0;
  }
};

You can also set up automatic token refresh before expiration:

// setupTokenRefresh.js
import { getTimeUntilExpiry } from './jwtUtils';
import { refreshToken } from './refreshToken';

export const setupTokenRefresh = () => {
  const token = localStorage.getItem('token');
  
  if (!token) return;
  
  // Get seconds until token expires
  const timeUntilExpiry = getTimeUntilExpiry(token);
  
  // Set up refresh 1 minute before expiry
  if (timeUntilExpiry > 60) {
    const refreshTime = (timeUntilExpiry - 60) * 1000; // Convert to milliseconds
    
    setTimeout(() => {
      refreshToken().catch(console.error);
    }, refreshTime);
  } else {
    // If token expires in less than a minute, refresh immediately
    refreshToken().catch(console.error);
  }
};

Best Practices and Security Considerations

Security Tips

Use HTTPS: Always use HTTPS to encrypt the token during transmission
Token Expiration: Set a reasonable expiration time for your tokens
Proper Storage: Consider httpOnly cookies for better security
Validate on Server: Always validate tokens on the server side
CSRF Protection: Implement CSRF protection when using cookies
Minimal Payload: Keep the JWT payload minimal; don't store sensitive data
Refresh Tokens: Implement refresh tokens for better security and UX

Implementation Checklist

Implement login flow with JWT return

Store JWT securely (httpOnly cookie or localStorage)

Set up request interceptors to add token to API calls

Create protected routes with authentication checks

Implement token refresh mechanism

Handle token expiration gracefully

Clear tokens on logout

Conclusion

Implementing JWT authentication in React applications provides a secure and efficient way to manage user sessions. By following best practices and understanding the JWT workflow, you can build robust authentication systems that protect your users' data while providing a seamless user experience.

Remember that security is an ongoing process. Keep your dependencies updated, stay informed about security best practices, and regularly review your authentication system to ensure it remains secure.

Table of Contents