Adding Google Login to a React App with Auth0

Summary

The tutorial shows how to add Google login to a Vite-based React single-page app without implementing OAuth directly, using Auth0’s React SDK and Google social connection. It covers installing @auth0/auth0-react, creating an Auth0 Single Page Web Application, checking RS256 and OIDC Conformant settings, registering callback, logout, and web-origin URLs, and supplying the domain and client ID through Vite environment variables. The React code wraps the app in Auth0Provider, uses useAuth0 for loading and authentication state, and calls loginWithRedirect with connection: 'google-oauth2' to bypass provider selection. For production, it explains replacing Auth0’s shared development keys with Google Cloud credentials whose origin and redirect URI target the Auth0 domain, then storing them in the Auth0 social connection. It also points to route protection with withAuthenticationRequired, API access tokens from getAccessTokenSilently, and exact redirect-URI matching as important follow-on considerations.

Takeaways

1. 1

   Vite variables prefixed with VITE_ are exposed to the browser, so the tutorial says not to put an Auth0 client secret or Google client secret in them.

2. 2

   Google Cloud OAuth credentials use the Auth0 tenant domain for both the authorized JavaScript origin and the /login/callback redirect URI.

3. 3

   withAuthenticationRequired can protect React routes, while getAccessTokenSilently can provide a short-lived token for requests to a separately registered Auth0 API.