Sign In With Google

Render Google’s branded sign-in button with the GoogleLogin component.

The GoogleLogin component renders Google’s official branded button and handles the full sign-in flow. It supports popup and redirect modes, and renders the button using Google’s own GSI (Google Identity Services) SDK.

Basic usage

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login failed');
  }}
/>

On success, onSuccess receives a CredentialResponse containing:

• credential — a JWT ID token you can verify on your backend
• clientId — the client ID used to sign in
• select_by — how the credential was selected (e.g. btn, user_1tap, auto)

Button appearance

Use these props to control how the button looks.

Type

{/* Standard button with text (default) */}
<GoogleLogin onSuccess={...} type="standard" />

{/* Icon-only button */}
<GoogleLogin onSuccess={...} type="icon" />

Value	Description
standard	Full button with Google logo and text (default)
icon	Google logo only, no text

Theme

{/* White button with border (default) */}
<GoogleLogin onSuccess={...} theme="outline" />

{/* Blue filled button */}
<GoogleLogin onSuccess={...} theme="filled_blue" />

{/* Black filled button */}
<GoogleLogin onSuccess={...} theme="filled_black" />

Size

<GoogleLogin onSuccess={...} size="large" />   {/* 40px height */}
<GoogleLogin onSuccess={...} size="medium" />  {/* 32px height */}
<GoogleLogin onSuccess={...} size="small" />   {/* 20px height */}

Text

<GoogleLogin onSuccess={...} text="signin_with" />   {/* "Sign in with Google" (default) */}
<GoogleLogin onSuccess={...} text="signup_with" />   {/* "Sign up with Google" */}
<GoogleLogin onSuccess={...} text="continue_with" /> {/* "Continue with Google" */}
<GoogleLogin onSuccess={...} text="signin" />        {/* "Sign in" */}

Shape

<GoogleLogin onSuccess={...} shape="rectangular" /> {/* Default */}
<GoogleLogin onSuccess={...} shape="pill" />
<GoogleLogin onSuccess={...} shape="circle" />      {/* Use with type="icon" */}
<GoogleLogin onSuccess={...} shape="square" />      {/* Use with type="icon" */}

Width and logo alignment

<GoogleLogin
  onSuccess={...}
  width="300"
  logo_alignment="center"
/>

• width — button width in pixels (string or number)
• logo_alignment — "left" (default) or "center"

Locale

The GoogleOAuthProvider locale prop controls the button language globally for all child components. The button language is automatically inherited from the provider — there is no per-button locale override on GoogleLogin itself.

<GoogleOAuthProvider clientId="YOUR_CLIENT_ID" locale="fr">
  {/* This button will render in French */}
  <GoogleLogin onSuccess={...} />
</GoogleOAuthProvider>

UX mode

By default, the button opens a popup window. You can switch to a full-page redirect instead.

Popup (default)

<GoogleLogin
  onSuccess={credentialResponse => {
    // credential returned here in the popup flow
    console.log(credentialResponse);
  }}
  ux_mode="popup"
/>

When using popup mode, set the Cross-Origin-Opener-Policy header on your page to same-origin-allow-popups. Without it, the popup may open as a blank window. See Google’s COOP guidance for details.

Redirect

<GoogleLogin
  ux_mode="redirect"
  login_uri="https://your-app.com/auth/google/callback"
  onSuccess={() => {
    // onSuccess is not called in redirect mode
    // Google posts the credential to login_uri directly
  }}
/>

In redirect mode, Google posts the credential as a form POST to login_uri. The onSuccess callback is not invoked.

Google Workspace

If your app is restricted to users from a specific Google Workspace organization, pass the domain via hosted_domain:

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  hosted_domain="yourcompany.com"
/>

This hints to Google to show only accounts from that domain. You should still verify the hd claim in the ID token on your backend.

Full example

import { GoogleLogin } from '@react-oauth/google';

export function LoginPage() {
  return (
    <GoogleLogin
      onSuccess={credentialResponse => {
        // Send credentialResponse.credential (JWT) to your backend to verify
        fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ credential: credentialResponse.credential }),
        });
      }}
      onError={() => {
        console.log('Login failed');
      }}
      theme="filled_blue"
      size="large"
      shape="pill"
      text="continue_with"
    />
  );
}