Google identity - trigger sign in process on click of custom button

Question

I am trying to integrate the new Google Identity API in my project. I have a custom button lets say a div.

<div class="cust1" onclick="triggerGoogleSignIn">Sign in with Google</div>

Now I want Sign in to happen only on click of this button. I checked the documentation and tried g_id_signin class renderButton method.

But these methods are replacing my custom button look.

triggerGoogleSignIn(){
  ????
}

What method should I call?

Answer 1

In order to get an accesstoken for authorization during your Google API calls, you first authenticate through a OAuth2.0 flow using the following steps:

After loading the library,

<script src="https://accounts.google.com/gsi/client" async defer></script>

you initialize the client by calling :

const tokenClient = google.accounts.oauth2.initTokenClient({
  client_id: "YOUR_GOOGLE_CLIENT_ID",
  scope: "THE_REQUESTED_SCOPES",
  prompt: "SELECT_A_PROMPT_OPTION", // '' | 'none' | 'consent' | 'select_account'
  callback: handleCredentialResponse // your function to handle the response after login. 'access_token' will be returned as property on the response
});

In order to request a new access token, call requestAccessToken.

const overrideConfig = {
  prompt: "SELECT_A_PROMPT_OPTION", // '' | 'none' | 'consent' | 'select_account'
}
tokenClient.requestAccessToken(overrideConfig) // open the prompt, overrideConfig is optional

Types can be found here and installed by executing npm install --save-dev @types/google.accounts

---

If you need an id_token for authentication to sign in into your own application, you can opt for the Sign In With Google button.

If you want to render your own button and trigger the authentication flow through javascript, use the following steps:

Include the client library in your head tag

<script src="https://accounts.google.com/gsi/client" async defer></script>

After loading the library, you initialize with your client_id, and set a callback to handle the response after sign in.

function handleCredentialResponse(response) {
  var id_token = response.credential // validate and decode the JWT credential, using a JWT-decoding library
}

window.onload = function () {
  google.accounts.id.initialize({
    client_id: "YOUR_GOOGLE_CLIENT_ID",
    callback: handleCredentialResponse
  });
}

To sign in, just call the prompt.

google.accounts.id.prompt();

Types can be found here and installed by executing npm install --save-dev @types/google-one-tap

Answer 2

I came across this same thread, with the same problem. With google's previous sign in api, it was a lot easier to "override" a buttons styling, before, there was a built-in function in the gapi library that allowed you to make a custom component a gsi button. Now its not as easy. My first thought was to do something simmilar to what @Prabhu did, but there are some issues if your button doesn't conform to the same size as the GSI button.

What you could do instead

use js's built-in HTMLElement: click() method. The tricky part is making it click the correct element.

How to do it

Insert the GSI script into your html by adding

<script src="https://accounts.google.com/gsi/client" async></script>

To your head, or really anywhere in the page.

Initialize and render the GSI button like normal

google.accounts.id.initialize({
     client_id: "YOUR GOOGLE CLIENT_ID",
     callback: () => {}, // Callback method
})

google.accounts.id.renderButton(
     document.getElementById("gsi_button"), 
     {type: "standard"}
)

Here comes the fun part, we're gonna hide that button completely.

<div id="gsi_button" style="display: none"/>

Then we're gonna "mimic" a click to the correct child component within the gsi button.

onClick() {
     const element: HTMLDivElement | null = document.getElementById("gsi_button").querySelector('[id$="-overlay"]')
     if (element) {
          element.click();
     }
}

Now just link the onClick method to your custom component and there you have it.