In AngularFire, why is the auth.user property null in the controller, but not the view?

Question

There is a user logged into Firebase, and in my views, $scope.auth returns the current logged in user and I can access its data.

In my controller however, $scope.auth.user returns null.

myApp.controller('quoteController', ['$scope', '$firebase', '$firebaseSimpleLogin',
  function($scope, $firebase, $firebaseSimpleLogin) {

    $scope.auth = $firebaseSimpleLogin(dataRef);

    console.log($scope.auth.user);
  });

console.log($scope.auth.user) == 'null'.

Why is this the case? I know that the user is logged in. The angularFire docs says that, "the login state for Simple Login is global to your application, even if multiple $firebaseSimpleLogin objects are created." So shouldn't $scope.auth.user contain the current user?

Answer 1

Login requires contacting the server asynchronously. You can't immediately access the variable on the next line because it hasn't been retrieved yet. Additionally, you'll need to call login() before a user object will exist. Assuming there is a login persisted from another page view, or login() has been called, you can take a few approaches to accomplish what you want.

Use $getCurrentUser() to wait for the auth process to resolve and fetch the user account that is currently authenticated:

angular.module("sampleApp", ["firebase"])
  .controller("SampleController", ["$scope", "$firebase", "$firebaseSimpleLogin",
    function($scope, $firebase, $firebaseSimpleLogin) {
      var ref = new Firebase("https://<my-firebase>.firebaseio.com/");
      $scope.auth = $firebaseSimpleLogin(ref);
      $scope.auth.$getCurrentUser().then(function(user) {
         console.log(user);
      });
    }
  ]);

Utilize the auth events:

angular.module("sampleApp", ["firebase"])
  .controller("SampleController", ["$scope", "$firebase", "$firebaseSimpleLogin",
    function($scope, $firebase, $firebaseSimpleLogin) {
      var ref = new Firebase("https://<my-firebase>.firebaseio.com/");
      $scope.auth = $firebaseSimpleLogin(ref);
      $scope.$on('$firebaseSimpleLogin:login', function() {
         console.log($scope.auth.user);
      });
    }
  ]);

Or you can use the promise returned when login is called:

angular.module("sampleApp", ["firebase"])
  .controller("SampleController", ["$scope", "$firebase", "$firebaseSimpleLogin",
    function($scope, $firebase, $firebaseSimpleLogin) {
      var ref = new Firebase("https://<my-firebase>.firebaseio.com/");
      $scope.auth = $firebaseSimpleLogin(ref);

      $scope.auth.$login('twitter').then(function() {
          console.log($scope.auth.user);
      });
    }
  ]);

Answer 2

This most probably is due to async nature of call to firebaseSimpleLogin. Even their example has a callback

var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
  if (error) {
    // an error occurred while attempting login
    console.log(error);
  } else if (user) {
    // user authenticated with Firebase
    console.log('User ID: ' + user.uid + ', Provider: ' + user.provider);
  } else {
    // user is logged out
  }
});

If you check the value in a callback you should see the user data.