Build a Self-Service Account Security Interface with My Account API

Learn how to configure Universal Components to build self-service account security interfaces with My Account API.

My Account components allow you to embed a self-service authentication management interface directly into your web application. Your users can enroll and remove multi-factor authentication (MFA) factors and manage passkeys within your web application.

How it works

My Account components use the My Account API’s authentication methods endpoints to render an authentication-management UI inside your application.

The My Account API currently enforces low rate limits, especially on free-tier tenants. This may cause errors while using these components.

When an authenticated user opens their account settings screen, the Auth0 SDK retrieves an access token scoped to the My Account API audience.

The components use this token to call the My Account API /me/v1/authentication-methods as the logged-in user, so each user can only view and modify their own authentication methods.

Available components

Component	API endpoint
UserMFAMgmt Enroll and delete MFA factors: email OTP, SMS OTP, TOTP (authenticator application), push notifications, passkeys, and recovery codes.	/me/v1/authentication-methods
UserPasskeyMgmt Register and revoke WebAuthn passkeys.	/me/v1/authentication-methods (type: passkey)

• These components create end-user self-service interfaces. End users can enroll, list, and remove every authentication method on their own account: email OTP, SMS OTP, TOTP (authenticator application), push notifications, passkeys, and recovery codes.
• For delegated admin interfaces in which a user manages an Auth0 Organization, read Build a Delegated Admin Interface.

React (SPA)

Prerequisites

Enable My Account API

1. Navigate to Dashboard > Applications > APIs.
2. Select Activate My Account API to enable it for your tenant.

Create the application and configure My Account API permissions

1. Navigate to Dashboard > Applications > Applications, and select Create Application.

2. Select Single Page Web Applications.

3. Select the Settings tab and add your Callback, Logout, and Web Origins URLs. For example: http://localhost:5173.

4. Select the API Access tab.

5. Select Edit for the Auth0 My Account API to add the User-delegated Access permissions:

   create:me:authentication_methods read:me:authentication_methods update:me:authentication_methods delete:me:authentication_methods read:me:factors

6. Select Save to save the permissions.

• The user’s access token only includes permissions that were granted during login.
• Request all five scopes to allow users to enroll, review, and remove authentication methods.

Set up the database and test user

1. Navigate to Dashboard > Authentication > Database to create a database connection.
2. In the Applications tab of the database, enable your application.
3. Navigate to Dashboard > User Management > Users.
4. Select Create User to create a user assigned to the new database connection.
5. Select Create to add the new user; use this new user for testing.

Configure your application

Install the component

pnpm

pnpm add @auth0/universal-components-react

The install command also adds the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Configure environment variables

Create a .env file in your project root:

VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID

Configure Universal Components

Import Auth0Provider and Auth0ComponentProvider and set interactiveErrorHandler="popup" so that MFA enrollment and deletion challenges are handled in a popup rather than redirecting away from the page.

App.tsx

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

