Login Two-Factor Authentication (MFA)

import { useCallback, useEffect, useRef, useState } from "react";
import type { StateSnapshot } from "@getpara/web-sdk";
import { useClient, useEnrollMfa, useVerifyMfa } from "@getpara/react-sdk";

type MfaMode = "enroll" | "verify";

export function useMfaChallenge() {
  const para = useClient();
  const { enrollMfaAsync } = useEnrollMfa();
  const { verifyMfaAsync } = useVerifyMfa();

  const [mode, setMode] = useState<MfaMode | null>(null);
  const [enrollment, setEnrollment] = useState<{ uri: string; backupCodes: string[] } | null>(null);
  const [attemptsRemaining, setAttemptsRemaining] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);

  // enrollMfa() mints a fresh secret + backup codes each call, so enroll once per challenge.
  const hasEnrolled = useRef(false);

  useEffect(() => {
    if (!para) return;
    const unsubscribe = para.onStatePhaseChange(async (snapshot: StateSnapshot) => {
      if (snapshot.authPhase === "awaiting_2fa_enrollment") {
        setMode("enroll");
        if (hasEnrolled.current) return;
        hasEnrolled.current = true;
        try {
          const { uri, backupCodes } = await enrollMfaAsync(); // otpauth:// uri + one-time codes
          setEnrollment({ uri, backupCodes });
        } catch (e) {
          hasEnrolled.current = false; // allow a retry on the next state tick
          setError("Could not start two-factor setup.");
        }
      } else if (snapshot.authPhase === "awaiting_2fa") {
        setMode("verify");
      } else {
        // Left the hold (advanced, cancelled, or errored) — reset so stale codes never linger.
        setMode(null);
        setEnrollment(null);
        setAttemptsRemaining(null);
        setError(null);
        hasEnrolled.current = false;
      }
    });
    return () => unsubscribe();
  }, [para, enrollMfaAsync]);

  const verify = useCallback(
    async (code: string): Promise<boolean> => {
      setError(null);
      // On { ok: true } the SDK has already re-polled the login — the auth state advances
      // toward the wallet on its own. On { ok: false } stay on the prompt.
      const result = await verifyMfaAsync({ code });
      if (result.ok) return true;
      setAttemptsRemaining(result.attemptsRemaining ?? null);
      setError(`Incorrect code. ${result.attemptsRemaining ?? 0} attempt(s) remaining.`);
      return false;
    },
    [verifyMfaAsync],
  );

  return { mode, enrollment, attemptsRemaining, error, verify };
}

import { useState } from "react";
import { QRCodeSVG } from "qrcode.react";
import { useMfaChallenge } from "./useMfaChallenge";

export function MfaChallenge() {
  const { mode, enrollment, attemptsRemaining, error, verify } = useMfaChallenge();
  const [code, setCode] = useState("");

  if (!mode) return null; // not parked on a 2FA challenge

  return (
    <div>
      {mode === "enroll" && enrollment && (
        <>
          <p>Scan this with your authenticator app:</p>
          <QRCodeSVG value={enrollment.uri} />
          <p>Save these backup codes — they're shown only once:</p>
          <ul>{enrollment.backupCodes.map((c) => <li key={c}>{c}</li>)}</ul>
        </>
      )}

      <p>{mode === "enroll" ? "Enter the code to finish setup" : "Enter your authentication code"}</p>
      <input value={code} onChange={(e) => setCode(e.target.value)} inputMode="numeric" />
      <button onClick={() => verify(code)}>Verify</button>

      {error && <p>{error}{attemptsRemaining === 0 && " Please sign in again."}</p>}
    </div>
  );
}