How JWT Authentication Works in a MERN Application

JWT (JSON Web Token) authentication is the standard authentication mechanism for MERN applications. Unlike session-based authentication — where the server stores session data in a database and the client sends a session ID cookie — JWT is stateless: all the information needed to authenticate a request is encoded directly in the token. The server does not need to look anything up; it just verifies the token’s signature. Understanding the complete JWT flow — creation, storage, transmission, and verification — is the foundation for the secure MERN Blog authentication system you will build in this chapter.

The JWT Authentication Flow #

1. User submits email + password to POST /api/auth/login
        │
        ▼
2. Express verifies credentials against MongoDB
   (finds user, calls bcrypt.compare on password hash)
        │
        ▼
3. Express signs a JWT using JWT_SECRET
   Token payload: { id: user._id, iat: timestamp, exp: timestamp }
        │
        ▼
4. Express returns the token in the response body
   { success: true, token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." }
        │
        ▼
5. React stores the token (localStorage or HttpOnly cookie)
        │
        ▼
6. React attaches token to every subsequent API request
   Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
        │
        ▼
7. Express protect middleware extracts + verifies the token
   jwt.verify(token, JWT_SECRET) → { id, iat, exp }
        │
        ├── Valid → attaches decoded user to req.user → handler proceeds
        └── Invalid/expired → 401 Unauthorized → React clears token → login page

Anatomy of a JWT #

A JWT looks like:
  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
  .eyJpZCI6IjY0YTFmMmIzYzhlNGQ1ZjZhN2I4YzlkMCIsImlhdCI6MTcxMDAwMDAwMCwiZXhwIjoxNzEwNjA0ODAwfQ
  .r3Xxw0FhqwQqBptCBbKZ8EE-HzXi1vEBqVP2RrOnl9g

Decoded (at jwt.io):
  Header:  { "alg": "HS256", "typ": "JWT" }
  Payload: { "id": "64a1f2b3c8e4d5f6a7b8c9d0", "iat": 1710000000, "exp": 1710604800 }
  Signature: HMACSHA256(base64(header) + "." + base64(payload), JWT_SECRET)

Important:
  ✓ The payload is BASE64 ENCODED — anyone can decode it
  ✓ The signature is what makes it tamper-proof, not encryption
  ✗ Do NOT store passwords, payment info, or other secrets in payload
  ✓ Only store identifiers: user._id, role (if needed for quick checks)

JWT vs Session Authentication #

What Gets Stored in the JWT Payload #

// server — signing the token (inside login/register controller)
const payload = {
  id:   user._id,  // MongoDB ObjectId as string — used to fetch user from DB
  role: user.role, // include if your middleware needs role without a DB query
  // iat (issued at) and exp (expires at) are added automatically by jsonwebtoken
};

const token = jwt.sign(payload, process.env.JWT_SECRET, {
  expiresIn: process.env.JWT_EXPIRES_IN || '7d',
});

// In the protect middleware, after verifying:
const decoded = jwt.verify(token, process.env.JWT_SECRET);
// decoded = { id: '64a1f2b3...', role: 'user', iat: 1710..., exp: 1710... }

// Attach the real user from DB to req.user
req.user = await User.findById(decoded.id).select('-password');
// Always fetch from DB — the token's payload may be stale
// (e.g. user role changed after token was issued)

Common Mistakes #

Mistake 1 — Storing sensitive data in the JWT payload #

❌ Wrong — passwords or secrets in payload:

const token = jwt.sign({ id: user._id, password: user.password }, secret);
// The payload is base64-encoded — anyone with the token can decode it
// Password hash visible to anyone who has the token!

✅ Correct — only store non-sensitive identifiers:

const token = jwt.sign({ id: user._id }, secret, { expiresIn: '7d' }); // ✓

Mistake 2 — Using a weak or hardcoded JWT secret #

❌ Wrong — short or predictable secret in source code:

const token = jwt.sign({ id }, 'secret'); // trivially guessable
// Or hardcoded in source → committed to git → everyone can forge tokens!

✅ Correct — long random secret from environment variable:

// Generate: node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"
// JWT_SECRET=b3a8f2... (128 hex chars) in .env
const token = jwt.sign({ id }, process.env.JWT_SECRET, { expiresIn: '7d' }); // ✓

Mistake 3 — Not setting token expiry #

❌ Wrong — token never expires:

jwt.sign({ id: user._id }, process.env.JWT_SECRET);
// No expiresIn → token is valid forever — stolen tokens never expire

✅ Correct — always set expiry:

jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' }); // ✓

Quick Reference #