angularfire signedIn function only evaluates when page refreshes?

Question

I am hiding html login and register links when a user is logged in with firebase and angular. With the use of ng-show and ng-hide by evaluating signedIn() function in my Auth.js factory.

<div class="navbar-collapse collapse navbar-responsive-collapse">
  <ul class="nav navbar-nav">
    <li ng-show="signedIn()"><a href="#/create">Create a Post</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li ng-hide="signedIn()"><a href="#/register">Register</a></li>
    <li ng-hide="signedIn()"><a href="#/login">Login</a></li>
    <li ng-show="signedIn()" class="dropdown">
      <a href="" data-toggle="dropdown" class="dropdown-toggle">
         {{currentUser.profile.name}}
         <i class="mdi mdi-account"></i>
         <span class="caret"></span>
      </a>

Here is my Auth factory service:

angular.module('AuthService',[])
  .factory('Auth', function($firebaseAuth, $firebase){

  var ref = new Firebase("https://ngblogapp.firebaseio.com/");
  var authObj = $firebaseAuth(ref);
  var authData = authObj.$getAuth(); //firebase auth data when you login 

  var Auth = {
    user:{},

    createProfile: function(uid, user){
      var profile = {
        name: user.name,
        email: user.email,
        password: user.password,
      };

      var profileRef = $firebaseObject(ref.child('profile'));
        console.log("User Register Data : " + profileRef);
        return profileRef.$set(uid, profile);
    },
    login: function(user){
      return authObj.$authWithPassword(
        {email: user.email, password: user.password}
      ).then(function(authData) {
        console.log("Logged in as:", authData.uid);
      }).catch(function(error) {
        console.error("Authentication failed:", error);
      });
    },
    register: function(user){
      return authObj.$createUser({email: user.email, password: user.password})
      .then(function(userData) {
        console.log("User " + userData.uid + " created successfully!");
        return authObj.$authWithPassword({
          email: user.email,
          password: user.password,
        });
      }).then(function(authData) {
        console.log("Logged in as:", authData.uid);
      }).catch(function(error) {
        console.error("Error: ", error);
      });
    },
    logout: function(){
      authObj.$unauth(); //logout method
    },
    changePassword: function(user){
      return authObj.$changePassword({email: user.email, oldPassword: user.oldpass, newPassword: user.newpass});
    },
    signedIn: function(){
      var  signedin = authData === null ? false : true; //check to see if you are logged in
      console.log("signed in status is " + signedin);
      return signedin;
    }
  }; // end Auth
  if (authData) {
    console.log("Logged in as:", authData.uid);
  } else {
    console.log("Logged out");
  }
  return Auth;
});

I am returning my signedIn function with a controller. Here is the controller:

app.controller('AuthController', function($scope, $location, Auth){

  $scope.register = function(user){
    Auth.register(user).then(function(){
      console.log("Register successfully!");
      $location.path("/");
    }, function(err){
      console.log("Error...");
    });
  };

The code stated above works and hides the login and register links only on browser refresh What is erroneous in my code in angularfire and specifically in signedIn method to work automatically after I sign in or sign off?

Can you put this into a Plnkr or a JSBin? It would make it much easier to work through. — David East

Felice Felice · Accepted Answer · 2015-12-02T19:12:25

So I fixed the problem. My factory has a register , login, and logout method which were fully functioning, however firebase's getAuth only evaluates once. To hack fix the issue I had to reload the page, but the proper fix for the issue, I had to place document.reload(); at the end of register,login, and logout functions.

Here is a preview of that.

login: function(user){
      return authObj.$authWithPassword(
        {email: user.email, password: user.password}
      ).then(function(authData) {
        console.log("Logged in as:", authData.uid);
        return authData; 
      }).catch(function(error) {
        console.error("Authentication failed:", error);
      }, location.reload()); //reload page after login
    },
    logout: function(){
      authObj.$unauth(); 
      location.reload(); //reload page
    },

The location.reload() method will reload the document after a logout or login and firebase getAuth() will evaluate properly, therefore allowing me to use ng-hide or ng-show for hiding and showing my html templates on my navbar to show log state.

Now when logged off the navbar will show a register and login link

And when logged in or registered in you will see logout options in the navbar.

angularfire signedIn function only evaluates when page refreshes?

1 Answers