React app, Receiving an Opaque Token when I should be receiving a JWT token supposedly

[authMemberuser]

Hi,

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.

I am using the @auth0/auth0-react package with version "^2.0.1"

I have defined the audience and scope in the Provider in index.js as well:

 <Auth0Provider
        domain={process.env.REACT_APP_AUTH0_DOMAIN}
        clientId={process.env.REACT_APP_AUTH0_CLIENTID}
        authorizationParams={{
          redirect_uri: window.location.origin,
        }}
        audience="http://localhost:5000"
        scope="openid profile email"
      >
        <App />
      </Auth0Provider>

The audience I have specified is the audience of a valid API that I have created from my Auth0 dashboard. I am pretty confident the api has been set up correctly as well as the actual application which is OIDC conformant. I don’t know what to do. This is the example token I receive from getAccessTokenSliently:

Please help! Thanks!

[tyf]

Hey @authMemberuser !

What happens if you move the audience param (scope as well) to within the authorizationParams object?

<Auth0Provider
        domain={process.env.REACT_APP_AUTH0_DOMAIN}
        clientId={process.env.REACT_APP_AUTH0_CLIENTID}
        authorizationParams={{
          redirect_uri: window.location.origin,
          audience="http://localhost:5000",
          scope="openid profile email"
        }}
      >
        <App />
      </Auth0Provider>