useCodeClient

Initiate login with auth code flow using code 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 {
  useCodeClient,
  type CodeClientSuccessResponse,
  type CodeClientErrorResponse,
} from "vue3-google-signin";

const handleOnSuccess = async (response: CodeClientSuccessResponse) => {
  // Send the code to your server, which exchanges it for tokens
  await fetch("/api/google/connect", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // Google asks your server to check this header in popup mode
      "X-Requested-With": "XmlHttpRequest",
    },
    body: JSON.stringify({ code: response.code }),
  });
};

const handleOnError = (errorResponse: CodeClientErrorResponse) => {
  console.log("Error: ", errorResponse);
};

const { isReady, login } = useCodeClient({
  onSuccess: handleOnSuccess,
  onError: handleOnError,
  // other options
});
</script>

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

Options

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

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: CodeClientSuccessResponse) => void`	Called with the code response. Send `response.code` to your server and exchange it for tokens.
`onError`	`(response: CodeClientErrorResponse) => 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.
`ux_mode`	`"popup" \| "redirect"`	Use a popup (default) or redirect the whole page.
`redirect_uri`	`string`	Where Google sends the user in redirect mode. Must match an authorized redirect URI. Defaults to the current origin.
`select_account`	`boolean`	Always ask the user to pick an account. Default `false`.

Returns

Property	Type	Description
`isReady`	`Readonly<Ref<boolean>>`	`true` once the client is created.
`login`	`() => void`	Opens Google’s popup, or redirects in redirect mode.
`codeRequestRedirectUrl`	`Readonly<Ref<string \| null>>`	The URL `login()` would open, for opening it yourself, for example in the system browser from Electron.