CSRF Protection in React + Express: Simple Explanation with Code

npm install express cors cookie-parser

// app.js
import express from "express";
import cors from "cors";
import cookieParser from "cookie-parser";

import csrfRoutes from "./routes/csrf.routes.js";
import postRoutes from "./routes/post.routes.js";

const app = express();

app.use(express.json());
app.use(cookieParser());

app.use(
  cors({
    origin: "http://localhost:5173",
    credentials: true,
  })
);

app.use("/api", csrfRoutes);
app.use("/api", postRoutes);

export default app;

// controllers/csrf.controller.js
import crypto from "crypto";
import { Redis } from "../config/redis.js";

export const getCsrfToken = async (req, res) => {
  const csrfToken = crypto.randomBytes(32).toString("hex");

  // Store token in Redis for 30 minutes
  await Redis.set(`csrf:${req.user.id}`, csrfToken, "EX", 60 * 30);

  res.cookie("csrfToken", csrfToken, {
    httpOnly: false,
    secure: process.env.NODE_ENV === "production",
    sameSite: "strict",
    maxAge: 30 * 60 * 1000,
  });

res.status(200).json({ csrfToken, }); };

For auth cookies, use `httpOnly: true`.
But for this CSRF token, we use `httpOnly: false` because the frontend needs to send the token in a request header.

### CSRF Middleware

// middlewares/csrf.middleware.js import { Redis } from "../config/redis.js";

const SAFE_METHODS = ["GET", "HEAD", "OPTIONS"];

export const csrfProtection = async (req, res, next) => { if (SAFE_METHODS.includes(req.method)) { return next(); }

const tokenFromHeader = req.headers["x-csrf-token"]; const tokenFromCookie = req.cookies.csrfToken;

if (!tokenFromHeader || !tokenFromCookie) { return res.status(403).json({ error: "CSRF token missing", }); }

if (tokenFromHeader !== tokenFromCookie) { return res.status(403).json({ error: "CSRF token mismatch", }); }

const storedToken = await Redis.get(csrf:${req.user.id});

if (!storedToken || storedToken !== tokenFromHeader) { return res.status(403).json({ error: "Invalid CSRF token", }); }

next(); };

This middleware checks:  

1. Token from header
2. Token from cookie
3. Token from Redis

If all match, the request is allowed.

### CSRF Route

// routes/csrf.routes.js import express from "express"; import { getCsrfToken } from "../controllers/csrf.controller.js"; import { authMiddleware } from "../middlewares/auth.middleware.js";

const router = express.Router();

router.get("/csrf-token", authMiddleware, getCsrfToken);

export default router;

The endpoint is:  

GET /api/csrf-token

### Use CSRF Middleware on Unsafe Routes

// routes/post.routes.js import express from "express"; import { authMiddleware } from "../middlewares/auth.middleware.js"; import { csrfProtection } from "../middlewares/csrf.middleware.js";

const router = express.Router();

router.post("/post", authMiddleware, csrfProtection, createPost); router.put("/post/:id", authMiddleware, csrfProtection, updatePost); router.delete("/post/:id", authMiddleware, csrfProtection, deletePost);

export default router;

Use CSRF protection mainly on:  

POST PUT PATCH DELETE

You usually do not need it on normal `GET` routes.

### Frontend Setup
Create an Axios instance:  

// src/api/api.js import axios from "axios";

export const api = axios.create({ baseURL: "http://localhost:5000/api", withCredentials: true, });

`withCredentials: true` sends cookies with requests.

### Fetch CSRF Token

// src/api/csrf.js import { api } from "./api";

let csrfToken = null;

export const fetchCsrfToken = async () => { const res = await api.get("/csrf-token"); csrfToken = res.data.csrfToken; return csrfToken; };

export const getCsrfToken = () => csrfToken;

Call this after login:  

await fetchCsrfToken();

### Send CSRF Token in Requests

// src/api/post.js import { api } from "./api"; import { getCsrfToken } from "./csrf";

export const createPost = async (postData) => { const csrfToken = getCsrfToken();

const res = await api.post("/post", postData, { headers: { "X-CSRF-Token": csrfToken, }, });

return res.data; };

Now the request sends:  

Cookie: accessToken=... Cookie: csrfToken=... X-CSRF-Token: your_csrf_token

The backend verifies the token before allowing the request.

## Pitfall Guide
1. **[Misconfigured `httpOnly` Flag]**: Setting `httpOnly: true` on the CSRF cookie prevents JavaScript from reading it, breaking the double-submit flow. The frontend must access the cookie to attach it to the `X-CSRF-Token` header.
2. **[Skipping `credentials: true`]**: Both CORS configuration (`credentials: true`) and Axios (`withCredentials: true`) are mandatory. Omitting either breaks cross-origin cookie transmission, causing silent authentication failures.
3. **[Over-Applying to Safe Methods]**: Applying CSRF validation to `GET`, `HEAD`, or `OPTIONS` violates REST conventions, breaks browser caching, and interferes with link previews or prefetching. Restrict middleware to state-changing methods.
4. **[Token Expiration Mismatch]**: Redis TTL (`EX 60 * 30`) and cookie `maxAge` must align precisely. Drift causes either premature 403 errors (Redis expires first) or security gaps (cookie outlives server state).
5. **[Incomplete Triple Verification]**: Validating only header vs. cookie without checking Redis enables replay attacks. If an attacker intercepts a cookie, they can forge requests unless the server-side store validates freshness and ownership.
6. **[Ignoring Production `secure` Flag]**: Failing to set `secure: true` in production exposes the CSRF token to man-in-the-middle attacks over unencrypted HTTP. Always conditionally enforce TLS-bound cookies.
7. **[Static Token Caching]**: Storing the CSRF token indefinitely in frontend memory or `localStorage` without refresh logic causes failures after session rotation or token expiration. Implement automatic re-fetch on 403 responses.

## Deliverables
**📘 Architecture Blueprint**
- Data flow diagram mapping React → Express → Redis validation pipeline
- Component dependency matrix (CORS, cookie-parser, crypto, Axios interceptors)
- State lifecycle visualization (Token generation → Cookie attachment → Header injection → Triple verification → TTL cleanup)

**✅ Deployment & Security Checklist**
- [ ] CORS `origin` restricted to exact frontend domain (no wildcards)
- [ ] `credentials: true` enabled in both Express CORS and Axios instance
- [ ] CSRF cookie configured with `httpOnly: false`, `sameSite: "strict"`, and conditional `secure: true`
- [ ] Redis TTL and cookie `maxAge` synchronized to 30 minutes
- [ ] Middleware applied exclusively to `POST`, `PUT`, `PATCH`, `DELETE` routes
- [ ] Triple verification logic implemented (Header ↔ Cookie ↔ Redis)
- [ ] Frontend token refresh mechanism added for 403 recovery
- [ ] Production environment variables validated (`NODE_ENV`, Redis connection, TLS enforcement)