Stop 10 · API IntegrationTopics · 9/16

JWT

In short

JWT shows up in almost every job description with 'auth' in it. It's just a signed piece of text that says who you are, and you can read one yourself in ten seconds.

JSON Web Tokens — a compact, signed token format commonly used to represent an authenticated user, sent with each API request to prove identity.

The jaadu holds up a train ticket marked with a big official stamp on the platform.

Think of it like this

A railway ticket with a stamp

Your train ticket has your name, berth and date printed for anyone to read. What makes it valid is the official stamp, which can't be faked. A JWT is the same: anyone can read the details, but only the server can make a valid signature.

Watch it happen

A JWT doing its job

App

Auth server

API

POST /auth/login

1/5The user logs in once with their email and password.

The big ideas

What you need to know

Three parts, two dots

header.payload.signature. Header says the algorithm, payload holds claims like user id, signature proves it's genuine.

Readable, not secret

The payload is only Base64URL encoded, not encrypted. Never put passwords or private data in it.

Signed by the server

Change even one letter in the payload and the signature check fails on the server.

It expires

The exp claim sets an expiry time. Short expiry limits damage if a token gets stolen.

See it in code

Walk through the code

1// Sending a JWT with a request2await fetch("/api/profile", {3  headers: { Authorization: `Bearer ${token}` },4});5 6// Peeking at the payload (for display only, NOT for security)7function readPayload(token: string) {8  const part = token.split(".")[1];9  const json = atob(part.replace(/-/g, "+").replace(/_/g, "/"));10  return JSON.parse(json); // { sub: "42", name: "Riya", exp: 1767225600 }11}

1/3The token rides in the Authorization header, prefixed with Bearer and a space.

The token goes in the Authorization header as Bearer <token>. Reading the payload in the browser is fine for showing a name, but only the server verifies it.

Save yourself the pain

Common mistakes

Oops

Putting the user's phone number or password inside the JWT payload.

Do this instead

Keep only what's needed, like the user id and role. Anyone holding the token can read it.

Oops

Trusting a role read from the token in frontend code to allow actions.

Do this instead

Use it to adjust the UI only. The server verifies the signature and decides what's allowed.

Your mission

Decode a real JWT

~15 min

Quick check

Why shouldn't you put sensitive data inside a JWT payload?

Go deeper

1Decode a real JWT at jwt.io (without a library) to see its header/payload/signature.
2Learn that JWT payloads are readable, not encrypted — never put secrets in them.
3Practice attaching a JWT as an `Authorization: Bearer <token>` header.