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 Feb 6, 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
A JSON Web Token (JWT) is a compact, URL-safe way of securely transmitting information between client and server, so that the server gets the information that is required to authorise the request from client to server.
You can understand JWT tokens with an 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:
A JWT (JSON Web Token) is made up of three parts: Each part is Base64URL encoded and separated by dots (.) notation.
<header>.<payload>.<signature>
Here’s a sample JWT token where parts are separated by dot(.):
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.
KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30
When the JWT token decoded, it contains 3 JSON objects related to header, payload and singnature.
Note: Follow to JWT token decode online JWT Decode Applications
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": "HS256",
"typ": "JWT"
}
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": "1234567890",
"name": "John Doe",
"role": "admin",
"exp": 1716239022
}
The server uses this signature to verify that the token hasn’t been altered.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
Here is the flow diagram to understand how JWT token works between client and server to provide authorization to the requests.
Here is the end-to-end JWT authentication flow looks like
let's understand the important advantages which JWT token provides instead of cookie-based authentication, and in which cases JWT token is not a better choice
ā Stateless
ā Scalable
ā Compact & Fast
ā Flexible Payload
ā Difficult to revoke if stolen
ā Size bloat
ā Security risks
ā Expiry handling
Be the first to share your thoughts!
No comments yet.
Start the conversation!
Build Your Portfolio
Help the Community
Strengthen Your Skills
Share your knowledge by writing a blog or quick notes. Your contribution can help thousands of frontend developers ace their interviews and grow their careers! š
Anuj Sharma
Last Updated Aug 3, 2025
Explore the implementation of setTimeout in JavaScript with a detailed explanation for every step. Understand all scenarios expected to implement the setTimeout polyfill.
Anuj Sharma
Last Updated Nov 15, 2025
Understand the code implementation of useSessionStorage custom hook in react that will help to efficiently manager session storage in application.
Anuj Sharma
Last Updated Feb 21, 2026
Find the top React Performance Optimization Techniques specific to React applications that help to make your react app faster and more responsive for the users along with some bonus techniques.
Anuj Sharma
Last Updated Feb 21, 2026
Explore code explanation of useToggle() custom hook in react to handle the toggle event efficiently.
Anuj Sharma
Last Updated Feb 21, 2026
In this post, we will going to cover the step-by-step implementation of Infinite Currying Sum with a code example. This is one of the most common JavaScript Interview questions.
Anuj Sharma
Last Updated Feb 21, 2026
Understand flattening nested objects in JavaScript using a recursive approach, which includes the recursive code, how to approach a recursive solution and a step-by-step explanation.
Subscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.
All in One Preparation Hub to Ace Frontend Interviews. Master JavaScript, React, System Design, and more with curated resources.
Ā© 2026 FrontendGeek. All rights reserved