How to Use the Management API in a Single-Page Application (SPA)

Knowledge Articles
, , , ,
1

Overview

This article describes best practices when using the Management API in a Single-Page Application (SPA).

Applies To

  • Management API
  • Single-Page Application (SPA)
  • React
  • Angular
  • Next.js

Solution

As SPAs are public clients that run the end user’s browser, it is important not to expose any sensitive information, such as the client’s secret.

Management API tokens are typically issued using the Client Credentials grant with a machine-to-machine application (see Get Management API Access Tokens for Production ).

  • Since this necessitates using the client secret and exposing the secret and/or access token, it would possibly allow the user to perform operations against other users.
  • This approach is not a viable option for SPAs.

With SPAs, management API tokens are issued within the context of the user. During the authorization flow, the management API audience can be specified to retrieve a management API token.

Here is an example with the Auth0 SPA SDK:

      const auth0 = await createAuth0Client({
        domain: '{YOUR_AUTH0_DOMAIN}',
        client_id: '{YOUR_CLIENT_ID}',
        audience: 'https://{YOUR_AUTH0_DOMAIN}/api/v2/',
        scope: 'read:current_user update:current_user_metadata'
      });

The token is limited to updating the current user’s profile data. Only the following scopes are available for user-based issuance:

read:current_user, update:current_user_identities, update:current_user_metadata, create:current_user_metadata, create:current_user_device_credentials, delete:current_user_device_credentials

It’s important to note that user_metadata can be changed by the user, but app_metadata cannot. When issuing tokens this way it is important that any related authorization or other sensitive data should be stored in app_metadata as recommended in Understand How Metadata Works in User Profiles. User metadata is intended for profile information that does not impact core functionality or access to resources.

1 Like