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:
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.
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?
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:
This can be super confusing but hope this helps to further clarify!
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!
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.