How to Test JWT Authentication and Silent Token Refresh in React Without a Backend

// src/services/httpClient.js
import axios from 'axios';

const BASE_URL = 'https://playground.nileslabs.com/api/v1';

// In-memory token storage (Best practice for XSS mitigation)
let accessToken = null;
let refreshToken = localStorage.getItem('playground_refresh_token');

export const setTokens = (access, refresh) => {
  accessToken = access;
  refreshToken = refresh;
  if (refresh) {
    localStorage.setItem('playground_refresh_token', refresh);
  } else {
    localStorage.removeItem('playground_refresh_token');
  }
};

export const getAccessToken = () => accessToken;

// Create Axios Instance
export const apiClient = axios.create({
  baseURL: BASE_URL,
  headers: { 'Content-Type': 'application/json' },
});

// Request Interceptor: Attach Bearer token
apiClient.interceptors.request.use((config) => {
  if (accessToken && !config.headers.Authorization) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
});

// Response Interceptor: Catch 401 and handle silent refresh
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    // Check if error is 401 and we haven't already retried
    if (error.response?.status === 401 && !originalRequest._retry && refreshToken) {
      originalRequest._retry = true;

      try {
        // Request fresh access token
        const refreshRes = await axios.post(`${BASE_URL}/auth/refresh`, {
          refreshToken: refreshToken,
        });

        const newAccessToken = refreshRes.data.access_token;
        setTokens(newAccessToken, refreshToken);

        // Update Authorization header and retry original request
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return apiClient(originalRequest);
      } catch (refreshErr) {
        // Refresh token failed or expired -> log out user
        setTokens(null, null);
        window.location.href = '/login';
        return Promise.reject(refreshErr);
      }
    }

    return Promise.reject(error);
  }
);

// src/context/AuthContext.jsx
import React, { createContext, useContext, useState, useEffect } from 'react';
import { apiClient, setTokens, getAccessToken } from '../services/httpClient';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Fetch current user on startup if token exists
  useEffect(() => {
    const initAuth = async () => {
      const storedRefresh = localStorage.getItem('playground_refresh_token');
      if (storedRefresh) {
        try {
          // Attempt token refresh on boot
          const refreshRes = await apiClient.post('/auth/refresh', {
            refreshToken: storedRefresh,
          });
          setTokens(refreshRes.data.access_token, storedRefresh);

          // Fetch authenticated profile
          const meRes = await apiClient.get('/auth/me');
          setUser(meRes.data);
        } catch {
          setTokens(null, null);
        }
      }
      setLoading(false);
    };

    initAuth();
  }, []);

  // Login action
  const login = async (username, password) => {
    const res = await apiClient.post('/auth/login', { username, password });
    setTokens(res.data.access_token, res.data.refresh_token);
    setUser(res.data.user);
    return res.data.user;
  };

  // Logout action
  const logout = () => {
    setTokens(null, null);
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

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

// src/components/ProtectedRoute.jsx
import React from 'react';
import { useAuth } from '../context/AuthContext';

export default function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();

  if (loading) {
    return <div style={{ padding: '2rem' }}>🔒 Verifying session...</div>;
  }

  if (!user) {
    return (
      <div style={{ padding: '2rem', color: '#dc2626' }}>
        <h3>🚫 Access Denied</h3>
        <p>Please log in to view this protected dashboard.</p>
      </div>
    );
  }

  return children;
}