Lock/JWT not returning email/profile. Chicken and egg problem

JWT.io
1

I am using lock v11 to authenticate in my SPA. In order to authenticate against my API backend, I need a JWT. In order to get a JWT returned instead of an opaque token, I need to set the audience to the url of an API from the auth0 dashboard. The JWT does not return the email or profile, even when set in the scope. Later on, calling https://myclient.auth0.com/userinfo fails (401) because https://myclient.auth0.com is not set as the audience. If I set the audience to https://myclient.auth0.com then I get a returned opaque token instead of a JWT.

const options = {
  auth: {
    audience: 'https://url.to/myapi',
    responseType: 'token id_token',
    params: {
      scope: 'openid email profile'
    }
  }

I guess my question is, how can I get the email and profile of a user returned inside of the JWT? All the docs point to setting the scope to “openid email profile”, but that does not work for me. Here is an example of the returned payload, with the scope set to “openid email profile”.

"idTokenPayload": {
	"iss": "https://blahblah.auth0.com/",
	"sub": "auth0|xxxxxxxxxx",
	"aud": "xxxxxxxxx",
	"iat": xxxxxxxx,
	"exp": xxxxxxxx,
	"at_hash": "xxxxxxxx",
	"nonce": "xxxxxxxx"
},
3

Hey there @gorbypark! I will happily look into this for you with our TSE team and see what we can find out! Thanks!

4

After checking with one of our TSE team members @gorbypark, you will want to make sure to attach access token in the authorization header when calling the /userinfo endpoint. Also, the userinfo endpoint is automatically added as the audience when you add the openid scope.

Here is a sample that maybe able to solve the issue you are facing currently:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample Application 3</title>
</head>

<body>
    <h1>Application 3</h1>
    <H1>A very simple single page application</H1>
    <button onclick="signin()">Login</button>
    <p> Results of Login will be displayed below: </p>
    <br>
    <div id="result"></div>
    <!-- <script src="//cdn.auth0.com/js/lock/11.3/lock.min.js"></script> -->
    <script src="https://cdn.auth0.com/js/lock/11.9.1/lock.min.js"></script>
    <script type="text/javascript">
        var lockOptions = {
            auth: {
                audience: "https://url.to/myapi",
                responseType: 'token id_token',
                params: {
                    scope: 'openid email profile',
                }
            }
        };
        var lock = new Auth0Lock("[Client id]", "[Domain]", lockOptions);
        lock.on('authenticated', function (authResult) {
            lock.getProfile(authResult.accessToken, function (error, profile) {
                if (error) {
                    console.error('Cannot get user :(', error);
                    return;
                }
                localStorage.setItem("accessToken", authResult.accessToken);
                localStorage.setItem("profile", JSON.stringify(profile));
                //Display the results of login on the page
                document.getElementById("result").innerHTML = "Login Succeeded: " +
                    "<br><br>" + "id_token: " + authResult.idToken + "<br><br>" + " user profile:" +
                    profile.name + " < br > " + "user id: " + profile.sub + "<br><br>" +
                    "access token: " + authResult.accessToken + "<br>";
            });
        });
        var onError = function (err) {
            console.log('There was an error', err);
        };
        lock.on('authorization_error', onError);
        lock.on('unrecoverable_error', onError);
        //When the user presses login button, trigger login widget
        var signin = function () {
            lock.show();
        };
    </script>
</body>

</html>

Also some documentation on Access Tokens:
https://auth0.com/docs/tokens/access-token

Please let me know if you have any questions. Thanks!

5

I wanted to follow up @gorbypark and see if you had any additional questions regarding this matter? Thanks!

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.