@wordkey/sdk 1.0.0 → 1.1.0

package/dist/index.js

@@ -30,12 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  WordKeyButton: () => WordKeyButton
+  WordKeyButton: () => WordKeyButton,
+  WordKeyModal: () => WordKeyModal
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/WordKeyButton.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/types.ts
 var FIELD_LABELS = {
@@ -46,6 +47,9 @@ var FIELD_LABELS = {
 };
 var DEFAULT_API_URL = "https://app.wordkey.app";
 
+// src/WordKeyModal.tsx
+var import_react = require("react");
+
 // src/fields.ts
 var STANDARD = {
   name: { key: "name", label: FIELD_LABELS.name, type: "text", isStandard: true },
@@ -110,6 +114,17 @@ var DeviceApprovalRequiredError = class extends Error {
     this.name = "DeviceApprovalRequiredError";
   }
 };
+function decodeToken(token) {
+  try {
+    const part = token.split(".")[1];
+    if (!part) return null;
+    const b64 = part.replace(/-/g, "+").replace(/_/g, "/");
+    const json = typeof atob === "function" ? atob(b64) : Buffer.from(b64, "base64").toString("utf8");
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
 async function verifyWord(apiUrl = DEFAULT_API_URL, publishableKey, word) {
   const wordHash = await hashWord(word);
   const res = await fetch(`${apiUrl}/api/auth/verify`, {
@@ -244,9 +259,11 @@ async function beginRedirectShare(input2) {
   const publicJwk = await crypto.subtle.exportKey("jwk", pair.publicKey);
   const privateKeyJwk = await crypto.subtle.exportKey("jwk", pair.privateKey);
   const pending = {
+    kind: "login",
     requestId: input2.requestId,
     userId: input2.userId,
     isNewUser: input2.isNewUser,
+    token: input2.token,
     fields: input2.fields,
     privateKeyJwk
   };
@@ -282,10 +299,12 @@ async function consumePendingRedirect() {
   }
   if (envelope.requestId !== pending.requestId) return null;
   sessionStorage.removeItem(PENDING_STORE);
-  if (envelope.granted !== true) {
-    return { pending, result: { granted: false, values: {} } };
+  if (!envelope.epk || !envelope.iv || !envelope.ct) {
+    if (envelope.granted !== true) {
+      return { pending, result: { granted: false, values: {} } };
+    }
+    return null;
   }
-  if (!envelope.epk || !envelope.iv || !envelope.ct) return null;
   try {
     const privateKey = await crypto.subtle.importKey(
       "jwk",
@@ -316,13 +335,135 @@ async function consumePendingRedirect() {
     const parsed = JSON.parse(new TextDecoder().decode(plain));
     return {
       pending,
-      result: { granted: true, values: parsed.values ?? {} }
+      result: {
+        granted: envelope.granted === true,
+        values: parsed.values ?? {}
+      },
+      signup: typeof parsed.signup?.token === "string" ? { token: parsed.signup.token } : void 0
     };
   } catch {
     return null;
   }
 }
 
+// src/signup-popup.ts
+var SIGNUP_TIMEOUT_MS = 20 * 60 * 1e3;
+function openSignupWindow(apiUrl, publishableKey) {
+  const w = 440;
+  const h = 700;
+  const left = Math.max(0, (window.screenX ?? 0) + (window.outerWidth - w) / 2);
+  const top = Math.max(0, (window.screenY ?? 0) + (window.outerHeight - h) / 3);
+  try {
+    return window.open(
+      `${apiUrl}/welcome?wk_sdk=1&business=${encodeURIComponent(publishableKey)}`,
+      "wordkey-signup",
+      `popup=yes,width=${w},height=${h},left=${left},top=${top}`
+    );
+  } catch {
+    return null;
+  }
+}
+function runSignupHandshake(input2) {
+  const { popup, apiOrigin, requestId, signal } = input2;
+  return new Promise((resolve) => {
+    let settled = false;
+    const cleanup = () => {
+      window.removeEventListener("message", onMsg);
+      clearInterval(closedPoll);
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+    };
+    const finish = (r) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve(r);
+    };
+    const onAbort = () => {
+      try {
+        popup.close();
+      } catch {
+      }
+      finish({ ok: false, cancelled: true });
+    };
+    const onMsg = (e) => {
+      if (e.origin !== apiOrigin || e.source !== popup) return;
+      const data = e.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "wordkey:signup:ready") {
+        popup.postMessage(
+          {
+            type: "wordkey:signup:init",
+            requestId,
+            publishableKey: input2.publishableKey,
+            sdkDeviceId: input2.sdkDeviceId,
+            fields: input2.fields
+          },
+          apiOrigin
+        );
+      }
+      if (data.type === "wordkey:signup:result" && data.requestId === requestId) {
+        finish({
+          ok: data.ok === true && typeof data.token === "string",
+          token: typeof data.token === "string" ? data.token : void 0,
+          profileTicket: typeof data.profileTicket === "string" ? data.profileTicket : void 0
+        });
+      }
+    };
+    window.addEventListener("message", onMsg);
+    const closedPoll = setInterval(() => {
+      if (popup.closed) finish({ ok: false, closed: true });
+    }, 400);
+    const timer = setTimeout(
+      () => finish({ ok: false, closed: true }),
+      SIGNUP_TIMEOUT_MS
+    );
+    if (signal) {
+      if (signal.aborted) onAbort();
+      else signal.addEventListener("abort", onAbort);
+    }
+  });
+}
+async function beginSignupRedirect(input2) {
+  const pair = await crypto.subtle.generateKey(
+    { name: "ECDH", namedCurve: "P-256" },
+    true,
+    ["deriveKey"]
+  );
+  const publicJwk = await crypto.subtle.exportKey("jwk", pair.publicKey);
+  const privateKeyJwk = await crypto.subtle.exportKey("jwk", pair.privateKey);
+  const pending = {
+    kind: "signup",
+    requestId: input2.requestId,
+    fields: input2.fields,
+    privateKeyJwk
+  };
+  sessionStorage.setItem(PENDING_STORE, JSON.stringify(pending));
+  const returnUrl = window.location.href.split("#")[0];
+  const request = {
+    v: 1,
+    requestId: input2.requestId,
+    publishableKey: input2.publishableKey,
+    origin: window.location.origin,
+    returnUrl,
+    sdkPub: publicJwk,
+    sdkDeviceId: input2.sdkDeviceId,
+    fields: input2.fields
+  };
+  const b64 = encodeSignupRequest(request);
+  window.location.assign(
+    `${input2.apiUrl}/welcome?wk_sdk=1&business=${encodeURIComponent(
+      input2.publishableKey
+    )}#wksignup=${b64}`
+  );
+}
+function encodeSignupRequest(value) {
+  const bytes = new TextEncoder().encode(JSON.stringify(value));
+  let bin = "";
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
 // src/fonts.ts
 var loaded = false;
 function ensureFont() {
@@ -419,19 +560,18 @@ var ghostBtn = {
   fontFamily: FONT_BODY
 };
 
-// src/WordKeyButton.tsx
+// src/WordKeyModal.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var sizePx = { sm: 20, md: 28, lg: 38 };
-function WordKeyButton({
+function WordKeyModal({
   publishableKey,
+  open,
+  onClose,
   onSuccess,
+  mode = "login",
   onError,
-  size = "md",
-  label = "Word?",
   requestedFields,
   apiUrl = DEFAULT_API_URL
 }) {
-  const [open, setOpen] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     ensureFont();
   }, []);
@@ -441,55 +581,151 @@ function WordKeyButton({
     resumed.current = true;
     void consumePendingRedirect().then((r) => {
       if (!r) return;
+      if (r.pending.kind === "signup") {
+        const token = r.signup?.token;
+        if (!token) {
+          onError?.({
+            code: "signup_incomplete",
+            message: "Signup did not complete. Please try again."
+          });
+          return;
+        }
+        const claims = decodeToken(token);
+        onSuccess({
+          id: claims?.userId ?? "",
+          isNewUser: claims?.isNewUser ?? true,
+          authenticatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          token,
+          profile: r.pending.fields.length ? buildProfile(r.pending.fields, r.result.granted ? r.result.values : {}) : void 0
+        });
+        return;
+      }
       const profile = buildProfile(
         r.pending.fields,
         r.result.granted ? r.result.values : {}
       );
       onSuccess({
-        id: r.pending.userId,
-        isNewUser: r.pending.isNewUser,
+        id: r.pending.userId ?? "",
+        isNewUser: r.pending.isNewUser ?? false,
         authenticatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        token: r.pending.token,
         profile
       });
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
-      {
-        onClick: () => setOpen(true),
-        style: {
-          background: "transparent",
-          border: "none",
-          padding: 0,
-          cursor: "pointer",
-          fontFamily: FONT_DISPLAY,
-          fontWeight: 600,
-          fontSize: sizePx[size],
-          lineHeight: 1
-        },
-        "aria-label": label,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: C.purple }, children: "Word" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: C.purpleL }, children: "?" })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      AuthModal,
-      {
-        publishableKey,
+  if (!open) return null;
+  const common = {
+    publishableKey,
+    apiUrl,
+    requestedFields,
+    onClose,
+    onSuccess: (u) => {
+      onClose();
+      onSuccess(u);
+    },
+    onError: (e) => onError?.(e)
+  };
+  return mode === "signup" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignupModal, { ...common }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthModal, { ...common });
+}
+function SignupModal({
+  publishableKey,
+  apiUrl,
+  requestedFields,
+  onClose,
+  onSuccess,
+  onError
+}) {
+  const fields = (0, import_react.useMemo)(
+    () => requestedFields ? resolveFields(requestedFields) : [],
+    [requestedFields]
+  );
+  const apiOrigin = (0, import_react.useMemo)(() => {
+    try {
+      return new URL(apiUrl).origin;
+    } catch {
+      return apiUrl;
+    }
+  }, [apiUrl]);
+  const [failed, setFailed] = (0, import_react.useState)(null);
+  const abortRef = (0, import_react.useRef)(null);
+  if (!abortRef.current) abortRef.current = new AbortController();
+  (0, import_react.useEffect)(() => () => abortRef.current?.abort(), []);
+  const started = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (started.current) return;
+    started.current = true;
+    const popup = openSignupWindow(apiUrl, publishableKey);
+    if (!popup) {
+      void beginSignupRedirect({
         apiUrl,
-        requestedFields,
-        onClose: () => setOpen(false),
-        onSuccess: (u) => {
-          setOpen(false);
-          onSuccess(u);
-        },
-        onError: (e) => onError?.(e)
+        requestId: newRequestId(),
+        publishableKey,
+        sdkDeviceId: getDeviceId(),
+        fields
+      });
+      return;
+    }
+    const requestId = newRequestId();
+    void (async () => {
+      const hs = await runSignupHandshake({
+        popup,
+        apiOrigin,
+        requestId,
+        publishableKey,
+        sdkDeviceId: getDeviceId(),
+        fields,
+        signal: abortRef.current?.signal
+      });
+      if (hs.cancelled) return;
+      if (hs.closed) {
+        onClose();
+        return;
       }
-    )
-  ] });
+      if (!hs.ok || !hs.token) {
+        setFailed("Signup could not be completed. Please try again.");
+        onError({
+          code: "signup_failed",
+          message: "Signup could not be completed"
+        });
+        return;
+      }
+      const claims = decodeToken(hs.token);
+      const finish = (profile) => onSuccess({
+        id: claims?.userId ?? "",
+        isNewUser: claims?.isNewUser ?? true,
+        authenticatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        token: hs.token,
+        profile
+      });
+      if (fields.length === 0) {
+        finish();
+        return;
+      }
+      const share = await runPopupFlow({
+        popup,
+        apiOrigin,
+        requestId,
+        publishableKey,
+        ticket: hs.profileTicket,
+        fields,
+        signal: abortRef.current?.signal
+      });
+      if (share.cancelled) return;
+      finish(buildProfile(fields, share.granted ? share.values : {}));
+    })();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: overlay, role: "dialog", "aria-modal": "true", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Header, {}),
+    failed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorText, { children: failed }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: ghostBtn, onClick: onClose, children: "Close" }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: "12px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { fontFamily: FONT_DISPLAY, fontSize: 22, margin: "4px 0" }, children: "Get your word in the WordKey window" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted, fontSize: 13 }, children: "Finish setting up in the window that just opened. Closing it cancels \u2014 nothing is created without you." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: ghostBtn, onClick: onClose, children: "Cancel" }) })
+    ] })
+  ] }) });
 }
 function AuthModal({
   publishableKey,
@@ -524,7 +760,12 @@ function AuthModal({
     setStep("authenticating");
     try {
       const result = await verifyWord(apiUrl, publishableKey, word);
-      await completeAuth(result.userId, result.isNewUser, result.profileTicket);
+      await completeAuth(
+        result.userId,
+        result.isNewUser,
+        result.token,
+        result.profileTicket
+      );
     } catch (e) {
       if (e instanceof DeviceApprovalRequiredError) {
         await startDeviceApproval();
@@ -536,11 +777,12 @@ function AuthModal({
       onError({ code: "auth_failed", message });
     }
   }
-  async function completeAuth(userId, isNewUser, profileTicket) {
+  async function completeAuth(userId, isNewUser, token, profileTicket) {
     const finish = (profile) => onSuccess({
       id: userId,
       isNewUser,
       authenticatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      token,
       profile
     });
     if (fields.length === 0) {
@@ -557,7 +799,8 @@ function AuthModal({
         ticket: profileTicket,
         fields,
         userId,
-        isNewUser
+        isNewUser,
+        token
       });
       return;
     }
@@ -629,11 +872,12 @@ function AuthModal({
         const userId = claims?.userId ?? "";
         const isNewUser = claims?.isNewUser ?? false;
         if (fields.length === 0) {
-          await completeAuth(userId, isNewUser, data.profileTicket);
+          await completeAuth(userId, isNewUser, data.token, data.profileTicket);
         } else {
           pendingApproval.current = {
             userId,
             isNewUser,
+            token: data.token,
             profileTicket: data.profileTicket
           };
           setStep("approved");
@@ -738,7 +982,8 @@ function AuthModal({
             style: primaryBtn(false),
             onClick: () => {
               const p = pendingApproval.current;
-              if (p) void completeAuth(p.userId, p.isNewUser, p.profileTicket);
+              if (p)
+                void completeAuth(p.userId, p.isNewUser, p.token, p.profileTicket);
             },
             children: "Continue"
           }
@@ -797,17 +1042,6 @@ function valuePresent(v) {
   if (typeof v === "string") return v.trim().length > 0;
   return Object.values(v).some((x) => x && String(x).trim().length > 0);
 }
-function decodeToken(token) {
-  try {
-    const part = token.split(".")[1];
-    if (!part) return null;
-    const b64 = part.replace(/-/g, "+").replace(/_/g, "/");
-    const json = typeof atob === "function" ? atob(b64) : Buffer.from(b64, "base64").toString("utf8");
-    return JSON.parse(json);
-  } catch {
-    return null;
-  }
-}
 function buildProfile(fields, granted) {
   const profile = {};
   const custom = {};
@@ -856,7 +1090,66 @@ function Spinner() {
     }
   );
 }
+
+// src/WordKeyButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var sizePx = { sm: 20, md: 28, lg: 38 };
+function WordKeyButton({
+  publishableKey,
+  onSuccess,
+  onError,
+  size = "md",
+  label,
+  mode = "login",
+  requestedFields,
+  apiUrl = DEFAULT_API_URL
+}) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    ensureFont();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        style: {
+          background: "transparent",
+          border: "none",
+          padding: 0,
+          cursor: "pointer",
+          fontFamily: FONT_DISPLAY,
+          fontWeight: 600,
+          fontSize: sizePx[size],
+          lineHeight: 1
+        },
+        "aria-label": label ?? (mode === "signup" ? "Get your word" : "Word?"),
+        children: mode === "signup" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: C.purple }, children: "Get your " }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: C.purpleL }, children: "word" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: C.purple }, children: "Word" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: C.purpleL }, children: "?" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      WordKeyModal,
+      {
+        publishableKey,
+        open,
+        mode,
+        onClose: () => setOpen(false),
+        onSuccess,
+        onError,
+        requestedFields,
+        apiUrl
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  WordKeyButton
+  WordKeyButton,
+  WordKeyModal
 });