OAuth 2.0 PKCE Explorer
Walk the authorization code flow as a series of inspectable requests, redirects, and token payloads.
Interactive Explorer
Authorization Code + PKCE from request to callback
This is a study surface. It uses the repo's Phase 2 `subject` shortcut to skip interactive login, and it expects your client registration to allow the callback URI you choose.
Callback Shortcut
Open the local callback inspector before or after the redirect if you want to inspect `code`, `state`, and the token exchange.
PKCE State
Verifier and challenge stored before redirect
{
"code_verifier": "",
"code_challenge": "",
"response_type": "code",
"redirect_uri": "http://localhost:3000/studio/callback",
"mode": "oauth"
}Authorize URL
What the browser will open
{
"authorizeUrl": ""
}Token Request Preview
The callback page will POST this via the local proxy route
{
"grant_type": "authorization_code",
"client_id": "test-client",
"redirect_uri": "http://localhost:3000/studio/callback",
"code_verifier": ""
}Token Shape Preview
Expected fields for a successful code exchange
{
"access_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImlhbS1rZXktMSJ9...",
"refresh_token": "4c5f6825-rotating-refresh-token",
"decoded_id_token": null
}Step 1
Build authorize request
Create a PKCE pair, choose the callback URI, and attach the Phase 2 `subject` shortcut so the backend can issue the code.
Step 2
Inspect callback
The callback page reads `code`, `state`, and any returned errors, then uses the stored verifier for token exchange.
Step 3
Decode tokens
Review response payloads, decode JWT claims, and optionally call UserInfo on the OIDC page.
How this view is meant to read
The controls above are the primary surface. The JSON panels are reference material you glance at while stepping through the flow, not a second main column competing for attention.