OAuth / OIDC Flow Visualizer

Auth Code, PKCE, Client Credentials — visual sequence diagram + misconfiguration alerts.
Back to Tools
How to use
Tip: start with an example, then customize.
  1. Choose a Flow and Mode (OIDC needs openid scope).
  2. Fill Issuer / Endpoints + Client fields (never embed client_secret in SPAs/mobile).
  3. Click Generate Diagram to render the diagram and see alerts.
  4. Use Export SVG/PNG for docs, or Full page for presentation.
Quick tips
  • state mitigates CSRF (Auth Code / PKCE).
  • nonce recommended when requesting id_token.
  • PKCE S256 is preferred; avoid plain.
  • HTTPS redirect URIs (except localhost in dev).
  • Close full page with ESC or Hide.
Inputs
OIDC needs openid scope.
Never put secrets in SPAs / mobile apps.
Quick actions
Reset
Tip: Load an example, tweak values, then generate.
Outputs
Mermaid source
—
Generate a diagram to see Mermaid output here.
Sequence diagram
Rendered locally (no network calls)
No diagram yet. Fill inputs and click Generate Diagram.