Skip to main content
function VerifyMfaInline(props: VerifyMfaInlineProps): Element;
A wrapper component that provides context and coordination for inline MFA verification. Use with VerifyMfaInlineFlow and optionally VerifyMfaInlineBackButton. By default, shows content first and automatically transitions to MFA verification when a protected action (like signing or exporting) is called. After verification, the action completes automatically. Use verifyFirst prop to force MFA verification before showing content.

Parameters

ParameterTypeDescription
propsVerifyMfaInlinePropsThe props for the VerifyMfaInline component.

Returns

Element The rendered component.

See

Examples

// Simple usage: Just the flow
function ExportWalletModal({ address }) {
  return (
    <Modal>
      <VerifyMfaInline verifyFirst>
        <VerifyMfaInlineFlow>
          <ExportWallet address={address} skipMfa />
        </VerifyMfaInlineFlow>
      </VerifyMfaInline>
    </Modal>
  );
}
// With back button outside the transition
function CustomModal() {
  return (
    <Modal>
      <VerifyMfaInline>
        <VerifyMfaInlineBackButton />
        <VerifyMfaInlineFlow transition="fade">
          <MyProtectedContent />
        </VerifyMfaInlineFlow>
      </VerifyMfaInline>
    </Modal>
  );
}
// With render function for full control
function AdvancedModal() {
  return (
    <VerifyMfaInline verifyFirst>
      <VerifyMfaInlineBackButton />
      <VerifyMfaInlineFlow>
        {({ view, Content }) => (
          view === "verify" ? <div>{Content}</div> : <MyProtectedContent />
        )}
      </VerifyMfaInlineFlow>
    </VerifyMfaInline>
  );
}

Further reading