How to customize a new google signin button?

Question

Google recently announced a new way of user-signing-in here.

https://developers.google.com/identity/gsi/web?hl=en

With this tutorial, the button was created by adding HTML code or javascript.

which looks like,

But since the button is all created and rendered in a new Iframe, I can’t customize the button style as I want.

Is there any way to change the button style as it was offered before?

Previously, I used

window.gapi.load('auth2', () => {
    const auth2 = window.gapi.auth2.init(options);
    auth2.attachClickHandler(
      idButtonRef.current,
      {},
      onSuccessCallback,
      onFailCallback,
    );
  });

idButtonRef.current is the button and all I need was just attach the button and eventlistener as the above code shows. So I was able to create the button style as I want.

Is there a way to do this with a new way of google user signing?

Answer 1

It's my own (and not elegant) way to customize button. I make "right" Google button invisible and then add click handler to my custom button. We need to trigger click() on div with role=button attribute.

My example with plain JavaScript, but you should easily make something similar with React.js:

CSS:

.g_id_signin {
    display: none;
}

HTML:

<div id="g_id_onload"
     data-client_id="{{GOOGLE_CLIENT_ID}}"
     data-login_uri="http://localhost:3000/google"
     data-ux_mode="redirect">
</div>

<div class="g_id_signin"
     data-type="icon"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

<button id="custom-google-btn">Continue with Google</button>

JavaScript:

const googleBtn = document.getElementById('custom-google-btn');

googleBtn.addEventListener('click', () => {
    document.querySelector('.g_id_signin div[role=button]').click();
});