How to secure Angular routes with Firebase v3? - angularjs

Question

I want to protect various routes on my site using Firebase V3, AngularJS and ui.router.
This looks like a similar issue. I've followed the steps from that SO post but its not working for me.
What I expect to happen:
When clicking the FAQ link I should be forwarded to the login page if logged out and should display the FAQ page when logged in.
What actually happens:
FAQ page isn't accessible at all. Logging in doesn't make any difference. It also doesn't forward me to the login page when logged out.
I'm getting this error within my run function.
ReferenceError: Firebase is not defined(…)
I've included AngularFire on the page, if I don't I get a module injector error even if I remove Firebase from the dependency array.
var app = angular.module('app', ['ui.router', 'firebase']);
app.constant('FirebaseDatabaseUrl', 'https://myfbdb.firebaseio.com');
app.config(function($stateProvider, $urlRouterProvider, $firebaseRefProvider, FirebaseDatabaseUrl) {
$firebaseRefProvider.registerUrl(FirebaseDatabaseUrl);
// If a route other than status is requested,
// go to the auth route
//$urlRouterProvider.otherwise('/logintest/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'pages/login.html',
controller: 'LoginController as login'
})
.state('faq', {
url: '/faq',
templateUrl: 'pages/faq.html',
controller: 'FaqController as faq',
resolve: {
// controller will not be loaded until $requireSignIn resolves
"firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
console.log('waitForSignIn')
// $waitForSignIn returns a promise so the resolve waits for it to complete
return $firebaseAuthService.$waitForSignIn();
}]
}
})
.state('about', {
url: '/about',
templateUrl: 'pages/about.html',
controller: 'AboutController as about',
resolve: {
// controller will not be loaded until $requireSignIn resolves
"firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
// If the promise is rejected, it will throw a $stateChangeError
return $firebaseAuthService.$requireSignIn();
}]
}
})
});
app.controller('FaqController', ['$scope', 'firebaseUser', function($scope, firebaseUser){
console.log('faq')
}]);
app.run(["$rootScope", "$state", function($rootScope, $state) {
console.log('run');
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
// We can catch the error thrown when the $requireSignIn promise is rejected
// and redirect the user back to the home page
if (error === "AUTH_REQUIRED") {
console.log('redirecting to login page')
$state.go("login");
}
});
}]);

Answer 1

AngularFire versions 2.0+ are compatible with Firebase 3.0. Anything below AngularFire 2.0 is for the legacy version of Firebase.