OAuth PKCE Flow Visualizer
Step through Authorization Code with PKCE, generate a random verifier and real S256 challenge, and inspect each responsibility.
1. Configure and explore
Inputs stay in this tab; no browser persistence, page-URL encoding or network requests.
2. Results and interpretation
Choose a sample, fill the fields or explore the flow.
Generate a fresh 32-byte random verifier; compute BASE64URL(SHA256(verifier)). Keep the verifier transient.
Send response_type=code, client_id, exact redirect_uri, state, code_challenge and code_challenge_method=S256. OIDC also uses nonce.
Authenticate the user and obtain consent. Bind a short-lived, single-use authorization code to client, redirect URI and challenge.
Receive the code at the redirect URI and verify state. Never log codes or exchange them through untrusted origins.
Send authorization_code grant, code, redirect_uri and original code_verifier over HTTPS. Confidential clients also authenticate.
Compute S256 of the verifier, compare the bound challenge, consume the code and issue tokens only after all checks. PKCE is not client authentication.
Server steps in this diagram are educational; this page has no verification server.
Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.
1. Client Generate a fresh 32-byte random verifier; compute BASE64URL(SHA256(verifier)). Keep the verifier transient. 2. Browser → authorization server Send response_type=code, client_id, exact redirect_uri, state, code_challenge and code_challenge_method=S256. OIDC also uses nonce. 3. Authorization server Authenticate the user and obtain consent. Bind a short-lived, single-use authorization code to client, redirect URI and challenge. 4. Client Receive the code at the redirect URI and verify state. Never log codes or exchange them through untrusted origins. 5. Client → token endpoint Send authorization_code grant, code, redirect_uri and original code_verifier over HTTPS. Confidential clients also authenticate. 6. Authorization server Compute S256 of the verifier, compare the bound challenge, consume the code and issue tokens only after all checks. PKCE is not client authentication.
Expand complete selectable text
1. Client Generate a fresh 32-byte random verifier; compute BASE64URL(SHA256(verifier)). Keep the verifier transient. 2. Browser → authorization server Send response_type=code, client_id, exact redirect_uri, state, code_challenge and code_challenge_method=S256. OIDC also uses nonce. 3. Authorization server Authenticate the user and obtain consent. Bind a short-lived, single-use authorization code to client, redirect URI and challenge. 4. Client Receive the code at the redirect URI and verify state. Never log codes or exchange them through untrusted origins. 5. Client → token endpoint Send authorization_code grant, code, redirect_uri and original code_verifier over HTTPS. Confidential clients also authenticate. 6. Authorization server Compute S256 of the verifier, compare the bound challenge, consume the code and issue tokens only after all checks. PKCE is not client authentication.
No authorization or token request is sent. Demo values stay in memory; never paste production codes, tokens or secrets.
Data / rules date: 2026-10-21 · Official source
How to use this tool
Generate an ephemeral example, advance through the client/authorization server steps and inspect how the verifier protects code exchange.
When not to use it
No authorization or token request is sent. Demo values stay in memory; never paste production codes, tokens or secrets.
Read the guide →