Skip to content

Add a JWT Decoder component to the app #275

@devvsakib

Description

@devvsakib

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 JWTDecoder is 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:

  1. Run the dev server and open the dev tools page containing the JWT Decoder.
  2. Paste a valid JWT (e.g. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...) and click Decode.
  3. Confirm header and payload show as JSON, signature shown, and no errors.
  4. Paste invalid strings and confirm errors display.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions