b2KIT

OAuth 2.0 Flow Visualizer

Step through OAuth 2.0 authorization flows visually with token exchange diagrams and parameter details.

Tested tool guide Tested browser tools Checked August 16, 2026

What OAuth 2.0 Flow Visualizer does and how it behaves

OAuth 2.0 Flow Visualizer turns an authorization flow into an ordered conversation among the browser, client, authorization endpoint, and token endpoint. Each step shows the request or response parameters attached to that hop, helping distinguish redirects from the later token exchange and showing where PKCE values belong. A common surprise is that an authorization-code redirect does not contain an access token. It returns a temporary code to the client, which exchanges that code at the token endpoint. With PKCE, the challenge and verifier appear in different steps.

How the result is produced

1

Authorization request and redirect

Advancing through the diagram follows the browser from the client to the authorization endpoint and back to the registered redirect URI. Parameter details let you track values such as client_id, redirect_uri, response_type, scope, and state in their protocol roles. In a PKCE case, code_challenge and its method belong on the authorization request; the authorization code belongs on the redirect back.

2

Code and token exchange

After authorization, the visual sequence isolates the token request from browser redirects. In an authorization-code PKCE exchange, the client sends the code, a redirect_uri when required, and code_verifier to the token endpoint. A successful response includes an access token and token type; expiry information and a refresh token are not guaranteed. Reading these as separate hops prevents front-channel and token-endpoint parameters from being conflated.

Good uses

  • Rehearse an authorization-code flow with PKCE before implementing redirects, so developers agree where the challenge is sent, where the verifier is retained, and where the returned code is handled.
  • Compare an observed OAuth exchange with the expected message order when a parameter such as state, redirect_uri, code_challenge, or code_verifier appears missing or attached to the wrong request.
  • Explain to a teammate or reviewer why browser navigation obtains an authorization code while a separate request redeems that code for an access token.

Limits and checks

  • The diagram describes protocol roles, not a provider's complete contract. Exact endpoint addresses, supported scopes, client authentication methods, and optional response fields must be confirmed against that authorization server's metadata and documentation.
  • A sequence that looks correct does not prove an integration is secure. The deployed client still needs exact redirect URI handling, state or equivalent request correlation, TLS, secure token storage, and validation of authorization responses.
  • Do not interpret an access token as automatic proof of the user's identity. OAuth defines delegated authorization. User authentication and identity claims are normally supplied through a separate protocol such as OpenID Connect.

Common questions

Why are code_challenge and code_verifier shown in different requests?

The client starts with a fresh code_verifier and forms code_challenge from it, normally using the S256 method. Only the challenge travels in the authorization request. The original verifier is supplied when the code is redeemed, allowing the authorization server to reject a captured code when the redeemer cannot prove possession of that verifier.

Can the visualizer tell me which OAuth flow my application should deploy?

No. It can clarify the message sequence and expose incorrect assumptions about parameter placement, but choosing a flow also depends on the client type, its ability to protect credentials, provider capabilities, redirect environment, and threat model. Confirm the final design against the provider's documentation and current OAuth security guidance.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools