$state.go timing out within $stateChangeStart - angularjs

Question

I'm currently trying to check to see if a user is authenticated when the state changes. In my run block I'm listening for $stateChangeStart event. In the following code I can currently get the console to log podio is authenticated and podio is not authenticated, but when i add $state.go into the catch statement, it loads infinitely and then times out. I've tried adding 'event.preventDefault` as it says here, but I don't fully understand why that would be necessary.
Run Block
$rootScope.$on('$stateChangeStart', function (event) {
...
Podio.podio.isAuthenticated()
.then(function () {
console.log('podio is authenticated');
})
.catch(function(error) {
console.log('podio is not authenticated');
event.preventDefault();
$state.go('login'); //when this is added it continues to load...
});
...
});
I'm sure it's not the state definitions, because they've been working correctly all along.
State Definitions
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {...})
.state('tab.events', {...})
.state('tab.event-detail',{...})
.state('tab.attendees',{...})
.state('tab.attendee-detail',{...})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginController'
});

Answer 1

You run isAuthenticated check on each stateChangeStart. If this check fails you end up in catch block navigating to some state. This triggers stateChangeStart again with failing authentication check.
You can add some flag to login state to allow access for unauthenticated users:
.state('login', {
url: '/login',
requireAuthentication: false,
templateUrl: 'views/login.html',
controller: 'LoginController'
})
And check it later:
$rootScope.$on('$stateChangeStart', function (event, toState) {
...
if(!toState.hasOwnProperty('requireAuthentication') || toState.requireAuthentication !== false)
Podio.podio.isAuthenticated()
...
}