Opaque token returned for hosted lock with audience param

Help
,
1

Hi,
I’m having trouble getting an access_token for my API using the hosted Lock. I’ve specified the audience as follows:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  auth: {
    redirectUrl: config.callbackURL,
    responseType: (config.internalOptions || {}).response_type ||
      config.callbackOnLocationHash ? 'token' : 'code',
    params: config.internalOptions,
    audience: 'my_api_identifier'
  },

Which sends the request:

https://myapp.auth0.com/authorize?client_id=1yMOhyS....
&response_type=token%20id_token
&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fcallback
&audience=my_api_identifier
&connection=Username-Password-Authentication
&login_hint=mark%40email.com
&nonce=6wcybvcAB...
&state=uxnbKWq7h...
&scope=openid%20profile
&_csrf=deprecated
&protocol=oauth2
&auth0Client=eyJuYW1l...
&_intstate=true

But, event though the audience param is set correctly, I just get an opaque access token back rather than the JWT I need to access my_api_identifier.

I also tried the request with a bogus audience, and the authentication didn’t fail, so it’s my guess that some other parameters are causing the audience to be ignored entirely.

Any ideas?

2

You shouldn’t be setting the audience in the hosted login page, it should be set in your auth0.WebAuth object that makes the original authorization request.

Your hosted login page code should look like:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
   auth: {
     redirectUrl: config.callbackURL,
     responseType: (config.internalOptions || {}).response_type ||
       config.callbackOnLocationHash ? 'token' : 'code',
     params: config.internalOptions
   },

And your WebAuth request should be:

var webAuth = new auth0.WebAuth({
  domain: {YOUR_AUTH0_DOMAIN}, 
  clientID: {CLIENT_ID},
  audience: {API_AUDIENCE},
  redirectUri: {CALLBACK_URL}, 
  scope: 'openid profile',
  responseType: 'token id_token'
});
webAuth.authorize();

This will give you a JWT access token. Also note that [when the audience is /userinfo] (https://auth0.com/docs/tokens/access-token#access-token-format), an opaque token will always be issued.

3

Hey Ricardo, ah yes, I should have thought to look into the angular docs as well. I was looking at this documentation Lock Configuration Options and trying to figure it out from the chrome debugger.