Logging out of Google when refreshing the page

Question

Logging out of Google when refreshing the page

I am currently working with the setup outlined below:

.service('googleService', ['$q', function ($q) {
    var self = this;

    this.load = function(){
        var deferred = $q.defer();
        gapi.load('auth2', function(){
            var auth2 = gapi.auth2.init();
            auth2.then(function(){ deferred.resolve(); });
            addAuth2Functions(auth2);
        });
        return deferred.promise;
    };

    function addAuth2Functions(auth2) {

        self.isSignedIn = function(){
            return auth2.isSignedIn.get();
        }

        self.signOut = function(){
            var deferred = $q.defer();
            auth2.signOut().then(deferred.resolve, deferred.reject);
            return deferred.promise;
        };

        self.getProfile = function() {
            if(auth2.isSignedIn.get()) return { signed_in: true, access_token: auth2.currentUser.get().Zi.id_token,profile: auth2.currentUser.get().getBasicProfile() };
            else return { signed_in: false };
        }

    }

}])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/cloud');

    var guest = ['$q', '$rootScope', '$stateParams', 'googleService', function ($q, $rootScope, $stateParams, googleService) { 

        var deferred = $q.defer(); 

        googleService.load().then(function(){ 
            $q.when(googleService.isSignedIn()).then(function(r){ 
                if(r) deferred.reject(); 
                else deferred.resolve(); 
            }) 
        }); 

        return deferred.promise; 
    }];

    var authenticated = ['$q', '$rootScope', '$stateParams', 'googleService', function ($q, $rootScope, $stateParams, googleService) { 

        var deferred = $q.defer(); 

        googleService.load().then(function(){ 
            $q.when(googleService.getProfile()).then(function(p) { 
                if(p.signed_in) { 
                    deferred.resolve(); 
                    localStorage['access_token'] = p.access_token;
                    $rootScope.profile = p.profile; 
                } else deferred.reject(); 
            }) 
        }); 

        return deferred.promise; 
    }];

    $stateProvider

    .state('login', {
        url: '/',
        views: { 'main': { templateUrl: 'pages/templates/login.html', controller: 'login' } },
        resolve: { authenticated: guest }
    })

    .state('cloud', {
        url: '/cloud',
        views: { 'main': { templateUrl: 'pages/templates/cloud.html', controller: 'cloud' } },
        resolve: { authenticated: authenticated }
    })

})

.controller('login', ['$rootScope', '$scope', '$q', '$state', 'googleService', function ($rootScope, $scope, $q, $state, googleService) {
    $scope.options = { 'onsuccess': function(response) { $state.go('cloud'); } }
}])

.controller('cloud', ['$rootScope', '$scope', '$timeout', '$http', '$httpParamSerializerJQLike', function ($rootScope, $scope, $timeout, $http, $httpParamSerializerJQLike) { 

}]);

The issue I am facing is that after signing in using the Google sign-in button, googleService.getProfile() correctly indicates that I am signed in. However, upon refreshing the page, calling googleService.isSignedIn() returns false.

Is anyone able to spot a potential reason for this behavior and suggest any additional steps needed to ensure that Google remembers my sign-in status?

javascript angularjs google-signin

Answer 1

Answer №1

It seems like the main issue you're facing is the repetitive invocation of gapi.auth2.init() through googleService.load().

My recommendation would be to save the initialization promises for future use instead of generating them multiple times.

Additionally, you should include a condition to handle an expired access token.

.service('googleService', ['$q', function ($q) {
    const auth2InitPromise = $q(function(resolve) {
        gapi.load('auth2', function() {
            var auth2 = gapi.auth2.init();
            auth2.then(function() {
                resolve();
            });
        })
    });

    this.isSignedIn = function() {
        return auth2InitPromise.then(function() {
            return gapi.auth2.getAuthInstance().isSignedIn.get();
        });
    };

    this.signOut = function() {
        return auth2InitPromise.then(function() {
            const auth2 = gapi.auth2.getAuthInstance();
            return $q(function(resolve, reject) {
                auth2.signOut().then(resolve, reject);
            });
        });
    };

    this.getProfile = function() {
        return this.isSignedIn().then(function(isSignedIn) {
            if (isSignedIn) {
                const currentUser = gapi.auth2.getAuthInstance().currentUser.get();
                const authResponse = currentUser.getAuthResponse();
                return $q.when(authResponse.expires_at > Date.now() ? authResponse : currentUser.reloadAuthResponse()).then(function(ar) {
                    return {
                        signed_in: true,
                        access_token: ar.id_token,
                        profile: currentUser.getBasicProfile()
                    }                        
                });
            } else {
                return { signed_in: false };
            }
        });
    };

}])

Now, each method in your service (such as isSignedIn, signOut, and getProfile) returns a promise that resolves only after the initialization of the auth2 API, which now occurs just once.

Here's an example:

