CreateUser Function Not Working in AngularFire - Firebase Simple Login? - firebase

Question

I have the following controller that uses AngularFire
app.controller("authController", function($scope, $firebaseSimpleLogin){
var ref = new Firebase("https://myapp.firebaseIO.com/");
$scope.auth = $firebaseSimpleLogin(ref, function(error, user){
if(error){
console.log(error);
}
else if(user){
console.log(user);
}
else{
console.log("user logged out");
}
});
// This shows a valid object
console.log($scope.auth);
$scope.createAccount = function(){
console.log("found me");
$scope.auth.$createUser($scope.email, $scope.password, function(error, user){
console.log("something");
console.log(user);
if(!error){
console.log(user);
}
else{
console.log(error);
}
});
};
});
When I bind the $scope.createAccount function to an ng-click event and click on the bound button, console.log("found me") runs in the browser, but none of the other console.log commands in $scope.createAccount is shown.
The console.log($scope.auth) command I have before setting the $scope.createAccount function shows a valid object with the $createUser function defined.
I am not receiving any console errors when I run $scope.createAccount so I am assuming the call has been "successfully" made.
Why am I able to see the auth object, but not receiving a callback after calling $createUser?

Answer 1

This was happening because I was doing callbacks based on JavaScript notation instead of Angular notation. Since I was using the AngularFire methods (they have the same names as the vanilla JavaScript SDK methods, but with a $ sign in front of them), I needed to handle callbacks using Angular's $promise methodology.
I changed
$scope.auth.$createUser($scope.email, $scope.password, function(error, user){
// do things;
});
to
$scope.auth.$createUser($scope.email, $scope.password)
.then(function(user){
// do things if success
}, function(error){
// do things if failure
});
and the callback worked as expected.
There is an exception to the above with the vanilla JS firebaseSimpleLogin constructor vs Angular $firebaseSimpleLogin constructor. On the vanilla JS constructor, there are callbacks on the constructor that allows you to specify what your script should do when a user logs in / logs out. It follows the following format:
var auth = new firebaseSimpleLogin(ref, function(error, user){
if(error){
// do things if login failure
}
else if(user){
// do things when login succeeds
}
else{
// do things when user logs out
}
});
If you try to do the same with the Angular constructor like so:
$scope.auth = $firebaseSimpleLogin(ref)
.then(function(user){
// do things when login succeeds
}, function(error){
// do things when login fails
});
you'll receive an error. There are no callback methods with the Angular constructor. I am guessing this was done on purpose since with Angular, you have data binding and you can simply $watch $scope.auth.user for changes and perform operations in your app depending on the variable's state. When $scope.auth.user is set to null, the user is logged out. If the value is set to anything else than null, then the user is logged in.