Google One Tap - Stytch Docs

import { useStytch } from '@stytch/react';

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

const showGoogleOneTap = () =>
  stytch.oauth.googleOneTap.start({
    login_redirect_url: '${exampleURL}/authenticate',
    signup_redirect_url: '${exampleURL}/authenticate',
  });

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

import { useStytch } from '@stytch/react';

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

const showGoogleOneTap = () =>
  stytch.oauth.googleOneTap.start({
    login_redirect_url: '${exampleURL}/authenticate',
    signup_redirect_url: '${exampleURL}/authenticate',
  });

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

import { useStytch } from '@stytch/react';

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

const showGoogleOneTap = () =>
  stytch.oauth.googleOneTap.start({
    login_redirect_url: '${exampleURL}/authenticate',
    signup_redirect_url: '${exampleURL}/authenticate',
  });

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

oauth.googleOneTap.start() will show the Google One Tap prompt in the top right corner of the user’s browser. 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). 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.

Parameters

The URL Stytch redirects to after the OAuth flow is completed for a user that already exists. This URL should be a route in your application which will run oauth.authenticate 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.

The URL Stytch redirects to after the OAuth flow is completed for a user that does not yet exist. This URL should be a route in your application which will run oauth.authenticate 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.

onOneTapCancelled

function

An optional callback function that runs when a user explicitly cancels out of the One Tap flow. This callback may not be invoked immediately or at all depending on the behavior of the browser and Google’s SDK.

cancel_on_tap_outside

boolean

default:"true"

Controls whether clicking outside the One Tap prompt dismisses the prompt.

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.

⌘I

​Parameters

​Response

Parameters

Response