Parse userProfile$ observable to get name and picture from Auth0 authentication

Question

I'm building a platform with Angular and I am using Auth0 to provide authentication. I used the demo code that Auth0 provides to implement it into my program. All works fine but I want to retrieve the user name and picture after they log in so I can display it. On the Auth0 website, I found this piece of code that I can implement. It works but when I want to call a specific item, let's say the name, it displays it with quotation marks ".

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

This code gives me this as output:

{
  "iss": "http://YOUR_DOMAIN/",
  "sub": "auth0|123456",
  "aud": "YOUR_CLIENT_ID",
  "exp": 1311281970,
  "iat": 1311280970,
  "name": "Jane Doe",
  "given_name": "Jane",
  "family_name": "Doe",
  "gender": "female",
  "birthdate": "0000-10-31",
  "email": "janedoe@example.com",
  "picture": "http://example.com/janedoe/me.jpg" }

The way it is written gives me a feeling that it is bad practice to get the information this way. I am interested in the name and picture and I need it to display without quotes. Can someone give me more insight on how to achieve this?

Answer 1

I cannot comment if this is a bad practice. But to remove the quotes, remove the json pipe and access the properties directly.

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

The json pipe is actually the opposite of what you need. It is used to convert a value into a stringified JSON format before displaying it.