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 {
  useTokenClient,
  type AuthCodeFlowSuccessResponse,
  type AuthCodeFlowErrorResponse,
} from "vue3-google-signin";

const handleOnSuccess = (response: AuthCodeFlowSuccessResponse) => {
  console.log("Access Token: ", response.access_token);
};

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

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

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

Options

/**
 * Auth Code Flow Options
 *
 * @export
 * @interface AuthCodeFlowOptions
 * @extends {(Omit<TokenClientConfig, "client_id" | "scope" | "callback">)}
 */
export interface AuthCodeFlowOptions
  extends Omit<TokenClientConfig, "client_id" | "scope" | "callback"> {
  /**
   * On success callback
   *
   * @memberof AuthCodeFlowOptions
   */
  onSuccess?: (response: AuthCodeFlowSuccessResponse) => void;

  /**
   * On error callback
   *
   * @memberof AuthCodeFlowOptions
   */
  onError?: (errorResponse: AuthCodeFlowErrorResponse) => void;

  /**
   * Authorization scopes
   *
   * @type {(MaybeRef<string> | MaybeRef<string[]>)}
   * @see https://developers.google.com/identity/protocols/oauth2/scopes
   * @memberof ImplicitFlowOptions
   */
  scope?: MaybeRef<string> | MaybeRef<string[]>;
}

Returns

export interface UseTokenClientReturn {
  /**
   * Is script ready to be used?
   *
   * @type {Readonly<Ref<boolean>>}
   * @memberof UseTokenClientReturn
   */
  isReady: Readonly<Ref<boolean>>;

  /**
   * Invoke login flow. You can provide a `OverridableTokenClientConfig` to override the login flow options.
   *
   * @memberof UseTokenClientReturn
   */
  login: (overrideConfig?: OverridableTokenClientConfig) => void | undefined;
}