export default function App() {
  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler="popup"
    >
      <Auth0ComponentProvider domain={domain}>
        {/* your application */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

• Users must be authenticated before the My Account components are rendered.
• Components automatically load the logged-in user’s authentication methods from the My Account API.

You are responsible for ensuring that your use of the My Account API and Universal Components complies with your security policies and applicable laws, including any permissions granted to your end users.

Next.js (RWA)

Prerequisites

Enable My Account API

1. Navigate to Dashboard > Applications > APIs.
2. Select Activate My Account API to enable it for your tenant.

Create the application and configure My Account API permissions

1. Navigate to Dashboard > Applications > Applications, and select Create Application.

2. Select Regular Web Application.

3. Select the Settings tab and add your Allowed Callback, and Allowed Logout URLs. For example: http://localhost:3000.

4. Select the API Access tab.

5. Select Edit for the Auth0 My Account API to add the User-delegated Access permissions:

   create:me:authentication_methods read:me:authentication_methods update:me:authentication_methods delete:me:authentication_methods read:me:factors

6. Select Save to save the permissions.

• The user’s access token only includes permissions that were granted during login.
• Request all five scopes to allow users to enroll, review, and remove authentication methods.

Set up the database and test user

1. Navigate to Dashboard > Authentication > Database to create a database connection.
2. In the Applications tab of the database, enable your application.
3. Navigate to Dashboard > User Management > Users.
4. Select Create User to create a user assigned to the new database connection.
5. Select Create to add the new user; use this new user for testing.

Configure your application

Install the component

pnpm

pnpm add @auth0/universal-components-react

The install command also adds the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Configure environment variables

Create a .env.local file in your Next.js project root:

NEXT_PUBLIC_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
NEXT_PUBLIC_AUTH0_CLIENT_ID=YOUR_RWA_CLIENT_ID
AUTH0_SECRET=YOUR_AUTH0_SECRET
AUTH0_ISSUER_BASE_URL="https://YOUR_TENANT_DOMAIN.auth0.com"

For complete Next.js SDK setup, read the Auth0 Next.js SDK documentation.

Configure Universal Components

Add Auth0ComponentProvider from the /rwa subpath to your root layout and set interactiveErrorHandler="popup" so that MFA enrollment and deletion challenges are handled in a popup rather than redirecting away from the page.

app/layout.tsx

import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Auth0ComponentProvider
          domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN!}
          interactiveErrorHandler="popup"
        >
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

• Users must be authenticated before the My Account components are rendered.
• Components automatically load the logged-in user’s authentication methods from the My Account API.

You are responsible for ensuring that your use of the My Account API and Universal Components complies with your security policies and applicable laws, including any permissions granted to your end users.

shadcn

Prerequisites

Enable My Account API

1. Navigate to Dashboard > Applications > APIs.
2. Select Activate My Account API to enable it for your tenant.

Create the application and configure My Account API permissions

1. Navigate to Dashboard > Applications > Applications, and select Create Application.

2. Select Single Page Web Applications.

3. Select the Settings tab and add your Callback, Logout, and Web Origins URLs. For example: http://localhost:5173.

4. Select the API Access tab.

5. Select Edit for the Auth0 My Account API to add the User-delegated Access permissions:

   create:me:authentication_methods read:me:authentication_methods update:me:authentication_methods delete:me:authentication_methods read:me:factors

6. Select Save to save the permissions.

• The user’s access token only includes permissions that were granted during login.
• Request all five scopes to allow users to enroll, review, and remove authentication methods.

Set up the database and test user

1. Navigate to Dashboard > Authentication > Database to create a database connection.
2. In the Applications tab of the database, enable your application.
3. Navigate to Dashboard > User Management > Users.
4. Select Create User to create a user assigned to the new database connection.
5. Select Create to add the new user; use this new user for testing.

Configure your application

Install the component

Run the shadcn CLI to add the components directly to your project source:

MFA management

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-mfa-management.json

Passkey management

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-passkey-management.json

The install command adds the component source into src/components/auth0/my-account/ along with all UI dependencies and the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Configure environment variables

Create a .env.local file in your project root:

VITE_AUTH0_DOMAIN=YOUR_TENANT.auth0.com
VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID

Configure Universal Components

Import Auth0Provider and Auth0ComponentProvider and set interactiveErrorHandler="popup" so that MFA enrollment and deletion challenges are handled in a popup rather than redirecting away from the page.

App.tsx

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

export default function App() {
  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler="popup"
    >
      <Auth0ComponentProvider domain={domain}>
        {/* your application */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

• Users must be authenticated before the My Account components are rendered.
• Components automatically load the logged-in user’s authentication methods from the My Account API.

You are responsible for ensuring that your use of the My Account API and Universal Components complies with your security policies and applicable laws, including any permissions granted to your end users.

Learn more

Configure UserMFAMgmt

MFA factors reference: props, customization, TypeScript definitions, and advanced subcomponents.

Configure UserPasskeyMgmt

Passkey management reference: hooks, message overrides, and CSS class targets.