---
title: "Adding Google Login to a React App with Auth0"
description: "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."
---

# Adding Google Login to a React App with Auth0

[Auth0](https://yomu.fyi/company/auth0) · Carla Urrea Stabile · Sep 11, 2026

**Type:** Tutorial

## 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.

## Context

The tutorial addresses the need for a low-friction sign-in option and explains that Auth0 can handle the Google OAuth redirect, token validation, and session flow instead of the application implementing OAuth directly. It also distinguishes shared Auth0 development keys from organization-owned Google credentials needed before production.

## Approach / What changed

Install @auth0/auth0-react, configure an Auth0 Single Page Web Application, register matching application URLs, and wrap the React app in Auth0Provider. Use useAuth0 and loginWithRedirect with the google-oauth2 connection, then replace Auth0’s shared Google keys with Google Cloud OAuth credentials configured for the Auth0 tenant domain.

## Takeaways

- 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.
- Google Cloud OAuth credentials use the Auth0 tenant domain for both the authorized JavaScript origin and the /login/callback redirect URI.
- withAuthenticationRequired can protect React routes, while getAccessTokenSilently can provide a short-lived token for requests to a separately registered Auth0 API.

**Tags:** [Auth0](https://yomu.fyi/topic/auth0), [Authentication](https://yomu.fyi/topic/authentication), [OAuth2](https://yomu.fyi/topic/oauth2), [React](https://yomu.fyi/topic/react)

- Source: [Auth0](https://auth0.com/blog/adding-google-login-to-react-app-with-auth0)
- Source URL: https://auth0.com/blog/adding-google-login-to-react-app-with-auth0
- Ingested by Yomu: 2026-09-11T20:01:03.414Z

[Read original post](https://auth0.com/blog/adding-google-login-to-react-app-with-auth0)