Base64 in JWT Tokens Explained

How JWT uses Base64URL

A JWT token has three parts separated by dots. Each part is independently Base64URL encoded. This is why JWT tokens look like random text — they are encoded but not encrypted.

// JWT token structure
HEADER.PAYLOAD.SIGNATURE

// Each part decoded:
HEADER:    {"alg":"HS256","typ":"JWT"}
PAYLOAD:   {"sub":"user123","name":"James","exp":1716003600}
SIGNATURE: HMAC-SHA256(base64url(header) + "." + base64url(payload), secret)

Manually decoding a JWT in the browser

// Decode JWT manually in browser console
function decodeJwt(token) {
  const parts = token.split('.')
  
  if (parts.length !== 3) {
    throw new Error('Invalid JWT format')
  }

  function decodeBase64Url(str) {
    // Add padding if needed
    str = str.replace(/-/g, '+').replace(/_/g, '/')
    while (str.length % 4) str += '='
    return JSON.parse(atob(str))
  }

  return {
    header:    decodeBase64Url(parts[0]),
    payload:   decodeBase64Url(parts[1]),
    signature: parts[2]  // Cannot decode — it's a hash
  }
}

// Usage
const decoded = decodeJwt('eyJhbGciOiJIUzI1NiJ9...')
console.log(decoded.payload.exp)  // expiry timestamp
console.log(new Date(decoded.payload.exp * 1000))  // human readable

Why the payload is not encrypted

Base64URL encoding is not encryption. It is just a way to represent binary data as text. Anyone who has your JWT token can decode the header and payload and read all the claims.

// Anyone can decode this — it's just Base64URL
{
  "sub": "user123",
  "email": "james@example.com",  // visible to anyone!
  "role": "admin"                 // visible to anyone!
  
  // NEVER include:
  // "password": "secret",
  // "creditCard": "4111...",
  // "ssn": "123-45-6789"
}

The security comes from the signature — you cannot modify the payload without invalidating the signature. But you can always read the payload.