Google recently launched its new Google Identity platform and deprecated its old "Google Sign-In for Web" platform. I'm trying to add my own customized Google Sign-In button to a Phaser 3 game using the game framework's canvas-based GUI, but there doesn't seem to be an option to do so. Instead, Google seems to enforce extremely rigid personalization options and use of their own iframe.
With the new Google Identity, how can I create my own customized buttons rather than using Google's iframe? I need the button to scale as an object rendered through canvas rather than an DOM element.
Or, is there any way to change the properties of the button after it's rendered (see below)? Perhaps a workaround is to add a resize eventListener on window and scale the button manually. I don't see an option to even do this.
google.accounts.id.renderButton(document.getElementById('google-login'), {
theme: 'outline',
size: 'large',
type: 'standard',
width: '256', // <--- here
})
pointer-events: noneto allow the clicks to pass through. Kind of fiddly and feels wrong, but it seems to work