useTokenClient

Initiate login with implicit grant flow using token client. Return values of the composable can be used to trigger the login flow and determine the readiness of the client. It also provides callbacks such as onSuccess and onError that can be used to obtain the results from the login client.

Usage

<script setup lang="ts">
import { ref } from "vue";
import {
  useTokenClient,
  type TokenClientSuccessResponse,
  type TokenClientErrorResponse,
} from "vue3-google-signin";

const pending = ref(false);

const handleOnSuccess = (response: TokenClientSuccessResponse) => {
  pending.value = false;
  console.log("Access Token: ", response.access_token);
};

const handleOnError = (errorResponse: TokenClientErrorResponse) => {
  pending.value = false;
  console.log("Error: ", errorResponse);
};

const { isReady, login } = useTokenClient({
  onSuccess: handleOnSuccess,
  onError: handleOnError,
  // The user closed the popup, or it was blocked
  onNonOAuthError: () => (pending.value = false),
  // other options
});

const signIn = () => {
  pending.value = true;
  login();
};
</script>

<template>
  <button :disabled="!isReady || pending" @click="signIn">
    Sign in with Google
  </button>
</template>

Options

Every option is optional. Apart from the callbacks, options are passed to Google’s TokenClientConfig.

Option	Type	Description
`clientId`	`MaybeRef<string>`	Client ID for this client. Overrides the plugin’s.
`scope`	`MaybeRef<string \| string[]>`	Scopes to request, on top of `openid email profile`. Changing a ref re-creates the client.
`onSuccess`	`(response: TokenClientSuccessResponse) => void`	Called with the token response: `access_token`, `expires_in`, `scope` and so on.
`onError`	`(response: TokenClientErrorResponse) => void`	Called with an OAuth error: `error`, `error_description`, `error_uri`.
`onNonOAuthError`	`(error: NonOAuthError) => void`	Called when the flow ends without an OAuth response. `error.type` is `popup_closed`, `popup_failed_to_open` or `unknown`. Use it to re-enable your button.
`include_granted_scopes`	`boolean`	Keep scopes the user already granted when you ask for more. Default `true`.
`login_hint`	`string`	Skip account selection for a known user: their email address or ID token `sub`.
`hd`	`string`	Limit accounts to a Google Workspace domain.
`state`	`string`	Returned unchanged in the response.
`prompt`	`"" \| "none" \| "consent" \| "select_account"`	What to show the user. Default `select_account`.

Returns

Property	Type	Description
`isReady`	`Readonly<Ref<boolean>>`	`true` once the client is created.
`login`	`(overrides?: OverridableTokenClientConfig) => void`	Opens Google’s popup. `overrides` can change `scope`, `prompt`, `login_hint`, `state` and `include_granted_scopes` for this request.