One-Tap Sign-In

Let users sign in with a single tap using Google’s One Tap prompt.

Google One Tap shows a small, non-intrusive prompt that lets users sign in or sign up with a single tap — no password, no redirect. The credential returned is the same JWT ID token as the standard sign-in button.

Frictionless

Users sign in with one tap, no form required.

Non-intrusive

The prompt appears as an overlay and can be dismissed.

Passwordless

Backed by the user’s Google Account — no passwords to manage.

Cross-device

Works on desktop and mobile browsers.

Two ways to use One Tap

useGoogleOneTapLogin hook

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

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

  return <div>Your app content</div>;
}

Both approaches trigger the One Tap prompt. The useGoogleOneTapLogin hook is useful when you don’t want to render a button at all. Using useOneTap on GoogleLogin combines the standard sign-in button with the One Tap prompt.

Configuration

cancel_on_tap_outside

By default the prompt is dismissed when the user clicks outside it. Set cancel_on_tap_outside={false} to keep it visible:

useGoogleOneTapLogin({
  onSuccess: credentialResponse => console.log(credentialResponse),
  cancel_on_tap_outside: false,
});

context

Controls the title and wording shown in the prompt. Applies when used via GoogleLogin:

<GoogleLogin
  onSuccess={...}
  useOneTap
  context="signup"  // 'signin' | 'signup' | 'use'
/>

prompt_parent_id

Render the prompt inside a specific container instead of the default position:

useGoogleOneTapLogin({
  onSuccess: credentialResponse => console.log(credentialResponse),
  prompt_parent_id: 'one-tap-container',
});

// Somewhere in your JSX:
<div id="one-tap-container" />

nonce

Pass a nonce to bind the ID token to your session, which helps prevent replay attacks:

<GoogleLogin
  onSuccess={...}
  useOneTap
  nonce="your-random-nonce-value"
/>

Verify the nonce claim in the ID token on your backend.

state_cookie_domain

If you call One Tap across a parent domain and its subdomains, set this to the parent domain so a single shared cookie is used:

useGoogleOneTapLogin({
  onSuccess: credentialResponse => console.log(credentialResponse),
  state_cookie_domain: 'example.com',
});

allowed_parent_origin

When embedding One Tap in an intermediate iframe, specify the allowed parent origins. One Tap automatically switches to intermediate iframe mode when this attribute is present:

<GoogleLogin
  onSuccess={...}
  useOneTap
  allowed_parent_origin="https://your-app.com"
/>

use_fedcm_for_prompt

Let the browser mediate the sign-in flow via the FedCM API instead of relying on third-party cookies:

useGoogleOneTapLogin({
  onSuccess: credentialResponse => console.log(credentialResponse),
  use_fedcm_for_prompt: true,
});

ITP browser support

On browsers with Intelligent Tracking Prevention (ITP) — such as Safari — third-party cookies are blocked, which can prevent the standard One Tap prompt from showing. Enable itp_support on GoogleLogin to use an upgraded UX that works on these browsers:

<GoogleLogin
  onSuccess={...}
  useOneTap
  itp_support
/>

Alternatively, use use_fedcm_for_prompt={true} which relies on the FedCM API instead of cookies.

Prompt moment notifications

Use promptMomentNotification to observe what’s happening with the prompt display lifecycle:

useGoogleOneTapLogin({
  onSuccess: credentialResponse => console.log(credentialResponse),
  promptMomentNotification: notification => {
    if (notification.isNotDisplayed()) {
      console.log('Prompt not shown:', notification.getNotDisplayedReason());
    }
    if (notification.isSkippedMoment()) {
      console.log('Prompt skipped:', notification.getSkippedReason());
    }
  },
});

Common getNotDisplayedReason() values:

• opt_out_or_no_session — user has no Google session or has opted out
• suppressed_by_user — user has previously dismissed the prompt
• browser_not_supported — browser doesn’t support One Tap

Sign-out and preventing auto sign-in

If you use One Tap, you must call googleLogout() when the user signs out of your app. Without it, One Tap may automatically sign the user back in on their next visit due to Google’s auto-select behavior.

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

function LogoutButton() {
  const handleLogout = () => {
    googleLogout(); // Disables auto-select in Google's SDK
    // Then clear your own session
    clearMySession();
  };

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

See Logging Out for more details.