gapi.auth2.getAuthInstance().isSignedIn.listen() doesn't work

Question

I am using OAuth2.0 in google drive api authentication. I have an isSignedIn listener that has afterSignIn as a callback.
My problem: after signing in, afterSignIn() function is not fired. Does someone know how to fix this?

function googleDriveAuthentication($rootScope){
    var API_KEY = '...'
    var CLIENT_ID = '...';
    var SCOPES = 'https://www.googleapis.com/auth/drive';
    this.authenticate = function(){
        gapi.load('client:auth2',authorize);
    }
    function authorize(){
        gapi.client.setApiKey(API_KEY);
        gapi.auth2.init({
            client_id: CLIENT_ID,
            scope: SCOPES
        }).then(function(authResult){
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.isSignedIn.listen(afterSignIn);
            auth2.signIn();
        });
    }
    function afterSignIn(){
        console.log('authenticated successfully');
        $rootScope.authenticated = true;
        $rootScope.$broadcast('authenticated');
        gapi.client.load('drive', 'v3');
    }
}

Answer 1

here afterSignIn is a listener function,listener is a function that takes a boolean value. listen() passes true to this function when the user signs in, and false when the user signs out.

here your function should have a parameter. Refer this doc https://developers.google.com/identity/sign-in/web/listeners

// Listen for sign-in state changes.
auth2.isSignedIn.listen(afterSignIn);

you will have to change your listener function to

var afterSignIn = function (val) {
    console.log('Signin state changed to ', val);
    $rootScope.authenticated = val;
    if(val == true){
    $rootScope.$broadcast('authenticated');
    gapi.client.load('drive', 'v3');
   }
};

Answer 2

In the .then(...), you can retrieve the isSignedIn status:

var btnGoogleLogin = $('#btnGoogleLogin');

gapi.load('auth2', function () {
    auth2 = gapi.auth2.init({
        client_id: 'Google_AUTH_ClientID',
        cookiepolicy: 'single_host_origin'
    }).then(function (authResult) {
        var signedIn = authResult.isSignedIn.get();
        if (signedIn) {
            //Call signedInCallback yourself
            signedInCallback(signedIn);
        } else {
            //Get Callback when Login With Google is clicked and authenticated
            authResult.isSignedIn.listen(signedInCallback);
            
            authResult.attachClickHandler(btnGoogleLogin[0], {}, function (currentUser) {
                //No need to do anything here with currentUser, signedInCallback will be called.
            }, function (error) {
                //Will also get error if the user just closes the popup
                console.log('GAuth Error:', error);
            });
        }

        function signedInCallback(signedIn) {
            console.log('signInCallback', signedIn);

            if (signedIn) {
                var currentUser = authResult.currentUser.get();

                var authResponse = currentUser.getAuthResponse();
                console.log('authResponse', authResponse);
                //Get Token from authResponse
                
                var basicProfile = currentUser.getBasicProfile();
                console.log('basicProfile', basicProfile);
                //Get Email, Name, etc. from basicProfile

                btnGoogleLogin.html("Logged in: <b>" + basicProfile.getName() + "</b>");
                //Post the details to your back-end with ajax or whatever you use
                //Redirect the user
            } else {
                btnGoogleLogin.html("Login with Google");
            }
        }
    });
});