DEV Community

kavin.dev
kavin.dev

Posted on

JWT Explained: What It Is, How It Works, and Why You Should Care

#jwt #webdev #javascript #backend

If you've ever built a login system and wondered "should I use sessions or tokens?" - this one's for you.

So..What Even Is a JWT?

JWT stands for JSON Web Token, it's just a way for a server to hand a client a small, self-contained package of information that the client can carry around and present whenever it needs to prove something — like "hey, I'm logged in."

JWT vs. Sessions — What's the Difference?

Structure of a JWT

A JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjMiLCJleHAiOjE2OTAwMDB9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
Enter fullscreen mode Exit fullscreen mode

Scary at first, but it's just three Base64-encoded parts separated by dots:

HEADER.PAYLOAD.SIGNATURE

Header - tells you the algorithm used (e.g. HS256):

{
  "alg": "HS256",
  "typ": "JWT"
}
Enter fullscreen mode Exit fullscreen mode

Payload - the actual data. This is where user info lives

{
  "userId": "012",
  "email": "kavin@dev.to.com",
  "exp": 1690000000
}
Enter fullscreen mode Exit fullscreen mode

Signature -this is what makes it trustworthy. The server creates it by signing the header + payload with a secret key:
HMACSHA256(base64(header) + "." + base64(payload), SECRET_KEY)

Quick Summary

  • A JWT is a signed, self-contained token the client carries around.
  • t has three parts: Header, Payload, Signature
  • Access tokens are stateless (no DB check), short-lived
  • Refresh tokens are stored in DB, longer-lived, used only to refresh access tokens
  • When an access token expires → client sends refresh token → gets a new access token (and new refresh token with rotation)
  • Store refresh tokens in HttpOnly cookies for better security

Top comments (0)

The discussion has been locked. New comments can't be added.