Sign In with Google's Button

GoogleSignInButton renders Google’s own Sign in with Google button. Google draws it, in the user’s language and following its branding guidelines, and hands you an ID token when the user signs in. It’s the quickest way to add Google sign-in, and the one Google recommends.

Note

The plugin registers the component globally, and the Nuxt module auto-imports it, so the import below is only there for your editor. In Nuxt, import types from nuxt-vue3-google-signin.

Add the button

LoginButton.vue

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

// handle success event
const handleLoginSuccess = ({ credential }: CredentialSuccessResponse) => {
  // An ID token (JWT). Send it to your server and verify it there.
  console.log("ID token", credential);
};

// handle an error event
const handleLoginError = (response: CredentialResponse) => {
  console.error("Google returned no credential", response);
};
</script>

<template>
  <GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  ></GoogleSignInButton>
</template>

This renders:

Sign in, then check the browser console for the ID token.

• @success receives { credential }, the ID token, a JWT.
• @error runs when Google responds without a credential.

The button waits for Google’s script and your client ID. Until both are there, its container keeps the button’s height, so the page doesn’t jump.

Send the token to your server

The credential says who the user is, but only once your server has checked Google’s signature on it. Post it to your API, verify it there and start a session: Verify users on your server has the client and server code for Vue with Express and for Nuxt.

Style the button

Google’s button is drawn in an iframe, so CSS can’t restyle it. Its props choose from Google’s designs instead:

<GoogleSignInButton
  theme="filled_blue"
  size="large"
  shape="pill"
  text="continue_with"
  :width="320"
  @success="onSuccess"
/>

Prop	Values
type	standard, or icon for the G logo alone
theme	outline, filled_blue, filled_black
size	large, medium, small
text	signin_with, signup_with, continue_with, signin
shape	rectangular, pill, circle, square
width	Minimum width in pixels, up to 400

Try every combination live in the component playground. If you need a design Google doesn’t offer, build a custom button.

Tip

A white box around the button usually means a color scheme conflict. Set color-scheme: light on the button’s container.

Show One Tap with the button

Add one-tap and the button also shows Google’s One Tap prompt, for users who would rather not click. Both report to the same @success:

<GoogleSignInButton one-tap auto-select @success="onSuccess" />

auto-select signs a returning user in without a click when they have only one Google session that approved your app. To show One Tap on pages without a button, use useOneTap.

Show who signed in

To greet the user before your server responds, read the token with decodeCredential:

import { decodeCredential } from "vue3-google-signin";

const onSuccess = ({ credential }: CredentialSuccessResponse) => {
  const { name, picture } = decodeCredential(credential);
};

It doesn’t check the signature, so use it for display only.

Limit it to your Workspace domain

hd="example.com" makes Google offer only accounts from that domain. It’s a hint for Google’s UI, so check the hd claim on your server as well, as Verify users shows.