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.
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”.
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>