MfaEnrollment

<MfaEnrollment> is the self-service two-factor authentication widget. It shows the user’s current status and drives the whole lifecycle:

• Enable: generates a secret, shows a QR code and a manual setup key, and confirms the first 6-digit code.
• Recovery codes: reveals the single-use recovery codes once, with a download button.
• Disable and Regenerate recovery codes: both gated on a current code.

It reads the user’s status and runs the management actions via useMfaEnrollment, so you don’t wire any fetching yourself. The same widget is embedded in <UserProfile>’s Security section, so render <MfaEnrollment> directly only when you build your own account page.

Enrolling requires the project’s Pro plan or higher.

When to use

• You build a custom account/security page instead of using <UserProfile>.
• You want the two-factor setup flow on its own surface.

Usage

import { SignedIn, MfaEnrollment } from '@torii-js/torii-react';

function SecurityPage() {
  return (
    <SignedIn>
      <MfaEnrollment />
    </SignedIn>
  );
}

Props

Prop	Type	Default	Description
labels	Partial<ToriiSignupLabels>	provider labels	Per-instance label overrides (the mfa* keys).
className	string	–	Extra class names for the widget root.

Behaviour

• The shared secret and recovery codes are shown once. Torii stores the secret encrypted and recovery codes hashed; they cannot be read back.
• A wrong code keeps the inline form open with an error so the user can retry.
• Disabling is always allowed (even after a plan downgrade); only enabling is Pro-gated.
• The QR encodes the standard otpauth://totp URI, so any authenticator app (Google Authenticator, 1Password, Authy, etc.) works. The manual key is shown for apps that can’t scan.

Theming

Uses the shared appearance slots (formFieldLabel, formButtonPrimary, destructiveButton, and formFieldInput), so it inherits the same look as the rest of the SDK. See Customization.

TypeScript

import type { MfaEnrollmentProps } from '@torii-js/torii-react';