> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-feat-docs-5540.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# User MFA Management

> Learn how to render a card-based UI that lets users enroll, view, and delete their own multi-factor authentication factors using the My Account API.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="beta" terms="true" contact="Auth0 Support" />

The `UserMFAMgmt` component lets users enroll, view, and delete their own multi-factor authentication factors in a single card-based interface using the [My Account API](/docs/manage-users/my-account-api).

It uses the My Account API’s [authentication methods](/docs/manage-users/my-account-api#manage-authentication-methods) management capabilities to render a complete UI for managing a user’s authentication methods.

With the `UserMFAMgmt` component, you do not need to orchestrate navigation, call API endpoints, or manage [state](/docs/api/authentication/authorization-code-flow/authorize-application#param-state).

## Supported factors

The component handles every authentication method factor configured with the My Account API.

| **Factor**                                                                                       | **What the component renders**                                                                                            |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
| [Email OTP](/docs/secure/multi-factor-authentication/configure-mfa-email)                        | Email input → 6-digit OTP verification                                                                                    |
| [SMS OTP](/docs/secure/multi-factor-authentication/configure-sms-notifications-for-mfa)          | Country-code picker + phone entry → 6-digit OTP verification                                                              |
| [TOTP (Authenticator application)](/docs/secure/multi-factor-authentication/configure-otp)       | QR code with manual-entry key → 6-digit OTP verification                                                                  |
| [Push notifications](/docs/secure/multi-factor-authentication/enable-push-notifications-for-mfa) | QR code for [Auth0 Guardian](/docs/secure/multi-factor-authentication/auth0-guardian) scan → "waiting for approval" state |
| [Passkeys](/docs/get-started/universal-components/web/components/user-passkeys-management)       | Educational screen → OS biometric prompt → enrolled entry in the list                                                     |
| [Recovery codes](/docs/secure/multi-factor-authentication/configure-recovery-codes-for-mfa)      | Display-once code list with a copy action and an "I've saved my codes" confirmation                                       |

## Configure your application

Select your framework to configure environment variables and universal components.

<Tabs>
  <Tab title="React (SPA)">
    ## Setup requirements

    Before rendering the `UserMFAMgmt` component, follow [Build Account Security UI](/docs/get-started/universal-components/web/components/my-account-overview) to configure your Auth0 tenant and applications.

    ### Enable MFA methods and scopes

    **Enable MFA methods**

    1. Navigato to [**Dashboard > Security > Multi-factor Auth**](https://manage.auth0.com/dashboard/*/security/mfa).
    2. Enable the desired factors. To learn more, read [Multi-Factor Authentication Factors](/docs/secure/multi-factor-authentication/multi-factor-authentication-factors#multi-factor-authentication-factors).

    **Add My Account API scopes**

    Add the following My Account API scopes to your [application](/docs/get-started/universal-components/web/components/my-account-overview#create-the-application-and-configure-my-account-api-permissions):

    * `enroll:authencicators`
    * `remove:authenticators`

    ## Install the component

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      The install command also adds the `@auth0/universal-components-core` dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx wrap lines theme={null}
    import { UserMFAMgmt } from "@auth0/universal-components-react";

    export function SecurityPage() {
      return <UserMFAMgmt />;
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Components are always imported from the root entry `@auth0/universal-components-react`, regardless of framework.
      * Only the `Auth0ComponentProvider` component uses a framework-specific subpath: `/spa` for React applications, `/rwa` for Next.js applications.
    </Callout>

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { UserMFAMgmt } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { analytics } from "./lib/analytics";

      function SecurityPage() {
        return (
          <div className="max-w-3xl mx-auto p-6">
            <UserMFAMgmt
              factorConfig={{
                sms: { visible: true, enabled: true },
                otp: { visible: true, enabled: true },
                "push-notification": { visible: true, enabled: true },
                email: { visible: true, enabled: true },
                "recovery-code": { visible: true, enabled: true },
                "webauthn-platform": { visible: false },
                "webauthn-roaming": { visible: false },
              }}
              onEnroll={() => {
                analytics.track("MFA Factor Enrolled");
              }}
              onDelete={() => {
                analytics.track("MFA Factor Deleted");
              }}
              onErrorAction={(error, action) => {
                console.error(`MFA ${action} failed:`, error.message);
              }}
              onBeforeAction={async (action, factorType) => {
                if (action === "delete") {
                  return await confirmDialog(
                    `Remove your ${factorType} authenticator?`
                  );
                }
                return true;
              }}
              customMessages={{
                title: "Two-Factor Authentication",
                description: "Manage the extra verification methods used to protect your account.",
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
            interactiveErrorHandler="popup"
          >
            <Auth0ComponentProvider domain={domain}>
              <SecurityPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js (RWA)">
    ## Setup requirements

    Before rendering the `UserMFAMgmt` component, follow [Build Account Security UI](/docs/get-started/universal-components/web/components/my-account-overview) to configure your Auth0 tenant and applications.

    ### Enable MFA methods and scopes

    **Enable MFA methods**

    1. Navigato to [**Dashboard > Security > Multi-factor Auth**](https://manage.auth0.com/dashboard/*/security/mfa).
    2. Enable the desired factors. To learn more, read [Multi-Factor Authentication Factors](/docs/secure/multi-factor-authentication/multi-factor-authentication-factors#multi-factor-authentication-factors).

    **Add My Account API scopes**

    Add the following My Account API scopes to your [application](/docs/get-started/universal-components/web/components/my-account-overview#create-the-application-and-configure-my-account-api-permissions):

    * `enroll:authencicators`
    * `remove:authenticators`

    ## Install the component

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      The install command also adds the `@auth0/universal-components-core` dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx app/security/page.tsx wrap lines theme={null}
    "use client";

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

    export default function SecurityPage() {
      return <UserMFAMgmt />;
    }
    ```

    <Accordion title="Full integration example">
      ```tsx app/security/page.tsx wrap lines theme={null}
      "use client";

      import { UserMFAMgmt } from "@auth0/universal-components-react";
      import { analytics } from "@/lib/analytics";

      export default function SecurityPage() {
        return (
          <div className="max-w-3xl mx-auto p-6">
            <UserMFAMgmt
              factorConfig={{
                sms: { visible: true, enabled: true },
                otp: { visible: true, enabled: true },
                "push-notification": { visible: true, enabled: true },
                email: { visible: true, enabled: true },
                "recovery-code": { visible: true, enabled: true },
                "webauthn-platform": { visible: false },
                "webauthn-roaming": { visible: false },
              }}
              onEnroll={() => {
                analytics.track("MFA Factor Enrolled");
              }}
              onDelete={() => {
                analytics.track("MFA Factor Deleted");
              }}
              onErrorAction={(error, action) => {
                console.error(`MFA ${action} failed:`, error.message);
              }}
              customMessages={{ title: "Two-Factor Authentication" }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    ## Setup requirements

    Before rendering the `UserMFAMgmt` component, follow [Build Account Security UI](/docs/get-started/universal-components/web/components/my-account-overview) to configure your Auth0 tenant and applications.

    ### Enable MFA methods and scopes

    **Enable MFA methods**

    1. Navigato to [**Dashboard > Security > Multi-factor Auth**](https://manage.auth0.com/dashboard/*/security/mfa).
    2. Enable the desired factors. To learn more, read [Multi-Factor Authentication Factors](/docs/secure/multi-factor-authentication/multi-factor-authentication-factors#multi-factor-authentication-factors).

    **Add My Account API scopes**

    Add the following My Account API scopes to your [application](/docs/get-started/universal-components/web/components/my-account-overview#create-the-application-and-configure-my-account-api-permissions):

    * `enroll:authencicators`
    * `remove:authenticators`

    ## Install the component

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-mfa-management.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    ## Get started

    ```tsx wrap lines theme={null}
    import { UserMFAMgmt } from "@/components/auth0/my-account/user-mfa-management";

    export function SecurityPage() {
      return <UserMFAMgmt />;
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { UserMFAMgmt } from "@/components/auth0/my-account/user-mfa-management";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { analytics } from "./lib/analytics";

      function SecurityPage() {
        return (
          <div className="max-w-3xl mx-auto p-6">
            <UserMFAMgmt
              factorConfig={{
                sms: { visible: true, enabled: true },
                otp: { visible: true, enabled: true },
                "push-notification": { visible: true, enabled: true },
                email: { visible: true, enabled: true },
                "recovery-code": { visible: true, enabled: true },
                "webauthn-platform": { visible: false },
                "webauthn-roaming": { visible: false },
              }}
              onEnroll={() => {
                analytics.track("MFA Factor Enrolled");
              }}
              onDelete={() => {
                analytics.track("MFA Factor Deleted");
              }}
              onErrorAction={(error, action) => {
                console.error(`MFA ${action} failed:`, error.message);
              }}
              onBeforeAction={async (action, factorType) => {
                if (action === "delete") {
                  return await confirmDialog(`Remove your ${factorType} authenticator?`);
                }
                return true;
              }}
              customMessages={{ title: "Two-Factor Authentication" }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
            interactiveErrorHandler="popup"
          >
            <Auth0ComponentProvider domain={domain}>
              <SecurityPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>
</Tabs>

## Props

### Display props

Display props control how the component renders without affecting its behavior.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>hideHeader</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Hide the component header (title and description).</td>
    </tr>

    <tr>
      <td><code>readOnly</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Disable all mutation actions (enroll and delete). Factors are shown but cannot be added or removed.</td>
    </tr>

    <tr>
      <td><code>showActiveOnly</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Show only factor types that the user has at least one active enrollment for. Factor types with no enrollments are hidden.</td>
    </tr>

    <tr>
      <td><code>disableEnroll</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Hide the enroll button for all factor types. Users can still delete existing factors.</td>
    </tr>

    <tr>
      <td><code>disableDelete</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Hide the delete button on all enrolled factor rows. Users can still enroll new factors.</td>
    </tr>

    <tr>
      <td><code>factorConfig</code></td>
      <td><code>Partial<br />\<Record\<MFAType,<br />\{ visible?: boolean;<br /> enabled?: boolean }>></code></td>
      <td><code>\{}</code></td>
      <td>Per-factor-type visibility and enabled state.</td>
    </tr>
  </tbody>
</table>

**factorConfig**

Use `factorConfig` to show or grey-out specific factor types without editing the tenant configuration.
Each key is a factor type `string`; both fields are optional and default to `true`.

Supported factor type keys: `sms`, `otp`, `email`, `push-notification`, `webauthn-platform`, `webauthn-roaming`, `recovery-code`.

* `visible` render the factor row in the list (`false` to hide).
* `enabled` render the factor row is interactive (`false` renders it greyed-out and non-interactive).

```tsx wrap lines theme={null}
<UserMFAMgmt
  factorConfig={{
    sms: { visible: true, enabled: true },
    otp: { visible: true, enabled: true },
    email: { visible: true, enabled: false }, // shown but greyed-out
    "webauthn-platform": { visible: false },  // hidden entirely
  }}
/>
```

### Action props

Action props let you hook into the component's lifecycle events and trigger or cancel operations.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>onEnroll</code></td>
      <td><code>() => void</code></td>
      <td>Triggered after a factor is successfully enrolled.</td>
    </tr>

    <tr>
      <td><code>onDelete</code></td>
      <td><code>() => void</code></td>
      <td>Triggered after a factor is successfully deleted.</td>
    </tr>

    <tr>
      <td><code>onFetch</code></td>
      <td><code>() => void</code></td>
      <td>Triggered after the user's factors are successfully loaded.</td>
    </tr>

    <tr>
      <td><code>onErrorAction</code></td>
      <td><code>(error: Error, action: 'enroll' |<br /> 'delete' | 'confirm') => void</code></td>
      <td>Triggered when any action fails. Use this to surface errors to [logs](/docs/deploy-monitor/logs#logs) or logging system.</td>
    </tr>

    <tr>
      <td><code>onBeforeAction</code></td>
      <td><code>(action: 'enroll' | 'delete' | 'confirm',<br /> factorType: MFAType)<br /> => boolean | Promise\<boolean></code></td>
      <td>Triggered before an action executes. Return <code>false</code> (or a Promise resolving to <code>false</code>) to cancel.</td>
    </tr>
  </tbody>
</table>

**onEnroll**

Triggers after a factor enrollment completes successfully. Use this to refresh related UI (for example, an account security score card) or send analytics.

```tsx wrap lines theme={null}
<UserMFAMgmt
  onEnroll={() => {
    analytics.track("MFA Factor Enrolled");
  }}
/>
```

**onDelete**

Triggers after a factor is deleted successfully. Use this to refresh any UI that reflects the count of enrolled factors.

```tsx wrap lines theme={null}
<UserMFAMgmt
  onDelete={() => {
    analytics.track("MFA Factor Deleted");
  }}
/>
```

**onFetch**

Triggers after the component's initial factor list load. Useful for showing or hiding adjacent UI that depends on whether the user has any enrolled factors.

```tsx wrap lines theme={null}
<UserMFAMgmt
  onFetch={() => {
    setMFALoaded(true);
  }}
/>
```

**onErrorAction**

Triggers when an enroll, delete, or confirm step fails. The `action` parameter identifies which stage errored: `'enroll'` (initiating enrollment), `'confirm'` (submitting the OTP or QR code), or `'delete'`.

```tsx wrap lines theme={null}
<UserMFAMgmt
  onErrorAction={(error, action) => {
    console.error(`MFA ${action} failed:`, error.message);
    toast.error(`Something went wrong while trying to ${action} your factor.`);
  }}
/>
```

**onBeforeAction**

Triggers before an action executes. Return `false` or a Promise that resolves to `false` to cancel the operation. The `factorType` parameter identifies which factor type is involved.

* `'delete'` triggers before the built-in confirmation dialog is shown. Return `false` to cancel the deletion without ever showing the dialog.
* `'enroll'` / `'confirm'` use this for pre-flight checks (for example, rate limiting, policy checks).

```tsx wrap lines theme={null}
<UserMFAMgmt
  onBeforeAction={async (action, factorType) => {
    if (action === "delete") {
      return await confirmDialog(
        `Remove your ${factorType} authenticator? You may be locked out if this is your only factor.`
      );
    }
    return true;
  }}
/>
```

### Customize props

Customization props let you adapt copy, validation rules, and styling without modifying source code.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>customMessages</code></td>
      <td><code>Partial\<MFAMessages></code></td>
      <td>Override default UI text and translations.</td>
    </tr>

    <tr>
      <td><code>styling</code></td>
      <td><code>ComponentStyling\<UserMFAMgmtClasses></code></td>
      <td>CSS variables and class overrides.</td>
    </tr>

    <tr>
      <td><code>schema</code></td>
      <td><code>\{ email?: RegExp; phone?: RegExp }</code></td>
      <td>Custom validation patterns for email and phone number input fields.</td>
    </tr>
  </tbody>
</table>

**customMessages**

Customize all text and translations. Every field is optional.

<Accordion title="Available Messages">
  **Top-level** `title`, `description`, `enabled` (badge label on enrolled factors), `no_active_mfa` (empty state when `showActiveOnly` is `true`)

  **Actions** `enroll` (enroll button label), `delete` (delete button label), `enroll_factor` (success message), `remove_factor` (success message), `deleting` (in-progress label), `cancel`

  **Delete confirmation** `delete_mfa_title`, `delete_mfa_content`

  **Per factor type** (replace `{factor}` with `sms`, `otp`, `email`, `push-notification`, `webauthn-platform`, `webauthn-roaming`, `recovery-code`) `{factor}.title`, `{factor}.description`, `{factor}.button-text`

  **Errors** `errors.factors_loading_error`, `errors.delete_factor`, `errors.failed`
</Accordion>

```tsx wrap lines theme={null}
<UserMFAMgmt
  customMessages={{
    title: "Two-Factor Authentication",
    description: "Add extra layers of security to protect your account.",
    no_active_mfa: "You haven't enrolled any authentication methods yet.",
    enroll: "Add method",
    delete_mfa_title: "Remove authentication method?",
    delete_mfa_content:
      "You will no longer be able to use this method to verify your identity.",
    sms: {
      title: "Text message (SMS)",
      description: "Receive a one-time code via text message.",
    },
    otp: {
      title: "Authenticator app",
      description: "Use Google Authenticator, Authy, or any TOTP app.",
    },
    errors: {
      factors_loading_error: "Unable to load your security methods.",
    },
  }}
/>
```

**Customize style**

Customize appearance with CSS variables and class overrides. Supports light/dark themes.

<Accordion title="Available Styling Options">
  **Variables**—CSS custom properties

  * `common` Applied to both themes
  * `light` Light mode only
  * `dark` Dark mode only

  **Class overrides**

  * `UserMFAMgmt-card` the outer card wrapping the factor list
  * `UserMFASetupForm-dialogContent` the enrollment multi-step dialog content area
  * `DeleteFactorConfirmation-dialogContent` the delete confirmation dialog content area
</Accordion>

```tsx wrap lines theme={null}
<UserMFAMgmt
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "UserMFAMgmt-card": "rounded-2xl shadow-md border-2",
      "UserMFASetupForm-dialogContent": "max-w-lg",
      "DeleteFactorConfirmation-dialogContent": "max-w-sm",
    },
  }}
/>
```

**schema**

Override the built-in regex patterns used to validate user input during enrollment. Both fields are optional; unset fields keep their default patterns.

* `email` validates the email address entered during email-OTP enrollment (default: standard RFC-5322-style pattern).
* `phone` validates the phone number entered during SMS enrollment (default: accepts international E.164 format).

```tsx wrap lines theme={null}
<UserMFAMgmt
  schema={{
    // Restrict to company domain only
    email: /^[a-zA-Z0-9._%+-]+@example\.com$/,
    // US numbers only
    phone: /^\+1[2-9]\d{2}[2-9]\d{6}$/,
  }}
/>
```

## TypeScript definitions

```typescript wrap lines theme={null}
type MFAType =
  | "sms"
  | "otp"
  | "email"
  | "push-notification"
  | "webauthn-platform"
  | "webauthn-roaming"
  | "recovery-code";

interface FactorConfigOptions {
  visible?: boolean;
  enabled?: boolean;
}

interface UserMFAMgmtClasses {
  "UserMFAMgmt-card"?: string;
  "UserMFASetupForm-dialogContent"?: string;
  "DeleteFactorConfirmation-dialogContent"?: string;
}

interface UserMFAMgmtProps {
  hideHeader?: boolean;
  showActiveOnly?: boolean;
  disableEnroll?: boolean;
  disableDelete?: boolean;
  readOnly?: boolean;
  factorConfig?: Partial<Record<MFAType, FactorConfigOptions>>;
  customMessages?: Partial<MFAMessages>;
  styling?: ComponentStyling<UserMFAMgmtClasses>;
  schema?: { email?: RegExp; phone?: RegExp };
  onEnroll?: () => void;
  onDelete?: () => void;
  onFetch?: () => void;
  onErrorAction?: (error: Error, action: "enroll" | "delete" | "confirm") => void;
  onBeforeAction?: (
    action: "enroll" | "delete" | "confirm",
    factorType: MFAType
  ) => boolean | Promise<boolean>;
}
```

## Advanced customization

The `UserMFAMgmt` component is composed of a stateless view component and a hook. Import them individually to build custom workflows.

### Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom interfaces.

<table class="table">
  <thead>
    <tr>
      <th>Subcomponent</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>UserMFAMgmtView</code>
      </td>

      <td>Stateless view layer; bring your own data and handlers via `useUserMFA`.</td>
    </tr>
  </tbody>
</table>

**Dialogs (shared sub-components)**

<table class="table">
  <thead>
    <tr>
      <th>Shared sub-components</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>UserMFASetupForm</code>
      </td>

      <td>Multi-step enrollment dialog. Handles the full enrollment flow: contact entry (phone/email), OTP verification, QR-code scanning (for TOTP and push), and recovery-code display.</td>
    </tr>

    <tr>
      <td>
        <code>DeleteFactorConfirmation</code>
      </td>

      <td>Confirmation dialog shown before a factor is deleted.</td>
    </tr>

    <tr>
      <td>
        <code>FactorsList</code>
      </td>

      <td>Renders the list of active enrollments within a factor-type row, with per-enrollment delete buttons.</td>
    </tr>
  </tbody>
</table>

### Available hooks

<table class="table">
  <thead>
    <tr>
      <th>Hook</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>useUserMFA</code>
      </td>

      <td>Full data and interaction layer: factor query, enrollment mutation, delete mutation, OTP confirmation, dialog state, and all event handlers.</td>
    </tr>
  </tbody>
</table>

## Learn more

<CardGroup cols={2}>
  <Card title="UserPasskeyMgmt" icon="key" href="/docs/get-started/universal-components/web/components/user-passkey-management">
    Manage WebAuthn passkeys with the same lifecycle pattern.
  </Card>

  <Card title="Build a Self-Service Account Security Interface" icon="shield" href="/docs/get-started/universal-components/web/components/my-account-overview">
    Overview, prerequisites, and framework setup for all My Account components.
  </Card>
</CardGroup>