Understanding JWT (JSON Web Tokens) with a Simple Diagram

 

Introduction

JSON Web Tokens (JWT) have become a standard for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs are widely used for authentication and information exchange in web applications.

What is a JWT?

A JWT is a compact, URL-safe token that consists of three parts:

1. Header
2. Payload
3. Signature

Each part is base64url encoded and concatenated with periods.

JWT Structure Diagram

Below is a simple diagram to illustrate the structure of a JWT:

Or visually as plain text:

xxxxx.yyyyy.zzzzz
|     |     |
|     |     +---- Signature (Base64Url encoded)
|     +---------- Payload (Base64Url encoded)
+---------------- Header (Base64Url encoded)

How JWT Works (Authentication Flow)

1. User logs in: The user submits their credentials to the server.
2. JWT generated: If authentication is successful, the server creates a JWT and sends it to the client.
3. Client stores JWT: The client (usually a browser or app) stores the JWT (commonly in localStorage or as a cookie).
4. Subsequent requests: For every request to a protected route, the client sends the JWT, typically in the Authorization header.
5. Server verifies JWT: The server verifies the JWT’s signature and, if valid, processes the request.

Benefits of JWT

• Compact and self-contained
• Stateless authentication (no need for server session)
• Can be used across different domains

Conclusion

JWTs provide a secure and compact way to transmit information between parties. Their stateless nature makes them perfect for modern web applications requiring scalable authentication mechanisms.