I have migrated from the old "Sign In With Google" to the new one. https://developers.google.com/identity/gsi/web/guides/display-button#html
I chose to use the JavaScript approach, so this is the code I used.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
With this code, I was able to render the sign in button. However, the problem is that the width of the button is fixed and it cannot be changed.
How can I change the width of the button? Or, is there any way I can make the button by myself and assign only the login function to it?