useGoogleOneTapLogin

Hook that activates Google One Tap sign-in as a side effect, displaying the One Tap prompt to unauthenticated users.

useGoogleOneTapLogin displays the Google One Tap prompt when the component mounts. It is a side-effect-only hook — it returns void and does not render any UI. Use it to prompt unauthenticated users to sign in without requiring them to navigate to a sign-in page.

Usage

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

function HomePage() {
  useGoogleOneTapLogin({
    onSuccess: credentialResponse => {
      console.log(credentialResponse);
    },
    onError: () => {
      console.log('Login failed');
    },
  });

  return <main>Welcome</main>;
}

The hook calls google.accounts.id.cancel() on cleanup, so the prompt is automatically dismissed when the component unmounts.

Parameters

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 OAuth client ID used for this sign-in.

onError · () => void

Callback fired when the One Tap sign-in fails.

promptMomentNotification · (notification: PromptMomentNotification) => void

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

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 when only one Google account is available and the user has not opted out.

hosted_domain · string

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

disabled · boolean

When true, cancels any active One Tap prompt and prevents new ones from appearing. Use this when the user is already authenticated.

prompt_parent_id · string

The DOM element ID of the container in which to render 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.

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.

Return value

This hook returns void. All interaction is handled through the onSuccess and onError callbacks.

Preventing automatic re-sign-in after logout

If you use One Tap login, call googleLogout when the user signs out to prevent Google from automatically signing them back in:

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

function LogoutButton() {
  const handleLogout = () => {
    googleLogout();
    // clear your own session state here
  };

  return <button onClick={handleLogout}>Sign out</button>;
}

Failing to call googleLogout when signing out can cause the One Tap prompt to automatically sign the user back in. See the Google documentation for details.