āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/authentication/google-one-tap ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<GoogleOneTap /> component'
description: Clerk's <GoogleOneTap /> component renders a UI for authenticating users with Google's One Tap API.
sdk: astro, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend[!IMPORTANT] To use Google One Tap with Clerk, you must enable Google as a social connection in the Clerk Dashboard and make sure to use custom credentials.
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.
[!TIP]
<GoogleOneTap>does not render if the user is already signed into your Clerk application, so there's no need to manually check if a user is signed in yourself before rendering it.
<If sdk={["astro", "expo", "nextjs", "nuxt", "react", "react-router", "remix", "tanstack-react-start", "vue"]}>
The following example includes basic implementation of the <GoogleOneTap /> component. You can use this as a starting point for your own implementation.
export default function Page() {
return <GoogleOneTap />
}
```
function App() {
return <GoogleOneTap />
}
export default App
```
export default function Page() {
return <GoogleOneTap />
}
```
<GoogleOneTap />
```
```jsx {{ filename: '/app/sign-in-google.web.tsx' }}
import { GoogleOneTap } from '@clerk/clerk-expo/web'
export default function Page() {
return <GoogleOneTap />
}
```
export default function Page() {
return <GoogleOneTap />
}
```
export const Route = createFileRoute('/sign-in')({
component: SignIn,
})
function SignIn() {
return <GoogleOneTap />
}
```
<template>
<GoogleOneTap />
</template>
```
<template>
<GoogleOneTap />
</template>
```
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.
function openGoogleOneTap(params: GoogleOneTapProps): void
openGoogleOneTap() usageimport { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
const params = {
cancelOnTapOutside: false,
itpSupport: false,
fedCmSupport: false,
}
clerk.openGoogleOneTap(params)
closeGoogleOneTap()Closes the <GoogleOneTap /> component.
function closeGoogleOneTap(): void
closeGoogleOneTap() usageimport { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
const params = {
cancelOnTapOutside: false,
itpSupport: false,
fedCmSupport: false,
}
clerk.openGoogleOneTap(params)
// Do something else
clerk.closeGoogleOneTap()
authenticateWithGoogleOneTap()Authenticates the user with a token generated from Google identity services. Also sets the user's current session to active.
function authenticateWithGoogleOneTap(
props?: AuthenticateWithGoogleOneTapParams,
): Promise<SignInResource | SignUpResource>
AuthenticateWithGoogleOneTapParamsA Google authentication token from Google identity services.
authenticateWithGoogleOneTap() usageimport { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
// Optionally, you can set redirect URLs.
const customUrls = {
signInUrl: '/sign-in',
signUpUrl: '/sign-up',
}
// Initiate the authentication flow.
const signInOrUp = await clerk.authenticateWithGoogleOneTap({ token: 'xxxx' })
// Set the session as active, and handle any navigation or redirects
await clerk.handleGoogleOneTapCallback(signInOrUp, customUrls)
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.
function handleGoogleOneTapCallback(
signInOrUp: SignInResource | SignUpResource,
params: HandleOAuthCallbackParams,
customNavigate?: (to: string) => Promise<unknown>,
): Promise<unknown>
See authenticateWithGoogleOneTap() usage for an example of how to use handleGoogleOneTapCallback().
handleGoogleOneTapCallback() paramsThe `SignIn` or `SignUp` object returned from `authenticateWithGoogleOneTap()`.
---
- `params`
- [`HandleOAuthCallbackParams`](/docs/reference/javascript/clerk#handle-o-auth-callback-params)
An object containing redirect URLs. Useful if you want to set URLs specific to Google One Tap. Otherwise, consider using [environment variables](/docs/guides/development/clerk-environment-variables) to set redirect URLs.
---
- `customNavigate?`
- `(to: string) => Promise<unknown>`
A function that overrides Clerk's default navigation behavior, allowing custom handling of navigation during sign-up and sign-in flows.
If true, the One Tap prompt closes automatically if the user clicks outside of the prompt. Defaults to true.
itpSupport?booleanIf true, enables the ITP-specific UX when One Tap is rendered on ITP browsers such as Chrome on iOS, Safari, and FireFox. Defaults to true.
fedCmSupport?booleanIf 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. Defaults to true
signInForceRedirectUrl?stringUseful 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.
signUpForceRedirectUrl?stringUseful 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.
</Properties>
<GoogleOneTap> component is not recommended, as Google does not provide Clerk with an access or refresh token that you can use.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 the g_state cookie.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā