[MNY-327] SDK: Display error returned from API in login with phone number UI

packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -29,7 +29,10 @@
   | "valid"
   | "idle"
   | "payment_required";
-type AccountStatus = "sending" | "sent" | "error";
+type AccountStatus =
+  | { type: "sending" }
+  | { type: "sent" }
+  | { type: "error"; message: string | undefined };
 type ScreenToShow = "base" | "enter-password-or-recovery-code";
 
 /**
@@ -52,7 +55,9 @@
   const [otpInput, setOtpInput] = useState("");
   const [verifyStatus, setVerifyStatus] = useState<VerificationStatus>("idle");
   const [error, setError] = useState<string | undefined>();
-  const [accountStatus, setAccountStatus] = useState<AccountStatus>("sending");
+  const [accountStatus, setAccountStatus] = useState<AccountStatus>({
+    type: "sending",
+  });
   const [countdown, setCountdown] = useState(0);
   const ecosystem = isEcosystemWallet(wallet)
     ? {
@@ -66,7 +71,7 @@
   const sendEmailOrSms = useCallback(async () => {
     setOtpInput("");
     setVerifyStatus("idle");
-    setAccountStatus("sending");
+    setAccountStatus({ type: "sending" });
 
     try {
       if ("email" in userInfo) {
@@ -76,7 +81,7 @@
           email: userInfo.email,
           strategy: "email",
         });
-        setAccountStatus("sent");
+        setAccountStatus({ type: "sent" });
         setCountdown(60); // Start 60-second countdown
       } else if ("phone" in userInfo) {
         await preAuthenticate({
@@ -85,15 +90,18 @@
           phoneNumber: userInfo.phone,
           strategy: "phone",
         });
-        setAccountStatus("sent");
+        setAccountStatus({ type: "sent" });
         setCountdown(60); // Start 60-second countdown
       } else {
         throw new Error("Invalid userInfo");
       }
     } catch (e) {
       console.error(e);
       setVerifyStatus("idle");
-      setAccountStatus("error");
+      setAccountStatus({
+        type: "error",
+        message: e instanceof Error ? e.message : undefined,
+      });
     }
   }, [props.client, userInfo, ecosystem]);
 
@@ -317,19 +325,24 @@
 
             {!isWideModal && <Line />}
 
-            <Container gap="xs" p={isWideModal ? undefined : "lg"}>
-              {accountStatus === "error" && (
+            <Container
+              gap="sm"
+              p={isWideModal ? undefined : "lg"}
+              flex="column"
+            >
+              {accountStatus.type === "error" && (
                 <Text
                   center
                   color="danger"
                   size="sm"
                   className="tw-screen-error"
                 >
-                  {locale.emailLoginScreen.failedToSendCode}
+                  {accountStatus.message ||
+                    locale.emailLoginScreen.failedToSendCode}
                 </Text>
               )}
 
-              {accountStatus === "sending" && (
+              {accountStatus.type === "sending" && (
                 <Container
                   center="both"
                   flex="row"
@@ -343,7 +356,7 @@
                 </Container>
               )}
 
-              {accountStatus !== "sending" && (
+              {accountStatus.type !== "sending" && (
                 <LinkButton
                   onClick={countdown === 0 ? sendEmailOrSms : undefined}
                   style={{

packages/thirdweb/src/wallets/in-app/web/lib/auth/otp.ts

@@ -51,7 +51,17 @@
   });
 
   if (!response.ok) {
-    throw new Error("Failed to send verification code");
+    const raw = await response.text();
+    let message: string | undefined;
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed.message === "string") {
+        message = parsed.message;
+      }
+    } catch {
+      // ignore parse errors
+    }
+    throw new Error(message || "Failed to send verification code");
   }
 
   return await response.json();