DO NOT MREGE: Mfa/demo

account-kit/react/src/components/auth/card/loading/otp.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useSigner } from "../../../../hooks/useSigner.js";
 import { EmailIllustration } from "../../../../icons/illustrations/email.js";
 import { ls } from "../../../../strings.js";
 import {
@@ -20,6 +21,7 @@ export const LoadingOtp = () => {
   const [otpCode, setOtpCode] = useState<OTPCodeType>(initialOTPValue);
   const [errorText, setErrorText] = useState(authStep.error?.message || "");
   const [titleText, setTitleText] = useState(ls.loadingOtp.title);
+  const signer = useSigner();
 
   const resetOTP = (errorText = "") => {
     setOtpCode(initialOTPValue);
@@ -46,14 +48,24 @@ export const LoadingOtp = () => {
     },
   });
 
-  const setValue = (otpCode: OTPCodeType) => {
+  const setValue = async (otpCode: OTPCodeType) => {
     setOtpCode(otpCode);
     if (isOTPCodeType(otpCode)) {
       const otp = otpCode.join("");
 
       setAuthStep({ ...authStep, status: AuthStepStatus.verifying });
       setTitleText(ls.loadingOtp.verifying);
-      authenticate({ type: "otp", otpCode: otp });
+      const { mfaRequired, mfaFactorId } = signer?.getMfaStatus() ?? {};
+      if (mfaRequired) {
+        setAuthStep({
+          type: "totp_verify",
+          previousStep: "otp",
+          factorId: mfaFactorId ?? "",
+          otpCode: otp,
+        });
+      } else {
+        authenticate({ type: "otp", otpCode: otp });
+      }
     }
   };
 

account-kit/react/src/components/auth/card/loading/totp.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useAuthContext } from "../../context.js";
+import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
+import {
+  OTPInput,
+  initialOTPValue,
+  isOTPCodeType,
+  type OTPCodeType,
+} from "../../../otp-input/otp-input.js";
+import { Spinner } from "../../../../icons/spinner.js";
+import { ThreeStarsIcon } from "../../../../icons/threeStars.js";
+
+export const LoadingTotp = () => {
+  const { authStep, setAuthStep } = useAuthContext("totp_verify");
+  const [totpCode, setTotpCode] = useState<OTPCodeType>(initialOTPValue);
+  const [errorText, setErrorText] = useState(authStep.error?.message || "");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { authenticateAsync } = useAuthenticate({
+    onMutate: async (params) => {
+      if (params.type === "email" && "email" in params) {
+        if (params.emailMode === "magicLink") {
+          setAuthStep({ type: "email_verify", email: params.email });
+        }
+      }
+    },
+    onSuccess: () => {
+      setIsSubmitting(false);
+      setAuthStep({ type: "complete" });
+    },
+    onError: (err) => {
+      console.error("TOTP verify error", err);
+      setIsSubmitting(false);
+      setErrorText("The code you entered is incorrect");
+      setTotpCode(initialOTPValue);
+    },
+  });
+
+  const setValue = async (otpCode: OTPCodeType) => {
+    setTotpCode(otpCode);
+    if (isOTPCodeType(otpCode)) {
+      setIsSubmitting(true);
+      const otp = otpCode.join("");
+      handleVerify(otp);
+    }
+  };
+
+  // Called when all digits are typed or user hits "Verify" button
+  const handleVerify = async (codeString: string) => {
+    try {
+      if (authStep.previousStep === "magicLink") {
+        await authenticateAsync({
+          type: "email",
+          email: authStep.email,
+          emailMode: "magicLink",
+          redirectParams: new URLSearchParams(),
+          multiFactors: [
+            {
+              multiFactorId: authStep.factorId,
+              multiFactorCode: codeString,
+            },
+          ],
+        });
+      } else if (authStep.previousStep === "otp") {
+        await authenticateAsync({
+          type: "otp",
+          otpCode: authStep.otpCode ?? "",
+          multiFactors: [
+            {
+              multiFactorId: authStep.factorId,
+              multiFactorCode: codeString,
+            },
+          ],
+        });
+      } else {
+        throw new Error("Invalid previous step");
+      }
+    } catch (err) {
+      console.error("TOTP submission error", err);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative h-12 w-12 mb-5">
+        <Spinner className="absolute" />
+        <ThreeStarsIcon className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      </div>
+      <h3 className="text-fg-primary font-semibold text-lg mb-2">
+        Enter authentication code
+      </h3>
+      <OTPInput
+        value={totpCode}
+        setValue={setValue}
+        errorText={errorText}
+        setErrorText={setErrorText}
+        disabled={isSubmitting}
+        handleReset={() => setTotpCode(initialOTPValue)}
+      />
+    </div>
+  );
+};

account-kit/react/src/components/auth/card/steps.tsx

@@ -7,12 +7,15 @@ import { LoadingPasskeyAuth } from "./loading/passkey.js";
 import { MainAuthContent } from "./main.js";
 import { PasskeyAdded } from "./passkey-added.js";
 import { LoadingOtp } from "./loading/otp.js";
+import { LoadingTotp } from "./loading/totp.js";
 
 export const Step = () => {
   const { authStep } = useAuthContext();
   switch (authStep.type) {
     case "email_verify":
       return <LoadingEmail />;
+    case "totp_verify":
+      return <LoadingTotp />;
     case "otp_verify":
       return <LoadingOtp />;
     case "passkey_verify":

account-kit/react/src/components/auth/context.ts

@@ -19,6 +19,20 @@ export type AuthStep =
       error?: Error;
       status?: AuthStepStatus;
     }
+  | {
+      type: "totp_verify";
+      previousStep: "magicLink";
+      factorId: string;
+      email: string;
+      error?: Error;
+    }
+  | {
+      type: "totp_verify";
+      previousStep: "otp";
+      factorId: string;
+      otpCode: string;
+      error?: Error;
+    }
   | { type: "passkey_verify"; error?: Error }
   | { type: "passkey_create"; error?: Error }
   | { type: "passkey_create_success" }

account-kit/react/src/components/auth/sections/EmailAuth.tsx

@@ -1,6 +1,6 @@
 import { useForm } from "@tanstack/react-form";
 import { zodValidator } from "@tanstack/zod-form-adapter";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { z } from "zod";
 import { useAuthenticate } from "../../../hooks/useAuthenticate.js";
 import { useSigner } from "../../../hooks/useSigner.js";
@@ -12,6 +12,8 @@ import { IS_SIGNUP_QP } from "../../constants.js";
 import { Input } from "../../input.js";
 import { useAuthContext } from "../context.js";
 import type { AuthType } from "../types.js";
+import { useSignerStatus } from "../../../hooks/useSignerStatus.js";
+import { AlchemySignerStatus, MfaRequiredError } from "@account-kit/signer";
 
 type EmailAuthProps = Extract<AuthType, { type: "email" }>;
 
@@ -24,14 +26,13 @@ export const EmailAuth = memo(
     buttonLabel = ls.login.email.button,
     placeholder = ls.login.email.placeholder,
   }: EmailAuthProps) => {
+    const { status } = useSignerStatus();
     const { setAuthStep } = useAuthContext();
     const signer = useSigner();
     const { authenticateAsync, isPending } = useAuthenticate({
       onMutate: async (params) => {
         if (params.type === "email" && "email" in params) {
-          if (params.emailMode === "magicLink") {
-            setAuthStep({ type: "email_verify", email: params.email });
-          } else {
+          if (params.emailMode === "otp") {
             setAuthStep({ type: "otp_verify", email: params.email });
           }
         }
@@ -64,15 +65,34 @@ export const EmailAuth = memo(
             emailMode,
             redirectParams,
           });
+          if (emailMode === "magicLink") {
+            setAuthStep({ type: "email_verify", email });
+          }
         } catch (e) {
-          const error = e instanceof Error ? e : new Error("An Unknown error");
+          if (e instanceof MfaRequiredError) {
+            const { multiFactorId } = e.multiFactors[0];
+            setAuthStep({
+              type: "totp_verify",
+              previousStep: "magicLink",
+              factorId: multiFactorId,
+              email,
+            });
+            return;
+          }
 
+          const error = e instanceof Error ? e : new Error("An Unknown error");
           setAuthStep({ type: "initial", error });
         }
       },
       validatorAdapter: zodValidator(),
     });
 
+    useEffect(() => {
+      if (status === AlchemySignerStatus.AWAITING_EMAIL_AUTH) {
+        setAuthStep({ type: "email_verify", email: form.state.values.email });
+      }
+    }, [status]);
+
     return (
       <form
         className="w-full"

account-kit/react/src/components/auth/sections/Footer.tsx

@@ -23,6 +23,7 @@ const RenderFooterText = ({ authStep }: FooterProps) => {
     case "oauth_completing":
       return <OAuthContactSupport />;
     case "email_completing":
+    case "totp_verify":
     case "passkey_create_success":
     case "eoa_connect":
     case "pick_eoa":

account-kit/react/src/hooks/index.ts

@@ -22,3 +22,4 @@ export * from "./useSmartAccountClient.js";
 export * from "./useUiConfig.js";
 export * from "./useUser.js";
 export * from "./useWaitForUserOperationTransaction.js";
+export * from "./useMFA.js";