use angular resolve with Firebase SimpleLogin

Question

I really want to integrate SimpleLogin authentication with resolve of angular js. I tried to do the following:

app.config(function($routeProvider) {
$routeProvider.when("/login", {
    templateUrl: "templates/authentication.html",
    controller: "AuthenticationController",
    resolve: {
        authenticated_user: function($q, $timeout) {
            var deferred = $q.defer();
            var ref = new Firebase("https://theuy-angularfire.firebaseio.com/");

             var auth = new FirebaseSimpleLogin(ref, function(error, user) {
              if (error) {
                deferred.resolve(null);
              } else if (user) {
                console.log('User ID: ' + user.id + ', Provider: ' + user.provider);
                deferred.resolve(user);
              } else {
                deferred.resolve(null);
              }
            });

            return deferred.promise;
        }
    }
});

I get a callback when I succesfully logged in but my template was not rendered. Could you give me an advice how to use Firebase SimpleLogin authentication with resolve?

Theuy Limpanont · Accepted Answer · 2013-11-02 09:04:37Z

I think to know what the problem is.

Resolve function of Angular is a client side operation and therefore more quicker with execution, while SimpleLogin has to connect to the server and wait for response. The problem was that Angular tried to resolve and render the template before the result of the authentication process.

So I came up with a solution to first do the authentication process and then bootstrap angular manually and eventually run the resolve function. The solution could look like this:

var app = angular.module("myapp", ["firebase"]);
app.user = null;
app.ref = null;
app.auth = null;
// when the dom is ready, so we sure we can bootstrap angular manually
angular.element(document).ready(function () {
    app.ref = new Firebase("https://theuy-angularfire.firebaseio.com/");
    app.auth = new FirebaseSimpleLogin(app.ref, function (error, user) {
        app.user = user;
        angular.bootstrap(document, ['myapp']);
    });
});
// this object is needed when we want to authenticate somewhere in our application with the use of resolve
var authentication = {
    app: function ($q, $location) {
        var deferred = $q.defer();

        // go to the dashboard when the user is logged in
        if (app.user != null) {
            $location.path("/dashboard");
            deferred.resolve(app.user);
        } else {
            // go to the login form when the user is logged logged out, or never had logged in
            $location.path("/login");
            deferred.resolve(null);
        }
        return deferred.promise;
    }
}

app.config(function ($routeProvider) {
    $routeProvider.when("/login", {
        templateUrl: "templates/loginform.html",
        resolve: authentication,
        controller: "LoginController"
    });

    $routeProvider.when("/dashboard", {
        templateUrl: "templates/dashboard.html",
        resolve: authentication,
        controller: "DashboardController"
    });
});

Collectives™ on Stack Overflow

use angular resolve with Firebase SimpleLogin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related