Skip to content
Mermaid templates

Authorization code exchange with PKCE

Separates browser state validation, PKCE binding and resource-server authorization. Original worked design example; adapt responsibilities, thresholds and assumptions to your system.

Template previewMermaid
Rendering…

What this template contains

Diagram type
Sequence diagram
Source
22 lines

Make it your own.

sequenceDiagram
actor U as User
participant B as Browser client
participant I as Identity provider
participant A as Resource API
U->>B: Start sign-in
B->>B: Generate verifier, challenge and state
B->>I: Authorization request with challenge and state
I->>U: Authenticate and request consent
U-->>I: Approve requested access
I-->>B: Authorization code and state
B->>B: Validate returned state
alt State matches
 B->>I: Code and verifier over TLS
 I->>I: Verify challenge and code binding
 I-->>B: Scoped access token
 B->>A: Request with access token
 A->>A: Validate token audience, expiry and scope
 A-->>B: Authorized resource
else State mismatch
 B-->>U: Reject response and restart sign-in
end