OAuthFlowDiagram

Domain

Visual walkthrough of an OAuth 2.0 flow with actors, numbered steps, endpoints, and scopes.

Authorization Code

Preview

OAuth 2.0 Flow

Authorization Code

authorizationCode
User
Your App
Auth Server
  1. 1User clicks "Sign in"
  2. 2Redirect to /authorize
  3. 3User grants consent
  4. 4Code returned to app
  5. 5Exchange code for token
Authorization URL
https://example.com/oauth/authorize
Token URL
https://example.com/oauth/token
Refresh URL
https://example.com/oauth/refresh

Available scopes

  • read:users — Read user data
  • write:users — Create or update users
Code
<OAuthFlowDiagram flow="authorizationCode" tokenUrl="…" authorizationUrl="…" scopes={[…]} />

Client Credentials (server-to-server)

Preview

OAuth 2.0 Flow

Client Credentials

clientCredentials
User
Your App
Auth Server
  1. 1App authenticates with client ID + secret
  2. 2POST to /token
  3. 3Access token returned
Token URL
https://example.com/oauth/token

Available scopes

  • admin — Full administrative access
Code
<OAuthFlowDiagram flow="clientCredentials" tokenUrl="…" />
Sourcemodules/domains/api-doc/OAuthFlowDiagram.tsx