How does JWT (JSON Web Token) Authentication work - Pros & Cons
Understand the JWT(JSON Web Token) and how JWT decode works. It also covers how the end-to-end JWT authentication works between client & server, along with the pros and cons of using JWT.
Frontendgeek
Last Updated Jun 15, 2026

JWT(JSON Web Token) is currently becoming the standard of web authorization, where the token(JWT) carries all the required information along with the token and on the server, the information is decoded by the server using a key.
In this post, we will learn about JWT Token, its structure and pros-cons, so that you can use JWT token for authorization confidently
What is JWT(JSON Web Token)?
A JSON Web Token (JWT) is a compact, URL-safe way to securely transmit information between client and server, so that the server receives the information required to authorise the request from client to server.
You can understand JWT tokens with the analogy of a digital boarding pass ✈️. Once you get a boarding pass after logging in, you keep showing it to prove your identity until it expires.
A JWT Token contains three parts:
- Header → contains metadata like the algorithm used for signing
- Payload → contains the actual data like userId, email, and roles, which the client wants to transfer.
- Signature → verifies the token hasn’t been tampered with.
Example structure:
A JWT (JSON Web Token) is made up of three parts: Each part is Base64URL encoded and separated by dots (.) notation.
<header>.<payload>.<signature>
JWT decoded Example
Here’s a sample JWT token where parts are separated by dot(.):
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.
KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30
Decoded Values
When the JWT token is decoded, it contains 3 JSON objects related to the header, payload and signature.
Note: Follow the JWT token decode online JWT Decode Application
1. Header
JWT header part contains 2 key value pair, one is the algorithm which is used to sign this token and another one is the type of token which is JWT
- alg: Algorithm used to sign the token (HS256 = HMAC + SHA-256).
- typ: Type of token (JWT).
{
"alg": "HS256",
"typ": "JWT"
}
2. Payload
Payload contains the actual data, that will going to send from client to server. This is the data which is used to do the authorization of the service.
- "sub": Subject (usually the user ID).
- "name": User’s name.
- "role": Role of the user (admin, user, etc.).
- "exp": Expiry timestamp (Unix epoch).
{
"sub": "1234567890",
"name": "John Doe",
"role": "admin",
"exp": 1716239022
}
3. Signature
The server uses this signature to verify that the token hasn’t been altered.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
How does JWT (JSON Web Token) Authentication work?
Here is the flow diagram to understand how JWT token works between client and server to provide authorization to the requests.
Here is what the end-to-end JWT authentication flow looks like
- User provides credentials - User logs in with valid credentials.
- Server validation & JWT generation - Server validates and generates a JWT (with header, payload, and signature).
- Sent JWT back to client - This token is sent back to the client and stored (usually in localStorage or cookies).
- Send JWT as Auth token - For every request, the client attaches the token in the "Authorization" header.
- Server verification - Server verifies the signature to ensure it hasn’t been tampered with.
- Server authorize request - If valid → ✅ access granted. If not → ❌ access denied.
What are some pros & cons of using JWT Token-based Authentication?
Let's understand the important advantages that JWT token provides instead of cookie-based authentication, and in which cases JWT tokens are not a better choice
Pros of JWT
✅ Stateless
- No need for the server to store session data.
- Works perfectly with microservices and distributed systems.
✅ Scalable
- Easy to use with APIs, SPAs (React/Next.js), and mobile apps.
- Doesn’t rely solely on browser cookies.
✅ Compact & Fast
- Base64 encoded → small enough to send in HTTP headers.
- Less overhead compared to storing session IDs.
✅ Flexible Payload
- Can carry custom claims like roles, permissions, tenant info, etc.
Cons of JWT
❌ Difficult to revoke if stolen
- Once issued, you can’t easily “kill” a token if the token gets compromised.
❌ Size bloat
- Storing too much data in the payload can slow down the API requests, beacause of the more data transfer over the network.
❌ Security risks
- If stored in localStorage, vulnerable to XSS.
❌ Expiry handling
- Needs a proper refresh token mechanism and requires extra effort to keep it fresh.
Learn Next: More authorization techniques
Learn Next
Comments
Be the first to share your thoughts!
No comments yet.
Start the conversation!
Share your expertise
Publish a blog or quick notes on topics you know well — your write-up could be the answer someone needs before their next frontend interview.
Build your portfolio
Help the community
Sharpen your skills
Earn goodies
Other Related Blogs
What is CORS ? Cross-Origin Resource Sharing Explained [For Interviews]
Anuj Sharma
Last Updated Feb 6, 2026
A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.
Understand JavaScript Local Storage, Session Storage and Cookies
Anuj Sharma
Last Updated Feb 6, 2026
Explore how to create and use javascript local storage, session storage and cookies. Explore the key differences between Local Storage vs Session Storage vs Cookies to understand the trade-offs.
Part 1: From Zero to Published — How I Built and Published My First React NPM Package
Akash Deep Chitransh
Last Updated Feb 6, 2026
Learn how to build and publish your own NPM package with Rollup, testing, and troubleshooting. Stay tuned for part 2: building a React state management library!
Understanding Critical Rendering Path (CRP) to Improve Web Performance
Anuj Sharma
Last Updated Feb 6, 2026
Understand what all steps are involved in the Critical Rendering Path (CRP) and how optimization of different steps can improve the overall web-vitals of a web application
What happens when you type google.com in the browser
Anuj Sharma
Last Updated Feb 5, 2026
Details about how the browser works behind the scenes and what happens when you type google.com in the browser, starting from communication to the webpage rendering.
Boost Your Site Speed with CSS Sprites: A Practical Guide
Vaibhav Kumar
Last Updated Jan 28, 2026
Master CSS sprites to slash HTTP requests, supercharge load times, and optimize icons—practical guide with code, tools, and 2026 best practices.
Explained Web Authorization Techniques - Session & JWT
Anuj Sharma
Last Updated Dec 16, 2025
Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)
