Google+ signinCallback called twice and losing authresult in process

Question

There is a bug in my code. I am able to sign in and retrieve user information. But the signinCallback is called again(I don't know how). And it shows User information that I had earlier is gone! Here is the HTML side:

<span id="signinButton">
    <span
        class="g-signin"
        data-callback="signinCallback"
        data-clientid="CLIENT_ID"
        data-cookiepolicy="single_host_origin"
        data-requestvisibleactions="http://schemas.google.com/AddActivity"
        data-scope="https://www.googleapis.com/auth/plus.profile.emails.read"
        data-width="standard"
        data-height="short">
    </span>
</span>

and here is the javascript side:

var AuthStates = {
  google: null
};

function signinCallback(authResult) {
    console.dir(authResult);
    console.log('Sign-in state: ' + authResult['error']+authResult['access_token']);
    AuthStates.google = authResult;
    console.log('signinCallback');
    chooseAuthProvider();
}

function chooseAuthProvider() {
  if (AuthStates.google && AuthStates.facebook) {
    if (AuthStates.google['access_token']) {
      // Signed in with Google, you can now use Google+ APIs.
      console.log(AuthStates.google);
      gapi.client.load('plus','v1', function(){
        var request = gapi.client.plus.people.get({
          'userId': 'me'
        }); 
        request.execute(function(resp) {
          document.getElementById('cname').value =resp.displayName;
          document.getElementById('cemail').value =resp.emails[0].value;
          console.log('Retrieved profile for:' + resp.displayName + ' ' + resp.emails[0].value);
        });
      });
}
}

It gives this response to the console on the second signinCallback

Sign-in state: user_signed_outundefined
signinCallback

Answer 1

Try updated instructions at "Integrating Google Sign-In into your web app" page.

Answer 2

Your call to request.execute() in your callback method is causing the callback method to be re-triggered with "user_signed_out" value in the error property.

If you take a look at the Google documentation "Signing out the user" it reads:

When the user refreshes the page or navigates to another part of your website, the callback will fire with user_signed_out value in the error property until the user clicks the sign-in button again.

Hence I believe it is your call to request.execute() which is triggering the second call to the callback method.

You can guard against this second call to the callback by putting a condition within the callback method e.g.

function signinCallback(authResult) {
 if (authResult['status']['signed_in']) {
  console.dir(authResult);
  console.log('Sign-in state: ' + authResult['error']+authResult['access_token']);
  AuthStates.google = authResult;
  console.log('signinCallback');
  chooseAuthProvider();
 }
}

See Google's documentation on "Monitoring the user's session state" for an example of the previously mentioned guard conditions.