Is the only way to obtain a Management API token via copy and paste?

[robliou01]

Hi!

I’m trying to create a module in my SPA React app that automatically obtains a Management API token from and uses it to perform a method on my connected Auth0 database, such as retrieving a list of all users.

However, when I try to do so using an example such as the one given here:

https://auth0.com/docs/secure/tokens/access-tokens/get-management-api-access-tokens-for-production

I cannot get things to work. Instead, I am treated to endless 403 (Forbidden) errors.

Upon further research, it would appear that for SPA’s, Auth0 has put a strict limitation on the Management API. Essentially, it can only be obtained manually and then copied and pasted afterward! This would explain why I keep getting 403 errors when I try using the method given above.

Is my reasoning correct?

Thank you,

[tyf]

Hello @robliou01!

@robliou01

Upon further research, it would appear that for SPA’s, Auth0 has put a strict limitation on the Management API. Essentially, it can only be obtained manually and then copied and pasted afterward!

There are indeed limitations on how a SPA can use the Management API, but that is primarily just that it’s limited to certain scopes related to the currently logged in user.

It’s hard to know exactly what could be going on in your specific case, but I’ve found the following topic to be super helpful in outlining the options available in this scenario:

Calling management API to update user meta data from SPA

Glad to hear it is working for you! An alternative approach would be to handle the calls to the Management API in your backend. You would register your API as a custom API and use its identifier as the audience in the SPA. You would then create a Machine-to-Machine application for your backend and authorize it to use the Management API. Your backend could use one of the Auth0 SDKs to validate the Access Token and return data from the Management API for the SPA. That way any Access Tokens for th…

[robliou01]

Hi @tyf , I appreciate the quick response!

Indeed, I looked through the thread that you sent. I wonder if I’m missing a step somewhere?

The instructions appear to give 2 possibilities for getting a management API token: one through a manual testing process (copy and paste), and the other through a production process. I believe I have followed the production process to a T, but I keep getting a 403 error.

Again, I looked through the thread, but I can’t seem to locate where I’m going wrong. Is there some custom code that I need to write in addition to what is being given? Below are some screen shots from my code. Can you please help me to see what I may be missing?

Thank you again very much for your help,

index.js:

profile.js:

[tyf]

No problem, happy to help where I can, and thanks for sharing your code!

I think you might be confusing the 2 different approaches a bit - In your profile.js I can see that you are using a client_id of a SPA app which isn’t going to work as you can’t use the client_credentials grant type because it is deemed a public application. I think where you might be going wrong here is that you haven’t created or aren’t using a separate Machine to Machine (M2M) app to proxy the request to the management API for you.

It depends on what information you need from the Management API that dictates which approach to take - If you just need info about the current user then setting the audience to your Management API along with the requisite scopes on the client side and using this Access Token will work. Alternatively, if you need to get all users (you mentioned this initially) you will need to go the 2nd route which includes having your backend communicate via M2M/Client Credentials Exchange with the Auth0 Management API.

Here’s additional thread that goes in to detail explaining this:

Access Management Api from React

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 sh…

This can be super confusing but hope this helps to further clarify!

[robliou01]

Thanks @tyf , this is very helpful!

Alright, so I read through the thread as well as the docs on setting up an M2M app.

So I guess my follow-on question would be, if we end up setting up and calling an M2M app from within our app in order to be able to access the Management API, then would that mean that we could no longer also utilize an Auth0 SPA in our app as well, since that would require two different clientID’s in the same app, which would create an unresolveable conflict?

So basically, we have to choose between using a normal SPA or an M2M/Management API for our app, is this correct?

Or does the M2M/Management API encompass/ include already all of the functionality that the normal SPA/Auth0 app has? (Therefore, we should just go with the M2M/Management API and forget about using the normal SPA/Auth0 app?) Apologies if this question is a bit complex!

Thanks again,

Rob

[tyf]

No worries! Good to know that was helpful

@robliou01

So basically, we have to choose between using a normal SPA or an M2M/Management API for our app, is this correct?

You will need both - The SPA app configured in Auth0 will be specific to your React App/client side. On the other hand, you will have a M2M app configured in Auth0 specific to your own API/backend. The flow would look like this:

• User logs in to your React/SPA app.
• User goes to perform something (get all users for instance) that requires Management API use.
• This is really where the magic happens - Instead of your React app communicating directly with the Management API, it will communicate with your own API/Backend instead. Your API/Backend should take the query, make the necessary call to the Management API and then pass that response back to your React/SPA app.

The key here is that the backend process (M2M/Client Credentials Exchange) allows the Client Credentials to be abstracted from the SPA (public) app and safely used against the Management API.

Again, if all you need from the Management API is to get info about the current user and/or update the current user metadata, this can be accomplished from the React/SPA app directly as outlined here.

Hope this helps!

[robliou01]

Indeed, this is quite helpful. I will work on implementing this solution. Thanks for taking the time respond!!