# <GoogleOneTap /> component

> To use Google One Tap with Clerk, you must [enable Google as a social connection in the Clerk Dashboard](https://clerk.com/docs/guides/configure/auth-strategies/social-connections/google.md?sdk=js-frontend#configure-for-your-production-instance) and make sure to use custom credentials.

The `<GoogleOneTap />` component renders the [Google One Tap](https://developers.google.com/identity/gsi/web/guides/features) 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](https://clerk.com/docs/js-frontend/reference/components/authentication/google-one-tap.md#properties) or [force redirect URL environment variables](https://clerk.com/docs/guides/development/clerk-environment-variables.md?sdk=js-frontend#sign-in-and-sign-up-redirects).

> `<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.

## Usage with JavaScript

The methods in this section are available on instances of the [Clerk](https://clerk.com/docs/js-frontend/reference/objects/clerk.md) class and are used to render and control the `<GoogleOneTap />` component.

### `openGoogleOneTap()`

Opens the `<GoogleOneTap />` component.

```typescript
function openGoogleOneTap(params: GoogleOneTapProps): void
```

- See [GoogleOneTapProps](https://clerk.com/docs/js-frontend/reference/components/authentication/google-one-tap.md#properties)

#### `openGoogleOneTap()` usage

filename: main.js
```js
import { 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.

```typescript
function closeGoogleOneTap(): void
```

#### `closeGoogleOneTap()` usage

filename: main.js
```js
import { 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.

```typescript
function authenticateWithGoogleOneTap(
  props?: AuthenticateWithGoogleOneTapParams,
): Promise<SignInResource | SignUpResource>
```

#### `AuthenticateWithGoogleOneTapParams`

| Name   | Type   | Description                                                  |
| ------ | ------ | ------------------------------------------------------------ |
| token? | string | A Google authentication token from Google identity services. |

#### `authenticateWithGoogleOneTap()` usage

filename: main.js
```js
import { 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()](https://clerk.com/docs/js-frontend/reference/components/authentication/google-one-tap.md#authenticate-with-google-one-tap). Also calls [Clerk.setActive()](https://clerk.com/docs/js-frontend/reference/objects/clerk.md#set-active) and performs a custom navigation if given a custom navigation function.

```typescript
function handleGoogleOneTapCallback(
  signInOrUp: SignInResource | SignUpResource,
  params: HandleOAuthCallbackParams,
  customNavigate?: (to: string) => Promise<unknown>,
): Promise<unknown>
```

See [authenticateWithGoogleOneTap() usage](https://clerk.com/docs/js-frontend/reference/components/authentication/google-one-tap.md#authenticate-with-google-one-tap-usage) for an example of how to use `handleGoogleOneTapCallback()`.

#### `handleGoogleOneTapCallback()` params

| Name            | Type                              | Description                                                                                                                                                          |
| --------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| signInOrUp      | SignInResource | SignUpResource  | The SignIn or SignUp object returned from authenticateWithGoogleOneTap().                                                                                            |
| params          | HandleOAuthCallbackParams         | 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. |
| 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.                              |

## Properties

| Name                    | Type    | Description                                                                                                                                                                                                                                      |
| ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| cancelOnTapOutside?     | boolean | If true, the One Tap prompt closes automatically if the user clicks outside of the prompt. Defaults to true.                                                                                                                                     |
| itpSupport?             | boolean | If 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?           | boolean | 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. Defaults to true                                                                                        |
| signInForceRedirectUrl? | string  | 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. |
| signUpForceRedirectUrl? | string  | 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. |

## Limitations

- If your application will use the Google API on behalf of your users, the `<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](https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown) that prevents you from rendering it again for a period of time. To bypass the cooldown, remove the `g_state` cookie.

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)