useOneTap

This composable provides automatic login and manual control over the flow initialization. For more refer the guide.

Usage

Automatic

<script setup lang="ts">
import { useOneTap, type CredentialResponse } from "vue3-google-signin";

useOneTap({
  onSuccess: (response: CredentialResponse) => {
    console.log("Success:", response);
  },
  onError: () => console.error("Error with One Tap Login"),
  // options
});
</script>

<template>
  <!-- nothing to render: Google shows its own One Tap prompt -->
</template>

Manual Trigger

<script setup lang="ts">
import { useOneTap, type CredentialResponse } from "vue3-google-signin";

const { isReady, login } = useOneTap({
  disableAutomaticPrompt: true,
  onSuccess: (response: CredentialResponse) => {
    console.log("Success:", response);
  },
  onError: () => console.error("Error with One Tap Login"),
  // options
});
</script>

<template>
  <button :disabled="!isReady" @click="() => login()">
    Sign in with One Tap
  </button>
</template>

Options

Every option is optional. Options typed MaybeRef also accept a ref, and changing it re-initializes One Tap.

Option	Type	Description
`clientId`	`MaybeRef<string>`	Client ID for this prompt. Overrides the plugin’s.
`onSuccess`	`(response: CredentialSuccessResponse) => void`	Called with the credential response. Decode `response.credential` with `decodeCredential`.
`onError`	`(response: CredentialResponse) => void`	Called when Google responds without a credential.
`onPromptMomentNotification`	`(notification: PromptMomentNotification) => void`	Called as the prompt is displayed, skipped or dismissed. See `PromptMomentNotification`.
`onNativeCallback`	`(response: NativeCallbackResponse) => void`	Handles a password credential picked from the browser’s password manager.
`onIntermediateIframeCloseCallback`	`() => void`	Called when the user closes intermediate iframe One Tap.
`disableAutomaticPrompt`	`MaybeRef<boolean>`	Don’t prompt on mount. Call `login()` to show the prompt. Default `false`.
`autoSelect`	`MaybeRef<boolean>`	Sign returning users in without a click when only one Google session has approved your app.
`loginUri`	`MaybeRef<string>`	Your login endpoint, for the redirect UX.
`cancelOnTapOutside`	`MaybeRef<boolean>`	Close the prompt when the user clicks outside it. Default `true`.
`promptParentId`	`MaybeRef<string>`	DOM ID of the element to show the prompt in.
`nonce`	`MaybeRef<string>`	Random string included in the ID token, to prevent replay attacks.
`context`	`MaybeRef<"signin" \| "signup" \| "use">`	Changes the prompt’s wording.
`stateCookieDomain`	`MaybeRef<string>`	Parent domain to share One Tap state across subdomains.
`allowedParentOrigin`	`MaybeRef<string \| string[]>`	Origins allowed to embed One Tap in an intermediate iframe.
`itpSupport`	`MaybeRef<boolean>`	Upgraded One Tap UX on browsers with Intelligent Tracking Prevention.
`loginHint`	`MaybeRef<string>`	Skip account selection for a known user: their email address or ID token `sub`.
`hd`	`MaybeRef<string>`	Limit accounts to a Google Workspace domain, or `*` for any Workspace account.
`colorScheme`	`MaybeRef<"default" \| "light" \| "dark">`	Color scheme of the prompt. Defaults to the system setting.
`essentialClaims`	`MaybeRef<string>`	Extra claims for the ID token, such as `"auth_time, amr"`.

Returns

Property	Type	Description
`isReady`	`Readonly<Ref<boolean>>`	`true` once Google’s script has loaded and One Tap is initialized.
`login`	`() => void`	Shows the prompt. Does nothing until `isReady` is `true`.