Skip to main content

​
Overview

The VerifyMfaInline component provides a wrapper for embedding MFA verification within existing UI flows. It handles the transition between protected content and MFA verification, supporting both “verify first” and “verify on demand” patterns. The core features include:
  • Inline MFA verification within existing UI contexts (modals, pages, etc.)
  • Support for “verify first” mode (MFA before showing content)
  • Support for “verify on demand” mode (content first, MFA when triggered)
  • Smooth slide or fade transitions between views
  • Automatic MFA detection and handling via event-based scoping
  • Composable UI that gives developers control over layout

​
Architecture

The component is built using a composition pattern with a context provider that coordinates transitions between the verification view and protected content.

​
Composition model

The VerifyMfaInline component is composed of several subcomponents that work together:
  • VerifyMfaInline: The root wrapper component that provides context and handles MFA event listening
  • VerifyMfaInlineFlow: Manages transitions between “verify” and “content” views
  • VerifyMfaInlineBackButton: A back button for navigating from verify view to content

​
VerifyMfaInline

The VerifyMfaInline component wraps your protected content and automatically handles MFA verification when needed. It accepts props to control whether verification happens first or on demand. Key props:
  • verifyFirst: If true, shows MFA verification before content. If false, shows content first and triggers MFA when a protected action is called.
  • onVerified: Called when MFA verification completes successfully
  • onCancel: Called when the user cancels MFA verification
  • successDelay: Delay before transitioning to content after successful verification

​
VerifyMfaInlineFlow

The VerifyMfaInlineFlow component manages the display of either the MFA verification form or your protected content. It supports both simple children (used as protected content) and a render function for full control. Render function signature: 
children:
  | ReactNode
  | ((props: {
      view: "verify" | "content";
      Content: ReactNode | null;
    }) => ReactNode);
When using a render function:
  • For view === "verify": Content is the default MFA verification UI
  • For view === "content": Content is null (you provide the content)

​
State management (useVerifyMfaInlineContext)

The useVerifyMfaInlineContext hook provides access to the inline verification state:
  • view: Current view (“verify” or “content”)
  • goToVerify: Function to navigate to the verify view
  • goToContent: Function to navigate to the content view
  • goBack: Function to go back (handles cancellation)

​
Example: Verify first with ExportWallet

Show MFA verification before allowing wallet export: 
import { VerifyMfaInline, VerifyMfaInlineFlow } from '@coinbase/cdp-react';
import { ExportWallet } from '@coinbase/cdp-react';

function ExportWalletModal({ address, onClose }) {
  return (
    <Modal>
      <VerifyMfaInline 
        verifyFirst
        onVerified={() => console.log('MFA verified!')}
      >
        <VerifyMfaInlineFlow>
          <ExportWallet address={address} skipMfa />
        </VerifyMfaInlineFlow>
      </VerifyMfaInline>
    </Modal>
  );
}

​
Example: With back button

Add a back button outside the transition for consistent placement: 
import {
  VerifyMfaInline,
  VerifyMfaInlineBackButton,
  VerifyMfaInlineFlow,
} from '@coinbase/cdp-react';

function ProtectedActionModal() {
  return (
    <Modal>
      <VerifyMfaInline verifyFirst>
        <div className="modal-header">
          <VerifyMfaInlineBackButton />
          <h2>Protected Action</h2>
        </div>
        <VerifyMfaInlineFlow transition="fade">
          <MyProtectedContent />
        </VerifyMfaInlineFlow>
      </VerifyMfaInline>
    </Modal>
  );
}

​
Example: Render function for full control

Use the render function to customize each view: 
import {
  VerifyMfaInline,
  VerifyMfaInlineBackButton,
  VerifyMfaInlineFlow,
} from '@coinbase/cdp-react';

