I get authManager is undefined

Question

I am having trouble with authentication using Auth0.

I get authenticate is undefined on the authManager.

The authManager is injected to the authService, and it is added in app "auth0.lock", "angular-jwt" is added to the module.

App.ts (run method):

app.run(["$rootScope", "authManager", "AuthService",
    function($rootScope, authManager, authService) {

  // Put the authService on $rootScope so its methods
  // can be accessed from the nav bar
  $rootScope.authService = authService;

  // Register the authentication listener that is
  // set up in auth.service.js
  authService.registerAuthenticationListener();

  // Use the authManager from angular-jwt to check for
  // the user's authentication state when the page is
  // refreshed and maintain authentication
  authManager.checkAuthOnRefresh();

  // Listen for 401 unauthorized requests and redirect
  // the user to the login page
  authManager.redirectWhenUnauthenticated();

}]);

AuthService.ts:

class AuthService {

public userProfile: any;

constructor(private $rootScope, private lock, private authManager) {
    this.userProfile = JSON.parse(localStorage.getItem("profile")) || {};
}

public login() {
  this.lock.show();
}

// Logging out just requires removing the user's
// id_token and profile
public logout() {
  localStorage.removeItem("id_token");
  localStorage.removeItem("profile");
  this.authManager.unauthenticate();
  this.userProfile = {};
}

// Set up the logic for when a user authenticates
// This method is called from app.run.js
public registerAuthenticationListener(authManager) {
  //const self = AuthService._instance;

  this.lock.on("authenticated", function(authResult) {
    localStorage.setItem("id_token", authResult.idToken);
    authManager.authenticate(); // <-- here is the error

    this.lock.getProfile(authResult.idToken, function(error, profile) {
      if (error) {
        console.log(error);
      }

      localStorage.setItem("profile", JSON.stringify(profile));
      this.$rootScope.$broadcast("userProfileSet", profile);
    });
  });
}
}


AuthService.$inject = ["$rootScope", "lock", "authManager"];
export default AuthService;

I added a static factory method in the service, and the authManager is not undefined but it's not getting set in the authService constructor.

Here's the code:

public static Factory($rootScope, lock, authManager) {
AuthService._instance = new AuthService($rootScope, lock, authManager);
console.log("authManager: " + authManager.authenticate);
return AuthService._instance;  

}

Answer 1

The solution when using TypeScript and ES6:

Step1: app.ts

.service("AuthService", AuthService.Factory)

step2: authService

class AuthService {
  private static _instance: AuthService;
  public userProfile: any;
  private _authManager: any;
  private _lock: any;
  private _$rootScope: any;

  public static Factory($rootScope, lock, authManager) {
     AuthService._instance = new AuthService($rootScope, lock, authManager);
     return AuthService._instance;
  }

  constructor(private $rootScope, private lock, private authManager) {
    this._authManager = authManager;
    this._lock = lock;
    this._$rootScope = $rootScope;
    this.userProfile = JSON.parse(localStorage.getItem("profile")) || {};
  }

  public login() {
    this.lock.show();
  }

  // Logging out just requires removing the user's
  // id_token and profile
  public logout() {
    localStorage.removeItem("id_token");
    localStorage.removeItem("profile");
    this.authManager.unauthenticate();
    this.userProfile = {};
  }

  // Set up the logic for when a user authenticates
  // This method is called from app.run.js
  public registerAuthenticationListener() {
    const self = AuthService._instance;    

    this.lock.on("authenticated", function (authResult) {
      localStorage.setItem("id_token", authResult.idToken);
      self._authManager.authenticate();

      self._lock.getProfile(authResult.idToken, function (error, profile) {
        if (error) {
          console.log(error);
        }

        localStorage.setItem("profile", JSON.stringify(profile));
        self._$rootScope.$broadcast("userProfileSet", profile);
      });
    });
  }
}


AuthService.$inject = ["$rootScope", "lock", "authManager"];
export default AuthService;

I am creating a new instance in the factory and then using it in the methods by getting the instance. const self = AuthService._instance.