How to Stop Google Logon onSuccess() From Firering On Page Load?

Question

I’m using Google Sign-In and have it working, albeit a bit too well. If the user is logged in to Google and opens my logon page the onSuccess() function is automatically triggered without the user pressing the Google logon button. This prevents them from logging in without Google. How can I stop onSuccess() from firing when the page is loaded and only fire when the button is pressed?

To recreate, replace MY_ID with a valid Google client ID, open this page, login and refresh. Each refresh will display user info in the browser console.

<html>

<meta name="google-signin-client_id" content="MY_ID.apps.googleusercontent.com">

<script src="https://apis.google.com/js/api:client.js"></script>

<script src="https://apis.google.com/js/platform.js?onload=renderButton" async="true" defer></script>

<script>
function renderButton() 
{
  gapi.signin2.render('googleBtn', 
                      {
                        'scope': 'profile email',
                        'width': 240,
                        'height': 50,
                        'longtitle': true,
                        'theme': 'dark',
                        'onsuccess': onSuccess,
                      } );
}

function onSuccess(googleUser) 
{
    var authResponse = googleUser.getAuthResponse(true);
    var profile = googleUser.getBasicProfile();


    var expDate = new Date(authResponse.expires_at);
    console.log('Expires Date: ' + expDate);

    console.log('Access Token: ' + authResponse.access_token);                      // The Access Token granted.
    console.log('Scope: ' + authResponse.scope);
    console.log('Id Token: ' + authResponse.id_token);
    console.log('Expires In: ' + authResponse.expires_in + " seconds");             // The number of seconds until the Access Token expires.
    console.log('First Issued At: ' + new Date(authResponse.first_issued_at));      // The timestamp at which the user first granted the scopes requested.
    console.log('Expires Date: ' + expDate);


    console.log('ID: ' + profile.getId());                                          // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
    console.log('Given Name: ' + profile.getGivenName());
    console.log('Family Name: ' + profile.getFamilyName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail());                                    // This is null if the 'email' scope is not present.
}
</script>


<body>

<div  align="center" id="googleBtn" class="customGPlusSignIn"></div>

</body>

</html>

score 4 · Accepted Answer · answered Dec 20 '19 at 21:55

I found another post here that answered the question. Using that I ended up with:

<script src="https://apis.google.com/js/client:platform.js?onload=googleInit" async="true" defer></script>

<meta name="google-signin-client_id" content="**********.apps..googleusercontent.com">


<script>
function googleInit()
{
    gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({});
        element = document.getElementById('googleBtn');
        auth2.attachClickHandler(element, {}, onSuccess, onFailure);
     });
}


function onSuccess(googleUser)
{
    var authResponse = googleUser.getAuthResponse(true);
    var profile      = googleUser.getBasicProfile();
}


function onFailure(error)
{
}

 </script>

<html><body>

    <div id="googleBtn" style="margin-bottom:30px;" align="center" class="g-signin2" data-width="240" data-height="50" data-longtitle="true" data-theme="dark"></div>

</body></html>

I should note that the client Id is specified in the meta tag and not the init function because of the existence of the googleBtn which requires the client id in order to be rendered when the page loads and before googleInit() is invoked. — glez, Dec 21 '19 at 15:06
Thanks for sharing; this was exactly what I was looking for! Here's the official documentation on `attachClickHandler` for others that may be curious: https://developers.google.com/identity/sign-in/web/reference#googleauthattachclickhandlercontainer_options_onsuccess_onfailure — Alexander, Mar 26 '20 at 23:08

How to Stop Google Logon onSuccess() From Firering On Page Load?

1 Answers1

Linked