Setup Google OAuth sign in 6 minutes

Tech/Product Overview

The tutorial explains how to add “Sign in with Google” to a website by:

1. Creating a Google OAuth app in the Google Developer Console
2. Configuring OAuth credentials in an application using Auth0 (referred to as “aite” in subtitles) via the Auth0 Web SDK
3. Letting the Auth0 SDK handle the rest of the authentication/session flow

Step-by-step Guide (Google Developer Console)

• Create a new Google Cloud project (example name: tutorial).
• Configure an OAuth Consent Screen:
  • Set User type: External
  • Provide App name, Support email, Developer email
  • Set App domain (example uses Local Host and notes it “can’t end with a forward slash”)
  • Add required Scopes (example: email, profile/basic profile, and also requesting Google ID)
• Test mode setup:
  • In OAuth test mode, only added test users can log in
  • Adds a specific test user email (example: “Dennis …”)

Step-by-step Guide (OAuth Credentials / Redirect URIs)

• Create an OAuth Client ID:
  • Choose Web application
  • Provide Home URL (example: Local Host, no trailing /)
  • Provide Authorized redirect URI (callback URL from Auth0)
• Notes about credentials:
  • After creation, client secret won’t be visible again, so it must be saved

Integration with Auth0 / App Configuration

The tutorial connects OAuth credentials into Auth0:

• Place client ID into Auth0 as Client ID
• Place client secret into Auth0 as Client Secret
• Mentions configuring/using Auth0’s SDK to manage authentication

Frontend Implementation (Auth0 Web SDK + Vite App)

An example app built with Vite:

• index.html:
  • Login screen with a Login button
  • Profile screen with Logout button and username
• main.js:
  • Shows/hides login vs profile views by toggling CSS hidden class
  • Uses a “get user” flow to decide which screen to render

Login behavior

In handle login, the app calls account.createOAuth2Session with:

• Provider: Google
• Success URL: redirect back to the site/homepage (home domain)
• Fail URL: example placeholder (/fail), mentioned as not existing yet but assumed

Demonstration / Result

When a user clicks “Login with Google”:

• The OAuth consent screen appears
• The user selects the test user and confirms
• The user is redirected back to the homepage
• The user is considered signed in with Google

Main speakers/sources

• Primary speaker: The YouTube creator (“hey what’s going on everybody…” narration).
• Sources/Systems used:
  • Google Developer Console (OAuth consent + client credentials)
  • Auth0 Web SDK (Auth0 account/session creation)