Correct way to use firebaseAuthClient and angularJS

Question

Been playing around with firebase and angularjs and just trying to put some little things together. I have the auth working now in a controller with this function called on the sign in button click:

$scope.signin = function(){
        var user1 = $scope.cred.user;
        var pass1 = $scope.cred.password;

        var ref = new Firebase("https://kingpinapp.firebaseio.com");
        var auth = new FirebaseAuthClient(ref, function(error, user) {
            if (user) {
                // user authenticated with Firebase
                console.log(user);


            } else if (error) {
                 // an error occurred authenticating the user
                 console.log(error);

                } else {
                // user is logged out
            }   
        });
        auth.login('password', {
            email: user1,
            password: pass1,
            rememberMe: false
        });
        console.log("tracer");
}

Now this is great and works fine. But it seems to work in a async manner for example my console.log("tracer") returns before the user object of the auth.login. I know I probably need to work with promises to get this done and tried doing the following:

var defer = $q.defer();
defer.auth
.then(function() {
    auth.login('password', {
        email: user1,
        password: pass1,
        rememberMe: false
    });
})
.then(function() {
    console.log("tracer");
})

But i'm receiving a $q is not defined after declaring it in the controller module. So what I'm trying to do is

1. check if the user is logged in.
2. wait till I receive a yes/no
3. if not logged in. use auth.login
4. else user user logged in do some other things

I thought of putting the auth.login function in the else of the variable auth but that doesn't seem like it would work. Just trying to figure out the proper logic in understanding how to get this to work.

Answer 1

You don't want to have a FirebaseAuthClient per controller, but you do want to alert all of your controllers when a user's auth state changes.

FirebaseAuthClient will take care of session storage for you. You just need to hide your sign in screen/button once a user is successfully signed in.

Try something like this:

.service('myAuthService', ["$rootScope", function($rootScope) {
    var ref = new Firebase("https://kingpinapp.firebaseio.com");
    this.auth = new FirebaseAuthClient(ref, function(error, user) {
        if (user) {
            $rootScope.$emit("login", user);
        }
        else if (error) {
            $rootScope.$emit("loginError", error);
        }
        else {
            $rootScope.$emit("logout");
        }   
    });
}])

.controller('myCtrl', ["$scope", "$rootScope", "myAuthService", function($scope, $rootScope, myAuthService) {
    $scope.signin = function() {
        var user1 = $scope.cred.user;
        var pass1 = $scope.cred.password;

        myAuthService.auth.login('password', {
            email: user1,
            password: pass1,
            rememberMe: false
        });
    }
    // listen for user auth events
    $rootScope.$on("login", function(event, user) {
        // do login things
        $scope.user = user;
    })
    $rootScope.$on("loginError", function(event, error) {
        // tell the user about the error
    })
    $rootScope.$on("logout", function(event) {
        // do logout things
    })
}])

<button ng-show="user" ng-click="signin()">Sign in</button>

Answer 2

Make sure you are including $q as a dependency in your controller. In the simple case:

function MyController($scope, $q, angularFire) {
  $scope.signin = ...
}

Or if you're using the "proper" module syntax:

angular.module("MyModule", ["firebase"]).
controller("MyController", ["$scope", "$q", "angularFire", function($scope, $q, aF) {
  $scope.signin = ...
}]);

Learn more about angular dependency injection here: http://docs.angularjs.org/guide/di, and take a look at https://gist.github.com/sbrekken/5151751 for an example of Firebase auth using deferred.

Answer 3

I've posted the answer to this question already here FACTORY: get current user.id for Firebase Simple Login (Email / Password)

It's a pretty solid solution to this problem and may be just what you're looking for.