Using profile information in app

Help
1

Hello, auth0 community! I am somewhat new to coding, trying to figure out auth0 and I need some help implementing what I assume is a fairly basic functionality thing in my angular/typescript app:

I need to know how to get access to the “sub” value that contains the user id from a logged-in user so that I can do some logic with it in my app. I only need to read this value I don’t need to modify it in any way.

I’ve followed this: Authentication & Authorization in Angular with Auth0 | ng-conf & Auth0 | #ngconf - YouTube tutorial to set up the user authorization and they also do some things like putting {{user.name}} and {{user.sub}} in the html, and that all works fine. I don’t seem to be able to access these user values in the logic in my ts file, however.

My ts file looks like this, by the way:

import { Component, OnInit } from ‘@angular/core’;

import { AuthService } from ‘@auth0/auth0-angular’;

@Component({

selector: ‘app-profile’,

templateUrl: ‘./profile.component.html’,

styleUrls: [‘./profile.component.css’]

})

export class ProfileComponent implements OnInit {

profileJson: string = null;

constructor(public auth: AuthService) { }

ngOnInit(): void {

this.auth.user$.subscribe(

  (profile) => (this.profileJson = JSON.stringify(profile, null, 2))

);

}

}

So, as you can see I DO have access to the profile in the profileJson variable, and I can make that display in a “pre” html tag, but I don’t know how to actually extract any of those values for use in logic. Im not certain if I’m even supposed to get them from the profileJson value, in fact.

I’ve tried a few things I thought might work, but with no success. Please someone let me know the process for accessing this value in my app.

To be clear, when I try to use a “user.whatever” variable in the ts file my visual studio code underlines the period between “user” and “whatever” with red squiggles and doesn’t seem to recognize the “user” variable as something meaningful, which is baffling to me, because that value works just fine in the html file as {{user.email}} or whatever value I choose.

And, also, I have an optional PS question:

I tried importing the AuthService into a DIFFERENT module in my app with the same steps where I import AuthService from @auth0/auth0-angular and then put it into my constructor, and even subscribe to the profile info with ngOnInit() like in the code you see above, and when I did that it didn’t allow me to even use {{user.name}} or any interpolated value like that in my html like it did in my profile component. Why is this? Any thoughts? This second question is not directly related to my problem I don’t think, so it’s not vital to answer, but I am curious.

Thank you very much to anyone who can help me out with this problem or provide any insight!

1 Like
2

Hey. Did you find the answer to this question?

3

You can do something like this:

this.auth.user$.subscribe(
        (profile) => {
        // (this.profileJson = JSON.stringify(profile, null, 2))
        // set some variables from profile
        console.log(profile.sub);
        }
      );