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.
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.
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.
Select the Settings tab and add your Callback, Logout, and Web Origins URLs. For example: http://localhost:5173.
Select the API Access tab.
Select Edit for the Auth0 My Account API to add the User-delegated Access permissions:create:me:authentication_methodsread:me:authentication_methodsupdate:me:authentication_methodsdelete:me:authentication_methodsread:me:factors
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.
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.
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.
Select the Settings tab and add your Allowed Callback, and Allowed Logout URLs. For example: http://localhost:3000.
Select the API Access tab.
Select Edit for the Auth0 My Account API to add the User-delegated Access permissions:create:me:authentication_methodsread:me:authentication_methodsupdate:me:authentication_methodsdelete:me:authentication_methodsread:me:factors
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.
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.
Select the Settings tab and add your Callback, Logout, and Web Origins URLs. For example: http://localhost:5173.
Select the API Access tab.
Select Edit for the Auth0 My Account API to add the User-delegated Access permissions:create:me:authentication_methodsread:me:authentication_methodsupdate:me:authentication_methodsdelete:me:authentication_methodsread:me:factors
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.
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.
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.
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.
Authenticate
Manage Users
Customize
Auth0 AI
Platform