hectoday
DocsCoursesChangelog GitHub
DocsCoursesChangelog GitHub

Access Required

Enter your access code to view courses.

Invalid code

← All courses OAuth and Social Login

Why OAuth?

  • The Problem with Passwords
  • OAuth 2.0 in Plain English
  • The Authorization Code Flow, Step by Step
  • Project Setup

GitHub Login

  • Register a GitHub OAuth App
  • The Authorization Redirect
  • The State Parameter
  • The Callback Handler
  • Fetching the User Profile
  • Creating or Linking Accounts
  • The Complete Flow

Google Login

  • Register a Google OAuth App
  • Building Google Login

Production Concerns

  • Multiple Providers, One User
  • Combining OAuth with Password Auth
  • Error Handling
  • Logout and Token Cleanup
  • Common Mistakes
  • Capstone: Multi-Provider Login Page

Register a Google OAuth App

More setup than GitHub

Google’s OAuth registration is more involved than GitHub’s. You need a Google Cloud project, an OAuth consent screen, and OAuth credentials. The flow is the same once set up, but getting there takes more steps.

Step 1: Create a Google Cloud project

Go to console.cloud.google.com. If you do not have a Google Cloud account, you can create one for free. No credit card is required for OAuth.

Click the project dropdown at the top, then “New Project.” Name it something like “OAuth Course” and click “Create.” Wait for the project to be created, then select it.

Step 2: Configure the OAuth consent screen

In the left sidebar, go to “APIs & Services” > “OAuth consent screen.”

Choose “External” as the user type (this lets any Google account log in, not just accounts in your organization). Click “Create.”

Fill in the required fields:

  • App name: “OAuth Course” (shown to users on the consent screen)
  • User support email: Your email
  • Developer contact email: Your email

You can skip the optional fields. Click “Save and Continue” through the Scopes and Test Users steps.

[!NOTE] While in “Testing” mode, only test users you explicitly add can log in. To let anyone log in, you would need to publish the app. For this course, add your own Google email as a test user, or publish the app (it does not require verification for basic profile scopes).

Step 3: Create OAuth credentials

In the left sidebar, go to “APIs & Services” > “Credentials.”

Click “Create Credentials” > “OAuth client ID.”

  • Application type: Web application
  • Name: “OAuth Course” (internal label, not shown to users)
  • Authorized redirect URIs: Click “Add URI” and enter http://localhost:3000/auth/google/callback

Click “Create.”

You will see your Client ID and Client secret. Copy both.

Step 4: Update your .env

GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-your-google-client-secret
BASE_URL=http://localhost:3000

Update src/env.ts to include the Google variables:

export const env = {
  githubClientId: required("GITHUB_CLIENT_ID"),
  githubClientSecret: required("GITHUB_CLIENT_SECRET"),
  googleClientId: required("GOOGLE_CLIENT_ID"),
  googleClientSecret: required("GOOGLE_CLIENT_SECRET"),
  baseUrl: required("BASE_URL"),
};

How Google differs from GitHub

The OAuth flow is the same, but the details differ:

AspectGitHubGoogle
Authorization URLgithub.com/login/oauth/authorizeaccounts.google.com/o/oauth2/v2/auth
Token URLgithub.com/login/oauth/access_tokenoauth2.googleapis.com/token
User info URLapi.github.com/usergoogleapis.com/oauth2/v2/userinfo
Scopesread:user user:emailopenid email profile
ID tokenNot returnedReturned (JWT)
User ID typeNumberString

The biggest difference: Google supports OpenID Connect (OIDC), which is a layer on top of OAuth 2.0. When you request the openid scope, Google returns an ID token (a JWT) alongside the access token. The ID token contains the user’s profile data, so you can skip the separate API call to fetch the profile. We will use this in the next lesson.

Exercises

Exercise 1: Complete the Google Cloud setup and verify your credentials are in .env. Restart the server and confirm it starts without errors.

Exercise 2: Compare the Google and GitHub setup processes. Which was easier? Google has more steps, but the result is the same: a client ID, a client secret, and a registered callback URL.

What is the key technical difference between Google's and GitHub's OAuth?

← The Complete Flow Building Google Login →

© 2026 hectoday. All rights reserved.