function AdvancedModal() {
  return (
    <VerifyMfaInline verifyFirst onVerified={() => console.log('Verified!')}>
      <VerifyMfaInlineBackButton />
      <VerifyMfaInlineFlow>
        {({ view, Content }) => (
          <div className={`view-${view}`}>
            {view === "verify" ? (
              <>
                <h2>Verify Your Identity</h2>
                {Content}
              </>
            ) : (
              <>
                <h2>Protected Content</h2>
                <MyProtectedContent />
              </>
            )}
          </div>
        )}
      </VerifyMfaInlineFlow>
    </VerifyMfaInline>
  );
}

​
Example: On-demand MFA verification

Let MFA be triggered automatically when a protected action is called: 
import { VerifyMfaInline, VerifyMfaInlineFlow } from '@coinbase/cdp-react';

function SignTransactionFlow() {
  return (
    <VerifyMfaInline 
      verifyFirst={false}
      onVerified={() => console.log('MFA complete, transaction will proceed')}
      onCancel={() => console.log('User cancelled MFA')}
    >
      <VerifyMfaInlineBackButton />
      <VerifyMfaInlineFlow>
        <TransactionForm />
      </VerifyMfaInlineFlow>
    </VerifyMfaInline>
  );
}

function TransactionForm() {
  const { signTransaction } = useSignTransaction();
  
  const handleSign = async () => {
    // If MFA is required, VerifyMfaInline will automatically
    // transition to the verify view. Once verified, this
    // action will complete automatically.
    await signTransaction(txData);
  };
  
  return (
    <form onSubmit={handleSign}>
      {/* Transaction form fields */}
      <button type="submit">Sign Transaction</button>
    </form>
  );
}

​
Example: Using the context hook

Access the inline MFA context for custom navigation: 
import {
  VerifyMfaInline,
  VerifyMfaInlineFlow,
  useVerifyMfaInlineContext,
} from '@coinbase/cdp-react';

function CustomContent() {
  const { view, goToVerify, goBack } = useVerifyMfaInlineContext();
  
  return (
    <div>
      <p>Current view: {view}</p>
      {view === "content" && (
        <button onClick={goToVerify}>
          Verify MFA Manually
        </button>
      )}
    </div>
  );
}

function App() {
  return (
    <VerifyMfaInline verifyFirst={false}>
      <VerifyMfaInlineFlow>
        <CustomContent />
      </VerifyMfaInlineFlow>
    </VerifyMfaInline>
  );
}

​
API Reference

​
VerifyMfaInline Props

PropTypeDefaultDescription
childrenReactNoderequiredShould include VerifyMfaInlineFlow and optionally VerifyMfaInlineBackButton
verifyFirstbooleantrueIf true, shows MFA verification before content
onVerified() => void-Called when MFA verification completes
onCancel() => void-Called when MFA verification is cancelled
successDelaynumber500Delay (ms) before transitioning to content after success
classNamestring-Additional CSS classes

​
VerifyMfaInlineFlow Props

PropTypeDefaultDescription
childrenReactNode | ((props) => ReactNode)requiredProtected content or render function
classNamestring-Additional CSS classes
animateHeightbooleantrueWhether to animate height during transitions
autoFocusbooleantrueWhether to auto-focus forms
transition"slide" | "fade""slide"Transition animation type

​
VerifyMfaInlineBackButton Props

PropTypeDefaultDescription
sizeButtonSize"md"Button size
variantButtonVariant"transparentSecondary"Button variant

​
Notes

  • Scoped MFA handling: The component uses event-based scoping to only handle MFA requests that originate from within its container. This allows multiple VerifyMfaInline instances on a page without conflicts.
  • Automatic MFA detection: When verifyFirst is false, the component listens for MFA requirements from protected actions and automatically transitions to the verify view when needed.
  • Back button visibility: The VerifyMfaInlineBackButton only renders when there’s somewhere to go back to (i.e., not in verifyFirst mode when on the verify view).
  • For enrolled users only: This component is designed for users who have already completed MFA enrollment. If MFA is not required for the user, content is shown directly without the verification step.