Google One Tap - Stytch Docs

Google One Tap is a popular, low-friction authentication method that allows end users to select the Google account they wish to use to sign in with a single tap. The Google One Tap prompt will appear in the top right of the end user’s browser, and will look something like this:

Summary of Key Differences

For a quick overview of the differences between Google OAuth and Google One Tap, see the table below:

	Standard Google OAuth	Google One Tap
Issued OAuth Tokens	`access_token` and `refresh_token`	None (use standard OAuth if tokens are needed)
Available Stytch Integration Methods	Backend, Headless Frontend, Pre-built UI	Headless Frontend, Pre-built UI
Supported Browsers	All	Not supported in Arc or Brave; blocked by certain browser extensions
Headless SDK Reference Docs	Discovery sign-up and login and Organization login	Discovery sign-up and login and Organization login

Adding One Tap to your Google OAuth integration

You’ll first need to configure Google OAuth in the Stytch Dashboard, by following the steps here. Ensure you add your application’s URI as an Authorized Javascript Origin in your Google OAuth credential. For example, if you plan on showing One Tap at https://example.com/login, enter https://example.com. If you’re using localhost for testing, we recommend adding both http://localhost and http://locahost:[port].

Headless frontend integration

If you don’t already have Google OAuth set up in the headless SDK, follow the steps here.

Discovery sign-up or login
Organization login

To use Google One Tap for the flow, call the oauth.googleOneTap.discovery.start() method to display the Google One Tap prompt in the upper right of the user’s browser tab.The user is redirected to the Discovery Redirect URL you configured in the Stytch Dashboard after a successful One Tap selection.The examples below show how to display One Tap in response to a user action (button click). You can also show it on page load.

import { useStytchB2BClient } from '@stytch/react/b2b';
export const GoogleOneTapDiscovery = () => {
    const stytchClient = useStytchB2BClient();
    const showGoogleOneTapDiscovery = () =>
        stytchClient.oauth.googleOneTap.discovery.start();
    return <button onClick={showGoogleOneTapDiscovery}>Show Google One Tap Discovery</button>;
};

To prompt with One Tap for an Organization, call oauth.googleOneTap.start().After a successful One Tap selection, Stytch redirects to the Login or Signup Redirect URL configured in the Dashboard.

import { useStytchB2BClient } from '@stytch/react/b2b';
export const GoogleOneTap = () => {
    const stytchClient = useStytchB2BClient();
    const showGoogleOneTap = () =>
        stytchClient.oauth.googleOneTap.start({
            organization_id: '${organizationId}',
        });
    return <button onClick={showGoogleOneTap}>Show Google One Tap</button>;
};

Pre-built UI frontend integration

You’ll first need to have Google OAuth set up in the pre-built UI components, following the steps here. To enable One Tap, include one_tap in your providers list in the OAuth UI configuration. If the only product is oauth and the only provider is google with one_tap: true, the login form is not displayed and only the One Tap prompt will appear in the upper right of the user’s browser.

Google One Tap is not supported on all browsers and may be blocked by certain extensions. If Google OAuth is your only login method, we recommend using One Tap in targeted locations rather than on your primary login page.

import { B2BProducts, StytchB2B } from '@stytch/react/b2b';

const Login = () => {
  const config = {
    authFlowType: 'Discovery', // or "Organization"
    products: [B2BProducts.oauth],
    oauthOptions: {
      providers: [{ type: 'google', one_tap: true }],
    },
  };

  return <StytchB2B config={config} />;
};

export default Login;

​Summary of Key Differences

​Adding One Tap to your Google OAuth integration

​Headless frontend integration

​Pre-built UI frontend integration

Summary of Key Differences

Adding One Tap to your Google OAuth integration

Headless frontend integration

Pre-built UI frontend integration