How to secure a route in AngularFire 0.6.0 (authRequired)?

Question

In previous versions of angularFire, it was possible to secure selected routes by using "authRequired" and "pathTo" with Angular's $routeProvider. These no longer appear to work with AngularFire 0.6.0. What is the equivalent parameter/technique in Angular 0.6.0?

Answer 1

Routing was moved out of angularFire for the same reasons it was moved out of the core of Angular--to be less opinionated in how routing is conducted and which lib you should use.

You can still include routing by grabbing the module from angularFire-seed, which is plug-and-play ready.

The steps are:

1. add ngRoute and routeSecurity to your app dependencies
2. declare the loginRedirectPath constant
3. add authRequired where appropriate

Example:

// add routeSecurity to your dependency libs
angular.module('myApp', [..., 'ngRoute', 'firebase', 'routeSecurity']);

// declare the loginRedirectPath variable
angular.module('myApp').constant('loginRedirectPath', '/login')

// put authRequired in your routes
$routeProvider.when('/account', {
   authRequired: true, // must authenticate before viewing this page
   templateUrl: 'partials/account.html',
   controller: 'AccountCtrl'
});

// live long and prosper

Here's a hard copy of the module as of 0.6.0 for compliance with SO policy; refer directly to the source for a current version:

(function(angular) {
   angular.module('routeSecurity', [])
      .run(['$injector', '$location', '$rootScope', 'loginRedirectPath', function($injector, $location, $rootScope, loginRedirectPath) {
         if( $injector.has('$route') ) {
            new RouteSecurityManager($location, $rootScope, $injector.get('$route'), loginRedirectPath);
         }
      }]);

   function RouteSecurityManager($location, $rootScope, $route, path) {
      this._route = $route;
      this._location = $location;
      this._rootScope = $rootScope;
      this._loginPath = path;
      this._redirectTo = null;
      this._authenticated = !!($rootScope.auth && $rootScope.auth.user);
      this._init();
   }

   RouteSecurityManager.prototype = {
      _init: function() {
         var self = this;
         this._checkCurrent();

         // Set up a handler for all future route changes, so we can check
         // if authentication is required.
         self._rootScope.$on("$routeChangeStart", function(e, next) {
            self._authRequiredRedirect(next, self._loginPath);
         });

         self._rootScope.$on('$firebaseSimpleLogin:login', angular.bind(this, this._login));
         self._rootScope.$on('$firebaseSimpleLogin:logout', angular.bind(this, this._logout));
         self._rootScope.$on('$firebaseSimpleLogin:error', angular.bind(this, this._error));
      },

      _checkCurrent: function() {
         // Check if the current page requires authentication.
         if (this._route.current) {
            this._authRequiredRedirect(this._route.current, this._loginPath);
         }
      },

      _login: function() {
         this._authenticated = true;
         if( this._redirectTo ) {
            this._redirect(this._redirectTo);
            this._redirectTo = null;
         }
         else if( this._location.path() === this._loginPath ) {
            this._location.replace();
            this._location.path('/');
         }
      },

      _logout: function() {
         this._authenticated = false;
         this._checkCurrent();
      },

      _error: function() {
         if( !this._rootScope.auth || !this._rootScope.auth.user ) {
            this._authenticated = false;
         }
         this._checkCurrent();
      },

      _redirect: function(path) {
         this._location.replace();
         this._location.path(path);
      },

      // A function to check whether the current path requires authentication,
      // and if so, whether a redirect to a login page is needed.
      _authRequiredRedirect: function(route, path) {
         if (route.authRequired && !this._authenticated){
            if (route.pathTo === undefined) {
               this._redirectTo = this._location.path();
            } else {
               this._redirectTo = route.pathTo === path ? "/" : route.pathTo;
            }
            this._redirect(path);
         }
         else if( this._authenticated && this._location.path() === this._loginPath ) {
            this._redirect('/');
         }
      }
   };
})(angular);