Don't Ship Dev Keys! Set Up Production-Ready Google OAuth in React
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. *Cross-Linking & Related Videos:* Adding Authentication in React using Auth0: https://youtu.be/1rgeO_EbSGg Auth0: The Identity Platform for Developers: https://youtu.be/l5Oe7AyRGEg *Resources & Code Links:* • Auth0 React SDK Quickstart: https://github.com/auth0/auth0-react • Auth0 Google Social Connection Docs: https://developer.auth0.com/resources/labs/authentication/google-social-connection-to-login#introduction • Google Cloud Console: https://console.cloud.google.com *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! Have a topic you'd like to see covered? Let us know if the comments below 👀 ___________________________________________ 🔵Try Auth0 for free - https://a0.to/auth0 🔵The Auth0 blog - https://a0.to/blog 🔵Ask questions on the Community Forum - https://a0.to/community ___________________________________________ Follow Us on Social 🔵 X / Twitter - https://a0.to/twitter 🔵LinkedIn - https://a0.to/linkedin