0
Configuration

Enter your OIDC provider details. Values are saved to sessionStorage and update all displays live.

1
Generate PKCE Keys

Generates a cryptographically random code_verifier (32 random bytes as hex), then computes the code_challenge as SHA-256(code_verifier) base64url-encoded.

LOCAL CRYPTO · Web Crypto API (SHA-256)
// Click Generate Keys to run window.crypto.subtle.digest('SHA-256', ...)
2
Authorization Request (Browser Redirect)

The browser is redirected to the IdP's authorization endpoint with the PKCE code_challenge. The IdP authenticates the user and redirects back with an authorization code.

GETBrowser Redirect
// Fill in config above to preview the Authorization URL
3
Authorization Code Received

After the user authenticates, the IdP redirects back to the redirect_uri with a short-lived code in the query string.

REDIRECT RESPONSE · URL Query Params
// Awaiting redirect from IdP…
4
Token Exchange (PKCE Verify)

The browser POSTs directly to the token endpoint sending the code and code_verifier. The IdP verifies that SHA-256(verifier) == original challenge, then returns tokens.

POSTToken Endpoint · Fetch API
// Waiting for step 3…

IdP Token Response

// Awaiting token exchange…
5
Decoded id_token (JWT)

The id_token is a signed JWT. Its three parts (header, payload, signature) are base64url-encoded and dot-separated. The payload contains the user's identity claims.

// JWT will appear here after token exchange