Invalid claims from backend API in production but successful in development environment

[authgent]

I am using Auth0Provider to secure routes in my React application. I also have a Flask backend that protects resources from this tutorial: Auth0 Python API SDK Quickstarts: Authorization

I then use getAccessTokenSilently(audience: API_AUDIENCE, scope: SCOPES) in the React app to get an access token. All is good so far.

The problem is when my React app makes an HTTP request to the API, hosted on Heroku via:

const apiResponse = await fetch(url, {
   headers: {
       Authorization: `Bearer ${accessToken}`,
   }
});

If I send this token to the Heroku endpoint (production), I get a 400 response with the message: ‘Invalid claims, please check the audience and issuer’

However, if I send the token to the API running locally (development)

Verifications:

• The AUTH0_AUDIENCE in both the React app and the Flask API are the same:
  • https://<API-IDENTIFIER>
• The AUTH0_DOMAIN in both the React app and the Flask API are also the same:
  • <TENANT-NAME>.us.auth0.com
• The CLIENT_ID in the React app is the same as the app in the Auh0 Dashboard

Any idea where this error might be coming from? Thanks!

[rueben.tiow]

Hi @authgent,

Thanks for reaching out to the Auth0 Community!

I understand that you’ve encountered issues with your app when deployed on Heroku. I’d be happy to help.

First, could you please check whether the access token you passed matches the audience and issuer you expect using jwt.io?

Generally, the audience should reference your Python API identifier and the issuer referencing your domain.

Looking forward to your reply.

Thanks.

[authgent]

Thanks for the quick response! Here is the result:

{
  "iss": "https://<TENANT-NAME>.us.auth0.com/",
  "aud": "https://<AUTH0-AUDIENCE>",
}

These are the expected values and match the ones in both the React app and the Flask API.

[authgent]

Absolutely cannot believe that I missed this. PLEASE check that your environment variables in both production and development environments are accurate. My audience variable was not correct in my Heroku deployment. This solved my problem. Unreal, can’t believe I glossed over that…

[rueben.tiow]

Hi @authgent,

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

We’ve all been there. I’m happy that everything works now!

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

Have a good rest of your day!