Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/MomenSherif/react-oauth/llms.txt

Use this file to discover all available pages before exploring further.

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.

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

Build docs developers (and LLMs) love

Get started for freeTalk to us