I built a browser-only JWT Creator & Signer — HS256/384/512, verify, expiry check, 77 tests

#security #webdev #tools #javascript

Debugging JWT authentication usually means copying tokens between tabs and tools. I built a free, browser-only JWT Creator & Signer — create, sign, and verify JWTs entirely in your browser using the Web Crypto API.

Live Tool

👉 https://devnestio.pages.dev/jwt-creator/

What it does

Create JWTs — edit header (alg, typ) and payload (any JSON)
Sign with HMAC — HS256, HS384, or HS512
Quick claim buttons — insert sub, name, exp (+1h), iss with one click
Generate random secrets — 256-bit hex secret via crypto.getRandomValues()
Verify existing JWTs — paste any token and verify signature + expiry
Color-coded output — header in red, payload in green, signature in blue
100% client-side — Web Crypto API, no server, your secrets stay local

How signing works (Web Crypto API)

const key = await crypto.subtle.importKey(
  "raw",
  new TextEncoder().encode(secret),
  { name: "HMAC", hash: "SHA-256" },
  false, ["sign"]
);
const sig = await crypto.subtle.sign("HMAC", key, 
  new TextEncoder().encode(header + "." + payload)
);

The output is base64url-encoded (replacing + → -, / → _, stripping = padding) to form the final JWT.

Why browser-only matters for a JWT tool

JWT secrets are sensitive. Any tool that sends your signing secret to a server is a liability. This tool never sends anything — the Web Crypto API runs entirely inside your browser tab.

Testing

77 tests, all passing ✅

Tests cover:

Base64url encoding edge cases
JWT structure (3-part dot-separated)
HMAC algorithm mapping (HS256 → SHA-256 etc.)
Expiry check (expired vs. valid tokens)
Error states: invalid JSON payload, malformed JWT
UI: claim insertion, secret toggle, copy, clear
Web Crypto API usage verification

All tools at devnestio.pages.dev — free browser-only developer utilities.

Feedback welcome!

DEV Community