decane-connect-kit 2.7.5 → 2.8.0

package/dist/index.cjs

@@ -2093,6 +2093,18 @@ var ApiClient = class {
       body: JSON.stringify({ email, code })
     });
   }
+  async authPhoneStart(phone) {
+    await this._request("/auth/phone/start", {
+      method: "POST",
+      body: JSON.stringify({ phone })
+    });
+  }
+  async authPhoneVerify(phone, code) {
+    return this._request("/auth/phone/verify", {
+      method: "POST",
+      body: JSON.stringify({ phone, code })
+    });
+  }
   // GET /share (the server share itself) was removed as part of the TEE
   // migration — the browser must never reconstruct the private key anymore.
   // Only public addresses are fetched from the backend now.
@@ -2938,6 +2950,14 @@ async function verifyEmailCode(api, email, code) {
   return api.authEmailVerify(email, code);
 }
 
+// src/social/auth/phone.ts
+async function startPhoneAuth(api, phone) {
+  await api.authPhoneStart(phone);
+}
+async function verifyPhoneCode(api, phone, code) {
+  return api.authPhoneVerify(phone, code);
+}
+
 // src/social/auth/kingschat.ts
 init_errors();
 var KINGSCHAT_AUTH_ORIGIN = "https://accounts.kingsch.at";
@@ -4145,6 +4165,14 @@ async function createDecaneConnect(config) {
       const result = await verifyEmailCode(api, email, code);
       return handleAuthResult(result);
     },
+    async connectWithPhone(phone) {
+      await startPhoneAuth(api, phone);
+      return { codeRequired: true };
+    },
+    async verifyPhoneCode(phone, code) {
+      const result = await verifyPhoneCode(api, phone, code);
+      return handleAuthResult(result);
+    },
     async canSignInWithPasskey() {
       return await passkeyLoginCandidate() !== null;
     },
