JWT Inspector
Decodes a token into header, payload and signature. Decoding is not verification and the component says so — a green tick without the signing key would be actively dangerous.
src/components/ui/jwt-inspector.tsxAbout
From the component's own source, where it was written.
Decodes a JWT into its header, payload and signature.
Decoding is not verification, and the component says so rather than implying a checked token. Signature verification needs the key and belongs on the server; a green tick here would be actively dangerous.
exp and nbf are resolved to real times, because a bare epoch integer is the single most common thing people misread in a token — off-by-1000 between seconds and milliseconds is an afternoon lost.
alg: none is called out loudly. It is the classic JWT vulnerability and it looks like an ordinary field in a JSON dump.
The signature is masked by default. This gets screenshotted into tickets, and a token with its signature is a live credential.
Install
npx astralyx-ui add jwt-inspector
Usage
import { JwtInspector } from '@/components/ui/jwt-inspector'
<JwtInspector token={token} />Composer
Change the props and the source below follows.
••••••••••••••••••••••••••••••••••••••••••Decoded only — the signature has not been verified. That needs the signing key and belongs on the server.
<JwtInspector token={token} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
JwtInspector
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| token | string | required | Three base64url segments. A malformed token is reported, not half-rendered. |
| now | Date | — | Reference instant for expiry. Defaults to now. |
| revealSignature | boolean | false | Show the signature rather than masking it. |
| headerLabel | ReactNode | 'Header' | — |
| payloadLabel | ReactNode | 'Payload' | — |
| signatureLabel | ReactNode | 'Signature' | — |
| unverifiedNote | ReactNode | 'Decoded only — the signature has not been verified. That needs the signing key and belongs on the server.' | — |
| invalidNote | ReactNode | 'That does not parse as a JWT. A token has three dot-separated base64url segments.' | — |
| algNoneNote | ReactNode | 'alg is "none": this token asserts it is unsigned. Anything accepting it accepts a forgery.' | — |
| expiredLabel | ReactNode | 'Expired' | — |
| activeLabel | ReactNode | 'Active' | — |
| notYetValidLabel | ReactNode | 'Not yet valid' | — |
Functions
| Function | Signature | Description |
|---|---|---|
| decodeJwtSegment | (segment: string) => Record<string, unknown> | null | base64url → JSON. Padding is restored; atob requires it. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| exp / nbf / iat | resolved | Shown as real times. A bare epoch integer is the most misread field in a token — off-by-1000 between seconds and milliseconds costs an afternoon. |
| alg: none | flagged loudly | The classic JWT vulnerability, and it looks like an ordinary field in a JSON dump. |
| signature | masked by default | This gets screenshotted into tickets, and a token with its signature is a live credential. |