AngularJS display a promise from Firebase

Question

I am sure it is a simple problem, but since I work in angular for like 2 weeks now I can't seem to figure it out.

I have this facebook login with firebase function:

function FBLogin(){
     var provider = new firebase.auth.FacebookAuthProvider();
     firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Facebook Access Token. You can use it to access 
      the Facebook API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      console.log(user.displayName);
      $scope.user = user.displayName;
      $scope.loggedIn = true;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      console.log(error);
      // ...
    });
 }

$scope.user should show me the username in the HTML when the promise is returned right? It doesn't do that.

HTML:

The button for calling the function:

<a ui-sref=".dashboard" class="btn btn-primary">
        <img class="logo-image" src='components/images/login-button-png-
18039.png' width="140" height="50" ng-click="vm.FBLogin()" ng-
if="!loggedIn">
    </a>

The field where the data should be displayed:

<p ng-if="loggedIn">{{ user }} xxx</p>

The username is shown in the console, but not in HTML.

Is `firebase` an Angular service? If not, Angular needs to be notified of the scope change using `$scope.apply()`. — mingos, May 02 '17 at 09:10

georgeawg · Accepted Answer · 2017-05-02T17:39:57.103

Firebase promises are not AngularJS promises

Promises returned by the firebase API are not integrated with the AngularJS framework.

Use $q.when to create an AngularJS promise from a firebase promise:

function FBLogin(){
     var provider = new firebase.auth.FacebookAuthProvider();
     //USE $q.when
     $q.when(firebase.auth().signInWithPopup(provider))
       .then(function(result) {
          // This gives you a Facebook Access Token.
          // You can use it to access the Facebook API.
          var token = result.credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          console.log(user.displayName);
          $scope.user = user.displayName;
          $scope.loggedIn = true;
          // ...

    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      console.log(error);
      // ...
    });
 }

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

The firebase promise needs to be converted to an AngularJS promise to bring the event into the AngularJS execution context.

$q.when(value)

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

-- AngularJS $q Service API Reference - $q.when

AngularJS display a promise from Firebase

1 Answers1

Firebase promises are not AngularJS promises

$q.when(value)

Linked