OAuth 2.0 Flow Visualizer (Auth Code + PKCE)

Visual walkthrough of the OAuth 2.0 Authorization Code flow with PKCE — the recommended modern pattern for browser and mobile apps. Fill in client_id, scopes, etc., get the exact authorization URL to redirect users to. Paste a callback URL on return to parse the code / state / error parameters.

Step 1: Build authorization URL

Step 2: Parse callback URL

How to use the OAuth 2.0 Flow Visualizer (Auth Code + PKCE)

Step 1: fill in the authorization endpoint, client_id, redirect_uri, and scopes, keep PKCE and state on, and build the authorization URL to send users to. Step 2: paste the callback URL the provider redirected back to, and the tool reads out the code, state, and any error parameters.

The Authorization Code flow with PKCE

OAuth 2.0’s Authorization Code flow with PKCE is the recommended way for browser and mobile apps to obtain tokens without embedding a client secret, but the moving parts trip people up: building the authorization URL with the right scopes and a code challenge, preserving state across the redirect to block CSRF, then parsing the code and state back out of the callback. A wrong parameter usually surfaces as an opaque provider error.

This walks the flow concretely — fill in the endpoint, client_id, redirect_uri, and scopes to get the exact authorization URL to send users to, then paste the callback URL on return to read out the code, state, and any error. Once you have the code, the token exchange is an HTTP POST you can assemble with the HTTP request builder; if that exchange runs from a browser, the CORS tester helps diagnose the cross-origin errors token endpoints often throw.

Common use cases

  • Build an auth URL — assemble a correct authorization request with PKCE and state.
  • Parse a callback — pull code, state, and error from a redirect URL.
  • Debug a flow — see exactly which parameter a provider rejected.
  • Learn OAuth — follow the Authorization Code + PKCE steps end to end.
  • Integration testing — generate a real authorization URL for a provider.

Frequently asked questions

Why PKCE instead of a client secret?
Browser and mobile apps can't keep a secret; PKCE proves the same client started and finished the flow without one.

What is the state parameter for?
CSRF protection — the value you send must match the one returned, confirming the callback belongs to your request.

Does this exchange the code for a token?
No — it builds the auth URL and parses the callback. Do the token POST with the HTTP request builder.

My token request fails from the browser — why?
Often CORS on the token endpoint; the CORS tester helps pin down the missing headers.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: