OAuth 2.0 Flow Visualizer

The OAuth 2.0 Flow Visualizer is a free browser-based tool that renders interactive sequence diagrams for every major OAuth 2.0 authorization flow. Whether you are implementing authentication for a web application, mobile app, CLI tool, or server-to-server integration, understanding the exact sequence of HTTP requests, redirects, and token exchanges is essential to getting it right and keeping it secure.

Select a flow type and the tool instantly draws a color-coded sequence diagram showing every actor involved — the Client, Authorization Server, Resource Server, and the end User. Click any step in the diagram to expand its details: the HTTP method, endpoint, required parameters, headers, and a full example request or response. Blue arrows represent outgoing requests, green dashed arrows represent responses, so you can trace the data flow at a glance.

The tool covers all standard grant types defined in RFC 6749 and its extensions: Authorization Code (the most widely used server-side flow), Authorization Code + PKCE (the recommended flow for public clients such as SPAs and mobile apps, and the default in OAuth 2.1), Client Credentials (for machine-to-machine communication), Device Code (RFC 8628, for input-constrained devices like smart TVs and CLI tools), and the now-deprecated Implicit and Resource Owner Password flows — included for educational purposes along with clear warnings about why they should not be used in new applications. If you work with JWTs issued by these flows, our JWT Decoder lets you inspect token headers and payloads. For testing the actual HTTP requests described in each step, try the cURL to Code converter to quickly generate runnable code snippets. You can also analyze response headers with the HTTP Header Analyzer.

A built-in PKCE generator lets you create a cryptographically secure code_verifier and its SHA-256 code_challenge right in the browser. The parameter reference panel explains every OAuth 2.0 parameter — client_id, redirect_uri, scope, state, code_verifier, and more — so you always know what to send and why.

Security notes accompany each flow, highlighting best practices such as using HTTPS everywhere, validating the state parameter to prevent CSRF, and rotating refresh tokens. All processing happens entirely in your browser — no data is sent to any server, making the tool safe for exploring real client credentials and configurations.

1. Select an OAuth 2.0 Flow from the dropdown at the top (e.g., Authorization Code, PKCE, Client Credentials).
2. Review the flow description and security notes to understand when and why to use the selected flow.
3. Examine the sequence diagram — blue arrows are requests, green dashed arrows are responses. Each actor (Client, Auth Server, Resource Server, User) is labeled with a color-coded header.
4. Click any step in the diagram to expand its details: HTTP method, endpoint, parameters, headers, and example request/response.
5. Use the Copy button (or press Ctrl+Shift+C) to copy the selected step's example request or response to your clipboard.
6. Click Parameters to toggle the reference panel, which explains every OAuth 2.0 parameter.
7. For the PKCE flow, click Generate PKCE to create a demo code_verifier and code_challenge pair. Copy either value to use in your own implementation.