Empty payload in access_token

I created a new Application and API while following Auth0 tutorials and tokens requested from my Angular web application come with no payload in the access_token portion of the response.

id_token has a payload. Are there settings necessary to add roles, permissions, claims to the payload or enable the payload too be added to the JWT on an application (NOT on an API).

Hi @Blissitte,

Welcome to the Auth0 Community!

I understand that you have encountered issues getting a working access token.

Before we continue, could you please clarify the /authorize and /oauth/token requests that you made?

For example:

https://YOUR_DOMAIN/authorize?
    response_type=code&
    client_id=YOUR_CLIENT_ID&
    redirect_uri=https://YOUR_APP/callback&
    scope=SCOPE&
    audience=API_AUDIENCE&
    state=STATE

and

curl --request POST \
  --url 'https://YOUR_DOMAIN/oauth/token' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=authorization_code \
  --data 'client_id=YOUR_CLIENT_ID' \
  --data client_secret=YOUR_CLIENT_SECRET \
  --data code=YOUR_AUTHORIZATION_CODE \
  --data 'redirect_uri=https://YOUR_APP/callback'

Looking forward to your response.

Thanks.

1 Like

Certainly, I am using the auth0-angular package so our authorize request looks like so:

https://dev-u3c56kd8.us.auth0.com/authorize?redirect_uri=http://localhost:4200
&client_id=AS5QbWyBNqbk1cvLgf1AWfsVd1xfDCK9
&scope=openid profile email
&response_type=code
&response_mode=web_message
&state=WTlXQ1Boa3VzR3M0NGJfT1Z1WUxybm42Z095YVRWfml5WThjWjZqU3hNbw==
&nonce=UzdpaVNjMDRiTVZubzJGdjd0d1dvSmE1eXNmV0VfUTFVUURoZGs2Mm82bw==
&code_challenge=DYoEA7GWQ9djGq8qgYWnUMY1MDlomdwTBTwUFjfnfbM
&code_challenge_method=S256
&prompt=none
&auth0Client=eyJuYW1lIjoiQGF1dGgwL2F1dGgwLWFuZ3VsYXIiLCJ2ZXJzaW9uIjoiMS44LjEifQ==

And the token request looks like so:

curl “https://dev-u3c56kd8.us.auth0.com/oauth/token” ^
-H “authority: dev-u3c56kd8.us.auth0.com” ^
-H “auth0-client: eyJuYW1lIjoiQGF1dGgwL2F1dGgwLWFuZ3VsYXIiLCJ2ZXJzaW9uIjoiMS44LjEifQ==” ^
-H “user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36” ^
-H “content-type: application/json” ^
-H “accept: /” ^
-H “sec-gpc: 1” ^
-H “origin: http://localhost:4200” ^
-H “sec-fetch-site: cross-site” ^
-H “sec-fetch-mode: cors” ^
-H “sec-fetch-dest: empty” ^
-H “referer: http://localhost:4200/” ^
-H “accept-language: en-US,en;q=0.9” ^
–data-raw “^{^^“client_id^^”:^^“AS5QbWyBNqbk1cvLgf1AWfsVd1xfDCK9^^”,^^“code_verifier^^”:^^“T_CVy623KIsyjzS6BBzG8FzcNbnACsZwjcHtRa6lfoK^^”,^^“grant_type^^”:^^“authorization_code^^”,^^“code^^”:^^“FZzN9ZXgAPSPYOGuWyy5rDQ0mJHyT1bkYFYbEMzp-m8Pe^^”,^^“redirect_uri^^”:^^“http://localhost:4200^^”^}” ^
–compressed

1 Like

I just realized that the data section does not have a very good representation of that payload for the token request.

image

Figured out the problem. I did not have the audience property in my auth object! For future developers, you have to specify the APIs that you want to get tokens to authorize your user for. In this case I am in an Angular web application, my auth details are in my environment.ts file and are passed to the AuthModule.forRoot() call in my app.module.ts.

Exerpt from app.module.ts

AuthModule.forRoot({
…environment.auth,
httpInterceptor: {
allowedList:[
https://localhost:8443/*
]
}
})

environment.ts

export const environment = {
production: false,
baseApiUrl: “/api”,
auth: {
domain: ‘https://{myAuthDomain}.us.auth0.com’,
clientId: ‘{My Client Id}’,
redirectUri: window.location.origin,
audience: “{The API Audience that I am going to call}”, //This was missing
}
};

1 Like

Hi @Blissitte,

Thank you for your responses and for sharing your solution with the Community!

I’m glad that everything is working now.

Please don’t hesitate to reach out if you have any further questions.

Have a good rest of your day!

Thank you.

1 Like

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