Skip to main content
import { useEffect } from 'react';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const GoogleOneTapLogin = () => {
  const stytch = useStytchB2BClient();

  useEffect(() => {
    const result = stytch.oauth.googleOneTap.start({
      organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
      login_redirect_url: 'https://example.com/authenticate',
      signup_redirect_url: 'https://example.com/authenticate',
    });

    if (!result.success) {
      console.error('Google One Tap failed to start:', result.reason);
    }
  }, [stytch]);

  return <div>Loading Google One Tap...</div>;
};
oauth.googleOneTap.start() will show the Google One Tap prompt in the top right corner of the user’s browser. An organization_id is required to specify which organization the user is trying to access. If the organization that the user is trying to access is not yet known, use the oauth.googleOneTap.discovery.start() method instead. If the end user clicks to sign in with Google One Tap, Stytch will verify the response and redirect to the login_redirect_url or signup_redirect_url provided, or the default redirect URLs if none are specified. A PKCE code_verifier will also be generated and stored in local storage on the device (See the PKCE OAuth guide for details). If your application is configured to use a custom subdomain with Stytch, it will be used automatically. Once the user is successfully redirected, you can collect the Stytch OAuth token from the URL query parameters, and call the OAuth Authenticate method to complete the authentication flow.
Google One Tap does not return access tokens. If you wish to retrieve the user’s access token, use the Start OAuth Flow method instead.

​
Method parameters

​
organization_id
string
required
The id of the Organization to start the OAuth flow for.
​
login_redirect_url
string
required
The URL Stytch redirects to after the OAuth flow is completed for a Member that already exists. This URL should be a route in your application which will run oauth.authenticate (see below) and finish the login.The URL must be configured as a Login URL in the Redirect URL page. If the field is not specified, the default Login URL will be used.
​
signup_redirect_url
string
required
The URL Stytch redirects to after the OAuth flow is completed for a Member that does not yet exist. This URL should be a route in your application which will run oauth.authenticate (see below) and finish the login.The URL must be configured as a Signup URL in the Redirect URL page. If the field is not specified, the default Signup URL will be used.
​
cancel_on_tap_outside
boolean
default:"true"
Whether the Google One Tap prompt is automatically dismissed when the user taps outside of it. Defaults to true.

​
Response

​
success
boolean
Whether the Google One Tap prompt was successfully started.
​
reason
string
If success is false, the reason why the Google One Tap prompt failed to start.