OIDC Login Explorer
Add discovery, nonce handling, ID token decoding, and UserInfo lookup to the same PKCE-based authorization code flow.
Interactive Explorer
OIDC login with discovery and token inspection
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": "oidc"
}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",
"id_token": "eyJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjgwODAifQ...",
"decoded_id_token": null
}OIDC Discovery
Waiting for backend metadata
{
"issuer": "http://localhost:8080",
"status": "loading"
}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.