Asynchronous call of two functions in Angular 2 using promise

Question

I have the following method in auth.nav.service.ts:

 public login () {
  this.authService.login();
  this.navService.redirectAfterLogin();
}

in nav.service.ts:

public redirectAfterLogin () {
  let nav = this.app.getRootNav();
  nav.setRoot(TabsPage);
  nav.popToRoot();
}

In Auth.service.ts:

public login() {
  const client = new Auth0Cordova(auth0Config);

  const options = {
    scope: 'openid profile offline_access'
  };

client.authorize(options, (err, authResult) => {
  if(err) {
    throw err;
  }

  this.setIdToken(authResult.idToken);
  this.setAccessToken(authResult.accessToken);

  const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
  this.setStorageVariable('expires_at', expiresAt);

  this.auth0.client.userInfo(this.accessToken, (err, profile) => {
    if(err) {
        throw err;
    }

    profile.user_metadata = profile.user_metadata || {};
    this.setStorageVariable('profile', profile);
    this.zone.run(() => {
        this.user = profile;

      });

    });

  });
}

I want to have the login function ran successfully and the use the RedirectAfterLogin. How can I do that with Promise ? I'm using Angular 2, Ionic-Native 3 and auth0.

This? https://stackoverflow.com/questions/39645491/how-to-wait-for-a-function-to-finish-its-execution-in-angular-2 — AT82, Jul 15 '17 at 20:29
@AJT_82, thanks, I finally made my promise work, the problem I had was with the scope of variables inside the 'then' scope. — user666, Jul 16 '17 at 06:22

score 1 · Accepted Answer · answered Jul 16 '17 at 06:28

I made it work with a promise, and fixing the scope of the variables (this) inside the then scope.

auth.view.service.ts

 public login () {
  var t = this; // this scope is lost inside the then.
  this.authService.login().then(function (response){
    t.navService.redirectAfterLogin();
  });
 }

auth.service.ts

 public login () {
return new Promise<any>((resolve, reject) => {

  const client = new Auth0Cordova(auth0Config);

  const options = {
    scope: 'openid profile offline_access'
  };

  client.authorize(options, (err, authResult) => {
    if(err) {
      throw err;
    }
    this.setIdToken(authResult.idToken);
    this.setAccessToken(authResult.accessToken);

    const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
    this.setStorageVariable('expires_at', expiresAt);

    this.auth0.client.userInfo(this.accessToken, (err, profile) => {
      if(err) {
        throw err;
      }

      profile.user_metadata = profile.user_metadata || {};
      this.setStorageVariable('profile', profile);
        this.zone.run(() => {
          this.user = profile;
          resolve(profile);
        }); // end zone run

      }); // end userInfo

    }); // end authorize
  }); // end Promise
} // end login

(Let me know in comments if there could be a better practice) See:

How to wait for a function to finish its execution in angular 2.?

javascript, promises, how to access variable this inside a then scope

Aravind · Answer 2 · 2017-07-15T18:18:10.897

0

Update you should be placing the redirection on success of authentication

public login () {
  this.authService.login();
  ///////////////// remove it 
}

Place it in the Authservice login() method

 login(){
     this.redirectAfterLogin ()
 }

Or return a Boolean variable on from the login method in AuthService

 login() :boolean {
  //// your code 
   if(success) return true; 
   else return false;

 }

In your NavService

public login () {
  if(this.authService.login()){
       this.redirectAfterLogin ();
 }

edited Jul 15 '17 at 18:18

answered Jul 15 '17 at 18:08

Aravind

40,391
16
91
110

I have it separately AuthService and AuthService.Nav methods, because I had an Ionic circular reference issue in my views (and also for cleaner and extensible code). I will try again as a last solution. For the Boolean, it does not work because for the Login there is Http call, and a modal being called (requiring user interaction to put his credentials). So a promise is needed there, but I couldn't implement it in the Auth.service method. – user666 Jul 15 '17 at 18:46

Asynchronous call of two functions in Angular 2 using promise

2 Answers2