Calling management API to update user meta data from SPA

[swardi]

I have a specific use case in which our application wants to update user’s meta data from browser based SPA. I know management API can be used to update user meta data, but we cannot involve server in our case and want this update to be made via client side application. Is there a way to securely allow client side application to use management API for this?

[stephanie.chamblee]

Hi @swardi,

Welcome to the Community!

It is possible to use the Management API in a SPA for a limited number of things. You will have to use your tenant’s Management API identifier (Auth0 dashboard > Applications > APIs) as the audience in your app, and you will need to request the update:current_user_metadata scope. For example, in react this would look like:

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    redirectUri={window.location.origin}
    audience='https://YOUR_DOMAIN/api/v2'
    scope='update:current_user_metadata'
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

Here are the docs for interacting with the Management API from a SPA:

Get Management API Access Tokens for Single-Page Applications

Note the 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.

[swardi]

Thanks for sharing, I tried this and it works well with my passwordless flow too. But I found the security hole to be too big and we cannot use it. The meta data we are going to update is our own internal id which will be add in the JWT Token and will be used to identify user on our backend. Now can you please suggest me the best approach which is secure as well.

[stephanie.chamblee]

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 the Management API are not exposed on the frontend. (M2M tokens from Auth0 APIs such as the Management API do not count toward the M2M token limit outlined on the pricing page).

Create Machine-to-Machine Applications for Testing