Quickstart

Add Google sign-in to your React app in under five minutes using GoogleOAuthProvider and GoogleLogin.

This guide walks you through the minimum setup to render a working Sign In With Google button in your React app.

1. Get your Google API client ID

   Go to the Google Cloud Console API dashboard and create or select a project. Then:

   1. Navigate to Credentials and click Create credentials > OAuth client ID.
   2. Select Web application as the application type.
   3. Add your app’s origin to Authorized JavaScript origins.
   4. Copy the generated Client ID — you’ll use it in step 3.

   For local development, add both http://localhost and http://localhost:<port_number> (e.g. http://localhost:3000) to the Authorized JavaScript origins.

2. Configure your OAuth consent screen

   Before Google allows sign-in, you must configure what users see when they authenticate.

   1. In the Google Cloud Console, go to OAuth consent screen.
   2. Choose External (for apps available to any Google user) or Internal (for Google Workspace organizations).
   3. Fill in the required fields: app name, user support email, and developer contact.
   4. Add any scopes your app needs. For basic sign-in, the default openid, profile, and email scopes are sufficient.
   5. Save and continue.

   While your app is in Testing status, only users you explicitly add as test users can sign in. Publish the app when you’re ready for public access.

3. Install the package

   Add @react-oauth/google to your project:

   npm

   npm install @react-oauth/google@latest
   
4. Wrap your app with GoogleOAuthProvider

   GoogleOAuthProvider loads the Google Identity Services SDK and makes your client ID available to all components inside it. Render it at the root of your app (or at least above any component that uses Google sign-in).

   import { GoogleOAuthProvider } from '@react-oauth/google';
   
   export default function App() {
     return (
       <GoogleOAuthProvider clientId="YOUR_CLIENT_ID">
         {/* rest of your app */}
       </GoogleOAuthProvider>
     );
   }
   

   Replace YOUR_CLIENT_ID with the client ID you copied in step 1.

5. Add the GoogleLogin button

   Render the GoogleLogin component anywhere inside GoogleOAuthProvider. Pass onSuccess to handle the credential response and onError for failures.

   import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
   
   export default function App() {
     return (
       <GoogleOAuthProvider clientId="YOUR_CLIENT_ID">
         <GoogleLogin
           onSuccess={credentialResponse => {
             console.log(credentialResponse);
           }}
           onError={() => {
             console.log('Login Failed');
           }}
         />
       </GoogleOAuthProvider>
     );
   }
   

   When the user clicks the button and completes sign-in, onSuccess fires with a CredentialResponse object:

   {
     "credential": "eyJhbGciOiJSUzI1NiIsImtpZCI6...",
     "clientId": "123456789-abc.apps.googleusercontent.com",
     "select_by": "btn"
   }
   

   The credential field is a JWT ID token. Decode it on your backend to verify the user’s identity and extract their profile information (name, email, picture, etc.).

   Always verify the JWT ID token on your server using Google’s token verification endpoint or a trusted library. Never trust the token without server-side verification.

Cross-Origin Opener Policy

If you use the default popup UX mode, set the following HTTP response header on your page to prevent a blank popup window issue:

Cross-Origin-Opener-Policy: same-origin-allow-popups

For example, in a Next.js app via next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin-allow-popups',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

What’s next

Customize the sign-in button

Control the button’s size, shape, theme, text, and locale.

Build a custom button

Use useGoogleLogin to trigger sign-in from your own button or UI element.

One-tap sign-in

Prompt returning users to sign in with a single tap using useGoogleOneTapLogin.

API reference

Full props and type definitions for GoogleOAuthProvider, GoogleLogin, and all hooks.