var authenticated = ['$q', '$rootScope', '$window', 'googleService', function ($q, $rootScope, $window, googleService) {
    return googleService.getProfile().then(function(p) {
        if (p.signed_in) {
            $window.localStorage.setItem('access_token', p.access_token);
            $rootScope.profile = p.profile;
            return true; // Resolvers should always resolve with something   
        } else {
            return $q.reject();
        }
    });
}];

Answer 2

It seems like the main issue you're facing is the repetitive invocation of gapi.auth2.init() through googleService.load().

My recommendation would be to save the initialization promises for future use instead of generating them multiple times.

Additionally, you should include a condition to handle an expired access token.

.service('googleService', ['$q', function ($q) {
    const auth2InitPromise = $q(function(resolve) {
        gapi.load('auth2', function() {
            var auth2 = gapi.auth2.init();
            auth2.then(function() {
                resolve();
            });
        })
    });

    this.isSignedIn = function() {
        return auth2InitPromise.then(function() {
            return gapi.auth2.getAuthInstance().isSignedIn.get();
        });
    };

    this.signOut = function() {
        return auth2InitPromise.then(function() {
            const auth2 = gapi.auth2.getAuthInstance();
            return $q(function(resolve, reject) {
                auth2.signOut().then(resolve, reject);
            });
        });
    };

    this.getProfile = function() {
        return this.isSignedIn().then(function(isSignedIn) {
            if (isSignedIn) {
                const currentUser = gapi.auth2.getAuthInstance().currentUser.get();
                const authResponse = currentUser.getAuthResponse();
                return $q.when(authResponse.expires_at > Date.now() ? authResponse : currentUser.reloadAuthResponse()).then(function(ar) {
                    return {
                        signed_in: true,
                        access_token: ar.id_token,
                        profile: currentUser.getBasicProfile()
                    }                        
                });
            } else {
                return { signed_in: false };
            }
        });
    };

}])

Now, each method in your service (such as isSignedIn, signOut, and getProfile) returns a promise that resolves only after the initialization of the auth2 API, which now occurs just once.

Here's an example:

var authenticated = ['$q', '$rootScope', '$window', 'googleService', function ($q, $rootScope, $window, googleService) {
    return googleService.getProfile().then(function(p) {
        if (p.signed_in) {
            $window.localStorage.setItem('access_token', p.access_token);
            $rootScope.profile = p.profile;
            return true; // Resolvers should always resolve with something   
        } else {
            return $q.reject();
        }
    });
}];

Answer 3

Answer №2

Ensure that the authenticated is added as a dependency in your cloud controller. Additionally, within your googleService, make sure to call defer.resolve() only after setting

localStorage['access_token'] = p.access_token;

and $rootScope.profile = p.profile;

Answer 4

Ensure that the authenticated is added as a dependency in your cloud controller. Additionally, within your googleService, make sure to call defer.resolve() only after setting

localStorage['access_token'] = p.access_token;

and $rootScope.profile = p.profile;

Answer 5

Answer №3

Hello, Please implement the following modifications in your code and inform me of the results.

.service('googleService', ['$q', function ($q) {
    var self = this;

    this.load = function(){
        gapi.load('auth2', callback);            
    };

    function callback(){
        var deferred = $q.defer();
        gapi.auth2.init()//insert your client credentials here
        .then(function(){ deferred.resolve(); });
        return deferred.promise;
    }


    self.isSignedIn=function (auth2){
        return auth2.isSignedIn.get();
    };

    self.signOut =function(auth2){
        var deferred = $q.defer();
        auth2.signOut().then(deferred.resolve, deferred.reject);
        return deferred.promise;
    };

    self.getProfile= function(auth2) {
        if(auth2.isSignedIn.get()) return { signed_in: true, access_token: auth2.currentUser.get().Zi.id_token,profile: auth2.currentUser.get().getBasicProfile() };
        else return { signed_in: false };
    };     


}])

   .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

       $locationProvider.html5Mode(true);
       $urlRouterProvider.otherwise('/cloud');



       var guest = ['$q', '$rootScope', '$stateParams', 'googleService', function ($q, $rootScope, $stateParams, googleService) { 

           var deferred = $q.defer(); 
           googleService.load().then(function(){
               googleService.isSignedIn(gapi.auth2.getAuthInstance()).then(function(r){ 
                   if(r) deferred.reject(); 
                   else deferred.resolve(); 
               });   
           });



           return deferred.promise; 
       }];

       var authenticated = ['$q', '$rootScope', '$stateParams', 'googleService', function ($q, $rootScope, $stateParams, googleService) { 

           var deferred = $q.defer(); 

           googleService.load().then(function(){
               googleService.getProfile(gapi.auth2.getAuthInstance()).then(function(p) { 
                   if(p.signed_in) { 
                       deferred.resolve(); 
                       localStorage['access_token'] = p.access_token;
                       $rootScope.profile = p.profile; 
                   } else deferred.reject(); 
               });   
           });            

           return deferred.promise; 
       }];

       $stateProvider

       .state('login', {
           url: '/',
           views: { 'main': { templateUrl: 'pages/templates/login.html', controller: 'login' } },
           resolve: { authenticated: guest }
       })

       .state('cloud', {
           url: '/cloud',
           views: { 'main': { templateUrl: 'pages/templates/cloud.html', controller: 'cloud' } },
           resolve: { authenticated: authenticated }
       })

   })

   .controller('login', ['$rootScope', '$scope', '$q', '$state', 'googleService', function ($rootScope, $scope, $q, $state, googleService) {
       $scope.options = { 'onsuccess': function(response) { $state.go('cloud'); } }
   }])

   .controller('cloud', ['$rootScope', '$scope', '$timeout', '$http', '$httpParamSerializerJQLike', function ($rootScope, $scope, $timeout, $http, $httpParamSerializerJQLike) { 

   }]);

