Authentication is a core part of modern web applications.
When users log in, the server must remember who they are on future requests.

One of the most popular ways to handle this is using JWT (JSON Web Token).

In this post, we’ll explain everything clearly — even if you’re a frontend developer.

What is JWT?

JWT (JSON Web Token) is a compact, secure way of transmitting information between client and server as a JSON object.

It is commonly used for:

• Authentication
• Authorization
• Secure data exchange

👉 In simple terms:

JWT is a secure digital identity card for a user.

Why Do We Need JWT?

When a user logs in:

• Server verifies username/password
• Server must remember the user
• User makes multiple API requests afterward

Without JWT, server would need:

• Session storage
• Database lookups for every request

JWT allows:

• Stateless authentication
• No need to store sessions on server

Structure of a JWT

A JWT has 3 parts separated by dots:

HEADER.PAYLOAD.SIGNATURE

Example:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJ1c2VySWQiOjEyMywicm9sZSI6IkFETUlOIn0
.
abc123signature

Let’s break it down.

1️⃣ Header

Contains:

• Token type (JWT)
• Algorithm used for signing (e.g., HS256)

Example:

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

2️⃣ Payload

Contains user data (called claims).

Example:

{
  "userId": 123,
  "email": "user@example.com",
  "role": "ADMIN"
}

⚠️ Important:
Payload is NOT encrypted.
It is only encoded.

Never store sensitive data like passwords.

3️⃣ Signature

Created using:

• Header
• Payload
• Secret key (stored on server)

This ensures:

• Token cannot be modified
• Data integrity is maintained

How JWT Works (Step-by-Step Authentication Flow)

Let’s understand complete login flow.

Step 1: User Logs In

Frontend sends:

{
  "email": "user@example.com",
  "password": "123456"
}

Step 2: Server Validates Credentials

Server:

• Checks database
• Verifies password

If valid → generate JWT

Step 3: Server Generates JWT

Server creates token like:

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

Signs it with secret key.

Step 4: Server Sends JWT to Client

Response:

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Step 5: Frontend Stores JWT

Common storage options:

• LocalStorage
• SessionStorage
• HttpOnly Cookie (recommended)

Step 6: User Makes API Requests

Frontend sends JWT in headers:

Authorization: Bearer <token>

Step 7: Server Verifies Token

Server:

• Checks signature
• Checks expiration
• Extracts user info

If valid → allow access
If invalid → reject request

JWT in Authentication vs Authorization

Authentication

Verifying who the user is.

Authorization

Checking what the user is allowed to do.

Example:

• USER role → read data
• ADMIN role → delete data

JWT payload often contains role for authorization.

Real-World Example (Frontend Perspective)

Imagine:

You log into a React app.

After login:

• Server sends JWT
• React stores it
• Every API request includes it

Without JWT:

• User would need to login again on every request

JWT solves this.

Security Best Practices

1. Never store passwords in JWT
2. Always set expiration (exp)
3. Use HTTPS
4. Prefer HttpOnly cookies
5. Use short expiry + refresh tokens
6. Keep secret key secure

What is Refresh Token?

Access token:

• Short life (15–30 mins)

Refresh token:

• Longer life
• Used to generate new access token

Improves security.

Interview-Ready Explanation

If asked:

How does JWT work in authentication?

You can say:

After login, the server generates a signed JWT containing user information and sends it to the client. The client includes this token in future requests. The server verifies the token’s signature and allows access if valid.

That’s a strong answer.

Final Summary

JWT:

• Is a secure token format
• Enables stateless authentication
• Contains header, payload, signature
• Is widely used in modern web apps
• Works perfectly for frontend + backend communication