JWT Debug Login Block for React

Everything. The token is decoded, and its signature checked, in plain functions in this page; the sample secret is typed in the block, not a real key, and neither the token nor the secret is sent, stored or logged. Sign in waits less than a second and says what a real product would do, with nothing sent. In your app, send the token to your auth endpoint, and let your server decide: it holds the real key, and a browser should never be the judge of a signature.

A JWT is three base64url parts joined by dots. The first two are JSON, so anyone can read them: decoding is not decrypting and proves nothing. The third part is the signature, which only the holder of the key can make. The page reads the first two with atob and TextDecoder, and says in one sentence what is wrong when a part isn't base64url or isn't JSON.

For HS256 the page computes HMAC-SHA256 over header.payload under the secret in the field with a small SHA-256 written in the block, and compares it with the token's third part. The four samples show the verdicts: Valid, Expired (valid signature, past its expiry), Altered after signing (the payload was edited after it was signed, so the signature no longer matches) and RS256, which needs the issuer's public key and so says it can't be checked here. Change one character of the payload or the secret and the verdict changes.

The page never reads the clock: it judges every token against a typed "now" (16 Oct 2026, 09:30 UTC), so the claims read the same for everyone and the samples stay valid, expired or altered however long the page is open. Swap AS_OF for the current time in your app.

When the token doesn't decode, is unsigned (alg none), has a signature that doesn't match the secret, needs a secret and has none, or has expired. Each puts one sentence in the foot and moves focus to the field to fix. A token signed with another algorithm goes in, and the status says its signature was not checked. The button is never disabled, so keyboard users can always reach it and be told why.

The two columns stack: the token and the decoded tree first, then the signature and the claims. The foot is pinned to the bottom of the screen with the status above Sign in. The decoded tree scrolls inside its own box, and the box takes focus so a keyboard can scroll it.