Auth · Security

JSON Web Token

AuthSecurityToken

JSON Web Token (JWT) is an open standard securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed.

Structure of a JWT

Header

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

{
  "sub":  "1234567890",
  "name": "John Doe",
  "iat":  1516239022
}

Signature

HMAC-SHA256(
  base64Url(header) +
  "." +
  base64Url(payload),
  secret
)

▼

⚙ Base 64 encode

compute

▼

{{header}}.{{payload}}.{{signature}}

▼

JWT

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

How JWT Works?

👤 User → Browser

User fills in credentials and clicks Log In

🌐 Browser → Backend Server

Browser sends credentials in a POST /login request — Authenticate

🖥 Backend Server

Server validates credentials, then creates & signs a JWT using a secret key

🖥 Backend Server → Browser

Server responds with Cookie + JWT; browser stores the token

👤 User

User navigates to a protected page inside the app

🌐 Browser → Backend Server

Browser attaches the JWT in the Authorization header: Request + Cookie

🖥 Backend Server

Server verifies JWT signature using the secret — checks expiry & claims

🖥 Backend Server → Browser

Verification passes — server returns Response Data 🎉

Full Authentication Flow

sequenceDiagram autonumber participant U as 👤 User participant B as 🌐 Browser participant S as 🖥 Backend Server U->>B: 1. Fill credentials & Login B->>S: 2. POST /login (Authenticate) Note right of S: 3. Validate & Create JWT S->>B: 4. Response (Cookie + JWT) U->>B: 5. Navigates to protected page B->>S: 6. Request (Auth: Bearer JWT) Note right of S: 7. Verify Signature & Claims S->>B: 8. Send Response Data 🎉

Resources

Title	Type	Link
Introduction to JSON Web Tokens	web	Open
RFC 7519: JSON Web Token (JWT)	web	Open
What is a JWT? (JSON Web Token)	youtube	Open
Auth0: JSON Web Token Explained	web	Open

Guide Contributors

ObydulSenior Software Engineer

Edit this page on GitHub↗

Init guide environment...

Structure of a JWT

Header

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

{
  "sub":  "1234567890",
  "name": "John Doe",
  "iat":  1516239022
}

Signature

HMAC-SHA256(
  base64Url(header) +
  "." +
  base64Url(payload),
  secret
)

▼

⚙ Base 64 encode

compute

▼

{{header}}.{{payload}}.{{signature}}

▼

JWT

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

How JWT Works?

👤 User → Browser

User fills in credentials and clicks Log In

🌐 Browser → Backend Server

Browser sends credentials in a POST /login request — Authenticate

🖥 Backend Server

Server validates credentials, then creates & signs a JWT using a secret key

🖥 Backend Server → Browser

Server responds with Cookie + JWT; browser stores the token

👤 User

User navigates to a protected page inside the app

🌐 Browser → Backend Server

Browser attaches the JWT in the Authorization header: Request + Cookie

🖥 Backend Server

Server verifies JWT signature using the secret — checks expiry & claims

🖥 Backend Server → Browser

Verification passes — server returns Response Data 🎉

Full Authentication Flow

Resources

Title	Type	Link
Introduction to JSON Web Tokens	web	Open
RFC 7519: JSON Web Token (JWT)	web	Open
What is a JWT? (JSON Web Token)	youtube	Open
Auth0: JSON Web Token Explained	web	Open

Guide Contributors

ObydulSenior Software Engineer