OAuthFlowDiagram

Domain · API Doc

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

Authorization Code flow

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://auth.example.com/authorize
Token URL
https://auth.example.com/token

Available scopes

  • read — Read access
  • write — Write access
Code
<%- include('modules/domain/api-doc/OAuthFlowDiagram', {
  flow: 'authorizationCode',
  authorizationUrl: 'https://auth.example.com/authorize',
  tokenUrl:         'https://auth.example.com/token',
  scopes: [
    { name: 'read',  description: 'Read access' },
    { name: 'write', description: 'Write access' },
  ]
}) %>

Client Credentials flow

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://auth.example.com/token
Code
<%- include('modules/domain/api-doc/OAuthFlowDiagram', {
  flow: 'clientCredentials',
  tokenUrl: 'https://auth.example.com/token'
}) %>
Source modules/domain/api-doc/OAuthFlowDiagram.ejs