Firebase authentication on App initilisation

Question

This is works:

console.log('User ID: ' + user.id + ', Provider: ' + user.provider);

but this one is not:

$scope.authenticated.currentUser = user.id;

My goal here is to take to take some of the authentication variables (Email+UserID) and then use them to access a profile node ON firebase. On initialization I want the username, email, and a few other things I need for the app.

crossfitApp.controller('globalIdCtrl', ["$scope",'defautProfileData','$q', function ($scope,defautProfileData,$q) {

var  dataRef =   new Firebase("https://glowing-fire-5401.firebaseIO.com");

$scope.authenticated={
                        currentUser: $scope.authemail,
                        emailAddress: "",
                        settings: "",
                    };

var chatRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com');
var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
  if (error) {
    // an error occurred while attempting login
    switch(error.code) {
      case 'INVALID_EMAIL':
      case 'INVALID_PASSWORD':
      default:
    }
  } else if (user) {
    // user authenticated with Firebase
    console.log('User ID: ' + user.id + ', Provider: ' + user.provider);

      $scope.authenticated.currentUser = user.id ;//

  } else {
    // user is logged out
  }
});

}]);  //GlobaldCtrl

Answer 1

Most likely, you're running into a problem with Angular's HTML Compiler.

Whenever you use an event like ng-click/ng-submit/etc, Angular fires $scope.$apply(), which checks for any changes to your $scope variables and applies them to the DOM.

Since FirebaseSimpleLogin is not part of Angular's purview, it has no idea that when the callback is fired, you've updated $scope.authenticated.currentUser. This would also explain why it works when you call auth.login(), since you're probably invoking that via an ng-click event somewhere, which would fire a digest check and discover the changes.

If this is indeed the case, you can correct this issue by alerting Angular that it needs to run $apply by using $timeout:

crossfitApp.controller('globalIdCtrl', ["$scope",'defautProfileData','$q', '$timeout', function ($scope,defautProfileData,$q, $timeout) {

/* ... */

var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
  if (error) {
    /* ... */
  } else if (user) {
    $timeout(function() {
       $scope.authenticated.currentUser = user.id ;//
    });
  } else {
    // user is logged out
  }
});