CODEWITHSUNDEEP
angulartypescriptobservableauth0
Thomas
Thomas

Reputation: 117

Retrieving User Profile Information in Auth0

I’m developing an Angular 8 SPA and have successfully integrated Auth0 authentication. The profile information for each user displays just as the Auth0 tutorial shows. See the screen output below. How do I access the email property after the user logs in?

{
  "nickname": "user,
  "name": "[email protected]",
  "picture": "https://s.gravatar.com/user_image.png",
  "updated_at": "2020-01-15T17:39:10.467Z",
  "email": "[email protected]",
  "email_verified": true,
  "sub": "auth0|000000000000000000000000"
}

In app.module.ts, I tried subscribing with the following:

currentUser: string;
this.auth.userProfile$.subscribe(userProfile => {this.currentUser = userProfile});
console.log(this.currentUser);

However, in the console I just get: null. As far as I can tell, auth.service.ts provides the necessary observable:

private userProfileSubject$ = new BehaviorSubject<any>(null);
userProfile$ = this.userProfileSubject$.asObservable();

Any direction is appreciated.

Upvotes: 1

Views: 1694

Answers (2)

Kirill Simonov
Kirill Simonov

Reputation: 8481

The problem is that your console.log(this.currentUser) is getting executed before the value is emitted to your subscription.

If you change your code as follows, it should work:

this.auth.userProfile$.subscribe(userProfile => {
    this.currentUser = userProfile;
    console.log(this.currentUser);
});

Upvotes: 1

XxtuperdicionxX
XxtuperdicionxX

Reputation: 74

i don't know why are you subscribing in app.module.ts since the auth.service.ts gives the possibility to connect in any other component.

i try the tutorial from the Auth0 official page and modify home-content.component.ts adding 

// import section
import { AuthService } from 'src/app/auth/auth.service';

getSessionScope(){
    this.auth.userProfile$.subscribe(data => this.currentUser = data);
    console.log(this.currentUser);

  }

and in home-content.component.html adding

<button
      id="testButton"
      class="btn btn-primary btn-margin"
      (click)="getSessionScope()"
    >
      log session
    </button>

and once the click event is trigger through the auth.service you can get the session data. so if you need the email the try this.currentUser.email

Upvotes: 1

Related Questions