Can't get new password authentication methods to work in AngularFire 0.9.0?

Question

I'm trying to use the new authentication methods in Angular Fire 0.9.0 but I must be doing something wrong.

I'm running 1.3.2 of Angular, 2.0.4 of Firebase and 0.9.0 of Angular Fire.

I call the login function from an ng-click in my html.

Here is my js :

var app = angular.module("sampleApp", ["firebase"]);

app.controller('mainCtrl', function ($scope, $firebaseAuth) {

var ref = new Firebase('https://XXXX.xxx');

$scope.auth = $firebaseAuth(ref);

$scope.login = function() {
    $scope.num = 'loggin in';
    $scope.auth.$authWithPassword({
        email: 'xxx@xxx.xxx',
        password: 'yyyyy'
    }, function(err, authData) {
        if (err) {
            console.log(err);
            $scope.num = err;
        } else {
            console.log(authData);
        }
    });
};

I don't see anything in the console and I don't get any errors. So I can't figure out how to debug what I am doing wrong.

When I log $scope.auth to the console, it shows the $authWithPassword method. I just can't get it to work.

Any help would be appreciated.

Answer 1

The problem you are running into is that the AngularFire API is slightly different than the regular Firebase API for the authentication methods. While the Firebase SDK takes a callback as the second argument for authWithPassword(), the AngularFire API returns a promise for $authWithPassword(). The reason for the difference is that promises are a very common idiom in Angular and we wanted to provide an API that people are already familiar with. So, your code should look like this:

var app = angular.module("sampleApp", ["firebase"]);

app.controller('mainCtrl', function ($scope, $firebaseAuth) {
  var ref = new Firebase('https://XXXX.xxx');

  $scope.auth = $firebaseAuth(ref);

  $scope.login = function() {
    $scope.num = 'logging in';
    $scope.auth.$authWithPassword({
      email: 'xxx@xxx.xxx',
      password: 'yyyyy'
    }).then(function(authData) {
      console.log(authData);
    }).catch(function(error) {
      console.log(err);
      $scope.num = err;
    });
  };
});