decane-connect-kit 2.2.4 → 2.2.5

package/dist/index.d.cts

@@ -752,6 +752,9 @@ interface SocialWalletModalProps {
     authMethods?: Array<"google" | "email">;
     customAuthLabel?: string;
     onCustomAuthSignIn?: () => Promise<void>;
+    canUsePasskey?: boolean;
+    passkeyAddress?: string | null;
+    onPasskeySignIn?: () => Promise<unknown>;
     onRotateShares: (opts: {
         password: string;
         passwordHint?: string;
@@ -763,7 +766,7 @@ interface SocialWalletModalProps {
     rpcUrls?: Record<string, string>;
     chains?: string[];
 }
-declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
+declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, canUsePasskey, passkeyAddress, onPasskeySignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
 
 declare function DecaneMark({ size, muted }: {
     size?: number;
@@ -787,6 +790,7 @@ declare function useSocialAuth(): {
         solana?: string;
     } | null;
     sessionExpiresAt: number | null;
+    canUsePasskey: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -804,6 +808,7 @@ declare function useSocialAuth(): {
         providerId?: string;
     }) => Promise<void>;
     signInWithCustomAuth: (() => Promise<void>) | undefined;
+    signInWithPasskey: () => Promise<void>;
     unlock: () => Promise<void>;
     disconnect: () => Promise<void>;
 };

package/dist/index.d.ts

@@ -752,6 +752,9 @@ interface SocialWalletModalProps {
     authMethods?: Array<"google" | "email">;
     customAuthLabel?: string;
     onCustomAuthSignIn?: () => Promise<void>;
+    canUsePasskey?: boolean;
+    passkeyAddress?: string | null;
+    onPasskeySignIn?: () => Promise<unknown>;
     onRotateShares: (opts: {
         password: string;
         passwordHint?: string;
@@ -763,7 +766,7 @@ interface SocialWalletModalProps {
     rpcUrls?: Record<string, string>;
     chains?: string[];
 }
-declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
+declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, canUsePasskey, passkeyAddress, onPasskeySignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
 
 declare function DecaneMark({ size, muted }: {
     size?: number;
@@ -787,6 +790,7 @@ declare function useSocialAuth(): {
         solana?: string;
     } | null;
     sessionExpiresAt: number | null;
+    canUsePasskey: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -804,6 +808,7 @@ declare function useSocialAuth(): {
         providerId?: string;
     }) => Promise<void>;
     signInWithCustomAuth: (() => Promise<void>) | undefined;
+    signInWithPasskey: () => Promise<void>;
     unlock: () => Promise<void>;
     disconnect: () => Promise<void>;
 };

package/dist/index.js

@@ -4817,7 +4817,10 @@ function SignInView({
   authMethods,
   resumeHint,
   customAuthLabel,
-  onCustomAuthSignIn
+  onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn
 }) {
   const [googleLoading, setGoogleLoading] = useState2(false);
   const [email, setEmail] = useState2("");
@@ -4825,7 +4828,25 @@ function SignInView({
   const [emailSent, setEmailSent] = useState2(false);
   const [emailLoading, setEmailLoading] = useState2(false);
   const [customLoading, setCustomLoading] = useState2(false);
+  const [passkeyLoading, setPasskeyLoading] = useState2(false);
+  const [showOtherMethods, setShowOtherMethods] = useState2(false);
   const [error, setError] = useState2("");
+  const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
+  async function handlePasskey() {
+    if (!onPasskeySignIn) return;
+    setError("");
+    setPasskeyLoading(true);
+    try {
+      await onPasskeySignIn();
+    } catch (e) {
+      const err = e;
+      if (err?.name !== "UserCancelledError") {
+        setError(err?.message ?? "Passkey sign-in failed");
+        setShowOtherMethods(true);
+      }
+      setPasskeyLoading(false);
+    }
+  }
   async function handleGoogle() {
     setError("");
     setGoogleLoading(true);
@@ -4885,7 +4906,47 @@ function SignInView({
     fontFamily: "inherit",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), authMethods.includes("google") && /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && !passkeyFirst && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), passkeyFirst && /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 unlock to resume", passkeyAddress ? ` ${passkeyAddress.slice(0, 6)}\u2026${passkeyAddress.slice(-4)}` : ""), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: handlePasskey,
+      disabled: passkeyLoading,
+      style: {
+        width: "100%",
+        padding: "11px 0",
+        background: "var(--dc-accent)",
+        color: "var(--dc-accent-text)",
+        border: "none",
+        borderRadius: 10,
+        fontSize: 13,
+        fontWeight: 700,
+        cursor: passkeyLoading ? "not-allowed" : "pointer",
+        opacity: passkeyLoading ? 0.7 : 1,
+        fontFamily: "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 7
+      }
+    },
+    passkeyLoading ? "Verifying\u2026" : "\u{1F513} Continue with passkey"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => setShowOtherMethods(true),
+      style: {
+        width: "100%",
+        marginTop: 10,
+        background: "none",
+        border: "none",
+        color: "var(--dc-text-muted)",
+        fontSize: 12,
+        cursor: "pointer",
+        fontFamily: "inherit"
+      }
+    },
+    "Use email or Google instead"
+  ), error && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error)), !passkeyFirst && authMethods.includes("google") && /* @__PURE__ */ React3.createElement(
     "button",
     {
       onClick: handleGoogle,
@@ -4906,7 +4967,7 @@ function SignInView({
       }
     },
     googleLoading ? "Redirecting\u2026" : "Continue with Google"
-  ), authMethods.includes("email") && /* @__PURE__ */ React3.createElement(React3.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ React3.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
+  ), !passkeyFirst && authMethods.includes("email") && /* @__PURE__ */ React3.createElement(React3.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ React3.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
     "input",
     {
       type: "email",
@@ -4945,7 +5006,7 @@ function SignInView({
     fontWeight: 700,
     cursor: "pointer",
     fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement(React3.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ React3.createElement(
+  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement(React3.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ React3.createElement(
     "button",
     {
       onClick: handleCustomAuth,
@@ -5084,6 +5145,9 @@ function SocialWalletModal({
   authMethods = ["google", "email"],
   customAuthLabel,
   onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn,
   onRotateShares,
   onExportPortableBackup,
   rpcUrls,
@@ -5214,7 +5278,10 @@ function SocialWalletModal({
         authMethods,
         resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0,
         customAuthLabel,
-        onCustomAuthSignIn
+        onCustomAuthSignIn,
+        canUsePasskey,
+        passkeyAddress,
+        onPasskeySignIn
       }
     ) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: {
       margin: "0 16px 14px",
@@ -5609,6 +5676,9 @@ function DecaneKit({ config, children }) {
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         authMethods: config?.social?.authMethods ?? ["google", "email"],
+        canUsePasskey: socialAuth.canUsePasskey,
+        passkeyAddress: socialAuth.addresses?.evm ?? socialAuth.addresses?.solana ?? null,
+        onPasskeySignIn: signInWithPasskey,
         onRotateShares: socialRotateShares,
         onExportPortableBackup: socialExportPortableBackup,
         rpcUrls: config?.social?.rpcUrls,
@@ -5638,6 +5708,7 @@ function useSocialAuth() {
     connectWithToken,
     customAuthLabel,
     connectWithCustomAuth,
+    signInWithPasskey: ctxSignInWithPasskey,
     socialUnlock,
     socialDisconnect
   } = useDecaneContext();
@@ -5706,6 +5777,15 @@ function useSocialAuth() {
       setCustomLoading(false);
     }
   }, [connectWithCustomAuth]);
+  const signInWithPasskey = useCallback4(async () => {
+    setError(null);
+    try {
+      await ctxSignInWithPasskey();
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    }
+  }, [ctxSignInWithPasskey]);
   const unlock = useCallback4(async () => {
     setError(null);
     try {
@@ -5730,6 +5810,8 @@ function useSocialAuth() {
     isNewUser: socialAuth.isNewUser,
     addresses: socialAuth.addresses,
     sessionExpiresAt: socialAuth.sessionExpiresAt,
+    // True when this device can skip the full sign-in and resume with a passkey.
+    canUsePasskey: socialAuth.canUsePasskey,
     // True when addresses are known (from a previous visit) but there's no
     // live session — unlock() will always throw in this state (every
     // unlock requires a fresh JWT, and JWTs are never persisted). Route
@@ -5747,6 +5829,7 @@ function useSocialAuth() {
     confirmEmailCode,
     signInWithToken,
     signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
+    signInWithPasskey,
     unlock,
     disconnect
   };