Security & Authentication Series

JSON Web Token (JWT)

Create and decode JWTs in real-time. Understand the Header, Payload, and Signature structure.

Secret Key (for HMAC signing)

Payload Claims

Subject (sub)

Name

Role

Token Expiry (exp)

Time Remaining

1h 0m 0s

Encoded JWT Token

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyXzEyMzQ1IiwibmFtZSI6IkpvaG4gRG9lIiwiZW1haWwiOiJqb2huQGV4YW1wbGUuY29tIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNzcyNzc1ODU1LCJleHAiOjE3NzI3Nzk0NTV9.MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNGU4Mjg2N2I

HEADERAlgorithm & Token Type

{
  "alg": "HS256",
  "typ": "JWT"
}

PAYLOADData Claims

{
  "sub": "user_12345",
  "name": "John Doe",
  "email": "[email protected]",
  "role": "admin",
  "iat": 1772775855,
  "exp": 1772779455
}

SIGNATUREVerification

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  your-secret-key
)

Visual Guide

eyJhbGc...Header: Algorithm & token type (red)
eyJzdWI...Payload: Claims like user ID, role, expiry (purple)
SflKxwR...Signature: Cryptographic hash (cyan)

How to use

1. Modify Payload Claims (name, email, role) to customize your token.
2. Change the Secret Key to see how signatures change.
3. Set Token Expiry and watch the countdown timer.
4. Hover over token parts to see decoded values.

How JWT Works

Create Header

Specify algorithm (HS256) and token type

Create Payload

Add claims like user ID, roles, and expiry

Sign Token

HMAC hash header+payload with secret key

Verify

Server recalculates signature to validate

Quick Guide: JWT Fundamentals

Understanding the basics in 30 seconds

How It Works

Header specifies algorithm (HS256, RS256) and token type
Payload contains claims (user ID, roles, expiry)
Signature = HMAC(header.payload, secret)
Server validates by recalculating signature
If expired or tampered, token is rejected

Key Benefits

Stateless - no server-side session storage
Self-contained - carries all required info
Compact - suitable for HTTP headers
Cross-domain - works across different services
Scalable - ideal for microservices

Real-World Uses

API authentication (Bearer tokens)
Single Sign-On (SSO) implementations
OAuth 2.0 access tokens
Microservices communication
Mobile app authentication

Understanding JSON Web Tokens (JWT)

The industry standard for secure, stateless authentication in modern web applications.

JWT Structure

A JWT consists of three parts separated by dots:

Header: Algorithm and token type
Payload: Claims (user data, expiry)
Signature: Cryptographic verification

Security Benefits

Stateless: No server-side session storage needed
Self-contained: Token carries all required info
Tamper-proof: Signature ensures integrity
Expirable: Built-in expiration mechanism

Common JWT Claims

Registered Claims

iss - Issuer
sub - Subject
exp - Expiration
iat - Issued At

Public Claims

Custom claims registered in IANA JSON Web Token Registry to avoid collisions.

Private Claims

Custom claims agreed upon between parties (e.g., role, permissions).

Security Considerations

Never store sensitive data in payload - JWT is base64 encoded, not encrypted
Use HTTPS - Tokens can be intercepted over insecure connections
Set short expiration times - Limit window for token misuse
Use strong secrets - Weak keys can be brute-forced
Implement token refresh - Allow seamless re-authentication

JWT Security Deep Dive

Symmetric vs Asymmetric Signing

HS256 (Symmetric)

Same secret for sign & verify
Faster, simpler setup
Secret must be shared securely
Good for internal services

RS256 (Asymmetric)

Private key signs, public verifies
Public key can be exposed (JWKS)
Better for distributed systems
Used by identity providers

Common JWT Vulnerabilities

Algorithm None Attack: Setting alg to "none" bypasses signature check
Key Confusion: Treating RS256 public key as HS256 secret
Weak Secrets: Brute-forcing short or predictable secrets
Token Sidejacking: Stealing tokens from insecure storage

Token Storage Best Practices

// ❌ AVOID - XSS vulnerable
localStorage.setItem('token', jwt);

// ✅ PREFER - HttpOnly cookie (set by server)
Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict

// ✅ For SPAs - In-memory with refresh token rotation
const tokenRef = useRef(null);
tokenRef.current = accessToken;

Labs