fix: keeping otp input in view while the code is validated

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

@@ -90,7 +90,6 @@ export const AuthCardContent = ({
       case "otp_verify":
       case "passkey_create":
       case "oauth_completing":
-      case "otp_completing":
         disconnect(config); // Terminate any inflight authentication
         didGoBack.current = true;
         setAuthStep({ type: "initial" });

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { EmailIllustration } from "../../../../icons/illustrations/email.js";
 import { ls } from "../../../../strings.js";
 import {
@@ -13,25 +13,40 @@ import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
 import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
 
 export const LoadingOtp = () => {
+  const { isConnected } = useSignerStatus();
   const { authStep } = useAuthContext("otp_verify");
   const [otpCode, setOtpCode] = useState<OTPCodeType>(initialOTPValue);
   const [errorText, setErrorText] = useState(authStep.error?.message || "");
+  const [isDisabled, setIsDisabled] = useState(false);
   const { setAuthStep } = useAuthContext();
-  const resetOTP = () => {
+  const resetOTP = (errorText = "") => {
     setOtpCode(initialOTPValue);
-    setErrorText("");
+    setErrorText(errorText);
+    setIsDisabled(false);
   };
 
-  useEffect(() => {
+  const { authenticate } = useAuthenticate({
+    onError: (error: any) => {
+      console.error(error);
+      const { email } = authStep;
+      setAuthStep({ type: "otp_verify", email, error });
+      resetOTP(error.message);
+    },
+    onSuccess: () => {
+      if (isConnected) {
+        setAuthStep({ type: "complete" });
+      }
+    },
+  });
+
+  const setValue = (otpCode: OTPCodeType) => {
+    setOtpCode(otpCode);
     if (isOTPCodeType(otpCode)) {
-      setAuthStep({
-        type: "otp_completing",
-        email: authStep.email,
-        otp: otpCode.join(""),
-      });
+      setIsDisabled(true);
+      const otp = otpCode.join("");
+      authenticate({ type: "otp", otpCode: otp });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [otpCode]);
+  };
 
   return (
     <div className="flex flex-col items-center">
@@ -53,50 +68,13 @@ export const LoadingOtp = () => {
         {authStep.email}
       </p>
       <OTPInput
+        disabled={isDisabled}
         value={otpCode}
-        setValue={setOtpCode}
+        setValue={setValue}
         setErrorText={setErrorText}
         errorText={errorText}
         handleReset={resetOTP}
       />
     </div>
   );
 };
-
-export const CompletingOtp = () => {
-  const { isConnected } = useSignerStatus();
-  const { setAuthStep, authStep } = useAuthContext("otp_completing");
-  const { authenticate } = useAuthenticate({
-    onError: (error: any) => {
-      console.error(error);
-      const { email } = authStep;
-      setAuthStep({ type: "otp_verify", email, error });
-    },
-    onSuccess: () => {
-      if (isConnected && authStep.createPasskeyAfter) {
-        setAuthStep({ type: "passkey_create" });
-      } else if (isConnected) {
-        setAuthStep({ type: "complete" });
-      }
-    },
-  });
-
-  useEffect(() => {
-    authenticate({ type: "otp", otpCode: authStep.otp });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className="flex flex-col items-center justify-center ">
-      <div className="flex flex-col items-center justify-center h-12 w-12 mb-5">
-        <Spinner />
-      </div>
-      <h2 className="text-fg-primary font-semibold text-lg mb-2">
-        {ls.completingOtp.title}
-      </h2>
-      <p className="text-fg-secondary text-center text-sm">
-        {ls.completingOtp.body}
-      </p>
-    </div>
-  );
-};

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

@@ -6,7 +6,7 @@ import { CompletingOAuth } from "./loading/oauth.js";
 import { LoadingPasskeyAuth } from "./loading/passkey.js";
 import { MainAuthContent } from "./main.js";
 import { PasskeyAdded } from "./passkey-added.js";
-import { CompletingOtp, LoadingOtp } from "./loading/otp.js";
+import { LoadingOtp } from "./loading/otp.js";
 
 export const Step = () => {
   const { authStep } = useAuthContext();
@@ -21,8 +21,6 @@ export const Step = () => {
       return <CompletingEmailAuth />;
     case "oauth_completing":
       return <CompletingOAuth />;
-    case "otp_completing":
-      return <CompletingOtp />;
     case "passkey_create":
       return <AddPasskey />;
     case "passkey_create_success":

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

@@ -17,13 +17,6 @@ export type AuthStep =
       createPasskeyAfter?: boolean;
       error?: Error;
     }
-  | {
-      type: "otp_completing";
-      email: string;
-      createPasskeyAfter?: boolean;
-      otp: string;
-      error?: Error;
-    }
   | { type: "initial"; error?: Error }
   | { type: "complete" }
   | { type: "eoa_connect"; connector: Connector; error?: Error }

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

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

account-kit/react/src/components/otp-input/otp-input.tsx

@@ -7,7 +7,7 @@ const OTP_LENGTH = 6;
 type OTPInputProps = {
   errorText?: string;
   value: OTPCodeType;
-  setValue: React.Dispatch<React.SetStateAction<OTPCodeType>>;
+  setValue: (otpCode: OTPCodeType) => void;
   setErrorText: React.Dispatch<React.SetStateAction<string>>;
   disabled?: boolean;
   handleReset: () => void;