decane-connect-kit 2.19.0 → 2.21.0

package/dist/index.cjs

@@ -2028,6 +2028,41 @@ 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 username = params.get("decane_username");
+  const providerSubject = params.get("decane_provider_subject");
+  const profile = {
+    ...name ? { name } : {},
+    ...email ? { email } : {},
+    ...picture ? { picture } : {},
+    ...username ? { username } : {}
+  };
+  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 } : {},
+      ...providerSubject ? { providerSubject } : {}
+    }
+  };
+}
+
 // src/social/api.ts
 init_errors();
 var ERROR_MAP = {
@@ -2079,6 +2114,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
@@ -4378,6 +4421,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) {
@@ -4396,7 +4454,8 @@ async function createDecaneConnect(config) {
     return {
       addresses,
       isNewUser: result.isNewUser,
-      ...result.profile ? { profile: result.profile } : {}
+      ...result.profile ? { profile: result.profile } : {},
+      ...result.providerSubject ? { providerSubject: result.providerSubject } : {}
     };
   }
   const client = {
@@ -4424,39 +4483,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");
@@ -5280,6 +5333,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";
@@ -5421,6 +5488,7 @@ function WalletSelector({
   socialAuthMethods = ["google", "email"],
   onGoogleSignIn,
   onKingsChatSignIn,
+  onXSignIn,
   onEmailStart,
   onEmailVerify,
   onPhoneStart,
@@ -5515,6 +5583,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);
@@ -5996,6 +6075,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",
           {
@@ -6363,6 +6474,7 @@ function AddressRow({
 function SignInView({
   onGoogleSignIn,
   onKingsChatSignIn,
+  onXSignIn,
   onEmailStart,
   onEmailVerify,
   onPhoneStart,
@@ -6377,6 +6489,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);
@@ -6427,6 +6540,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("");
@@ -6585,6 +6709,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",
     {
@@ -7118,6 +7268,7 @@ var DEFAULT_SOCIAL = {
   addresses: null,
   isNewUser: false,
   profile: null,
+  providerSubject: null,
   isUnlocked: false,
   sessionExpiresAt: null,
   needsReconnect: false,
@@ -7240,7 +7391,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);
         });
@@ -7253,6 +7404,7 @@ function DecaneKit({ config, children }) {
       addresses: result.addresses,
       isNewUser: result.isNewUser,
       profile: result.profile ?? null,
+      providerSubject: result.providerSubject ?? null,
       isUnlocked: sdk?.isUnlocked() ?? false,
       sessionExpiresAt: sdk?.sessionExpiresAt() ?? null,
       needsReconnect: false,
@@ -7281,6 +7433,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");
@@ -7501,6 +7658,7 @@ function DecaneKit({ config, children }) {
         signInWithPasskey,
         connectWithGoogle,
         connectWithKingsChat,
+        connectWithX,
         connectWithEmail,
         verifyEmailCode: verifyEmailCode2,
         connectWithPhone,
@@ -7552,6 +7710,7 @@ function DecaneKit({ config, children }) {
         socialAuthMethods: config?.social?.authMethods ?? ["google", "email"],
         onGoogleSignIn: connectWithGoogle,
         onKingsChatSignIn: connectWithKingsChat,
+        onXSignIn: connectWithX,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         onPhoneStart: connectWithPhone,
@@ -7576,6 +7735,7 @@ function DecaneKit({ config, children }) {
         onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0,
         onGoogleSignIn: connectWithGoogle,
         onKingsChatSignIn: connectWithKingsChat,
+        onXSignIn: connectWithX,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         onPhoneStart: connectWithPhone,
@@ -7610,6 +7770,7 @@ function useSocialAuth() {
     socialAuth,
     connectWithGoogle,
     connectWithKingsChat,
+    connectWithX,
     connectWithEmail,
     verifyEmailCode: verifyEmailCode2,
     connectWithPhone,
@@ -7623,6 +7784,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);
@@ -7638,6 +7800,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);
@@ -7765,6 +7937,9 @@ function useSocialAuth() {
     // user first signed in, so it carries the same name and email a Google
     // sign-in does rather than coming back anonymous.
     profile: socialAuth.profile,
+    // The provider's stable id, where it gives one. Null otherwise. Safe to
+    // match an account on, unlike the handle in `profile.username`.
+    providerSubject: socialAuth.providerSubject,
     // Long-running work in progress, for driving your own status UI.
     phase: socialAuth.phase,
     isCreatingWallet: socialAuth.phase === "creating",
@@ -7775,6 +7950,7 @@ function useSocialAuth() {
     needsReconnect: socialAuth.needsReconnect,
     googleLoading,
     kingschatLoading,
+    xLoading,
     emailLoading,
     phoneLoading,
     tokenLoading,
@@ -7784,6 +7960,7 @@ function useSocialAuth() {
     clearError: () => setError(null),
     signInWithGoogle,
     signInWithKingsChat,
+    signInWithX,
     sendEmailCode,
     confirmEmailCode,
     sendPhoneCode,