One Tap Login

Automatically

Google One Tap login is another way to quickly onboard users. It displays a small dialog to the side, or a popup if the dialog’s visibility is limited.

Use the useOneTap composable. It triggers the One Tap prompt automatically once the Google API has loaded.

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

Manually

You may want to trigger the One Tap flow manually. Use the values returned by useOneTap for this.

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