A Developer's Guide to JWTs (JSON Web Tokens)

JSON Web Tokens (JWTs) have become the default method for handling authentication and authorization in modern, stateless web applications. If you are building a React app, a Next.js site, or a mobile app, you are almost certainly using JWTs to talk to your backend API.

The Structure of a JWT

A JWT looks like a long string of random characters separated by two periods: xxxxx.yyyyy.zzzzz. These three sections are:

1. Header: Contains metadata about the token, such as the signing algorithm used (e.g., HMAC SHA256).
2. Payload: The actual data (claims). This is where you store the User ID, role, and expiration time.
3. Signature: A cryptographic hash of the header and payload, created using a secret key held only by the server. This guarantees the token hasn't been tampered with.

JWTs are Encoded, Not Encrypted

A very common misconception among junior developers is that the data inside a JWT is hidden. It is not. The header and payload are simply Base64Url encoded. Anyone who intercepts the token can decode it and read the payload. Therefore, you must never put sensitive information like passwords or credit card numbers inside a JWT payload.

Debugging JWTs

When you're building an auth flow, you frequently need to inspect the contents of a token to see if the expiration time (exp) is correct or if the right user roles are present.

Using our local JWT Decoder, you can paste your token and instantly view the formatted JSON header and payload. Because it runs client-side, your active session tokens are never transmitted across the network, keeping your development environments secure.