AngularJS - Route to different view after Firebase login

Question

Based on the authentication data from Firebase when logging in, I want to route to a certain view after the login was successful.

 app.controller('PageCtrl', function ($scope, $location, $http ) {

  $scope.logIn = function(){
      var email = $('#login-email').val();
      var password = $('#login-password').val(); 

      myDataRef.authWithPassword({
        email    : email,
        password : password
      }, function(error, authData) {
        if (error) {         
          console.log("Login Failed!", error);
        } else {
          console.log("Authenticated successfully with payload:", authData);
          email = myDataRef.getAuth().password.email;
          $('#userinfo').html(email);
          $('#logoutButton').show();
        }
      });
      $location.path('/form'); //route to form 
  }
}

By using $location.path('/form'); The view will change, but this happens before the login was determined to be successful or unsuccessful. How can I route to one view after the login was successful, and another view if the login was unsuccessful? I placed the $location.path('/form'); inside the if else error logic but it doesn't work.

Answer 1

What does the authWithPassword method look like?

It is probably returning a promise and you should use the .then success/error callback to enforce the flow you are looking for. Something like this should work.

ref.authWithPassword({
  "email": "bobtony@firebase.com",
  "password": "correcthorsebatterystaple"
}, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
    $location.path("/loginFailedPathHere");
  } else {
    console.log("Authenticated successfully with payload:", authData);
    $location.path("/form");
    $scope.$apply()
  }
});