User Authentication with JWT (JSON Web Tokens) & HTTP-Only Cookies0%
User Authentication with JWT (JSON Web Tokens) & HTTP-Only Cookies
Beginner12 min read•Updated: Jul 11, 2026
User Authentication with JWT (JSON Web Tokens) & HTTP-Only Cookies
Stateless authentication using JSON Web Tokens (JWT) is the modern standard for securing REST APIs and distributed microservices. When paired with HTTP-Only Cookies, JWTs protect client applications against Cross-Site Scripting (XSS) credential theft.
1. Anatomy of a JSON Web Token
A JWT consists of three base64url-encoded parts separated by periods (.):
Output
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0ZjEiLCJyb2xlIjoiYWRtaW4ifQ.uS7Z-K...
[ HEADER ].[ PAYLOAD ].[ SIGNATURE ]
- 1Header: Algorithm and token type (
{"alg": "HS256", "typ": "JWT"}). - 2Payload: Claims and user identifiers (
{"id": "usr_123", "role": "admin", "exp": 1718000000}). Never store sensitive data like plaintext passwords or credit cards in the payload! - 3Signature: Cryptographic hash of
(base64Header + "." + base64Payload)generated using a secret key or private RSA key.
2. Signing and Verifying JWTs
JavaScript
import jwt from 'jsonwebtoken';
const JWT_SECRET = process.env.JWT_SECRET || 'super-secure-production-secret-key';
const JWT_EXPIRES_IN = '1d';
// Generate token upon login
export function generateToken(payload) {
return jwt.sign(payload, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
}
// Verify token in authentication middleware
export function verifyToken(token) {
return jwt.verify(token, JWT_SECRET);
}
3. Why HTTP-Only Cookies Beat LocalStorage
Storing JWT tokens in browser localStorage exposes them to complete theft via malicious JavaScript injected through Cross-Site Scripting (XSS).
Instead, transmit the token in an HTTP-Only, Secure, SameSite Cookie:
JavaScript
export function sendAuthTokenCookie(res, token) {
const cookieOptions = {
httpOnly: true, // Prevents client-side JS from accessing document.cookie (XSS Defense)
secure: process.env.NODE_ENV === 'production', // Transmitted ONLY over HTTPS
sameSite: 'strict', // Mitigates Cross-Site Request Forgery (CSRF)
maxAge: 24 * 60 * 60 * 1000 // 1 day
};
res.cookie('token', token, cookieOptions);
}
4. Authentication Guard Middleware
JavaScript
import jwt from 'jsonwebtoken';
export const protectRoute = (req, res, next) => {
// Check Authorization header OR cookie
let token;
if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
token = req.headers.authorization.split(' ')[1];
} else if (req.cookies && req.cookies.token) {
token = req.cookies.token;
}
if (!token) {
return res.status(401).json({ error: 'You are not logged in. Please provide a valid token.' });
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded; // Attach user payload to request object
next();
} catch (err) {
return res.status(401).json({ error: 'Token is invalid or has expired.' });
}
};
Interactive Quiz
Multiple Choice Questions
Question 1
Why is storing JWT authentication tokens in browser
localStorage dangerous?Question 2
What security property does the
httpOnly: true cookie flag enforce?Question 3
Which part of a JSON Web Token verifies that the token payload has not been tampered with in transit?
Question 4
What happens when
jwt.verify() encounters a token whose expiration timestamp (exp) is in the past?Question 5
Why should sensitive information like user passwords never be stored inside a JWT payload?
Next Lesson
Password Hashing with Bcrypt & Role-Based Access Control (RBAC)
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.