OAuth2 Authorization Code with PKCE sequence
A sequence diagram template for the OAuth2 Authorization Code with PKCE flow. Covers code_verifier/challenge generation, the authorization request, code exchange with the verifier, and access-token use.
Sequence diagram previewOAuth2 Authorization Code with PKCE sequence
Recreate this in Raltey
Copy this prompt
Paste this into Raltey's AI agent to generate the same diagram, then tweak it on the canvas.
Prompt
Create a sequence diagram for the OAuth2 Authorization Code with PKCE flow. Actors: Client app, User browser, Authorization server, Resource server. Show code_verifier and challenge generation, opening /authorize in the browser, user login and consent, redirect back with code, code-for-token exchange with the verifier, then a Bearer-token call to the resource server.
Context
- - Public client (SPA or mobile).
- - PKCE prevents code interception.
- - Refresh tokens optional.
Patterns
- - PKCE replaces the client_secret for public clients.
- - Authorization code never travels back to the resource server.
- - access_token short-lived, refresh_token rotates.
Diagram structure
Nodes and connections
Client app
User browser
Authorization server
Resource server
Connections
Client appClient appGenerate code_verifier + challenge
Client appUser browserOpen /authorize?challenge=...
User browserAuthorization serverGET /authorize
Authorization serverUser browserLogin + consent
User browserAuthorization serverSubmit credentials
Authorization serverClient appRedirect with code
Client appAuthorization serverPOST /token (code + code_verifier)
Authorization serverClient appaccess_token (+ refresh_token)
Client appResource serverGET /api with Bearer access_token
Resource serverClient app200 OK + data
Notes from the field
- Use S256 as the code_challenge_method, not plain.
- Bind the code_verifier to the original auth request (PKCE state).
- Set state parameter to prevent CSRF on the redirect.
Frequently asked
Is PKCE only for mobile?
No. The OAuth2 Security BCP now recommends PKCE for all clients, public and confidential. SPA apps in particular should always use it.
Why two round trips to the auth server?
First trip authenticates the user and issues a one-time code. Second trip exchanges the code for tokens server-side, keeping tokens out of the browser URL.
More templates
FlowchartSaaS onboarding email flowFlowchartCustomer support runbook flowFlowchartPayment webhook retry and error flowFlowchartGitHub PR review and merge flowFlowchartLogin with magic link flowArchitectureThree-tier SaaS architecture on AWSArchitectureMicroservices architecture on KubernetesArchitectureReal-time data pipeline on GCP
Open this template in Raltey
Edit it on the canvas, ask the AI agent to extend it, then share or export.
Start for free