Decode JWT Tokens in Your Browser Decode and inspect JSON Web Tokens — view header, payload, and expiration status.

The tool works by first splitting the input JWT into its three parts using the dot character as a delimiter. It then applies the decodeBase64Url function to each part, which replaces hyphens with plus signs and underscores with forward slashes to convert from Base64URL to standard Base64 encoding. The atob browser API is used to perform the actual Base64 decoding. The resulting strings are then parsed into JSON objects using the JSON.parse method.

The header object typically contains fields such as alg, which specifies the algorithm used for signing, and typ, which indicates the type of token. The payload object carries registered claims like iss, sub, exp, and iat, as well as custom claims defined by the issuer. The signature is verified by checking if the provided expiration time in the payload has passed.

The tool uses React state management to store the input token and decoded parts, with useState hooks for token and copied status. It also utilizes useCallback to memoize the handleCopy function, which handles copying the decoded header, payload, or signature to the clipboard using the copyToClipboard utility from the lib/utils module. The cn function is used to conditionally apply CSS classes based on the copied status.

The decodeBase64Url function implements a specific Base64URL decoding algorithm as defined in RFC 7519, which differs slightly from standard Base64 encoding due to its use of hyphens and underscores instead of plus signs and forward slashes. The tool's implementation ensures that it can correctly handle both standard and URL-safe Base64 variants.

When the input token is invalid or cannot be decoded, an error message is displayed with information about what went wrong, such as "Invalid JWT: expected 3 parts" if the token does not contain exactly three dot-separated parts. If decoding fails for any reason, a generic "Failed to decode JWT." error message is shown instead. The tool's UI components are rendered using JSX and styled with CSS classes from the glass-card and other utility stylesheets.