@@ -4907,6 +4935,8 @@ function WalletSelector({
   onKingsChatSignIn,
   onEmailStart,
   onEmailVerify,
+  onPhoneStart,
+  onPhoneVerify,
   customAuthLabel,
   onCustomAuthSignIn,
   canUsePasskey = false,
@@ -4922,6 +4952,9 @@ function WalletSelector({
   const [emailStep, setEmailStep] = (0, import_react2.useState)("input");
   const [emailVal, setEmailVal] = (0, import_react2.useState)("");
   const [codeVal, setCodeVal] = (0, import_react2.useState)("");
+  const [phoneStep, setPhoneStep] = (0, import_react2.useState)("input");
+  const [phoneVal, setPhoneVal] = (0, import_react2.useState)("");
+  const [phoneCode, setPhoneCode] = (0, import_react2.useState)("");
   const [socialLoad, setSocialLoad] = (0, import_react2.useState)(false);
   const [socialErr, setSocialErr] = (0, import_react2.useState)("");
   const [showOtherMethods, setShowOtherMethods] = (0, import_react2.useState)(false);
@@ -5032,6 +5065,33 @@ function WalletSelector({
       setSocialLoad(false);
     }
   }
+  async function handlePhoneStart(e) {
+    e.preventDefault();
+    if (!onPhoneStart) return;
+    setSocialLoad(true);
+    setSocialErr("");
+    try {
+      await onPhoneStart(phoneVal);
+      setPhoneStep("code");
+    } catch (e2) {
+      setSocialErr(e2.message);
+    } finally {
+      setSocialLoad(false);
+    }
+  }
+  async function handlePhoneVerify(e) {
+    e.preventDefault();
+    if (!onPhoneVerify) return;
+    setSocialLoad(true);
+    setSocialErr("");
+    try {
+      await onPhoneVerify(phoneVal, phoneCode);
+    } catch (e2) {
+      setSocialErr(e2.message);
+    } finally {
+      setSocialLoad(false);
+    }
+  }
   const handleKey = (0, import_react2.useCallback)(
     (e) => {
       if (e.key === "Escape") {
@@ -5567,6 +5627,126 @@ function WalletSelector({
             }
           },
           socialLoad ? "Verifying\u2026" : "Verify"
+        )))), !passkeyFirst && socialAuthMethods.includes("phone") && onPhoneStart && onPhoneVerify && (phoneStep === "input" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handlePhoneStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ import_react2.default.createElement(
+          "input",
+          {
+            type: "tel",
+            placeholder: "+234 801 234 5678",
+            value: phoneVal,
+            onChange: (e) => setPhoneVal(e.target.value),
+            required: true,
+            style: {
+              width: "100%",
+              padding: "10px 12px",
+              background: "var(--dc-surface)",
+              border: "1px solid var(--dc-border)",
+              borderRadius: 10,
+              color: "var(--dc-text)",
+              fontSize: 13,
+              fontFamily: "inherit",
+              outline: "none",
+              boxSizing: "border-box"
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = "var(--dc-border)";
+            }
+          }
+        ), /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            type: "submit",
+            disabled: socialLoad || !phoneVal,
+            style: {
+              width: "100%",
+              padding: "10px 16px",
+              background: "var(--dc-accent)",
+              color: "var(--dc-accent-text)",
+              border: "none",
+              borderRadius: 10,
+              fontSize: 14,
+              fontWeight: 700,
+              cursor: socialLoad ? "not-allowed" : "pointer",
+              fontFamily: "inherit",
+              opacity: socialLoad || !phoneVal ? 0.6 : 1
+            }
+          },
+          socialLoad ? "Sending\u2026" : "Send code"
+        )) : /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handlePhoneVerify, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontSize: 12, color: "var(--dc-text-muted)", textAlign: "center" } }, "Code sent to ", /* @__PURE__ */ import_react2.default.createElement("strong", { style: { color: "var(--dc-text)" } }, phoneVal)), /* @__PURE__ */ import_react2.default.createElement(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            placeholder: "6-digit code",
+            value: phoneCode,
+            onChange: (e) => setPhoneCode(e.target.value.replace(/\D/g, "").slice(0, 6)),
+            autoFocus: true,
+            required: true,
+            style: {
+              width: "100%",
+              padding: "10px 12px",
+              background: "var(--dc-surface)",
+              border: "1px solid var(--dc-border)",
+              borderRadius: 10,
+              color: "var(--dc-text)",
+              fontSize: 20,
+              fontFamily: "monospace",
+              letterSpacing: 8,
+              textAlign: "center",
+              outline: "none",
+              boxSizing: "border-box"
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = "var(--dc-border)";
+            }
+          }
+        ), /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setPhoneStep("input");
+              setPhoneCode("");
+              setSocialErr("");
+            },
+            style: {
+              flex: 1,
+              padding: "9px 0",
+              background: "transparent",
+              border: "1px solid var(--dc-border)",
+              borderRadius: 10,
+              color: "var(--dc-text-muted)",
+              fontSize: 13,
+              cursor: "pointer",
+              fontFamily: "inherit"
+            }
+          },
+          "Back"
+        ), /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            type: "submit",
+            disabled: socialLoad || phoneCode.length < 6,
+            style: {
+              flex: 2,
+              padding: "9px 0",
+              background: "var(--dc-accent)",
+              color: "var(--dc-accent-text)",
+              border: "none",
+              borderRadius: 10,
+              fontSize: 13,
+              fontWeight: 700,
+              cursor: socialLoad || phoneCode.length < 6 ? "not-allowed" : "pointer",
+              fontFamily: "inherit",
+              opacity: socialLoad || phoneCode.length < 6 ? 0.6 : 1
+            }
+          },
+          socialLoad ? "Verifying\u2026" : "Verify"
         )))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, (socialAuthMethods.includes("google") || socialAuthMethods.includes("email")) && /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or"), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), /* @__PURE__ */ import_react2.default.createElement(
           "button",
           {
@@ -5697,6 +5877,8 @@ function SignInView({
   onKingsChatSignIn,
   onEmailStart,
   onEmailVerify,
+  onPhoneStart,
+  onPhoneVerify,
   authMethods,
   resumeHint,
   customAuthLabel,
@@ -5711,6 +5893,10 @@ function SignInView({
   const [code, setCode] = (0, import_react3.useState)("");
   const [emailSent, setEmailSent] = (0, import_react3.useState)(false);
   const [emailLoading, setEmailLoading] = (0, import_react3.useState)(false);
+  const [phone, setPhone] = (0, import_react3.useState)("");
+  const [phoneCode, setPhoneCode] = (0, import_react3.useState)("");
+  const [phoneSent, setPhoneSent] = (0, import_react3.useState)(false);
+  const [phoneLoading, setPhoneLoading] = (0, import_react3.useState)(false);
   const [customLoading, setCustomLoading] = (0, import_react3.useState)(false);
   const [passkeyLoading, setPasskeyLoading] = (0, import_react3.useState)(false);
   const [showOtherMethods, setShowOtherMethods] = (0, import_react3.useState)(false);
@@ -5778,6 +5964,33 @@ function SignInView({
       setEmailLoading(false);
     }
   }
+  async function handlePhoneStart(e) {
+    e.preventDefault();
+    if (!onPhoneStart) return;
+    setError("");
+    setPhoneLoading(true);
+    try {
+      await onPhoneStart(phone);
+      setPhoneSent(true);
+    } catch (e2) {
+      setError(e2.message);
+    } finally {
+      setPhoneLoading(false);
+    }
+  }
+  async function handlePhoneVerify(e) {
+    e.preventDefault();
+    if (!onPhoneVerify) return;
+    setError("");
+    setPhoneLoading(true);
+    try {
+      await onPhoneVerify(phone, phoneCode);
+    } catch (e2) {
+      setError(e2.message);
+    } finally {
+      setPhoneLoading(false);
+    }
+  }
   async function handleCustomAuth() {
     if (!onCustomAuthSignIn) return;
     setError("");
@@ -5923,7 +6136,47 @@ function SignInView({
     fontWeight: 700,
     cursor: "pointer",
     fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
+  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && authMethods.includes("phone") && onPhoneStart && onPhoneVerify && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !phoneSent ? /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handlePhoneStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "tel",
+      required: true,
+      placeholder: "+234 801 234 5678",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value),
+      style: { ...inputStyle, flex: 1 }
+    }
+  ), /* @__PURE__ */ import_react3.default.createElement("button", { type: "submit", disabled: phoneLoading, style: {
+    padding: "0 16px",
+    background: "var(--dc-surface)",
+    border: "1px solid var(--dc-border)",
+    borderRadius: 8,
+    color: "var(--dc-text)",
+    fontSize: 13,
+    cursor: "pointer",
+    fontFamily: "inherit"
+  } }, phoneLoading ? "\u2026" : "Send code")) : /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handlePhoneVerify, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      placeholder: "6-digit code",
+      value: phoneCode,
+      maxLength: 6,
+      autoFocus: true,
+      inputMode: "numeric",
+      onChange: (e) => setPhoneCode(e.target.value.replace(/\D/g, "")),
+      style: { ...inputStyle, flex: 1, letterSpacing: 4, textAlign: "center" }
+    }
+  ), /* @__PURE__ */ import_react3.default.createElement("button", { type: "submit", disabled: phoneLoading, style: {
+    padding: "0 16px",
+    background: "var(--dc-accent)",
+    color: "var(--dc-accent-text)",
+    border: "none",
+    borderRadius: 8,
+    fontSize: 13,
+    fontWeight: 700,
+    cursor: "pointer",
+    fontFamily: "inherit"
+  } }, phoneLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       onClick: handleCustomAuth,
@@ -6060,6 +6313,8 @@ function SocialWalletModal({
   onKingsChatSignIn,
   onEmailStart,
   onEmailVerify,
+  onPhoneStart,
+  onPhoneVerify,
   authMethods = ["google", "email"],
   customAuthLabel,
   onCustomAuthSignIn,
@@ -6194,6 +6449,8 @@ function SocialWalletModal({
         onKingsChatSignIn,
         onEmailStart,
         onEmailVerify,
+        onPhoneStart,
+        onPhoneVerify,
         authMethods,
         resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0,
         customAuthLabel,
@@ -6437,7 +6694,16 @@ function DecaneKit({ config, children }) {
       apiBaseUrl,
       chains,
       rpcUrls,
-      requireAssertionPerSignature
+      requireAssertionPerSignature,
+      // Recovery callbacks. Forwarding these is what makes recovery
+      // configurable at all from <DecaneKit>; before, they were silently
+      // dropped and the headless client was constructed without them.
+      offerRecoveryAtSignup,
+      onRecoveryShareOffer,
+      onRecoveryFileReady,
+      promptForRecoveryFile,
+      onRecoveryRotated,
+      onRecoveryProgress
     } = config.social;
     createDecaneConnect({
       appId: config.appId,
@@ -6447,7 +6713,13 @@ function DecaneKit({ config, children }) {
       chains: chains ?? ["evm:1", "solana:mainnet"],
       rpcUrls,
       promptPin,
-      requireAssertionPerSignature
+      requireAssertionPerSignature,
+      offerRecoveryAtSignup,
+      onRecoveryShareOffer,
+      onRecoveryFileReady,
+      promptForRecoveryFile,
+      onRecoveryRotated,
+      onRecoveryProgress
     }).then((sdk) => {
       socialRef.current = sdk;
       sdk.on(
@@ -6538,6 +6810,23 @@ function DecaneKit({ config, children }) {
       throw e;
     }
   }, [clearPhase]);
+  const connectWithPhone = (0, import_react5.useCallback)(async (phone) => {
+    const sdk = socialRef.current;
+    if (!sdk) throw new Error("Social sign-in not configured");
+    return sdk.connectWithPhone(phone);
+  }, []);
+  const verifyPhoneCode2 = (0, import_react5.useCallback)(async (phone, code) => {
+    const sdk = socialRef.current;
+    if (!sdk) throw new Error("Social sign-in not configured");
+    try {
+      const result = await sdk.verifyPhoneCode(phone, code);
+      applyResult(result);
+      setSelectorOpen(false);
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
   const connectWithToken = (0, import_react5.useCallback)(async (token, opts) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
@@ -6690,6 +6979,8 @@ function DecaneKit({ config, children }) {
         connectWithKingsChat,
         connectWithEmail,
         verifyEmailCode: verifyEmailCode2,
+        connectWithPhone,
+        verifyPhoneCode: verifyPhoneCode2,
         connectWithToken,
         customAuthLabel: customAuthConfig?.label,
         connectWithCustomAuth: customAuthConfig ? connectWithCustomAuth : void 0,
@@ -6733,6 +7024,8 @@ function DecaneKit({ config, children }) {
         onKingsChatSignIn: connectWithKingsChat,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
+        onPhoneStart: connectWithPhone,
+        onPhoneVerify: verifyPhoneCode2,
         canUsePasskey: socialAuth.canUsePasskey,
         passkeyAddress: socialAuth.addresses?.evm ?? socialAuth.addresses?.solana ?? null,
         onPasskeySignIn: signInWithPasskey,
@@ -6755,6 +7048,8 @@ function DecaneKit({ config, children }) {
         onKingsChatSignIn: connectWithKingsChat,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
+        onPhoneStart: connectWithPhone,
+        onPhoneVerify: verifyPhoneCode2,
         authMethods: config?.social?.authMethods ?? ["google", "email"],
         canUsePasskey: socialAuth.canUsePasskey,
         passkeyAddress: socialAuth.addresses?.evm ?? socialAuth.addresses?.solana ?? null,
@@ -6786,6 +7081,8 @@ function useSocialAuth() {
     connectWithGoogle,
     connectWithEmail,
     verifyEmailCode: verifyEmailCode2,
+    connectWithPhone,
+    verifyPhoneCode: verifyPhoneCode2,
     connectWithToken,
     customAuthLabel,
     connectWithCustomAuth,
@@ -6795,6 +7092,7 @@ function useSocialAuth() {
   } = useDecaneContext();
   const [googleLoading, setGoogleLoading] = (0, import_react6.useState)(false);
   const [emailLoading, setEmailLoading] = (0, import_react6.useState)(false);
+  const [phoneLoading, setPhoneLoading] = (0, import_react6.useState)(false);
   const [tokenLoading, setTokenLoading] = (0, import_react6.useState)(false);
   const [customLoading, setCustomLoading] = (0, import_react6.useState)(false);
   const [error, setError] = (0, import_react6.useState)(null);
@@ -6833,6 +7131,31 @@ function useSocialAuth() {
       setEmailLoading(false);
     }
   }, [verifyEmailCode2]);
+  const sendPhoneCode = (0, import_react6.useCallback)(async (phone) => {
+    setPhoneLoading(true);
+    setError(null);
+    try {
+      await connectWithPhone(phone);
+      return { codeRequired: true };
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    } finally {
+      setPhoneLoading(false);
+    }
+  }, [connectWithPhone]);
+  const confirmPhoneCode = (0, import_react6.useCallback)(async (phone, code) => {
+    setPhoneLoading(true);
+    setError(null);
+    try {
+      await verifyPhoneCode2(phone, code);
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    } finally {
+      setPhoneLoading(false);
+    }
+  }, [verifyPhoneCode2]);
   const signInWithToken = (0, import_react6.useCallback)(async (token, opts) => {
     setTokenLoading(true);
     setError(null);
@@ -6903,6 +7226,7 @@ function useSocialAuth() {
     needsReconnect: socialAuth.needsReconnect,
     googleLoading,
     emailLoading,
+    phoneLoading,
     tokenLoading,
     customLoading,
     customAuthLabel,
@@ -6911,6 +7235,8 @@ function useSocialAuth() {
     signInWithGoogle,
     sendEmailCode,
     confirmEmailCode,
+    sendPhoneCode,
+    confirmPhoneCode,
     signInWithToken,
     signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
     signInWithPasskey,