Request-scoped MFA Verification

import { useState } from "react";
import {
  useCancelMfaVerification,
  useInitiateMfaVerification,
  useRegisterMfaListener,
  useSendEvmTransaction,
  useSubmitMfaVerification,
} from "@coinbase/cdp-hooks";
import type { SendEvmTransactionOptions } from "@coinbase/cdp-core";

function SendWithMfa({ transaction }: { transaction: SendEvmTransactionOptions }) {
  const [challengeId, setChallengeId] = useState<string>();
  const [mfaCode, setMfaCode] = useState("");
  const [error, setError] = useState<string>();
  const { sendEvmTransaction } = useSendEvmTransaction();
  const { initiateMfaVerification } = useInitiateMfaVerification();
  const { submitMfaVerification } = useSubmitMfaVerification();
  const { cancelMfaVerification } = useCancelMfaVerification();

  useRegisterMfaListener(async context => {
    try {
      await initiateMfaVerification({ mfaMethod: "totp", challengeId: context.challengeId });
      setChallengeId(context.challengeId);
    } catch {
      // Nothing awaits the listener, so release the waiting call yourself.
      cancelMfaVerification();
    }
  });

  async function handleSend() {
    setError(undefined);
    try {
      // Resolves once MFA is verified and the SDK has replayed the request.
      const { transactionHash } = await sendEvmTransaction(transaction);
      console.log(transactionHash);
    } catch (sendError) {
      // Also rejects when the user cancels or a wrong code burns the challenge.
      setError(String(sendError));
    }
  }

  async function handleVerify() {
    try {
      await submitMfaVerification({ mfaMethod: "totp", mfaCode, challengeId });
    } catch (submitError) {
      setError(String(submitError));
    } finally {
      // The challenge is spent either way, so drop it and let the user start over.
      setChallengeId(undefined);
      setMfaCode("");
    }
  }

  if (!challengeId) {
    return (
      <>
        {error && <p role="alert">{error}</p>}
        <button onClick={handleSend}>Send</button>
      </>
    );
  }

  return (
    <>
      <input value={mfaCode} onChange={event => setMfaCode(event.target.value)} />
      <button onClick={handleVerify}>Verify</button>
    </>
  );
}

import { useState } from "react";
import {
  useRegisterMfaListener,
  useSendEvmTransaction,
  useVerifyPasskey,
} from "@coinbase/cdp-hooks";
import type { SendEvmTransactionOptions } from "@coinbase/cdp-core";

function SendWithPasskeyMfa({ transaction }: { transaction: SendEvmTransactionOptions }) {
  const [challengeId, setChallengeId] = useState<string>();
  const { sendEvmTransaction } = useSendEvmTransaction();
  const { verifyPasskeyAsync, status } = useVerifyPasskey();

  useRegisterMfaListener(context => setChallengeId(context.challengeId));

  async function handleSend() {
    try {
      const { transactionHash } = await sendEvmTransaction(transaction);
      console.log(transactionHash);
    } catch (error) {
      // Rejects when the user cancels verification.
      console.error(error);
    }
  }

  async function handleVerify() {
    try {
      await verifyPasskeyAsync({ challengeId });
      setChallengeId(undefined);
    } catch {
      // The user cancelled or the ceremony failed. Let them try again.
    }
  }

  if (!challengeId) return <button onClick={handleSend}>Send</button>;

  return (
    <button onClick={handleVerify} disabled={status === "pending"}>
      Verify with passkey
    </button>
  );
}