<GoogleOneTap />
component
The <GoogleOneTap />
component renders the Google One Tap UI so that users can use a single button to sign-up or sign-in to your Clerk application with their Google accounts.
By default, this component will redirect users back to the page where the authentication flow started. However, you can override this with force redirect URL props or force redirect URL environment variables.
GoogleOneTapProps
- Name
cancelOnTapOutside?
- Type
boolean
- Description
If
true
, the One Tap prompt closes automatically if the user clicks outside of the prompt. Default:true
.
- Name
itpSupport?
- Type
boolean
- Description
If
true
, enables the ITP-specific UX when One Tap is rendered on ITP browsers such as Chrome on iOS, Safari, and FireFox. Default:true
.
- Name
fedCmSupport?
- Type
boolean
- Description
If
true
, enables Google One Tap to use the FedCM API to sign users in. See Google's docs on best practices when disabling FedCM support. Default:true
- Name
signInForceRedirectUrl?
- Type
string
- Description
Useful if you want to redirect to a path specific to Google One Tap users. If provided, this URL will always be redirected to after the user signs in, overriding any
<ClerkProvider>
redirect URL props or redirect URL environment variables.
- Name
signUpForceRedirectUrl?
- Type
string
- Description
Useful if you want to redirect to a path specific to Google One Tap users. If provided, this URL will always be redirected to after the user signs up, overriding any
<ClerkProvider>
redirect URL props or redirect URL environment variables.
Usage with frameworks
The following example includes basic implementation of the <GoogleOneTap />
component. You can use this as a starting point for your own implementation.
Usage with JavaScript
The methods in this section are available on instances of the Clerk
class and are used to render and control the <GoogleOneTap />
component.
openGoogleOneTap()
Opens the <GoogleOneTap />
component.
closeGoogleOneTap()
Closes the <GoogleOneTap />
component.
authenticateWithGoogleOneTap()
Authenticates the user with a token generated from Google identity services. Also sets the user's current session to active.
- Name
token?
- Type
string
- Description
A Google authentication token from Google identity services.
handleGoogleOneTapCallback()
Completes a Google One Tap redirection flow started by authenticateWithGoogleOneTap()
. Also calls Clerk.setActive()
and performs a custom navigation if given a custom navigation function.
See authenticateWithGoogleOneTap()
usage for an example of how to use handleGoogleOneTapCallback()
.
handleGoogleOneTapCallback()
params
- Name
signInOrUp
- Type
SignInResource | SignUpResource
- Description
The
SignIn
orSignUp
object returned fromauthenticateWithGoogleOneTap()
.
- Name
params
- Type
HandleOAuthCallbackParams
- Description
An object containing redirect URLs. Useful if you want to set URLs specific to Google One Tap. Otherwise, consider using environment variables to set redirect URLs.
- Name
customNavigate?
- Type
(to: string) => Promise<unknown>
- Description
Allows you to define a custom navigation function.
Limitations
- If your application will use the Google API on behalf of your users, Clerk's
<GoogleOneTap>
component is not recommended, as Google does not provide Clerk with an access or refresh token that you can use. - Users with the 1Password browser extension may not be able to render the Google One Tap UI. They must disable this extension.
- When testing in development, if you select the
X
button to close the Google One Tap UI, you may encounter a cooldown that prevents you from rendering it again for a period of time. To bypass the cooldown, remove theg_state
cookie.
Feedback
Last updated on