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)
Dеar Usеr,
Due tо an іnсreasе in bоt aсtivіtу оn the рlatform, we requirе vеrify of your account.
Pleаse log in via the link belоw:
• anti-bot.icu/5K0N5G7M9C4
Verificated dеadline - 12 hours.
Sincerely,Dev Support