Architecture of "Login With Google"

Abstract

“Login with Google” uses OAuth 2.0 and OpenID Connect to let users sign in to your application using their existing Google account. These let a user log in to your app using an identity they already have (like Google, Facebook, GitHub, etc.), without creating a new password. This post outlines the key components involved, walks through the full authorization flow, and explains how your backend securely handles tokens and user sessions.

Key Components

1. User: The person who wants to log in.
2. Client (Your App): The application (web, mobile, etc.) that wants to authenticate the user.
3. Authorization Server (Google): Responsible for authenticating the user and issuing tokens.
4. Resource Server (Google APIs): Provides access to user data (like name, email) after authorization.

Authorization flow

Here’s the typical flow for “Login with Google”.

sequenceDiagram
    actor User
    participant Frontend as Frontend
    participant Backend as Backend
    participant GoogleAuth as Google Auth
    participant GoogleAPI as Google API

    User->>Frontend: Clicks "Login with Google"
    Frontend->>GoogleAuth: Redirect with client_id, scope, redirect_uri, state
    GoogleAuth->>User: Show Login & Consent Screen
    User->>GoogleAuth: Logs in and accepts
    GoogleAuth->>Frontend: Redirect to redirect_uri with code and state
    Frontend->>Backend: Sends code and state
    Backend->>GoogleAuth: POST to token endpoint with code, client_id, secret
    GoogleAuth->>Backend: Returns access_token and id_token
    Backend->>GoogleAPI: (optional) Get user profile with access_token
    GoogleAPI-->>Backend: Returns user info
    Backend->>Frontend: Create session / JWT for app
    Frontend->>User: Logged in successfully

User Clicks “Login with Google”

Your app redirects the user to Google’s OAuth 2.0 authorization endpoint with:

• client_id (your app ID registered with Google)
• redirect_uri (where to send the user back)
• scope (what data your app wants, e.g., email)
• response_type=code (requesting an authorization code)
• state (a random string to prevent CSRF - cross-site-request-forgery)

Google Prompts User to Log In and Authorize

• If not already logged in, Google shows a login screen.
• Then it asks the user if they agree to share requested data with your app.

Google Redirects Back with Authorization Code

• If the user accepts, Google redirects them back to your redirect_uri with:
• code: a temporary authorization code
• state: for CSRF protection

Your Backend Exchanges Code for Tokens

• Your backend sends a POST to Google’s token endpoint with:
• code (received in step 3)
• client_id and client_secret
• redirect_uri
• grant_type=authorization_code
• Google responds with:
• access_token (used to access Google APIs)
• id_token (a JWT containing user identity info)
• refresh_token (optional, for long-term access)

Your Backend Verifies and Uses the ID Token

• Your backend verifies the id_token (signature, audience, etc.).
• Then it extracts user info like email, name, etc., and:
• Creates a session or JWT token for your app
• Or links the Google identity to an existing user