Google is deprecating old sign-in button in favor of the new one. I have a single page mini app where the server just returns static page content. The page requires user to sign in and handles the returned token on the client side. Old button handeld the case of the page reload quite well, calling the callback with the new token righ away. However, the new button does not seem to handle page reload. When using JavaScript API with HTML like:
<div id="parent" />
<script>
function initGoogleSignIn() {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
auto_select: true,
callback: onSignIn,
});
google.accounts.id.renderButton(document.getElementById('parent'),{});
}
function onSignIn(payload) {
let unverifiedResponsePayload = JSON.parse(atob(payload.credential.split('.')[1])); //this is just an example - instead you should _verify_ the token before any actual use
console.log(unverifiedResponsePayload.email);
}
</script>
<script src="https://accounts.google.com/gsi/client" onload="initGoogleSignIn()"></script>
According to the documentation setting auto_select to true should cause "an ID token [...] automatically returned without any user interaction when there's only one Google session that has approved your app before." However, signing in and then doing page reload does not call the callback. Old button does call the callback in alike setup.
The question is how to achieve the old behavior of getting the token without user interaction on the page reload with the new button?
What I found out is that one can configure "One Tap" which would cause the callback to be called on the page reload, but only after displaying One Tap block and several seconds delay. I still wonder if this is an intended behavior which is just not properly documented or the doc is correct and the behavior is to be fixed by Google in the library.
Here is how initGoogleSignIn function can be changed in order to use One Tap:
function initGoogleSignIn() {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
auto_select: true,
callback: onSignIn,
prompt_parent_id: 'parent', //DOM ID of the container element for One Tap block
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment() || (notification.isDismissedMoment() && notification.getDismissedReason() != 'credential_returned')) {
// no sign-in happened, display the button
google.accounts.id.renderButton(document.getElementById('parent'),{});
}
});
}
This approach still adds a noticeable delay (>4 seconds in my case) for the callback to be called. Old button did this much faster and without any visual representation.