JWT Playground Tutorial: Hands-On Learning

What You'll Learn

JWT Basics: Understanding the Structure

Anatomy of a JWT

A JWT consists of three parts separated by dots (.). Let's break down each component:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Header

Contains algorithm and token type

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

Payload

Contains the claims/data

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Signature

Verifies token integrity

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret
)

Interactive Exercise 1: Creating Your First JWT

Goal: Create a Basic JWT. Let's create a JWT for a user authentication scenario. You'll learn how each component contributes to the final token.

Step 1: Define the Header

The header specifies the algorithm used for signing. HS256 (HMAC with SHA-256) is common for simple use cases.

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

Base64URL Encoded: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Step 2: Create the Payload

The payload contains claims about the user and session. Include essential information but keep it lean.

{
  "sub": "user123",          // Subject (user ID)
  "name": "Alice Johnson",   // Custom claim
  "role": "user",           // User role
  "iat": 1640995200,        // Issued at (timestamp)
  "exp": 1641001200         // Expires at (timestamp)
}

Base64URL Encoded: eyJzdWIiOiJ1c2VyMTIzIiwibmFtZSI6IkFsaWNlIEpvaG5zb24iLCJyb2xlIjoidXNlciIsImlhdCI6MTY0MDk5NTIwMCwiZXhwIjoxNjQxMDAxMjAwfQ

Step 3: Generate the Signature

The signature ensures the token hasn't been tampered with. It's created using the header, payload, and a secret key.

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

Example Secret: mySecureSigningKey2024!
Resulting Signature: k8GTeGOJhBtC1esXPRYGHQMnM2s6i4DYvAkGNDqHlJM

Complete JWT Token

Combining all three parts with dots creates your final JWT:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyMTIzIiwibmFtZSI6IkFsaWNlIEpvaG5zb24iLCJyb2xlIjoidXNlciIsImlhdCI6MTY0MDk5NTIwMCwiZXhwIjoxNjQxMDAxMjAwfQ.k8GTeGOJhBtC1esXPRYGHQMnM2s6i4DYvAkGNDqHlJM

Interactive Exercise 2: Decoding and Validating JWTs

Goal: Understand JWT Verification. Learn how to decode JWT components and verify their integrity. This is crucial for secure authentication.

Sample JWT to Analyze

Let's decode this JWT step by step to understand its contents:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyNDU2IiwibmFtZSI6IkJvYiBTbWl0aCIsImFkbWluIjp0cnVlLCJpYXQiOjE2NDA5OTUyMDAsImV4cCI6MTY0MTAwMTIwMH0.t6tH7SqE1X-6SxlsEoaVQFhpvEp7WLLhRqXXXjQfbTc

1. Decode Header

Encoded: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

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

2. Decode Payload

Encoded: eyJzdWIiOiJ1c2VyNDU2Ii...

{
  "sub": "user456",
  "name": "Bob Smith",
  "admin": true,
  "iat": 1640995200,
  "exp": 1641001200
}

3. Verify Signature

Signature: t6tH7SqE1X-6SxlsEoaVQF...
Verification: valid with secret "mySecretKey123"

Validation Checklist

When receiving a JWT, perform these validation steps:

Real-World Scenarios

Scenario 1: User Login System

Building a secure login system where JWTs are issued after successful authentication.

Implementation Steps:

1. User Authentication: Verify username and password against database
2. Generate JWT: Create token with user ID, role, and expiration
3. Return Token: Send JWT to client (avoid storing in localStorage for XSS protection)
4. Token Usage: Client includes JWT in Authorization header for API requests
5. Token Verification: Server validates signature and expiration on each request

Scenario 2: API Access Control

Using JWTs to control access to API endpoints based on user roles and permissions.

{
  "sub": "api_user_789",
  "iss": "api.mycompany.com",
  "aud": ["api.mycompany.com", "mobile.mycompany.com"],
  "exp": 1641001200,
  "iat": 1640997600,
  "scope": ["read:users", "write:posts", "admin:dashboard"],
  "rate_limit": 1000
}

Scenario 3: Microservices Communication

Secure communication between microservices using JWTs for service-to-service authentication.

{
  "sub": "order-service",
  "iss": "auth-service",
  "aud": ["inventory-service", "payment-service"],
  "exp": 1641001200,
  "service_id": "order-svc-001",
  "permissions": ["read:inventory", "write:payments"]
}

Each service validates tokens before processing requests, ensuring only authorized services can interact.

Security Deep Dive

Algorithm Confusion Attacks

Attackers change the algorithm from RS256 to HS256, then use the public key as the HMAC secret. Prevention: always specify expected algorithms in your verification code.

// Good: Specify allowed algorithms
jwt.verify(token, secret, { algorithms: ['HS256'] });

// Bad: Accept any algorithm
jwt.verify(token, secret);

"None" Algorithm Bypass

Some JWT libraries accept "none" algorithm, which skips signature verification entirely.

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

Weak Secret Keys

Short or predictable secrets can be brute-forced, allowing attackers to forge tokens.

Security Best Practices

Troubleshooting Common Issues

"Invalid Signature" Errors

"Token Expired" Errors

"Malformed Token" Errors

Next Steps

Practice Exercises

• Build a complete login system with JWT
• Implement token refresh mechanism
• Create role-based access control
• Set up JWT revocation system

Advanced Topics

• JWE (JSON Web Encryption) for sensitive data
• JWK (JSON Web Keys) for key rotation
• OAuth 2.0 integration with JWTs
• Performance optimization for high-traffic apps