JWT Demo — Login

🌐

Client

:3000

credentials

🔐

Auth Server

:3001

access token

🗄️

Resource Server

:3002

STEP 1 OF 3 — AUTHENTICATE

DEMO USERS

alice / password123 admin bob / letmein user

🔒 Token Storage Strategy

Access Token

JS Memory (variable)

Short-lived (2 min). Kept in memory only — lost on page refresh, never written to storage.

Refresh Token

httpOnly Cookie

Long-lived (7 days). Set by server — JavaScript cannot read it. Best protection against XSS theft.

❌ Anti-pattern

localStorage / sessionStorage

Readable by any JS on the page. A single XSS vulnerability exposes all tokens permanently.

⇌ OAuth 2.0 Flow

⏱ slowdown active ▾

🌐

Client

:3000

🔐

Auth Server

:3001

🗄️

Resource Server

:3002

1 POST /auth/login

{ username, password }

2 200 { accessToken } + Set-Cookie

refresh_token — httpOnly, 7 days

3 GET /api/*

Authorization: Bearer <token>

4 200 / 401 / 403

data or token / role error

5 POST /auth/refresh

cookie sent automatically by browser

6 200 { newAccessToken } + rotated cookie

old refresh token revoked

Steps 3 – 6 happen in the app after login