How to get permissions in auth token for react client?

[joni.r]

Integrating Auth0 with React client has turned out to be challenging. I’m unable to retrieve scopes I have added to the API in the Auth0 website.

Given the following code to retrieve an access token to the client:

  useEffect(() => {
    async function getToken() {
      const token = await getAccessTokenSilently({
        ignoreCache: true,
        audience: `https://${domain}/api/v2/`,
        scope: 'read:current_user read:products write:products',
      });
      console.log('got token', token);
    }

    if (isAuthenticated) {
      getToken();
    }
  });

I successfully get an access token. However, it does not include read:products or write:products scopes.

Scopes that get returned with the access token are:
"scope": "openid profile email read:current_user"

Why doesn’t read:products and write:products get sent back?

I have added permissions to the specific user directly from Auth0 website.

Here is how Auth0Provider has been set up:

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={process.env.REACT_APP_AUTH0_DOMAIN || ''}
      clientId={process.env.REACT_APP_AUTH0_CLIENT_ID || ''}
      audience={audience}
      scope="read:current_user read:products write:products"
      redirectUri={window.location.origin}
    >
      <Provider store={store}>
        <App />
      </Provider>
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

library versions used

"@auth0/auth0-react": "^1.2.0"
 "react": "^17.0.1"

[dan.woda]

It looks like you are requesting a management API token (specified by the audience param), not a token for whatever API is related to the read and write scopes you are expecting.

Is there a reason you need the management API audience?

[joni.r]

Thank you Dan, yes I had set audience to request mgmt API token, which obviously was not what I intended. Thank you for spotting.

[dan.woda]

Glad we found the solution! Let us know if you have other questions.