JWT Structure Explained: Header, Payload, Signature with Real Examples

Introduction

JSON Web Tokens (JWT) are one of the most important concepts in modern authentication systems. But many developers use JWT without fully understanding how it actually works internally.

If you truly want to master JWT, you must understand its structure:

• Header
• Payload
• Signature

In this guide, we will break down each part in detail with real examples and code.

👉 You can instantly decode and inspect JWT tokens here: https://www.mydevtoolhub.com/tools/jwt-decoder

What is JWT Structure?

A JWT token looks like this:

xxxxx.yyyyy.zzzzz

It consists of three parts separated by dots:

Header.Payload.Signature

Each part is Base64URL encoded.

1. JWT Header (First Part)

The header contains metadata about the token.

Example Header:

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

Explanation:

• alg → Algorithm used for signing (e.g., HS256, RS256)
• typ → Token type (JWT)

Encoded Header:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

2. JWT Payload (Second Part)

The payload contains the actual data (claims).

Example Payload:

{
  "userId": "123",
  "email": "user@example.com",
  "role": "admin",
  "exp": 1710000000
}

Types of Claims:

1. Registered Claims

• iss (issuer)
• sub (subject)
• exp (expiration)
• iat (issued at)

2. Public Claims

• Custom but standardized fields

3. Private Claims

• Custom app-specific data

Important Note:

⚠️ Payload is NOT encrypted — anyone can decode it.

3. JWT Signature (Third Part)

The signature ensures the token has not been tampered with.

How Signature is Created:

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

Example Code:

const jwt = require('jsonwebtoken');

const token = jwt.sign({ userId: 123 }, 'secret', {
  algorithm: 'HS256'
});

Visual Breakdown of JWT

HEADER        PAYLOAD        SIGNATURE
-----         -------        ---------
eyJhbGci...   eyJ1c2Vy...    SflKxwR...

Step-by-Step JWT Creation Flow

Step 1: Create Header

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

Step 2: Create Payload

{ "userId": "123" }

Step 3: Encode Both

Step 4: Generate Signature

Step 5: Combine All

header.payload.signature

Decoding JWT (Manual Method)

You can manually decode JWT:

const base64 = token.split('.')[1];
const decoded = JSON.parse(Buffer.from(base64, 'base64').toString());
console.log(decoded);

Or use: https://www.mydevtoolhub.com/tools/jwt-decoder

Common Mistakes Developers Make

❌ Thinking JWT is encrypted

It is only encoded.

❌ Storing sensitive data

Never store passwords or secrets.

❌ Ignoring signature validation

Always verify JWT before trusting it.

Real Example Token Breakdown

Token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJ1c2VySWQiOiIxMjMiLCJleHAiOjE3MDAwMDAwMDB9
.
abc123signature

Decoded:

Header:

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

Payload:

{ "userId": "123", "exp": 1700000000 }

Why Understanding JWT Structure is Important

• Helps debug authentication issues
• Prevents security mistakes
• Improves backend architecture
• Essential for interviews

Advanced Topics

HS256 vs RS256

JWT vs JWE

• JWT → Signed
• JWE → Encrypted

FAQs

Q1: Can I modify payload?

Yes, but signature will break.

Q2: Why 3 parts?

To separate metadata, data, and verification.

Q3: Is signature mandatory?

Yes, for secure JWT.

Q4: Can I trust decoded data?

Only after verification.

Conclusion

Understanding JWT structure is the foundation of secure authentication.

Once you know how header, payload, and signature work, debugging and securing your app becomes much easier.

👉 Try decoding your own token here: https://www.mydevtoolhub.com/tools/jwt-decoder

Master the structure — and you master JWT.