Creating Custom Buttons

Often, you may want to use a custom designed button to handle Google Sign In. vue3-google-signin provides two composables to create a custom button.

• useTokenClient : Token Model authentication flow
• useCodeClient : Code Model authentication flow

Based on your usecase, you can select the best flow for you.

TIP

💡 To select the proper user authorization model, checkout this guide

With useTokenClient

With Token Model Auth flow an Access Token is returned from Google to the browser, which can be used directly to call Google APIs.

TIP

💡 For backend API requests, you can pass this token from the frontend to backend with a header like x-google-token

Both composables returns isReady and login to work with the authentication flow.

• isReady is a reactive variable you can use to determine whether the Google API properly loaded before triggering the action. It can be used to disable button or do whatever you see fit your application.

• login is a method which can be trigger to initiate the login flow with Google.

In our example code, we have disabled the button until the API properly loaded and triggering the login flow with login function using the button's @click event.

<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>

With useCodeClient

With Code Model authentication flow you are getting an code from Google, which can be verified from a Backend Server to obtain user informations, Access Token, Refresh Token etc.

The usage of this composable is similar to to the above section.

Only difference here is we have added an optional section which calls a backend API to verify the code. Its using body of a POST request to do the verification.

<script setup lang="ts">
import {
  useCodeClient,
  type ImplicitFlowSuccessResponse,
  type ImplicitFlowErrorResponse,
} from "vue3-google-signin";

const handleOnSuccess = async (response: ImplicitFlowSuccessResponse) => {
  // send code to a backend server to verify it.
  console.log("Code: ", response.code);

  // use axios or something to reach backend server
  const result = await fetch("https://YOUR_BACKEND/code/verify", {
    method: "POST",
    body: JSON.stringify({
      code: response.code,
    }),
  });
};

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

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

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

Verify code on the backend

When you obtain a code, the backend needs to verify in order to get the AccessToken/RefreshToken as per previous section.

INFO

💡 This depends on your backend programming language.

But for sake of completeness, we will provide a simple snipppet to do the verification and obtain tokens in Node.js with Express framework.

First of all you will need to obtain the followings from Google Developers Console

• CLIENT_ID
• CLIENT_SECRET
• REDIRECT_URL

You can find them in Your project > APIs & auth > Credentials

Read more about OAuth2 here

Now for Node.js, you need to install google-auth-library package.

npm i -S google-auth-library

This is a sample implementation using ExpressJS.

const { OAuth2Client } = require("google-auth-library");

function getOauth2Client() {
  const oAuth2Client = new OAuth2Client(
    CLIENT_ID,
    CLIENT_SECRET,
    REDIRECT_URL
  );

  return oAuth2Client;
}

// verification endpoint

app.post('/verify/code', (req, res) => {
  try {
    // code comes in the body
    const { code } = req.body;

    // create a new OAuth2 client
    const client = getOauth2Client();

    // verify code and get tokens from it
    const result = await client.getToken(code);

    // result contains `access_token` and optional `refresh_token`
    // to use these credentials we can save them in the client
    client.setCredentials(result.tokens);

    // you can do whatever with the tokens
    console.log(result.tokens);

    return res.json({ tokens: result.tokens });
  } catch (error) {
    return res.status(401).json({ error: error });
  }
})

DANGER

🚨 You must store Refresh Tokens in a secure storage