How to customize a new google signin button? - reactjs

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();
});