React JWT: How to Build a Secure React Application with JSON Web Token

In the modern landscape of react js development, securing your react application is a top priority. JSON Web Tokens (JWT) provide a secure and efficient way to handle user authentication. When building Single Page Applications (SPAs), integrating react jwt logic allows for stateless auth, where the server doesn’t need to store session info.

This guide will walk you through implementing react authentication, from storing the token to protecting your routes.

Prerequisites for React Authentication

Basic understanding of react js.
Node.js and npm/yarn installed.
A backend (like express) that can verify a signed token jwt.
Understanding that jwt authentication requires a jwt secret on the server to jwt sign the payload.

Step 1: Set Up Your React App

First, create a new react application if you haven’t already:

Bash

npx create-react-app react-jwt-auth
cd react-jwt-auth
npm start

Step 2: Install Axios for API Requests

Axios is a popular library for making an asynchronous request to your api.

Bash

npm install axios

Step 3: Create an Auth Service with Local Storage

It is a best practice to centralize your user authentication logic. We will use local storage to hold the authentication token.

JavaScript

import axios from "axios";

const API_URL = "http://localhost:8080/api/auth/"; 

class AuthService {
  login(username, password) {
    return axios
      .post(API_URL + "signin", { username, password })
      .then(response => {
        if (response.data.accessToken) {
          // Storing the jwt token in local storage
          localStorage.setItem("user", JSON.stringify(response.data));
        }
        return response.data;
      });
  }

  logout() {
    localStorage.removeItem("user");
  }

  getCurrentUser() {
    return JSON.parse(localStorage.getItem("user"));
  }
}

export default new AuthService();

Step 4: Build a Login Component

Your login component will capture credentials and handle the redirect after a successful jwt authentication.

JavaScript

import React, { useState } from "react";
import AuthService from "../services/auth.service";

const Login = (props) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = (e) => {
    e.preventDefault();
    AuthService.login(username, password).then(
      () => {
        // Redirect to profile after auth
        props.history.push("/profile");
        window.location.reload();
      }
    );
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="text" onChange={(e) => setUsername(e.target.value)} />
      <input type="password" onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
};

Step 5: RouteGuard and Route Component Setup

To keep your react application secure, you need a routeguard strategy using react router. This ensures only a verifyed user can access a specific route.

JavaScript

import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";

function App() {
  const currentUser = AuthService.getCurrentUser();

  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login} />
        {/* Simple RouteGuard implementation */}
        <Route 
          path="/profile" 
          render={() => currentUser ? <Profile /> : <Redirect to="/login" />} 
        />
      </Switch>
    </Router>
  );
}

Step 6: Automatically Attach Authentication Token (Axios Interceptors)

To ensure every request is secure, use interceptors to attach the token jwt from local storage to the header.

JavaScript

import axios from "axios";

const instance = axios.create({ baseURL: "/api" });

instance.interceptors.request.use(
  (config) => {
    const user = JSON.parse(localStorage.getItem("user"));
    if (user && user.accessToken) {
      // Attaching the signed jwt token
      config.headers["Authorization"] = 'Bearer ' + user.accessToken;
    }
    return config;
  }
);

Comparison: Custom JWT vs. Managed Services (Okta)

Feature	Custom React JWT	Okta / Auth0
Security	Depends on jwt secret management	Enterprise-grade
Complexity	High (Handling verify, signed logic)	Low (Managed auth)
Storage	Local Storage or Cookies	Secure managed vault
Customization	Full control over authentication context	Limited to provider UI

Conclusion

Implementing react jwt is essential for a secure react application. By utilizing axios interceptors, local storage, and a proper route component strategy, you can build a robust user authentication system. While manual implementation gives you control over the jwt sign and verify process, you may also consider providers like okta for highly sensitive data.

The infographic titled “SECURE REACT WITH JWT: A Comprehensive Authentication Flow” provides a detailed technical roadmap for protecting Single Page Applications (SPAs) using JSON Web Tokens.

🔐 The React & JWT Security Framework

This framework outlines the essential components and steps required to implement a secure, stateless authentication system within a React environment:

1. How JWTs Work (A Primer)

This section establishes the foundational characteristics of JSON Web Tokens:

Compact & URL-Safe: Designed to be easily transmitted between a client and server.
Tamper-Proof: Tokens are cryptographically signed to ensure their integrity.
Self-Contained: Contains essential “Claims” such as User ID and Role, allowing for stateless and scalable architectures.
Three-Part Structure: Visualized as a combination of a Header, Payload, and Signature.

2. React Authentication Flow

This module details the step-by-step interaction between the user and the application:

Initial Login: The user provides credentials, and the server returns a signed JWT.
Secure Storage: The JWT is typically stored in an HttpOnly Cookie to protect against cross-site scripting (XSS) attacks.
Authorized Requests: The token is attached to subsequent API requests as a Bearer Token.
Protected Access: The application logic uses the token to grant access to specific Protected Routes.

3. Key React Implementation

This pillar highlights the specific code-level tools and patterns used to manage authentication:

Auth Context/Provider: Uses the React Context API to provide a global authentication state across the entire component tree.
Axios Interceptors: Automates the process of attaching the JWT to outgoing requests and handling token refresh logic.
Session Management: Includes logic for Logout and handling 401 Unauthorized errors by clearing the token or initiating a refresh.
Robust Error Handling: Ensures the application responds correctly to expired or invalid tokens.