AUTH_REQUIRED with Firebase - firebase

Question

I have two states in my application -- /auth and /masters. the latter is the state where i wld like to direct the user only once he or she has been authenticated.
So, i understand that we can use '$urlRouterProvider.otherwise' to configure a default state in the application to /auth. So the foll is my code:
angular.module('ngClassifieds', ['ngMaterial', 'ui.router', 'firebase'])
.config(function($mdThemingProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('blue-grey')
.accentPalette('orange');
$urlRouterProvider.otherwise('/auth');
$stateProvider
.state('auth', {
url: '/auth',
templateUrl: 'components/auth/auth.tpl.html',
controller: 'authCtrl'
})
$stateProvider
.state('masters', {
url: '/masters',
templateUrl: 'components/classifieds.tpl.html',
controller: 'classifiedsCtrl'
});
});
Now, if i enter, for example, anything other than /masters, i am directed to /auth; however, if i enter /masters, i am not directed to /auth.
i was made to understand that i need to look for AUTH_REQUIRED error in Firebase (https://www.firebase.com/docs/web/libraries/angular/guide/user-auth.html) in order to achieve the desired result. However, i feel i'm punching above my weight in trying to incorporate the functionality. So i'd appreciate if you can provide me some guidane. This is how i have tried to refactor the above code, but it's a mess:
angular.module('ngClassifieds', ['ngMaterial', 'ui.router', 'firebase'])
.run(["$rootScope", "$state", function($rootScope, $state) {
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
// We can catch the error thrown when the $requireAuth promise is rejected
// and redirect the user back to the home page
if (error === "AUTH_REQUIRED") {
$state.go("auth");
}
});
}]);
.config(function($mdThemingProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('blue-grey')
.accentPalette('orange');
$urlRouterProvider.otherwise('/auth');
$stateProvider
.state('auth', {
url: '/auth',
templateUrl: 'components/auth/auth.tpl.html',
controller: 'authCtrl',
resolve: {
// controller will not be loaded until $waitForAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth", function(Auth) {
// $waitForAuth returns a promise so the resolve waits for it to complete
return Auth.$waitForAuth();
}]
}
})
$stateProvider
.state('masters', {
url: '/masters',
templateUrl: 'components/classifieds.tpl.html',
controller: 'classifiedsCtrl',
resolve: {
// controller will not be loaded until $requireAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth", function(Auth) {
// $requireAuth returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return Auth.$requireAuth();
}]
}
});
});