AngularFire Simple Login (email/password) - access-control-allow-origin/unknown error

Question

So I'm trying to do what seems to be the most dead-simple version of SimpleLogin email/password authentication inside my AngularJS app. I have a forge set up for my app, I can successfully read and write data to it, and I'm using that reference for my authentication. I have enabled email/password authentication in my dashboard, and added a single registered user who I'm trying to authenticate. I have no other forms of authentication enabled.

NOTE: I am running this code locally at 127.0.0.1:9000, so I don't know if that has any bearing on the outcome or not (hopefully not, I don't want to have to build this on a live server...)

Anyway, on to the code...

=====================================

This is literally all I have in my view:

<button ng-click="dummySignin()">Dummy Signin</button>

And here's my Angular code:

angular.module('myApp')
  .controller('MainCtrl', function ($scope, $firebaseSimpleLogin) {
    var ref = new Firebase('https://dummyapp.firebaseio.com/myforge');
    $scope.auth = $firebaseSimpleLogin(ref);

    $scope.dummySignin = function() {
      console.log('signing in...');

      $scope.auth.$login('password', {
        email: 'guy@face.com',
        password: 'cookie'
      }).then(function(user) {
        console.log('user: ', user);
      }, function(error) {
        console.log('error: ', error);
      });
    };
  );
});

I know the Firebase reference is set up correctly because when I try a random email address, I get back an INVALID EMAIL error. When I use the correct email address, this is the JSON that comes back:

error: {
  code: "UNKNOWN_ERROR",
  data: {
    message: "FirebaseSimpleLogin: FirebaseSimpleLogin: An unknown error occurred."
  }
}

Additionally, I get this message in my console (as an error, not via console.log):

XMLHttpRequest cannot load https://auth.firebase.com/auth/firebase?email=guy%40face.com&password=cookie&firebase=127.0&v=1.3.1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.]

I do have localhost and 127.0.0.1 in my authorized request origins list, but that shouldn't matter, since (as far as I can tell) that only effects OAuth sign-in methods like Facebook and Twitter. The other weird part about that error is that the firebase variable in the query string looks like it's pointing to localhost (and is apparently truncated...), so I don't know what the hell's going on there.

As far as I've been able to tell, I'm doing everything right, but I still don't know what would be causing the problem. What am I missing?

Answer 1

UPDATE:

So after sending my actual project code over to Rob at Firebase, he hit me back with this:

When instantiating the Firebase Simple Login client, you need to pass in a Firebase reference (i.e. new Firebase(...)) rather than an Angular service or AngularFire object. Replacing itemListService in the object above with new Firebase('https://myapp.firebaseio.com/') seems to fix with right up.

The example code above didn't reflect this (the one thing that was causing the problem, of course), but assuming my service is called "FirebaseService", my actual code went from this:

$scope.auth = $firebaseSimpleLogin(FirebaseService);

to this:

var firebaseRef = new Firebase('http://myapp.firebasio.com');
$scope.auth = $firebaseSimpleLogin(firebaseRef);

So now instead of using my service to return the Firebase reference (which I am still using to read and write data), I'm passing a direct reference to the Firebase into $scope.auth, which I can then successfully call $login() on.

Thanks, Rob!