One Tap Login

Automatically

Google One Tap login is another way to quickly onboard users into an application. This displays a little dialog to the side or a popup if the visibility of the dialog is limited.

You can easily use One Tap login using useOneTap composable. This will trigger the one tap prompt automatically once the Google API loaded.

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
});

INFO

If you close down the automatic one tap login displayed before, you might not see it for a while because Google enforces an exponential cooldown

Manually

You may want to trigger One Tap flow manually. This can be achived by using the returns of useOneTap.

TIP

💡 To disable automatic prompt you can set disableAutomaticPrompt: true property.

<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()">
    Trigger One Tap Login Manually
  </button>
</template>

INFO

If you close down one tap login displayed before, you might not see it for a while because Google enforces an exponential cooldown.

Even you click the button it may not trigger due to cooldown.