Answer 6

Hello, Please implement the following modifications in your code and inform me of the results.

.service('googleService', ['$q', function ($q) {
    var self = this;

    this.load = function(){
        gapi.load('auth2', callback);            
    };

    function callback(){
        var deferred = $q.defer();
        gapi.auth2.init()//insert your client credentials here
        .then(function(){ deferred.resolve(); });
        return deferred.promise;
    }


    self.isSignedIn=function (auth2){
        return auth2.isSignedIn.get();
    };

    self.signOut =function(auth2){
        var deferred = $q.defer();
        auth2.signOut().then(deferred.resolve, deferred.reject);
        return deferred.promise;
    };

    self.getProfile= function(auth2) {
        if(auth2.isSignedIn.get()) return { signed_in: true, access_token: auth2.currentUser.get().Zi.id_token,profile: auth2.currentUser.get().getBasicProfile() };
        else return { signed_in: false };
    };     


}])

   .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

       $locationProvider.html5Mode(true);
       $urlRouterProvider.otherwise('/cloud');



       var guest = ['$q', '$rootScope', '$stateParams', 'googleService', function ($q, $rootScope, $stateParams, googleService) { 

           var deferred = $q.defer(); 
           googleService.load().then(function(){
               googleService.isSignedIn(gapi.auth2.getAuthInstance()).then(function(r){ 
                   if(r) deferred.reject(); 
                   else deferred.resolve(); 
               });   
           });



           return deferred.promise; 
       }];

       var authenticated = ['$q', '$rootScope', '$stateParams', 'googleService', function ($q, $rootScope, $stateParams, googleService) { 

           var deferred = $q.defer(); 

           googleService.load().then(function(){
               googleService.getProfile(gapi.auth2.getAuthInstance()).then(function(p) { 
                   if(p.signed_in) { 
                       deferred.resolve(); 
                       localStorage['access_token'] = p.access_token;
                       $rootScope.profile = p.profile; 
                   } else deferred.reject(); 
               });   
           });            

           return deferred.promise; 
       }];

       $stateProvider

       .state('login', {
           url: '/',
           views: { 'main': { templateUrl: 'pages/templates/login.html', controller: 'login' } },
           resolve: { authenticated: guest }
       })

       .state('cloud', {
           url: '/cloud',
           views: { 'main': { templateUrl: 'pages/templates/cloud.html', controller: 'cloud' } },
           resolve: { authenticated: authenticated }
       })

   })

   .controller('login', ['$rootScope', '$scope', '$q', '$state', 'googleService', function ($rootScope, $scope, $q, $state, googleService) {
       $scope.options = { 'onsuccess': function(response) { $state.go('cloud'); } }
   }])

   .controller('cloud', ['$rootScope', '$scope', '$timeout', '$http', '$httpParamSerializerJQLike', function ($rootScope, $scope, $timeout, $http, $httpParamSerializerJQLike) { 

   }]);

Logging out of Google when refreshing the page

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason behind the improved performance I experience in Chrome with the Developer Console open?

Error: The function does not exist for collections.Map

Issue with $watch in Angular Modal not triggering

What is the best way to automatically remove a Firebase database entry when a user has been inactive for a period of time, without logging out but simply not accessing the page for an extended duration?

Not able to scroll to top in Angular 2 when changing routes

Retrieve all elements from an array that have the highest frequency of occurrence

Tips for interpreting a JSON object that has been returned

The properties are not compatible with the expected types for a Next.js page

Clicking on "Ng-Click" will add a fresh row to the table using Angular

Error in Webpack 5: Main module not found - Unable to locate './src'

Is there a Rails 3 equivalent to $(document).ready() for ensuring that Highcharts loads correctly?

Scrolling through four limited list items automatically

Disposing of memory in THREE JS when switching between routes in VUE

Error encountered while generating Next.js static website in production

Issue with AngularJS: $scope variables are not properly binding to the view when utilizing ng-repeat functionality

Discover the way to retrieve PHP SESSION variable within JavaScript

The DIV element only becomes visible after a postback occurs

Tips for showcasing overflowing text in a menu list by rotating the item text

Create a vue-based browser extension that spans multiple pages

The predicament encountered with user registration in the realm of Node.js