Circular Dependency Error with Auth0 - angularjs

Question

I'm learning authentication using an Angular and Auth0 video on Udemy.
I've gotten to the point where I'm handling 401 errors and I'm receiving the following error:
angular.js:66 Uncaught Error: [$injector:cdep] Circular dependency found: auth <- redirect <- $http <- auth
And here is my angular configuration:
angular.config(config);
function config($provide, authProvider,
$urlRouterProvider, $stateProvider, $httpProvider, jwtInterceptorProvider) {
authProvider.init({
domain: 'cmckinstry.auth0.com',
clientId: 'Rmdm7tgPIWv1e1P6sKrBDoW8zI4kuOEa'
});
jwtInterceptorProvider.tokenGetter = function(store) {
return store.get('id_token');
}
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'components/home/home.tpl.html'
})
.state('profile', {
url: '/profile',
templateUrl: 'components/profile/profile.tpl.html',
controller: 'profileController as user'
});
function redirect($q, $injector, auth, store, $location) {
return {
responseError: function(rejection) {
if (rejection.status === 401) {
auth.signout();
store.remove('profile');
store.remove('id_token');
$location.path('/home');
}
return $q.reject(rejection);
}
}
}
$provide.factory('redirect', redirect);
$httpProvider.interceptors.push('redirect');
$httpProvider.interceptors.push('jwtInterceptor');
}
So, taking out the auth injection from the redirect function. But, then the redirect doesn't work properly. I'm suspecting that this has something to do with the authProvider, but I just can't seem to figure it out.

Answer 1

Look at the error message:
Circular dependency found: auth <- redirect <- $http <- auth
As stated in the error message, the circular dependency is formed because the authProvider uses the httpProvider which then uses the redirectProvider which completes a circle with the authProvider.
To break the circle, don't inject auth as a dependency in the redirectProvider construction function. Use the $injector service to inject the auth service when it is needed.
$provide.factory('redirect', redirect);
$httpProvider.interceptors.push('redirect');
//function redirect($q, $injector, auth, store, $location) {
function redirect($q, $injector, store, $location) {
return {
responseError: function(rejection) {
if (rejection.status === 401) {
//INJECT HERE
var auth = $injector.get("auth");
auth.signout();
store.remove('profile');
store.remove('id_token');
$location.path('/home');
}
return $q.reject(rejection);
}
}
}