Understanding JWT: A Simple Guide to JSON Web Tokens

Hi code ☕ and coffee lovers!
Today I'm going to walk you through something super important in web development — JWT (JSON Web Token) 🛡️!. Think of it as a digital ID card 💳 that securely proves who you are and what you’re allowed to do when talking to a server. Let’s dive in! 👇

JSON Web Token, or JWT is a way to securely send information between two parties, like a client (your browser or app) and a server. Think of it as a digital ID card that proves who you are and what you’re allowed to do. It’s widely used in web applications to verify users and protect data.

Why Use JWT? 🙄

JWT is popular because it’s,

Secure: It ensures the information hasn’t been tampered with
Compact: The token is small and easy to send in requests
Flexible: It works with many programming languages and systems
Stateless: The server doesn’t need to store session data, making it easier to scale apps

Imagine logging into a website. Instead of keeping you logged in by storing your username and password, the server gives you a token (a kind of digital ID). You send this token with every request, and the server checks it to confirm you're allowed access.

Structure of JWT 🧱

A JWT is a string of characters that looks like this:
Xxxxx.yyyyy.zzzzz

It’s made up of three parts separated by dots (.) These 3 types are,

Header
Payload
Signature

These parts are encoded in a format called Base64, which turns data into a string that’s easy to send over the internet.

How JWT Works 🧠💭

Let’s break down the three parts of a JWT and how they work together.

Header

The header is the first part of a JWT. It tells the server two things.

How the token is signed - what method is used to protect it. Signing a token means adding a special code (called signature) to the token to make suer, It hasn’t been changed by anyone and It was really created by a trusted source.
What kind of token it is - always a JWT

It looks like this in code (in JSON format):

"alg" stands for algorithm – it shows how the token was signed. Example: "HS256" means it's using a secret key to sign it.

"typ" stands for type – it tells us that this is a JWT. This JSON is encoded into Base64 to become the first part of the token (xxxxx).

Payload

The payload contains the actual information, like the user’s ID or permissions. It’s also in JSON format, for example:

sub: The subject, often a user ID.
name: Extra info, like the user’s name.
role: The user’s role or permissions.
iat: When the token was issued (timestamp).

You can add custom data to the payload, but don’t put sensitive information (like passwords) because the payload is just Base64-encoded, not encrypted—anyone can decode it! This JSON becomes the second part of the token (yyyyy).

Signature

The signature ensures the token hasn’t been changed. It’s created by combining the encoded header, encoded payload, and a secret key(known only to the server). The server uses the same algorithm specified in the header (eg: HS256) to create the signature.

The result is the third part of the token (zzzzz). When the server gets a JWT, it recalculates the signature using the header, payload, and its secret key. If the signature match, the token is valid.

Putting It All Together 🧩

Here’s how a JWT is created and used:

User Logs In: The user sends their username and password to the server.
Server Creates JWT: If the credentials are correct, the server generates a JWT with a header, payload, and signature.
Client Stores JWT: The server sends the JWT to the client, which stores it (usually in the browser’s local storage or a cookie).
Client Sends JWT: For every request to the server, the client includes the JWT in the request header (e.g., Authorization: Bearer <token>).
Server Verifies JWT: The server checks the signature to ensure the token is valid and hasn’t been tampered with. If it’s valid, the server processes the request.

Example of JWT in Action 🛒

Imagine you’re using a website like an online store:

You log in with your email and password.
The server checks your credentials and sends you a JWT that says, “This is user ID 123, and they’re a customer.”
Your browser stores the JWT.
When you click “View My Orders,” your browser sends the JWT to the server.
The server verifies the JWT and sends back your order history.

This process is fast and secure because the server doesn’t need to check a database for every request—it just verifies the JWT.

✅ Advantages of JWT

No Server Storage: Since the token contains all the info (like user ID), the server doesn’t need to store session data.
Works Across Systems: A JWT created by one server can be used by another if they share the same secret key.
Secure Data Transfer: The signature ensures no one can change the token without the secret key.

⚠️ Disadvantages of JWT

Not Encrypted: The payload is only encoded, not encrypted, so anyone can read it. Don’t store sensitive data in the payload.
Hard to Revoke: Once a JWT is issued, it’s valid until it expires. If a token is stolen, it can be used until it expires.
Size: JWTs can get large if the payload contains a lot of data, which can slow down requests.

Best Practices for Using JWT

Use HTTPS: Always send JWTs over secure connections to prevent interception.
Short Expiration Times: Set tokens to expire quickly (e.g., 15 minutes) to reduce the risk if they’re stolen.
Refresh Tokens: Use a separate “refresh token” to get new JWTs without requiring the user to log in again.
Avoid Sensitive Data: Don’t put things like passwords or credit card numbers in the payload.
Store Securely: On the client side, store JWTs in secure cookies or local storage with proper protections.

Common Use Cases

Authentication: Verifying a user’s identity when they log in.
Authorization: Checking if a user has permission to access certain resources (e.g., admin-only pages).
Single Sign-On (SSO): Allowing users to log in once and access multiple apps without logging in again.
API Security: Protecting APIs by requiring a valid JWT for access.

How to Create a JWT (Simple Example)

Here’s a basic example using Node.js and the jsonwebtoken library:

To verify the token:

This is just one example—JWT libraries exist for many languages, like Python (PyJWT), Java (jjwt), and PHP.

JWT is a powerful tool for securing web applications. It’s simple to use, lightweight, and works across different systems. By understanding its parts—header, payload, and signature—you can use it to build secure, scalable apps. Just remember to follow best practices, like using HTTPS, setting short expiration times, and avoiding sensitive data in the payload.

Whether you’re building a small app or a large system, JWT can help you manage user authentication and authorization with ease. If you’re new to JWT, try experimenting with a library in your favorite programming language—it’s easier than it looks!

Happy Coding 🚀