Added Audience and STILL getting Opaque token instead of JWT token with React

[nicktb]

Hello,

I’m currently developing a React application using Auth0 for authentication. I have set up the Auth0Provider with the correct audience and I’m using the getAccessTokenSilently method to retrieve the access token.

However, I’m encountering an issue where I’m receiving an opaque token instead of the expected JWT token. This is causing problems when I try to use this token to authenticate with my API.

Good to note, my client side code is deployed with AWS Amplify

Here’s the relevant code in my application:

<Auth0Provider
domain={process.env.REACT_APP_AUTH0_DOMAIN}
clientId={process.env.REACT_APP_CLIENT_ID}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
audience=‘API IDENTIFIER URL’

And in my Profile.js:

const token = await getAccessTokenSilently({
audience: ‘API IDENTIFIER URL’
});

I’ve checked my Auth0 application and API settings, and everything seems to be configured correctly. I’m not sure why I’m receiving an opaque token instead of a JWT token.

Any help or suggestions would be greatly appreciated. Thank you!

[tyf]

Hey there @nicktb!

Do you mind sharing a har file for a user logging in through you React app?

You may also want to look into adding authorizationParams to your Auth0Provider - The audience might not be included in the authorize call constructed by the React SDK. It might look like:

<Auth0Provider
    domain="your_domain.us.auth0.com"
    clientId="client_id"
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: "https://test-api-endpoint",
      scope: "openid profile"
    }}
  >
    <App />
  </Auth0Provider>

Keep us posted!

[nicktb]

Done! Where would you like me to share the HAR?

Can I send it through a PM?

[tyf]

@nicktb

Can I send it through a PM?

Yep! I should’ve mentioned that

[nicktb]

Actually no need, your suggestion fixed my problem! You are a life saver I’d been debugging this for nearly 8 hours.

For anyone who may be having a similar problem here is what fixed it.

Solution:

The issue was resolved by making two key changes:

1. Setting the audience and scope in the Auth0Provider: The Auth0Provider was set up with the audience and scope parameters. This ensures that these parameters are included in all authorization requests made by the Auth0 client. Here’s an example:

<Auth0Provider
  domain={process.env.REACT_APP_AUTH0_DOMAIN}
  clientId={process.env.REACT_APP_CLIENT_ID}
  redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
  audience='API INDICATOR URL'
  scope='openid profile email'
>
  <App />
</Auth0Provider>

2. Removing the audience parameter from the getAccessTokenSilently calls: The audience parameter was removed from the getAccessTokenSilently calls. Since the audience is already specified in the Auth0Provider, it doesn’t need to be specified again in the getAccessTokenSilently calls.

Hope this helps someone down the line!

[tyf]

Wonderful! Happy to help and thanks for following up with the community