Catching Firebase Authentication Error From A Promise

Issue

I am trying to catch and display an authentication error using a promise received from Firebase after a login attempt.

btnsignin.addEventListener('click', e =>{
    const emailaddress = email.value;
    const passworddetail = password.value;
    const auth = firebase.auth();
   const promise = auth.signInWithEmailAndPassword(emailaddress, passworddetail);
    **promise.catch(function(e) {
        $scope.signinchallenges = e.message;
    });
} );**

At the moment when the btnsignin is fired, the authentication error does not display until when clicked again. Any help with this at all?

Solution

This problem is caused by the fact that AngularJS is not aware that you've updated the scope. So while you've updated the value, AngularJS doesn't repaint the view. To alert it to the update, use $timeout or $apply:

promise.catch(function(e) {
  $timeout(function(e) {
    $scope.signinchallenges = e.message;
  });
})

Alternatively, you might be able to simply assign the promise to the scope:

$scope.signinchallenges = auth.signInWithEmailAndPassword(emailaddress, passworddetail);

And then in your view read the message from there:

{{signinchallenges.message}}

Answered By - Frank van Puffelen