GoogleLogin

Renders the Sign In With Google button and optionally activates One Tap sign-in.

GoogleLogin renders the official Sign In With Google button using the Google Identity Services SDK. It handles the full credential flow and calls your onSuccess callback with a signed JWT credential. You can optionally enable One Tap sign-in by passing the useOneTap prop.

Usage

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

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

If you are using popup mode (the default), set the Cross-Origin-Opener-Policy header to same-origin-allow-popups to avoid blank window issues.

Props

Required

onSuccess · (credentialResponse: CredentialResponse) => void · required

Callback fired with the credential response after a successful sign-in.

Show CredentialResponse properties

credential · string

The signed JWT ID token returned by Google.

select_by · 'auto' | 'user' | 'user_1tap' | 'user_2tap' | 'btn' | 'btn_confirm' | 'btn_add_session' | 'btn_confirm_add_session'

Indicates how the credential was selected.

clientId · string

The client ID that was used for the sign-in.

Button appearance

type · 'standard' | 'icon' · default: "standard"

The button type. standard renders a full button with text; icon renders only the Google logo.

theme · 'outline' | 'filled_blue' | 'filled_black' · default: "outline"

The button theme.

size · 'large' | 'medium' | 'small' · default: "large"

The button size.

text · 'signin_with' | 'signup_with' | 'continue_with' | 'signin'

The button text. For example, signin_with renders “Sign in with Google”.

shape · 'rectangular' | 'pill' | 'circle' | 'square'

The button shape.

logo_alignment · 'left' | 'center'

Google logo alignment within the button.

width · string | number

The button width in pixels.

click_listener · () => void

Callback fired when the Sign in with Google button is clicked.

Callbacks

onError · () => void

Callback fired after a login failure.

promptMomentNotification · (notification: PromptMomentNotification) => void

Callback for PromptMomentNotification events. Use this to observe when the One Tap prompt is displayed, skipped, or dismissed.

containerProps · React.ComponentPropsWithoutRef<'div'>

Additional props spread onto the <div> container element that wraps the rendered button. Useful for adding custom className, style, event listeners, or accessibility attributes to the button wrapper.

One Tap

useOneTap · boolean

When true, activates One Tap sign-in in addition to rendering the button.

cancel_on_tap_outside · boolean

Controls whether the One Tap prompt is cancelled when the user clicks outside of it.

auto_select · boolean

Enables automatic credential selection on Google One Tap when only one Google account is available.

prompt_parent_id · string

The DOM element ID of the container in which to render the One Tap prompt.

use_fedcm_for_prompt · boolean · default: "false"

Allows the browser to control user sign-in prompts and mediate the sign-in flow using the FedCM API.

use_fedcm_for_button · boolean · default: "false"

Enables the FedCM Button flow.

Sign-in configuration

ux_mode · 'popup' | 'redirect'

The UX flow for the Sign In With Google button. Defaults to popup.

login_uri · string

The URL of your login endpoint. Required when ux_mode is redirect.

native_login_uri · string

The URL of your password credential handler endpoint.

native_callback · (response: { id: string; password: string }) => void

JavaScript password credential handler function, called when a user signs in with a saved password credential.

nonce · string

A random string embedded in the ID token. Use this to prevent replay attacks.

state · string

An opaque string returned with the ID token.

context · 'signin' | 'signup' | 'use'

Sets the title and wording displayed in the One Tap prompt.

state_cookie_domain · string

Pass the parent domain here to share a single state cookie between the parent domain and its subdomains when calling One Tap.

allowed_parent_origin · string | string[]

Origins allowed to embed the intermediate iframe. When present, One Tap runs in intermediate iframe mode.

intermediate_iframe_close_callback · () => void

Overrides the default intermediate iframe behavior when the user manually closes One Tap.

itp_support · boolean

Enables the upgraded One Tap UX on Intelligent Tracking Prevention (ITP) browsers.

hosted_domain · string

Hint to Google indicating which Google Workspace domain the user belongs to. See the hd field in the OpenID Connect docs.

CredentialResponse type

The object passed to onSuccess:

credential · string

The signed JWT ID token. Decode this on your server to verify the user’s identity.

select_by · string

How the credential was selected. Possible values: auto, user, user_1tap, user_2tap, btn, btn_confirm, btn_add_session, btn_confirm_add_session.

clientId · string

The OAuth client ID used for this sign-in.

One Tap example

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

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

When using One Tap, call googleLogout when the user signs out to prevent the automatic sign-in issue described in the Google documentation.