Learn how to integrate production-ready Gmail / Google Sign-In into your applications using Auth0. In this complete, step-by-step tutorial, Layla (Senior Developer Advocate at Auth0) walks you through setting up an Auth0 SPA, integrating the @auth0/auth0-react SDK with the useAuth0 hook, and configuring Google Cloud Console OAuth credentials to safely replace default development keys for production deployment.
What You'll Learn:
- How to create and configure a Single Page Application (SPA) in the Auth0 Dashboard.
- Integrating the @auth0/auth0-react SDK using Auth0Provider and useAuth0.
- Wiring up a custom "Sign in with Google" button with loginWithRedirect.
- Configuring Auth0 allowed callback, logout, and web origin URLs (localhost).
- Creating OAuth 2.0 Client Credentials in Google Cloud Console.
- Swapping default Auth0 developer keys for custom production Google Client IDs and Secrets.
Resources & Code Links
Also Watch
Timestamps:
00:15 - Creating an Auth0 Single Page Application
00:30 - Installing & Setting Up @auth0/auth0-react SDK
00:46 - Fetching Domain & Client ID for Environment Variables
01:00 - Wrap App with Auth0Provider
01:20 - Fetch Domain & Client ID from Auth0 Settings
01:43 - Use useAuth0 Hook & Wire Up Google Sign-In Button
01:56 - Wiring Up the Google Sign-In Button (useAuth0)
02:10 - Enabling Google Social Connection in Auth0
02:30 - Configuring Localhost URLs in Dashboard
03:07 - Why You Shouldn't Use Auth0 Shared Dev Keys in Production
03:23 - Setting Up OAuth Credentials in Google Cloud Console
05:05 - Adding Google Client ID & Secret to Auth0
05:42 - Testing Gmail OAuth Authentication Flow
If you enjoy this content and want to learn more about identity, security, and access management, subscribe to our channel!
Top comments (1)