AngularJs user authentication only happens on the 2nd interaction

Question

I have a AngularJs user authencation built by myself and its working. Everything is working fine. I can login, can check if user has access to a specific page, etc.. Except for the fact the token authentication i's running only on the second interaction i make with the WebApp.

For example, if I change some data on the localStorage (where i'm saving user data) and try to go the an admin page, for example, I'll be able to access that page, but on the next interaction, then I'll get kicked from the page and back to the login process.

What may be happening? This is the code I'm using:

app.js

function getUser() {
    userinfo = JSON.parse(localStorageService.get("user")); //convert string to json
    $scope.userData = userinfo; //Display purpouso only;
};
function checkToken() {
    var userCheckToken = JSON.parse(localStorageService.get("user"));
    $http.post('dist/php/db.php?action=token', userCheckToken)
    .success(function(res){
        userToken = res;
    }).error(function(err){
        alert(feedbackError);
    });
};

$rootScope.$on('$stateChangeStart', function(e, to) {
    if (to.data && to.data.requireLogin) {
        getUser();
        checkToken();
        if (!userinfo) {
            e.preventDefault();
            $state.go('login');
            alert("You need to be loggedin");
        }
        else if (userinfo && !userToken) {
            e.preventDefault();
            userInfo = false;
            $state.go('login');
            localStorageService.clearAll();
            alert('Authentication failed');
        }
    }
});

Same thing happens to an individual function. Let's say i have an important function on the page, so only an admin can execute that function. I'm also checking the authentication on that proccess, but it's happening the same thing, only on the second interaction.

function:

$scope.debugTk = function() {
    checkToken();
    if (!userToken) {
        alert('Authentication failed');
    } else {
        $http.get('dist/php/db.php?action=debugTk')
        .success(function(res){
            $scope.resultDebug = res;
        }).error(function(err){
            alert(feedbackError);
        });
    }
}

Answer 1

as charlieftl already said, your checkToken function uses an XHR request which is asynchronous by default. You need to wrap everything that relies on the execution of checkToken with a callback like this:

function getUser() {
    userinfo = JSON.parse(localStorageService.get("user")); //convert string to json
    $scope.userData = userinfo; //Display purpouso only;
};
function checkToken() {
    var userCheckToken = JSON.parse(localStorageService.get("user"));
    $http.post('dist/php/db.php?action=token', userCheckToken)
    .success(function(res){
        return res; // returns inside a promise make them chainable.
    }).error(function(err){
        return feedbackError;
    });
};

$rootScope.$on('$stateChangeStart', function(e, to) {
    if (to.data && to.data.requireLogin) {
        getUser();
        if (!userinfo) {
            e.preventDefault();
            $state.go('login');
            alert("You need to be loggedin");
        } else {
            checkToken().then(function(userToken){ // this gets executed after checkToken() succeeds.

                if (!userToken) {
                    // this won't work here: e.preventDefault();
                    userInfo = false;
                    $state.go('login');
                    localStorageService.clearAll();
                    alert('Authentication failed');
                }
            }, function(err){
                // this gets called when your .error method returns an error
                // eg. the HTTP request failed.
            });
        }
    }
});

Your debugTk function will look like this then: $scope.debugTk = function() { checkToken().then(function(){ // success }, function(){ // error

        if (!userToken) {
            alert('Authentication failed');
        } else {
            $http.get('dist/php/db.php?action=debugTk')
            .success(function(res){
                $scope.resultDebug = res;
            }).error(function(err){
                alert(feedbackError);
            });
        }
    });
}

Read more about promises here: https://github.com/wbinnssmith/awesome-promises

Edit: The e.preventDefault() call won't work inside the promise, you'll need to change your code to adapt promises. I wouldn't wrap something like this into a $stateChangeStart event, instead use a service to handle all the auth stuff.

Answer 2

According to AngularJS documentation:

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

About your question, as it was said the checkToken function is asynchronous, so you need use promises each time you call this function. Return $http.post result from checkToken function:

function checkToken() {
  var userCheckToken = JSON.parse(localStorageService.get("user"));
  return $http.post('dist/php/db.php?action=token', userCheckToken).then(
    function (res) {
      userToken = res;
    },
    function (err) {
      alert(feedbackError);
    });
};

And then use it as regular promise:

$scope.debugTk = function() {
  checkToken().then(function(){
    if (!userToken) {
      alert('Authentication failed');
    } else {
      //.....
    }
  });
}