🔐 Day 32 — Authentication Patterns (JWT & Refresh Tokens)

Authentication is a vital part of modern React apps. JSON Web Tokens (JWT) are commonly used to securely transmit user data and validate sessions.

🔹 How JWT Works

• User logs in with credentials.
• Server returns a signed JWT and refresh token.
• JWT is stored on the client (usually in localStorage).
• Client sends JWT with each request for authentication.
• When JWT expires, the refresh token is used to get a new one.

💻 Example: Login with JWT

async function loginUser(credentials) {
  const response = await fetch("/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(credentials),
  });
  const data = await response.json();
  localStorage.setItem("token", data.accessToken);
}
  

The JWT is stored securely and attached to all future API requests. You can use Axios interceptors to automatically add it to request headers.

🔒 Protecting Routes

import { Navigate } from "react-router-dom";

function ProtectedRoute({ children }) {
  const token = localStorage.getItem("token");
  return token ? children : <Navigate to="/login" />;
}
  

Always use HTTPS and avoid storing sensitive data in localStorage. For enhanced security, prefer HttpOnly cookies with refresh token rotation.

← Prev Next →