Blog/NotesConcept

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.

Intermediate

Frontendgeek

Last Updated Sep 25, 2025


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 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:

  1. Header → contains metadata like the algorithm used for signing
  2. Payload → contains the actual data like userId, email, and roles, which the client wants to transfer.
  3. 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 decoded, it contains 3 JSON objects related to header, payload and singnature.

Note: Follow to JWT token decode online JWT Decode Applications

Decoding JWT Token

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.

Flow diagram how JWT works

Here is the end-to-end JWT authentication flow looks like

  1. User provides credentials - User logs in with valid credentials.
  2. Server validation & JWT generation - Server validates and generates a JWT (with header, payload, and signature).
  3. Sent JWT back to client - This token is sent back to the client and stored (usually in localStorage or cookies).
  4. Send JWT as Auth token -  For every request, the client attaches the token in the "Authorization" header.
  5. Server verification - Server verifies the signature to ensure it hasn’t been tampered with.
  6. 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 which JWT token provides instead of cookie-based authentication, and in which cases JWT token is not a better choice 

Pros of JWT

Stateless

  1. No need for the server to store session data.
  2. Works perfectly with microservices and distributed systems.

Scalable

  1. Easy to use with APIs, SPAs (React/Next.js), and mobile apps.
  2. Doesn’t rely solely on browser cookies.

Compact  & Fast

  1. Base64 encoded → small enough to send in HTTP headers.
  2. Less overhead compared to storing session IDs.

Flexible Payload

  1. Can carry custom claims like roles, permissions, tenant info, etc.

Cons of JWT

Difficult to revoke if stolen

  1. Once issued, you can’t easily “kill” a token if the token gets compromised.

Size bloat

  1. Storing too much data in the payload can slow down the API requests, beacause of the more data transfer over the network.

Security risks

  1. If stored in localStorage, vulnerable to XSS.

Expiry handling

  1. Needs proper refresh token mechanism and required extra effort to keep it fresh.

Learn Next: More authorization techniques

  1. Notes for web authorization techniques

Share this post now:

💬 Comments (0)

Login to comment

Advertisement

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Advertisement


Other Related Blogs

Understanding popstate event in Single Page Applications (SPAs)

Vijay Sai Krishna vsuri

Last Updated Aug 21, 2025

A Quick guide about popstate event in JavaScript, If you’ve ever hit the back button in your browser and wondered how your Single-Page Application knows which view to render, this guide is for you.

Polyfill for map, filter, and reduce in JavaScript

Anuj Sharma

Last Updated Oct 2, 2025

Explore Polyfill for map, filter and reduce array methods in JavaScript. A detailed explanation of Map, filter and reduce polyfills in JS helps you to know the internal working of these array methods.

Master Hoisting in JavaScript with 5 Examples

Alok Kumar Giri

Last Updated Jun 2, 2025

Code snippet examples which will help to grasp the concept of Hoisting in JavaScript, with solutions to understand how it works behind the scene.

setTimeout Polyfill in JavaScript - Detailed Explanation

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.

Implement Infinite Currying Multiplication in JavaScript: mul(2)(3)(4)

Anuj Sharma

Last Updated Oct 13, 2025

Understand the step-by-step implementation of Infinite Currying Multiplication in JavaScript with a code example.

Polyfill for Async Await in JavaScript - Step by Step Explanation

Anuj Sharma

Last Updated Oct 4, 2025

Understand polyfill for Async Await in JavaScript with a step-by-step explanation. This helps in understanding the internal functioning of Async Await in JavaScript.

Stay Updated

Subscribe to FrontendGeek Hub for the frontend interview preparation, interview experiences, curated resources and roadmaps.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved