Access Management Api from React

Help
1

I understand that the userinfo endpoint is available from SPA applications with a user’s token, and the management API endpoints are not.
Is there a way to create and access some user base metadata from SPA ? Also how Auth0 recognize that the request came from SPA ? Is there a way to pass it ?

2

Hey @Insighting ,

Warning: Auth0 does not recommend putting Management API Tokens on the frontend that allow users to change user metadata. This can allow users to manipulate their own metadata in a way that could be detrimental to the functioning of the applications. It also allows a customer to do a DoS attack against someone’s management API by just spamming it and hitting rate limits.

Now and to answer your question, yes, you can hit Management API endpoints from a SPA application. However, since single-page applications (SPAs) are public clients and cannot securely store sensitive information (such as a Client Secret ), they must retrieve Management API Tokens from the frontend, unlike other application types. This means that Management API Tokens for SPAs have certain limitations. Specifically, they are issued in the context of the user who is currently signed in to Auth0 which limits updates to only the logged-in user’s data. Although this restricts the use of the Management API, it can still be used to perform actions related to updating the logged-in user’s user profile.

With a Management API Token issued for a SPA, you can access the following scopes (and hence endpoints):

Scope for Current User Endpoint
read:current_user GET /api/v2/users/{id} and GET /api/v2/users/{id}/enrollments
update:current_user_identities POST/api/v2/users/{id}/identities and DELETE /api/v2/users/{id}/identities/{provider}/{user_id}
update:current_user_metadata PATCH /api/v2/users/{id}
create:current_user_metadata PATCH /api/v2/users/{id}
delete:current_user_metadata DELETE /api/v2/users/{id}/multifactor/{provider}
create:current_user_device_credentials POST /api/v2/device-credentials
delete:current_user_device_credentials DELETE /api/v2/device-credentials/{id}

Source: Get Management API Access Tokens for Single-Page Applications

1 Like
3

Thanks for helping on this one @Ale !

4

Thank you Ale !

I still get 403 error every time I am trying to reach the api/v2/…

const accessToken = await getAccessTokenSilently({
          audience: `https://${domain}/api/v2/`,
          // scope: "read:current_user",
        });

        const userDetailsByIdUrl = `https://${domain}/userinfo`;

        axios
          .get(userDetailsByIdUrl, {
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          })
          .then((response) => {
            console.log(response.data);
          })
          .catch((error) => {
            console.log("ERROR API RESPONSE => ", error);
          });
      } catch (e) {
        console.log(e.message);
      }
    };

This will work but will retrieve the same user object I get from useAuth.

If I am trying to fetch something like these:

GET /api/v2/users/{id} 
GET /api/v2/users/

I will get an error

5

So, you mentioned you are calling a couple of endpoints:

GET /api/v2/users/

No, this will not work. If you take a look at the table I included in my previous response and which is documented on Get Management API Access Tokens for Single-Page Applications, you cannot call GET /api/v2/users/ with an Access Token that was issued from a SPA. It is not included in the table. Please note that GET /api/v2/users/ is not the same as GET /api/v2/users/{id}.

GET /api/v2/users/{id}

Now, this one should work as long as the ID parameter is the one of the current user. i.e. you can only retrieve information about yourself. This is why you need the read:current_user scope for this endpoint as documented in the table and the documentation above. If you are actually trying to access the current user’s data but are receiving a 403 error, then the reason will probably be that the Access Token does not contain the needed scopes, such as read:current_user.

All this means you cannot access information about other users when you are using an Access Token issued from a SPA. You can only access data about the current user.

You can’t request a full-scoped Access Token for the Management API from a SPA because SPAs are considered Public Applications. If you want to access any other user’s data (different from the current user), you cannot request the Access Token from your SPA. You must do it from a backend system of your choice instead: Get Management API Access Tokens for Production such as an M2M application.

How to implement the above and still use your SPA? Well, don’t pass the Management API Access Token to the SPA because as mentioned, your SPA is a public application. Instead:

  1. Proxy the Management API request from the SPA through your backend/API.
  2. Your backend then communicates via M2M / Client Credentials Exchange with the Auth0 Management API.
  3. Your SPA communicates via your backend so you might need to create the required endpoint on your backend, take the query, and make the query call to the Auth0 Management API. Then, your backend passes on the response to your SPA.

I hope all this makes more sense now.

1 Like
6

Thank you so much for the well-explained comment Ale. It is much clearer now and I will contact support if I face any other issue implementing that.

7

We are here for you!