Sequence Diagramoauthauthsequence

Google OAuth Sign-In Sequence

Use this Mermaid sequence diagram to document a Google OAuth sign-in flow from browser redirect through token exchange, user upsert, JWT validation, and dashboard display.

Edit this template Browse all templates

Use Cases

Explain social login behavior during an auth implementation review

Document where cookies, JWTs, and user profile calls are issued

Align frontend, backend, and security teams on OAuth callback responsibilities

Show the relationship between identity provider redirects, database upserts, and API profile reads

How This Workflow Works

Step	Purpose
Start OAuth	The user begins the social sign-in flow from the browser by choosing the Google provider.
Authorize	The browser moves through the authorization redirect and returns with a provider callback code.
Exchange tokens	The auth server trades the callback code for provider tokens before creating an application session.
Persist user	The auth layer upserts the user profile so future API calls can resolve a durable account record.
Load profile	The browser uses the issued session credentials to request profile data and show the dashboard.

How To Customize

Replace Google with the OAuth provider your product uses

Rename Auth Server, API, and DB to match your service boundaries

Add error branches for denied consent, token exchange failure, or missing user records

Change cookie, JWT, and profile messages to match your actual session strategy

Add refresh token, account linking, or multi-tenant workspace lookup steps when needed

Edit This Template Visually

Open this template in the editor to work from the rendered diagram and the Mermaid source together. Click a node in supported flowchart and sequence diagrams to locate the matching code, select source lines to find the related shape, or ask AI to rename, expand, restyle, or rewrite the selected part of the workflow.

Mermaid Source

sequenceDiagram
    autonumber

    box rgba(232, 242, 255, 0.85) Client Side
        actor User as 👤 User
        participant Browser as 🌐 Browser
    end

    box rgba(244, 237, 255, 0.85) Auth Layer
        participant AuthServer as 🔐 Auth Server
    end

    box rgba(231, 250, 250, 0.85) API Layer
        participant API as ⚙️ API
    end

    box rgba(233, 249, 239, 0.85) Data Layer
        participant DB as 🗄️ DB
    end

    rect rgba(234, 242, 255, 0.55)
        User->>Browser: Click "Sign In with Google"
        activate Browser

        Browser->>AuthServer: GET /authorize?provider=google
        activate AuthServer

        AuthServer-->>Browser: Redirect to Google OAuth
    end

    Note over Browser,AuthServer: User completes Google OAuth consent flow

    rect rgba(255, 247, 214, 0.55)
        Browser->>AuthServer: Authorization code callback
        AuthServer->>AuthServer: Exchange code for tokens
    end

    rect rgba(233, 249, 239, 0.55)
        AuthServer->>DB: Upsert user record
        activate DB

        DB-->>AuthServer: User profile
        deactivate DB
    end

    rect rgba(244, 237, 255, 0.55)
        AuthServer-->>Browser: Set HTTP-only cookie + JWT
        deactivate AuthServer

        Browser->>API: GET /api/me<br/>Authorization: Bearer JWT
        activate API

        API->>API: Verify JWT signature
        API-->>Browser: User profile JSON
        deactivate API
    end

    Browser-->>User: Show dashboard
    deactivate Browser