decane-connect-kit 2.18.0 → 2.20.0

package/dist/index.cjs

@@ -2028,6 +2028,37 @@ var EventEmitter = class {
   }
 };
 
+// src/social/auth/redirectResult.ts
+function readRedirectOutcome(search) {
+  const params = new URLSearchParams(search);
+  const error = params.get("decane_error");
+  if (error) return { kind: "error", error };
+  const jwt = params.get("decane_jwt");
+  if (!jwt) return { kind: "none" };
+  const name = params.get("decane_name");
+  const email = params.get("decane_email");
+  const picture = params.get("decane_picture");
+  const profile = {
+    ...name ? { name } : {},
+    ...email ? { email } : {},
+    ...picture ? { picture } : {}
+  };
+  return {
+    kind: "result",
+    result: {
+      jwt,
+      userId: params.get("decane_user_id") ?? "",
+      isNewUser: params.get("decane_is_new_user") === "true",
+      hasShare: params.get("decane_has_share") === "true",
+      // Omitted entirely when the provider released nothing, so callers can
+      // test `result.profile` rather than an object that is always present but
+      // sometimes empty. X never sends an email, so this is the normal case
+      // there rather than an edge one.
+      ...Object.keys(profile).length ? { profile } : {}
+    }
+  };
+}
+
 // src/social/api.ts
 init_errors();
 var ERROR_MAP = {
@@ -2079,6 +2110,14 @@ var ApiClient = class {
   async getGoogleInitUrl() {
     return this._request("/auth/google/init", { method: "GET" });
   }
+  /**
+   * The X consent URL. Same contract as Google's: the backend holds the client
+   * secret and the PKCE verifier, and answers 503 X_NOT_CONFIGURED when the
+   * deployment has no X credentials.
+   */
+  async getXInitUrl() {
+    return this._request("/auth/x/init", { method: "GET" });
+  }
   /**
    * Exchange a Google ID token the app already holds for a Decane session.
    * Resolves to the SAME identity as the redirect flow, so one Google account
@@ -2167,8 +2206,14 @@ var ApiClient = class {
     return body.transactions;
   }
   // ── WebAuthn registration (additive to the PRF-only passkey flow) ─────────
-  async getWebAuthnRegisterOptions(jwt, rpId, rpName) {
-    return this._request(`/webauthn/register-options?rpId=${encodeURIComponent(rpId)}&rpName=${encodeURIComponent(rpName)}`, {
+  /**
+   * `label` is what the user's password manager will show for this passkey.
+   * Without one they see the account's opaque id. Sent, used, and forgotten —
+   * the backend echoes it into the options and stores nothing.
+   */
+  async getWebAuthnRegisterOptions(jwt, rpId, rpName, label) {
+    const query = `rpId=${encodeURIComponent(rpId)}&rpName=${encodeURIComponent(rpName)}` + (label ? `&label=${encodeURIComponent(label)}` : "");
+    return this._request(`/webauthn/register-options?${query}`, {
       headers: { Authorization: `Bearer ${jwt}` }
     });
   }
@@ -3052,7 +3097,12 @@ function bufFromBytes(u) {
   return u.buffer.slice(u.byteOffset, u.byteOffset + u.byteLength);
 }
 async function registerWebAuthnCredential(opts) {
-  const baseOptions = await opts.api.getWebAuthnRegisterOptions(opts.jwt, opts.rpId, opts.rpName);
+  const baseOptions = await opts.api.getWebAuthnRegisterOptions(
+    opts.jwt,
+    opts.rpId,
+    opts.rpName,
+    opts.label
+  );
   if (opts.allowDuplicate) delete baseOptions.excludeCredentials;
   const optionsJSON = {
     ...baseOptions,
@@ -3858,12 +3908,14 @@ async function createDecaneConnect(config) {
     let credentialId;
     let prfOutput;
     try {
+      const label = (await storage.getShare(userId))?.profile?.email;
       ({ credentialId, prfOutput } = await registerWebAuthnCredential({
         api,
         jwt,
         rpId,
         rpName,
         prfSalt,
+        ...label ? { label } : {},
         ...opts.allowDuplicate ? { allowDuplicate: true } : {}
       }));
     } catch (e) {
@@ -4365,6 +4417,21 @@ async function createDecaneConnect(config) {
       ...stored.profile ? { profile: stored.profile } : {}
     };
   }
+  async function connectViaRedirect(label, getInitUrl) {
+    const outcome = readRedirectOutcome(window.location.search);
+    if (outcome.kind === "error") {
+      window.history.replaceState({}, "", window.location.pathname);
+      throw new CallSequenceError(`${label} sign-in failed: ${outcome.error}`);
+    }
+    if (outcome.kind === "result") {
+      window.history.replaceState({}, "", window.location.pathname);
+      return handleAuthResult(outcome.result);
+    }
+    const { url } = await getInitUrl();
+    window.location.href = url;
+    return new Promise(() => {
+    });
+  }
   async function handleAuthResult(result) {
     let addresses;
     if (!result.hasShare) {
@@ -4411,39 +4478,33 @@ async function createDecaneConnect(config) {
       throw new CallSequenceError(`Unknown auth method: ${method}`);
     },
     async connectWithGoogle() {
-      const params = new URLSearchParams(window.location.search);
-      const decaneJwt = params.get("decane_jwt");
-      const decaneError = params.get("decane_error");
-      if (decaneError) {
-        window.history.replaceState({}, "", window.location.pathname);
-        throw new CallSequenceError(`Google sign-in failed: ${decaneError}`);
-      }
-      if (decaneJwt) {
-        const name = params.get("decane_name");
-        const email = params.get("decane_email");
-        const picture = params.get("decane_picture");
-        const profile = {
-          ...name ? { name } : {},
-          ...email ? { email } : {},
-          ...picture ? { picture } : {}
-        };
-        const result = {
-          jwt: decaneJwt,
-          userId: params.get("decane_user_id") ?? "",
-          isNewUser: params.get("decane_is_new_user") === "true",
-          hasShare: params.get("decane_has_share") === "true",
-          // Omitted entirely when Google released nothing, so callers can test
-          // `result.profile` rather than an object that is always present but
-          // sometimes empty.
-          ...Object.keys(profile).length ? { profile } : {}
-        };
-        window.history.replaceState({}, "", window.location.pathname);
-        return handleAuthResult(result);
+      return connectViaRedirect("Google", () => api.getGoogleInitUrl());
+    },
+    /**
+     * Finish a redirect sign-in that is already sitting in the URL, whichever
+     * provider started it.
+     *
+     * Google and X bounce back with the same decane_* params, so the page that
+     * receives them cannot tell which one ran — and should not have to. Calling
+     * connectWithGoogle() here would work by accident and then report an X
+     * failure as "Google sign-in failed".
+     *
+     * Throws if there is nothing to finish: unlike the connectWith* methods,
+     * this never starts a flow.
+     */
+    async completeRedirectSignIn() {
+      const outcome = readRedirectOutcome(window.location.search);
+      if (outcome.kind === "none") {
+        throw new CallSequenceError("No sign-in result in the URL to complete");
       }
-      const { url } = await api.getGoogleInitUrl();
-      window.location.href = url;
-      return new Promise(() => {
-      });
+      window.history.replaceState({}, "", window.location.pathname);
+      if (outcome.kind === "error") {
+        throw new CallSequenceError(`Sign-in failed: ${outcome.error}`);
+      }
+      return handleAuthResult(outcome.result);
+    },
+    async connectWithX() {
+      return connectViaRedirect("X", () => api.getXInitUrl());
     },
     async connectWithGoogleToken(idToken) {
       if (!idToken) throw new CallSequenceError("connectWithGoogleToken requires an ID token");
@@ -5267,6 +5328,20 @@ function ChainIconStack({ support, size = 16 }) {
     /* @__PURE__ */ import_react.default.createElement(ChainCircleIcon, { chain, size })
   )));
 }
+function XLogo({ size = 14 }) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
+  );
+}
 
 // src/ui/WalletSelector.tsx
 var FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
@@ -5408,6 +5483,7 @@ function WalletSelector({
   socialAuthMethods = ["google", "email"],
   onGoogleSignIn,
   onKingsChatSignIn,
+  onXSignIn,
   onEmailStart,
   onEmailVerify,
   onPhoneStart,
@@ -5502,6 +5578,17 @@ function WalletSelector({
       setSocialLoad(false);
     }
   }
+  async function handleXClick() {
+    if (!onXSignIn) return;
+    setSocialLoad(true);
+    setSocialErr("");
+    try {
+      await onXSignIn();
+    } catch (e) {
+      setSocialErr(e.message);
+      setSocialLoad(false);
+    }
+  }
   async function handleCustomAuthClick() {
     if (!onCustomAuthSignIn) return;
     setSocialLoad(true);
@@ -5983,6 +6070,38 @@ function WalletSelector({
           },
           /* @__PURE__ */ import_react2.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "9", cy: "9", r: "9", fill: "var(--dc-accent)" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M5.5 4.5h1.9v3.6l3.1-3.6h2.3l-3.3 3.8 3.5 5.2h-2.3l-2.5-3.8-.8.9v2.9H5.5V4.5z", fill: "var(--dc-accent-text)" })),
           socialLoad ? "Waiting for KingsChat\u2026" : "Continue with KingsChat"
+        ), !passkeyFirst && socialAuthMethods.includes("x") && onXSignIn && /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            onClick: handleXClick,
+            disabled: socialLoad,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 10,
+              width: "100%",
+              padding: "11px 16px",
+              background: "var(--dc-surface)",
+              border: "1px solid var(--dc-border)",
+              borderRadius: 10,
+              cursor: socialLoad ? "not-allowed" : "pointer",
+              fontSize: 14,
+              fontWeight: 600,
+              color: "var(--dc-text)",
+              fontFamily: "inherit",
+              transition: "border-color 0.12s, background 0.12s",
+              opacity: socialLoad ? 0.6 : 1
+            },
+            onMouseEnter: (e) => {
+              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.borderColor = "var(--dc-border)";
+            }
+          },
+          /* @__PURE__ */ import_react2.default.createElement(XLogo, { size: 16 }),
+          socialLoad ? "Redirecting\u2026" : "Continue with X"
         ), !passkeyFirst && 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 continue with email"), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), !passkeyFirst && socialAuthMethods.includes("email") && (emailStep === "input" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ import_react2.default.createElement(
           "input",
           {
@@ -6350,6 +6469,7 @@ function AddressRow({
 function SignInView({
   onGoogleSignIn,
   onKingsChatSignIn,
+  onXSignIn,
   onEmailStart,
   onEmailVerify,
   onPhoneStart,
@@ -6364,6 +6484,7 @@ function SignInView({
 }) {
   const [googleLoading, setGoogleLoading] = (0, import_react3.useState)(false);
   const [kingsChatLoading, setKingsChatLoading] = (0, import_react3.useState)(false);
+  const [xLoading, setXLoading] = (0, import_react3.useState)(false);
   const [email, setEmail] = (0, import_react3.useState)("");
   const [code, setCode] = (0, import_react3.useState)("");
   const [emailSent, setEmailSent] = (0, import_react3.useState)(false);
@@ -6414,6 +6535,17 @@ function SignInView({
       setKingsChatLoading(false);
     }
   }
+  async function handleX() {
+    if (!onXSignIn) return;
+    setError("");
+    setXLoading(true);
+    try {
+      await onXSignIn();
+    } catch (e) {
+      setError(e.message);
+      setXLoading(false);
+    }
+  }
   async function handleEmailStart(e) {
     e.preventDefault();
     setError("");
@@ -6572,6 +6704,32 @@ function SignInView({
       }
     },
     kingsChatLoading ? "Waiting for KingsChat\u2026" : "Continue with KingsChat"
+  ), !passkeyFirst && authMethods.includes("x") && onXSignIn && /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: handleX,
+      disabled: xLoading,
+      style: {
+        width: "100%",
+        padding: "10px 0",
+        marginBottom: 10,
+        background: "var(--dc-surface)",
+        color: "var(--dc-text)",
+        border: "1px solid var(--dc-border)",
+        borderRadius: 10,
+        fontSize: 13,
+        fontWeight: 700,
+        cursor: xLoading ? "not-allowed" : "pointer",
+        opacity: xLoading ? 0.7 : 1,
+        fontFamily: "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(XLogo, null),
+    xLoading ? "Redirecting\u2026" : "Continue with X"
   ), !passkeyFirst && authMethods.includes("email") && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
@@ -7227,7 +7385,7 @@ function DecaneKit({ config, children }) {
       });
       const params = new URLSearchParams(window.location.search);
       if (params.has("decane_jwt") || params.has("decane_error")) {
-        sdk.connectWithGoogle().then(applyResult).catch((e) => {
+        sdk.completeRedirectSignIn().then(applyResult).catch((e) => {
           setSocialAuth((p) => p.phase ? { ...p, phase: null } : p);
           console.error(e);
         });
@@ -7268,6 +7426,11 @@ function DecaneKit({ config, children }) {
     if (!sdk) throw new Error("Social sign-in not configured");
     await sdk.connectWithGoogle();
   }, []);
+  const connectWithX = (0, import_react5.useCallback)(async () => {
+    const sdk = socialRef.current;
+    if (!sdk) throw new Error("Social sign-in not configured");
+    await sdk.connectWithX();
+  }, []);
   const connectWithKingsChat = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
@@ -7488,6 +7651,7 @@ function DecaneKit({ config, children }) {
         signInWithPasskey,
         connectWithGoogle,
         connectWithKingsChat,
+        connectWithX,
         connectWithEmail,
         verifyEmailCode: verifyEmailCode2,
         connectWithPhone,
@@ -7539,6 +7703,7 @@ function DecaneKit({ config, children }) {
         socialAuthMethods: config?.social?.authMethods ?? ["google", "email"],
         onGoogleSignIn: connectWithGoogle,
         onKingsChatSignIn: connectWithKingsChat,
+        onXSignIn: connectWithX,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         onPhoneStart: connectWithPhone,
@@ -7563,6 +7728,7 @@ function DecaneKit({ config, children }) {
         onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0,
         onGoogleSignIn: connectWithGoogle,
         onKingsChatSignIn: connectWithKingsChat,
+        onXSignIn: connectWithX,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         onPhoneStart: connectWithPhone,
@@ -7597,6 +7763,7 @@ function useSocialAuth() {
     socialAuth,
     connectWithGoogle,
     connectWithKingsChat,
+    connectWithX,
     connectWithEmail,
     verifyEmailCode: verifyEmailCode2,
     connectWithPhone,
@@ -7610,6 +7777,7 @@ function useSocialAuth() {
   } = useDecaneContext();
   const [googleLoading, setGoogleLoading] = (0, import_react6.useState)(false);
   const [kingschatLoading, setKingschatLoading] = (0, import_react6.useState)(false);
+  const [xLoading, setXLoading] = (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);
@@ -7625,6 +7793,16 @@ function useSocialAuth() {
       setGoogleLoading(false);
     }
   }, [connectWithGoogle]);
+  const signInWithX = (0, import_react6.useCallback)(async () => {
+    setXLoading(true);
+    setError(null);
+    try {
+      await connectWithX();
+    } catch (e) {
+      setError(e.message);
+      setXLoading(false);
+    }
+  }, [connectWithX]);
   const signInWithKingsChat = (0, import_react6.useCallback)(async () => {
     setKingschatLoading(true);
     setError(null);
@@ -7762,6 +7940,7 @@ function useSocialAuth() {
     needsReconnect: socialAuth.needsReconnect,
     googleLoading,
     kingschatLoading,
+    xLoading,
     emailLoading,
     phoneLoading,
     tokenLoading,
@@ -7771,6 +7950,7 @@ function useSocialAuth() {
     clearError: () => setError(null),
     signInWithGoogle,
     signInWithKingsChat,
+    signInWithX,
     sendEmailCode,
     confirmEmailCode,
     sendPhoneCode,