B2B Saas Authentication

/

Frontend SDKs

/

Headless

/

OAuth

/

Google One Tap

Display Google One Tap

The oauth.googleOneTap.start() method 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 store it 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 endpoint to complete the authentication flow.

Google One Tap does not return access tokens. If you wish to retrieve the user's access token, you'll need to use a regular Google OAuth flow.

Method parameters

organization_id* string
login_redirect_url string
signup_redirect_url string
import { useStytchB2BClient } from '@stytch/react/b2b';

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

  const showGoogleOneTap = () =>
    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',
    });

  return <button onClick={showGoogleOneTap}>Show Google One Tap</button>;
};