Production MERN Authentication: Secure JWTs, HttpOnly Refresh Tokens & Session Handling

Storing JWT access tokens in browser localStorage makes your web application vulnerable to Cross-Site Scripting (XSS) attacks. A single compromised npm dependency can exfiltrate tokens and compromise user accounts.

1. The Flaws of LocalStorage Token Storage

When an access token with a long expiration is saved in localStorage, any third-party script injected via an XSS flaw can read localStorage.getItem('token'). To prevent this, enterprise applications separate short-lived access tokens from long-lived refresh tokens.

2. The Dual-Token Rotation Architecture

Our production flow utilizes two tokens:

• Access Token: Short lifetime (15 minutes), kept in memory in React state.
• Refresh Token: Long lifetime (7-30 days), stored in a SameSite=Strict, HttpOnly, Secure cookie that JavaScript cannot access.

3. Implementing Secure HttpOnly Cookies

In Express.js, set the refresh token cookie with strict flags:

res.cookie('refreshToken', refreshToken, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'strict',
  maxAge: 7 * 24 * 60 * 60 * 1000,
});

4. Protecting Express Routes with Middleware

An authentication middleware inspects the Authorization: Bearer <token> header on every incoming request. If expired, the frontend transparently calls /api/auth/refresh using the secure cookie to obtain a fresh access token without user friction.

5. Case Study: PostCrafts Security Engine

In the PostCrafts Auth project, we implemented this exact pattern alongside bcrypt salt hashing (12 rounds) and input sanitization with express-validator, creating a scalable, production-ready authentication template.