VueJS Auth0 user profile

Help
,
1

I’m using an example vue’js project:

I don’t seem to be able to retrieve user profile information following a login. I have tried adding the block that calls client.userInfo() in the login code as below:

  handleAuthentication () {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult)

        this.auth0.client.userInfo(authResult.accessToken, function (err, user) {
          localStorage.setItem('user_details', user)
          console.log(user)
          console.log(err)
        })

        router.replace('home')
      } else if (err) {
        router.replace('home')
        console.log(err)
        alert(`Error: ${err.error}. Check the console for further details.`)
      }
    })
  }

But my user object doesn’t appear to hold any data. Can anyone spot what I’m missing here?

UPDATE

Here is access to the HAR file:

https://sharelock.io/1/nFK33NKAsBCT_ZL7FLvEbeZl8l0MCJvBP2IM-8pmhcU.5EvQIJ/jmNQ-Px6IeQw9RuAzGX2CrpL5cVl--sm1Esb3ONgWp77PAjpN2/jlTlJxMwDvGqdDfWsY1hdT53BZ12ux0twyIXWUpJNNqG93-E4Z/Zr5xFbXDzx2WzHMV6ke0gRNKwmH73R.XDsxtCACuuCPinCtgyb/z0Q

To clarify, what I’m doing (from the VueJS example Auth0 provides) I’m:

  1. making a client.userinfo request inside the parseHash method:

    this.auth0.client.userInfo(authResult.accessToken, function (err, user) {
    localStorage.setItem(‘user_details’, user)
    …

  2. providing a method to retrieve this in the AuthService:

    getUser(){
    return JSON.stringify(localStorage.getItem(‘user_details’))
    }

  3. Providing the the AuthService as a prop to my home component from my app.vue:

    const auth = new AuthService()

  4. Receiving this in the home.vue component and calling getUser() to show the user details:

             {{ auth.getUser() }}

There isn’t a problem accessing the authService prop in my home.vue component as I have code that runs the logout function from here in much the same way:

<h4 v-if="authenticated">
          You are logged in!!
          <a @click="auth.logout()">Log Out</a>
      </h4>

This project is based on the VueJS example project Auth0 provides so am unsure what I could be doing wrong. All documentation I have found seems to confirm that calling this.auth0.client.userInfo(authResult.accessToken, function(err, user) {… should result in the user object being populated as per the example json data shown on the success page when you click the ‘try it’ button from the Auth0 dashboard.

2

Please capture a HAR file for the authentication request:
Generate and Analyze HAR Files.

Please remove any passwords and upload the file to a cloud storage service (e.g. Google Drive) to share the link with us. Feel free to restrict access to the link to only @auth0.com email domains using Sharelock.io.

3

(yes, very late follow-up, but I missed your update and only noticed it now when someone else posted an answer)

(UPDATE) Based on the HAR file you’re requesting only the openid scope which only grants you access to a user identifier. For additional information, you may want to specify scope has openid email profile.

As mentioned in the comments a HAR file would likely include the necessary information to provide a more definitive answer.

Due to the above, it’s only possible to guess at the possible cause. From your description and since you did not provide the configuration part of the code, I’m assuming you are using the default one currently available in the linked sample code.

If that’s the case then the sample code specifies scope=openid which means that you will receive the user identifier as part of the ID token and with any calls to /userinfo. If you want more information about the user who completed the authentication then you need to request it through the scopes (if the information is standard OpenID Connect claims). For example, scope=openid email will also get the user email address if available and scope= openid email profile will get even more information about the user.

Finally, if you need to include custom information that is not defined as part of OpenID Connect you can do so by including custom claims; see:

4

@stratman82 I provided (a very late) update to my original answer.