Getting Opaque token instead of JWT token (Audience Added)

[fabri-g]

Hi! I’m developing a React application using Auth0 for authentication. I’m using the getAccessTokenSilently method to get an access token to use in my backend.

This is my Auth0Provider component:

<Auth0Provider
      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
      clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID}
      redirectUri={window.location.origin}
      audience={process.env.NEXT_PUBLIC_AUTH0_AUDIENCE}
      scope="openid profile email"
    >
       <App />
    </Auth0Provider>

I’m using the loginWithRedirect function to manage the login.

This is how I’m trying to retrieve the access token (I added the log to see if it worked correctly):

const fetchAccessToken = async () => {
      try {
        const accessToken = await getAccessTokenSilently();
        console.log("Access Token:", accessToken);
      } catch (e) {
        console.error(e);
      }
    };

The access token I get has this format:

I read this post: Added Audience and STILL getting Opaque token instead of JWT token with React
But the solution haven’t worked in my case

[rueben.tiow]

Hi @fabri-g,

Welcome to the Auth0 Community!

After reviewing your screenshot, I can confirm that you are getting an opaque access token instead of a JWT access token.

This happens when the audience parameter is omitted from your login request. Of course, this contradicts setting the audience in the Auth0Provider.

So, in this case, we will want to check the network activity on a browser to see if the audience parameter is passed in the login request (/authorize). Could you give that a try and let me know what you find?

Thanks,
Rueben