Angularjs Routes And Resolve With New Firebase Auth

I am trying to use the new Firebase with the Auth system and restricting routes in my $routeProvider via resolves. However, I'm not quite understanding. This is what I have. In m

Solution 1:

The methods have been renamed to $waitForSignIn() and $requireSignIn.

You can also use the $firebaseRefProvider service to configure your Database URL so it automatically configures the $firebaseAuthService.

angular.module('app', ['firebase'])
  .constant('FirebaseDatabaseUrl', '<my-firebase-url>')
  .controller('HomeCtrl', HomeController)
  .config(function($firebaseRefProvider, FirebaseDatabaseUrl, $routeProvider) {
     $firebaseRefProvider.registerUrl(FirebaseDatabaseUrl);
     $routeProvider.when("/home", {
        controller: "HomeCtrl",
        templateUrl: "views/home.html",
        resolve: {
          // controller will not be loaded until $waitForSignIn resolves"firebaseUser": function($firebaseAuthService) {
            return$firebaseAuthService.$waitForSignIn();
          }
        }
      }).when("/account", {
        controller: "AccountCtrl",
        templateUrl: "views/account.html",
        resolve: {
          // controller will not be loaded until $requireSignIn resolves"firebaseUser": function(Auth) {
            // If the promise is rejected, it will throw a $stateChangeErrorreturn$firebaseAuthService.$requireSignIn();
          }
        }
      });
  });

functionHomeController($scope, $firebaseRef, firebaseUser) {

} 

Solution 2:

So I'm not sure if it's the cleanest cut code on the globe but it works.

Firebase now provides a new function for getting the current user authenticated if there is one. After you initialize firebase, you have access to this function. firebase.auth().currentUser.

(This function returns user details if logged in and null if not)

So, in your route, you would create and resolve a promise based on the results of this function. Be sure to define deferred as $q.defer(); (I struggled with this as you can see in my question update)

$routeProvider
    .when('/', {
            templateUrl: 'templates/dashboard.ejs',
            resolve: {
                userAuthenticated: ["$http", "$q", function($http, $q) {
                    var deferred = $q.defer();
                    if(firebase.auth().currentUser) {
                        deferred.resolve();
                    } else {
                        deferred.reject('NOT_AUTHORIZED');
                    }
                    return deferred.promise;
                }]
            }
        })  

And then in your run function for Angular, you'll watch for route change errors.

.run(function($rootScope, $location) {
   $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
      if(rejection == 'NOT_AUTHORIZED')
      {
         $location.path('/login');
      }
    })
})

In the function above, you simply watch for an error in the route change. If the rejection is equal to 'NOT_AUTHORIZED' (passed in our rejection function in the resolve function) then we redirect the user to the login screen to become authenticated.

NOTE: In this routeChangeError function, you are free to do what you like maybe even show a little growl that the user is not authorized.