-
Notifications
You must be signed in to change notification settings - Fork 52
Add a JWT Decoder component to the app #275
Copy link
Copy link
Closed
Description
Description:
Add a small, secure, client-side JWT Decoder component that lets developers paste a JWT and see the decoded header and payload (pretty-printed), plus the raw signature and basic validation checks. This is intended as a dev utility (not for sensitive tokens). The component should NOT attempt to verify signatures (no secret keys on client) — only decode base64url sections and show parsing errors clearly.
Acceptance criteria:
- A React component named
JWTDecoderis added and exported as default. - Allows pasting a JWT (single-line string).
- Decodes header and payload (base64url) and shows them as pretty-printed JSON.
- Shows the signature separately (raw base64url) and indicates whether the token has 3 parts.
- Handles and shows decoding/parsing errors clearly.
- Provides buttons for "Decode", "Clear", and "Copy Payload as JSON".
- Uses no back-end. No signature verification is performed.
- Includes unit-testable pure utility functions for decoding base64url and parseJWT.
Steps to test:
- Run the dev server and open the dev tools page containing the JWT Decoder.
- Paste a valid JWT (e.g.
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...) and click Decode. - Confirm header and payload show as JSON, signature shown, and no errors.
- Paste invalid strings and confirm errors display.
Reactions are currently unavailable