auth0 callback doesn't set profile date after login angular2

Question

I have an angular 2 app which uses auth0 for authentication. The issue I'm having is that when a successful login occurs, it seems like the lock callback is not being called. Only after I do a manually refresh of the page will the profile data be sent to local storage.

When a user logs in, I need to grab that profile object and use it within the component class. This code works only after I manually refresh the page following a successful login. Here is my code (only including the important parts).

auth.service

 lock = new Auth0Lock('.....9cNzyzJ3DZc2VpDyXSYF5', '.....12.auth0.com', {});

  user: any;

  constructor() {
    // Add callback for lock `authenticated` event
    this.user = JSON.parse(localStorage.getItem('profile'));
    this.lock.on("authenticated", (authResult:any) => {
      this.lock.getProfile(authResult.idToken, function(error: any, profile: any){
        if(error){
          throw new Error(error);
        }
        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('profile', JSON.stringify(profile));
        this.user = profile;
      });

    });
  }

  public login() {
    // Call the show method to display the widget.
    this.lock.show();
    console.log('login func');
  };

nav.component

constructor(private auth: Auth, private groupsService: GroupsService){

}

ngOnInit(){
    // need to access the profile object here. Ocject is correctly logged only after refreshing.
    console.log(JSON.parse(localStorage.getItem('profile')));
    this.groupsService.getGroups(this.userId).subscribe(groups => {
        this.groups = groups;

        // sort the groups
        this.groups.sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime());
    });
}

Hey I have the same problem. How did you solve this? – wuno Mar 01 '17 at 23:52 — wuno, Mar 01 '17 at 23:52

score 1 · Accepted Answer · answered Dec 12 '16 at 09:07

1

According to the documentation for ngOnInit:

ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

_{(emphasis is mine)}

Which indicates that when its run there isn't a user profile available yet because the authentication was still not processed. If you cause a page refresh after authentication, the user profile is already available in Web Storage and the manual refresh causes the ngOnInit to be executed leading to the behavior you described.

answered Dec 12 '16 at 09:07

João Angelo

56,552
12
145
147

Ahh well I also tried putting the code from the ngOnInit into the constructor, andit had the same effect. Where should it go? – jdoyle1331 Dec 12 '16 at 16:06
My Angular2 knowledge is limited, but you'll need to handle the authenticated event in a way that allows other components to react to the change in state (user profile availability). Check this [question/answer](http://stackoverflow.com/questions/34700438/global-events-in-angular-2). – João Angelo Dec 12 '16 at 16:40

auth0 callback doesn't set profile date after login angular2

1 Answers1