auth0 get profile information backside

Question

I'm trying to get user profile information from Auth0. It works in the frontend with the pipe Async

<pre *ngIf="auth.userProfile$ | async as profile">
<code>{{ profile | json }}</code>
</pre>

But in the backend If I want to read the nickname and do something with it. I'm lost.

constructor(public auth: AuthService)
ngOnInit() {
   if (this.auth.isAuthenticated$) {
    const result = this.auth.userProfile$;
   }
}

I know that my varibale "result" is an Observable. But I'm new with this stuff of Observable. And I try to get the value. If I use the debug console, I can see the value with this line:

this.auth.userProfile$.source.value.nickname

But If I wrote it in my code, I have this error: Typescript error: Property 'value' does not exist on type 'Observable'

ngOnInit() {
   if (this.auth.isAuthenticated$) {
    const result = this.auth.userProfile$;
    console.log(this.auth.userProfile$.source.value.nickname); // error here

   }
}

So someone can help me with this? thanks

Answer 1

You access data within an observable by subscribing to it (this is what the async pipe does under the hood).

Here's an example for how to subscribe to your observable:

// import { tap } from 'rxjs/operators';
// tap is one of many rxjs operators
// operators allow you to perform operations on data within observables

this.auth.userProfile$.pipe(
  tap(profile => {
    console.log(profile);
  })
)
.subscribe(); // this is what allows you access the data within the observable

Observables: https://angular.io/guide/observables

RXJS Operators: https://rxjs-dev.firebaseapp.com/guide/operators

Answer 2

I finally find a solution:

in the class I enter this code:

export class getInfo implements OnInit {
   private login_info: any;

   ngOnInit() {
      this.auth.getUser$().subscribe(val => {
        this.login_info = val;
        console.log('print info', val.nickname);
     });
  }
}

public useInfo(status: string) {
  console.log('print info', this.login_info.nickname);
}

So In the useInfo method, I can use the information that I grabbed from the user profile.