Authentication Lab

Practice real, backend-verified authentication — login, session reuse, role-based access, token expiry, and 401 vs 403. Every step below hits the real API. Nothing here is simulated.

Key Topics

Guest

User —

Role —

Cookie Not set

JWT Not issued

Storage State Not captured

Provider Email / Password (JWT)

✓ Authentication Complete

You successfully:

✓ Logged in✓ Created a session✓ Reused authentication ✓ Tested authorization✓ Handled expiry✓ Understood 401 vs 403

Authenticate with a real account and receive a JWT + session cookie. Edit the JSON body below and click Execute to send the real request.

POST /api/auth/login

Body (JSON) — edit email/password, then Execute sends exactly this

Can't send this request

Calling /api/auth/login…

Logged in ✓

Email:

Token (first 32 chars): …

Current Execution

No request executed yet — log in above to see it here.

Status Not run yet

Message Not run yet

Response Body

Not run yet

JWT Decoder

This JWT belongs to the authenticated user selected above — decoded entirely in your browser, nothing is sent anywhere.

No requests executed yet.

Save the authenticated browser state so it can be reused without logging in again.

Prerequisite Step 1Authenticate → Step 2Generate state.json

Complete Step 1 first — there is no authenticated session to save yet.

✓ Authentication complete

Enabled once Step 1 has authenticated.

✓

Cookies—

Local storage—

Origin—

state.json Preview

No session captured yet — click Save Session to see it here.

Status Not run yet

Message Not run yet

Generated state.json preview

Not run yet

No sessions captured yet.

Reuse the saved state to open a new browser context that is already logged in.

Prerequisite Step 2Generate state.json → Step 3Reuse Session

Saved Session

✔ state.json Available

✔ Cookies ✔ Local Storage ✔ User Information ✔ Session Metadata

No context created yet — click Create New Browser Context to see it here.

This will feel like opening an already-authenticated browser, not reading an HTTP response.

✔ Browser Context Created

✔ Cookies Loaded

✔ Local Storage Loaded

✔ Authentication

✔ Current User

✔ Landing Page

Open a fresh/private browser session.
Open DevTools → Application.
Open Cookies → this origin.
Inspect pw_session_token.
Clear it and refresh.
Observe the authentication result.

pw_session_token is HttpOnly — visible in DevTools, but page JavaScript cannot read it.

Call an admin-only endpoint as different roles and compare the results.

Prerequisite Step 1Authenticate → Step 4Role Based Access

API Endpoint

Protected administrator resource

GET /api/admin/dashboard-stats

Returns protected administrator statistics. Only accessible to accounts with the admin role.

Required Role admin

Authentication JWT Required

Authorization Role Required

The endpoint never changes. Only the authenticated user's role determines whether access is granted.

Calling /api/admin/dashboard-stats…

No request executed yet.

Status 200 OK — Access Granted ✓

Endpoint GET /api/admin/dashboard-stats

Authenticated ✓ Yes

Required Role admin

Decision Permission Granted

Response Data

Status 403 Forbidden — Access Denied ✗

Endpoint GET /api/admin/dashboard-stats

Authenticated ✓ Yes

Required Role admin

Decision Permission Denied

Expected Responses

200 OK Admin only

403 Forbidden Customer

403 Forbidden Manager

Log in as the customer account.
Open DevTools → Network.
Call /api/admin/dashboard-stats.
Observe 403 Forbidden.
Log in using an admin account.
Call the same endpoint again.
Observe 200 OK.

Same endpoint, different role, different result.

Watch a short-lived token expire, then recover it with a refresh token — no password.

A real request builder — every "Execute" below fires an actual HTTP request to this server, exactly like Postman or Swagger would.

Get Short-Lived Token

Purpose Issue a short-lived access token.

Expected 200 OK — access + refresh token issued.

POST /api/auth/login-demo-short-lived

Body (JSON) — edited here is what Execute sends, even if you collapse this card afterward

Sending request…

Verify Session

Purpose Check whether the current session is still valid.

Expected 200 OK — valid · 401 — expired.

GET /api/auth/verify

Sending request…

Refresh Access Token

Purpose Issue a new access token using the refresh token.

Expected 200 OK — new access + refresh token.

POST /api/auth/refresh

Sending request…

Current Execution

No request executed yet — run any endpoint on the left to see it here.

Status Not run yet

Response Body

Not run yet

JWT Decoder

Your latest token is pre-filled below — decoded entirely in your browser, nothing is sent anywhere.

Execute Refresh after Login to compare the previous and new token.

No requests executed yet.

🎉 Completion Summary

See the difference between “who are you?” (401) and “you can’t do that” (403).

GET /api/auth/verify

→ 401

Called with no authentication — no token, no session. Server cannot identify the caller.

Auth

None

Expected

401

401 Unauthorized

GET /api/admin/dashboard-stats

→ 403

Auto-logs in as a customer account, then calls the admin-only endpoint. Authentication succeeds, authorization fails.

Auth

Customer JWT

Required

admin

Expected

403

403 Forbidden

Scenario Comparison

401 Unauthorized

No JWT → Authentication Failed → 401

403 Forbidden

JWT Valid → Role: customer → Admin Endpoint → 403

200 OK

JWT Valid → Role: admin → Admin Endpoint → 200