Adding Scopes to Access Token created for React app

Help
,
1

I’m a little confused on how exactly to achieve this but I have a react frontend app and a spring boot backend. I can authenticate and get an access token, so the login works, but when I decode the the token the scope does not include any custom scopes added through auth0 backend apis, any permissions I have listed on the auth0 page do not show up on the token when decoded, I’ve tried everything, ranging from adding the scope through post login action, enabling / disabling all rbac permissions but nothing seems to work, I’m wondering if I need a different kind of token? what is the proper way of loging in from react app and authenticate against a resource server written in spring boot? The spring boot backend is correctly configured and validated, the only problem is that routes that require certain scope permissions fail because the scope is not included in the token from react, so it really is just that issue.

2

What does your React app’s configuration look like? I assume you’re passing an audience parameter to get the access token as a JWT. If your JWT doesn’t have your custom claims in them, it’s probably because of your Login Action. Can you please post your code for that and how you enabled it?

1 Like
3

Sure!

<Auth0Provider
      domain={domain}
      clientId={clientId}
      useRefreshToken={true}
      cacheLocation={"localstorage"}
      useRefreshTokens={true}
      authorizationParams={{
        redirect_uri: redirectUri,
        audience: "https://dev-2qpd6ih4q08k47up.uk.auth0.com/api/v2/",
        scope:
          "openid profile email phone read:current_user offline_access update:current_user_metadata read:users read:roles read:role_members read:bank-performance",
      }}
      onRedirectCallback={onRedirectCallback}
    >

I’m trying to get the read:bank-performance which is a custom role created on auth0 UI. But the Auth0Provider is getting it from a Single Page Application, but the permission read:bank-performance is from an API in auth0

4

Also adding to the code. I have a callback-page.js that is called when auth0 returns from user login

 useEffect(() => {
    (async () => {
      try {
        const accessToken = await getAccessTokenSilently();
        console.log("TOKEN", accessToken);
        const token = await getAccessTokenSilently({
          authorizationParams: {
            audience: "https://bank-service",
            scope: "read:bank-performance",
          },
        });
        const response = await fetch(
          "https://localhost:4000/api/v1/transaction-bank/",
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
        console.log("RESPONSE FROM SERVEER!!", await response.json());
      } catch (e) {
        // Handle errors such as `login_required` and `consent_required` by re-prompting for a login
        console.error(e);
      }
    })();

I’m not sure if I’m doing it right but I’m trying to get a token that has access to the bank-service api in auth0, trying to get a token with the scope read:bank-performance

authorizationParams: {
            audience: "https://bank-service",
            scope: "read:bank-performance",
          },

Trying to get a token so I can access the resource at https://localhost:4000/api/v1/transaction-bank/ that is only authorized if the scope has read:bank-performance.
am I doing something wrong? I’ve been stuck on this for weeks now.

5

Anyone who can help with the problem above?