A guide to custom Google Sign-in button

Recently Google has deprecated the Sign-in for Web. Now we have to add login using Google Identity Series(GSI).

With that change, we cannot create a complete custom button by following the documentation, we only have a code generator for the new button with some properties to custom it, like text, logo alignment and width(max width is 400 pixels).

Google button generator with limited options.

After that, you have two options to follow, leave Google button different from other platform buttons or customize every other sign-in button to make it looks like Google Sign-in Button.

Custom buttons compared to new Google Sign-in button.

How to fix this problem?

I spent some time to understand how things work and since this new button is rendered inside an iframe, you cannot just send a javascript click to button and fake it inside you application.

Important: You will need a Google Client ID to start with this tutorial, you probably already have this one, but if you don’t, here is how to get a fresh new one Client ID for your project.

So, how we can do that? Here is my solution:

1 — Include GSI library at your entry point file:

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

2— Initialize Google Sign-in:

const googleLoginCallback = (response) => {
// handle JWT token inside response...
// https://developers.google.com/identity/gsi/web/guides/handle-credential-responses-js-functions#handle_credential_response
};


// https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration
window.google.accounts.id.initialize({
  client_id: YOUR_GOOGLE_CLIENT_ID,
  ux_mode: "popup",
  callback: googleLoginCallback,
});

3 — Create a fake button wrapper:

const createFakeGoogleWrapper = () => {
  const googleLoginWrapper = document.createElement("div");
  // Or you can simple hide it in CSS rule for custom-google-button
  googleLoginWrapper.style.display = "none";
  googleLoginWrapper.classList.add("custom-google-button");

  // Add the wrapper to body
  document.body.appendChild(googleLoginWrapper);
  
  // Use GSI javascript api to render the button inside our wrapper
  // You can ignore the properties because this button will not appear
  window.google.accounts.id.renderButton(googleLoginWrapper, {
    type: "icon",
    width: "200",
  });

  const googleLoginWrapperButton =
    googleLoginWrapper.querySelector("div[role=button]");

  return {
    click: () => {
      googleLoginWrapperButton.click();
    },
  };
};

// Now we have a wrapper to click
const googleButtonWrapper = createFakeGoogleWrapper();
// ...
// ...
// ...

4 — Create your custom button:

// A complete custom button
<script>
  // ...
  // ...
  // ...
  // Now we have a wrapper to click
  const googleButtonWrapper = createFakeGoogleWrapper();
  window.handleGoogleLogin = () => {
    // Use wrapper click to prevent Illegal invocation exception
    googleButtonWrapper.click();
    // This will open GSI login and after success you will have
    // a response on googleLoginCallback method previously created
  };
</script>

<button class="my-awesome-button" onclick="handleGoogleLogin()">
  Login with new Google Sign-in
</button>

After these 4 simple steps you can have a custom button to use with the new Google Sign-in for web. And we have a login success page below 🎉.

Custom button and success response after login.

PS: If Google creates an official way to fully custom this button I will update this post.

That’s all folks, thanks for reading.

Tchau! 🇧🇷