Sequence template · local export
OAuth Login Flow Mermaid Template
OAuth 2.0 login sequence: token exchange, user upsert, and authenticated API access. Edit the code below, choose a publish preset, then export without signup, watermark, or cloud upload.
OAuthJWTauthsecurity
Paste or edit Mermaid code
Replace the sample below, or load another example.
Load example
Preparing the local renderer without uploading your diagram.Preparing editor…
Live previewSample preview · Clean Docs
Preparing local editor…
Render & export
Export controls activate after your diagram renders locally.
Sequence
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMETransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro
Scale
1x2x4x
Or exact width, e.g. 1200px wide
Output: White · comfortable padding
Size: calculated after render
Filename: mermaid-sequence-white-2x.png
When to use the OAuth Login Flow template
An OAuth 2.0 authorization-code login sequence covering the full browser round trip: the redirect to Google, the callback with the authorization code, token exchange inside the Auth Server, the user upsert into the database, and the session cookie used for subsequent API calls.
- •Documenting how sign-in works end to end for a web app that delegates authentication to Google or another OAuth provider.
- •Onboarding engineers who need to see why the Auth Server holds the client secret and the browser never does.
- •Walking support or security reviewers through the token exchange, session cookie, and GET /api/me handshake step by step.
Template code
The full Mermaid source for this template — copy it into any Mermaid-compatible tool, or edit and export it in the editor above.
sequenceDiagram
participant User
participant Browser
participant AuthServer as Auth Server
participant API
participant DB
User->>Browser: Click Sign in with Google
Browser->>AuthServer: GET /authorize?provider=google
AuthServer-->>Browser: Redirect to Google OAuth
Browser->>AuthServer: Authorization code callback
AuthServer->>AuthServer: Exchange code for tokens
AuthServer->>DB: Upsert user record
DB-->>AuthServer: User profile
AuthServer-->>Browser: Set HTTP-only session cookie
Browser->>API: GET /api/me
API-->>Browser: User profile JSONHow to customize this template
- •Rename the AuthServer participant (aliased as "Auth Server") to match your provider, and point the GET /authorize message at your real route.
- •Add a Refresh token lane between AuthServer and DB if your flow issues refresh tokens after the initial code exchange.
- •Extend the DB upsert step to show provider-specific claims you persist, such as email or avatar from the Google profile.
- •If your API validates sessions differently, adjust the GET /api/me exchange to your actual endpoint and response shape.