MFA UIs

Once you've set up PrivyElements, you can use Privy's default UIs to enroll your users in MFA and prompt them for MFA during wallet actions.

INFO

Before integrating MFA, UIs, make sure to also set up multi-factor authentication in the dashboard per this guide.

MFA enrollment

Privy's default UIs for Expo can also be used for allowing your users to enroll their first MFA verification method, or any number of additional ones.

For this, use the useMfaEnrollmentUI hook to get an init method, that you can use to launch the flow. This method takes in a configuration object with the following fields:

Parameter	Type	Description
mfaMethods	MfaMethod[]	This will be the array of mfa methods that will be available in the UI. Make sure to have the methods you set here enabled
relyingParty	string	(Optional) It should be the URL origin where your Apple App Site Association or Digital Asset Links are available (e.g. https://example.com).

import {useMfaEnrollmentUI} from '@privy-io/expo';

export function EnrollMFAMethodButton() {
  const {init: initMfaEnrollmentUI} = useMfaEnrollmentUI();

  const onEnrollMfa = async () => {
    try {
      await initMfaEnrollmentUI({mfaMethods: ['sms', 'totp', 'passkey']});
      // Your code on actions to execute after successful mfa enrollment
    } catch (error) {
      // Your code on cancelled or otherwise unsuccessful mfa enrollment
    }
  };

  return <Button onPress={onEnrollMfa}>Enroll an MFA method</Button>;
}

TIP

The UIs that will show up using useMfaEnrollmentUI will also allow the user to unenroll mfa methods.

Passkey unenrollment

Using the MFA enrollment UIs means users will also be able to unenroll a method they had previously set up too.

For passkeys, the default behavior when unenrolling is that the passkey is also removed as a valid login method.

You can change this behavior in the MFA UIs, by setting the shouldUnlinkOnUnenrollMfa option in the PrivyElements component

import {PrivyElements} from '@privy-io/expo';

export default function RootLayout() {
  return (
    <>
      {/* Your app's content */}
      <PrivyElements config={{passkeys: {shouldUnlinkOnUnenrollMfa: false}}} />
    </>
  );
}

MFA verification

Privy's default UIs for Expo can be used for your users to verify their already set MFA methods, such as SMS or passkeys.

TIP

You can use Privy's default UIS for MFA verification even if you're using headless flows for working with the wallet. This way, Privy's UIs can integrate smoothly with your custom flows and experiences.

To do this, you must enable the enableMfaVerificationUIs option on the PrivyElements component.

import {PrivyElements} from '@privy-io/expo';

export default function RootLayout() {
  return (
    <>
      {/* Your app's content */}
      <PrivyElements config={{mfa: {enableMfaVerificationUIs: true}}} />
    </>
  );
}

After doing this, all operations you do on the wallet (such as signing messages or preparing transactions) will automatically trigger the MFA UIs if MFA verification is required at that moment.

WARNING

If you were using the useRegisterMfaListener hook before you should now remove it from your codebase, as Privy will handle the MFA events and UI for you.