OAuth Flow Visualizer
NewInteractive step-by-step diagram of the OAuth 2.0 Authorization Code + PKCE flow.
OAuth flow visualizer
Authorization Code + PKCE flow, step by step
This is the flow modern SPAs and mobile apps should use (Authorization Code with PKCE) instead of the deprecated Implicit flow. Click a step to see what actually happens.
Step detail
Frequently Asked Questions
Why does this show the Authorization Code + PKCE flow specifically, and not Implicit flow?
The Implicit flow is deprecated by the OAuth 2.0 Security Best Current Practice because it exposes access tokens directly in the browser URL. Authorization Code with PKCE is the current recommendation for SPAs and mobile apps, which is why it's the flow shown here.
What is code_verifier / code_challenge (PKCE) actually protecting against?
PKCE (Proof Key for Code Exchange) prevents an attacker who intercepts the authorization code from exchanging it for tokens themselves — only the client that generated the original code_verifier can complete the exchange, since the code_challenge sent upfront is a hash of it.
Does clicking through the steps make real network requests?
No — this is a static, illustrative diagram of the protocol steps and their purpose. It doesn't perform an actual OAuth flow against any server.
Where does the state parameter fit into this flow?
It's included in step 2 and checked again in step 4 — the client generates a random state value before redirecting and verifies the authorization server returns the same one, which is the standard CSRF protection for this flow.
What is the difference between the access_token and id_token returned in step 6?
The access_token authorizes API calls, while the id_token (part of OpenID Connect, not plain OAuth 2.0) is a JWT that authenticates the user's identity to the client application itself.