Circular Dependency Error with Auth0

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);
    }
  }
}