Skip to content
Computing Medium #jwt#authentication#tokens

JWT: Header, Payload, Signature

Three base64 chunks separated by dots. Stateless auth verified by signature.

A free, animated jwt: header, payload, signature you can read here or embed on any website, from Scrollchart.

JWT: Header, Payload, Signature

JWT: Header, Payload, SignatureThree base64url segments separated by dots. Only the signature validates the rest...HEADERalg: "RS256"typ: "JWT"kid: "key-2024-01"Algorithm + key hintPAYLOADiss: "auth.example.com"sub: "user_9f3a"aud: "api.example.com"exp: 1716000000iat: 1715996400scope: "read:data"Claims about the principalSIGNATURERS256( base64(header) + "." + base64(payload), privateKey)Integrity sealVerification pathReceive JWTsplit on "."Recompute sigRS256(hdr.pay, pubKey)Compare sigsconstant-time equalityPitfalls:alg=none attack: server accepts unsigned token.Weak HS256 secret: brute-forceable offline.exp not checked: token valid forever.Mitigation: enforce alg allowlist server-side, use 256-bit random secret or RS256, always validate exp + aud.

A JWT split into its three base64url segments. Header reveals alg + kid. Payload reveals iss, sub, aud, exp, iat, scope. Signature shown as HMAC or RS256 over header.payload. The verification animation recomputes the signature and compares; expired exp is shown as a separate failure path. Common pitfalls (alg=none, weak secrets) flagged.

Good for

  • Auth tutorials
  • Session vs JWT debate articles
  • API security content

Source & accuracy

This jwt: header, payload, signature is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

The three parts of a JSON Web Token

A JSON Web Token, or JWT, is a compact string made of three base64url-encoded sections separated by dots: header, payload, and signature. The header declares the token type and the signing algorithm, such as HS256 or RS256. The payload carries the claims, which are statements about the user and the token, including registered claims like the subject, issuer, and expiration time.

The signature is computed over the encoded header and payload using a secret or a private key. Because the header and payload are only encoded, not encrypted, anyone can read them, so a JWT should never carry secrets in its payload.

How stateless authentication works

JWTs enable stateless authentication. After a user logs in, the server issues a signed token that the client sends back with each request. The server verifies the signature using its key, and if it matches and the token has not expired, it trusts the claims without storing any session on its side.

This avoids server-side session lookups and scales well across multiple servers. The tradeoff is revocation: because the token is self-contained, invalidating one before it expires requires extra mechanisms such as short lifetimes or a denylist.

Embed this diagram

Add this animated jwt: header, payload, signature to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated jwt: header, payload, signature for any website.
Who uses it
Developer blogs, Security blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="jwt-anatomy" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "JWT: Header, Payload, Signature" for my website?
Scrollchart provides "JWT: Header, Payload, Signature" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a jwt: header, payload, signature in a developer or tech blog?
Copy the one-line snippet from the Scrollchart diagram page and paste it into your post HTML. It works in any static site generator, CMS, or hand-coded HTML page. The embed is a thin loader, not an iframe, so the content is fully in your DOM.