@benji-money/connect-sdk 1.1.4-beta.1 → 1.1.4-beta.3

package/README.md

@@ -88,7 +88,7 @@ The SDK accepts the following configuration options:
 - `token` (required): Your API connect token
 - `mode` (optional): `BenjiConnectMode` — `CONNECT` (default), `TRANSFER`, `REDEEM`, or `LOGIN`
 - `authType` (optional): `PartnerIntegrationType` — LOGIN only; omit or set `DUMMY` for the visible modal iframe; set to your partner type (1–6) for popup-only auth. Prefer `tokenData.authType` when using `tokenData`.
-- `tokenData` (optional): `BenjiConnectTokenData` — LOGIN only; pass `partnerAuthLink` (Auth Service `connect_url`) and `authType` so the SDK opens the partner auth URL synchronously in the popup on `open()` instead of `about:blank` + loading HTML
+- `tokenData` (optional): `BenjiConnectTokenData` — LOGIN only; pass `partnerAuthLink` (Auth Service `connect_url`), `configToken` (mint `config_token`, used as OAuth `state` on the popup URL), and `authType` so the SDK opens the partner auth URL synchronously on `open()`
 - `onSuccess` (optional): Callback function called when connect completed successfully
 - `onError` (optional): Callback function called when error occurs in the connect flow
 - `onExit` (optional): Callback function called when the user exits the connect flow
@@ -164,6 +164,7 @@ const sdk = new ConnectSDK({
   tokenData: {
     authType: PartnerIntegrationType.OAUTH_PKCE,
     partnerAuthLink: connectUrl, // from Auth Service connect_url
+    configToken: configToken, // from GET /connect/token — OAuth state
   },
   anchor: "#login-btn",
   placement: BenjiConnectPlacement.BOTTOM_END,
@@ -176,7 +177,7 @@ const sdk = new ConnectSDK({
 await sdk.open();
 ```
 
-> **`bottom-end`** positions the **partner popup** below the anchor with its right edge aligned to the anchor's right edge. The Benji Connect iframe stays headless (not visible). When `tokenData.partnerAuthLink` is set, the popup navigates to partner auth immediately on `open()`. Otherwise the pre-opened popup shows generic loading UI (`Loading sign-in…`) until Benji Connect sends the partner auth URL.
+> **`bottom-end`** positions the **partner popup** below the anchor with its right edge aligned to the anchor's right edge. The Benji Connect iframe stays headless (not visible). When `tokenData.partnerAuthLink` is set, the popup opens that URL on `open()` (with `state` from `configToken` when provided) after LOGIN listeners and popup context are registered. The SDK skips `PARTNER_LOGIN_OPEN` navigation when the popup already has a partner URL. Popup→iframe auth messages are queued until the Connect iframe `load` event. Otherwise the pre-opened popup shows generic loading UI (`Loading sign-in…`) until Benji Connect sends the partner auth URL.
 
 ### Environments
 

package/dist/connect-sdk.umd.global.js

@@ -110,7 +110,7 @@ var ConnectSDK = (() => {
   // src/utils/config.ts
   var buildContext = () => ({
     namespace: "benji-connect-sdk" ? "benji-connect-sdk" : "benji-connect-sdk",
-    version: "1.1.4-beta.1" ? String("1.1.4-beta.1") : "0.0.0"
+    version: "1.1.4-beta.3" ? String("1.1.4-beta.3") : "0.0.0"
   });
   function isBenjiConnectEnvironment(environment) {
     return environment === "local" /* LOCAL */ || environment === "development" /* DEVELOPMENT */ || environment === "sandbox" /* SANDBOX */ || environment === "production" /* PRODUCTION */;
@@ -217,10 +217,34 @@ var ConnectSDK = (() => {
   }
 
   // src/utils/partnerAuthLink.ts
+  var LOGIN_POPUP_QUERY_FLAG = "benji_login_popup";
+  function ensureAuthLinkStateNonce(url, nonce) {
+    try {
+      const parsed = new URL(url);
+      if (!parsed.searchParams.get("state")) {
+        parsed.searchParams.set("state", nonce);
+      }
+      return parsed.toString();
+    } catch {
+      if (url.includes("state=")) {
+        return url;
+      }
+      const separator = url.includes("?") ? "&" : "?";
+      return `${url}${separator}state=${encodeURIComponent(nonce)}`;
+    }
+  }
   function appendLoginPopupFlag(url) {
-    const parsed = new URL(url);
-    parsed.searchParams.set("benji_login_popup", "1");
-    return parsed.toString();
+    try {
+      const parsed = new URL(url);
+      parsed.searchParams.set(LOGIN_POPUP_QUERY_FLAG, "1");
+      return parsed.toString();
+    } catch {
+      const separator = url.includes("?") ? "&" : "?";
+      return `${url}${separator}${LOGIN_POPUP_QUERY_FLAG}=1`;
+    }
+  }
+  function preparePartnerAuthUrl(url, nonce) {
+    return ensureAuthLinkStateNonce(url, nonce);
   }
 
   // src/utils/placement.ts
@@ -833,6 +857,12 @@ var ConnectSDK = (() => {
       this.loginPopup = context.loginPopup;
       this.mode = context.mode;
       this.connectOrigin = new URL(Endpoints.benji_connect_auth_url).origin;
+      if (this.isIframeReady) {
+        this.flushPendingPopupAuth();
+      }
+    }
+    static resetIframeReady() {
+      this.isIframeReady = false;
     }
     static setMode(mode) {
       this.mode = mode;
@@ -853,6 +883,8 @@ var ConnectSDK = (() => {
       this.loginPopup = null;
       this.mode = 1 /* CONNECT */;
       this.connectOrigin = "";
+      this.isIframeReady = false;
+      this.pendingPopupAuth = [];
     }
     static handleErrorMessage(event) {
       switch (event.type) {
@@ -875,12 +907,25 @@ var ConnectSDK = (() => {
     static relayToIframe(event) {
       var _a;
       const iframeWindow = (_a = this.iframe) == null ? void 0 : _a.contentWindow;
-      if (!iframeWindow) {
-        console.warn("[Benji Connect SDK] Skipping login auth relay, iframe not ready");
+      if (!this.isIframeReady || !iframeWindow) {
+        this.pendingPopupAuth.push(event);
         return;
       }
       iframeWindow.postMessage(event.data, this.connectOrigin);
     }
+    static markIframeReady(iframe) {
+      if (this.iframe !== iframe) return;
+      this.isIframeReady = true;
+      this.flushPendingPopupAuth();
+    }
+    static flushPendingPopupAuth() {
+      if (!this.isIframeReady || !this.pendingPopupAuth.length) return;
+      const queued = this.pendingPopupAuth;
+      this.pendingPopupAuth = [];
+      for (const event of queued) {
+        this.relayToIframe(event);
+      }
+    }
     static relayToPopup(payload) {
       if (!this.loginPopup) {
         console.warn("[Benji Connect SDK] Skipping login auth relay, no login popup");
@@ -894,13 +939,17 @@ var ConnectSDK = (() => {
     }
     static handleMessage(event) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-      if (shouldRelayMessage(this.mode, event.data) && this.loginPopup) {
+      if (shouldRelayMessage(this.mode, event.data)) {
         const expectedOrigin2 = this.connectOrigin || new URL(Endpoints.benji_connect_auth_url).origin;
         const iframeWindow = (_a = this.iframe) == null ? void 0 : _a.contentWindow;
-        if (event.source === this.loginPopup) {
+        if (this.loginPopup && event.source === this.loginPopup) {
           this.relayToIframe(event);
           return;
         }
+        if (!this.loginPopup && event.source instanceof Window && event.source !== iframeWindow) {
+          this.pendingPopupAuth.push(event);
+          return;
+        }
         if (iframeWindow && event.source === iframeWindow) {
           if (event.origin !== expectedOrigin2) {
             console.warn(
@@ -987,6 +1036,8 @@ var ConnectSDK = (() => {
   _MessageRouter.loginPopup = null;
   _MessageRouter.mode = 1 /* CONNECT */;
   _MessageRouter.connectOrigin = "";
+  _MessageRouter.isIframeReady = false;
+  _MessageRouter.pendingPopupAuth = [];
   _MessageRouter.errorEventHandler = (event) => {
     return _MessageRouter.handleErrorMessage(event);
   };
@@ -1021,11 +1072,15 @@ var ConnectSDK = (() => {
       this.isClosing = false;
       /**
        * Aborts a pending open() when close() runs before the iframe mounts.
-       * Non-DUMMY LOGIN opens the partner popup synchronously, then awaits initialize()
-       * before mounting a headless iframe. Without this, close() can tear down the popup
-       * while the in-flight open() still registers listeners and mounts the iframe.
+       * Non-DUMMY LOGIN arms listeners, then opens the partner popup synchronously,
+       * then mounts a headless iframe. Without this, close() can tear down the popup
+       * while the in-flight open() still mounts the iframe.
        */
       this.openAbortController = null;
+      this.onIframeLoad = () => {
+        if (this.isClosing || !this.iframe) return;
+        MessageRouter.markIframeReady(this.iframe);
+      };
       this.sdkConfig = config;
       if (!this.sdkConfig.environment) throw new Error("Environment is required");
       if (!this.sdkConfig.token) throw new Error("Connect token is required");
@@ -1052,7 +1107,7 @@ var ConnectSDK = (() => {
       (_a = this.openAbortController) == null ? void 0 : _a.abort();
       this.openAbortController = null;
     }
-    async initialize() {
+    initialize() {
       MessageRouter.configureMessageRouter({
         onSuccess: this.sdkConfig.onSuccess,
         onError: this.sdkConfig.onError,
@@ -1064,14 +1119,16 @@ var ConnectSDK = (() => {
       });
     }
     openLoginPopup() {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const position = computePopupScreenPosition(
         this.sdkConfig,
         this.popupLayoutState,
         { warnOnInvalidAnchor: true }
       );
       const partnerAuthLink = (_a = this.sdkConfig.tokenData) == null ? void 0 : _a.partnerAuthLink;
-      const popupUrl = partnerAuthLink ? appendLoginPopupFlag(partnerAuthLink) : "about:blank";
+      const configToken = (_b = this.sdkConfig.tokenData) == null ? void 0 : _b.configToken;
+      const preparedLink = partnerAuthLink && configToken ? preparePartnerAuthUrl(partnerAuthLink, configToken) : partnerAuthLink;
+      const popupUrl = preparedLink ? appendLoginPopupFlag(preparedLink) : "about:blank";
       this.loginPopup = window.open(
         popupUrl,
         "benji_partner_auth",
@@ -1079,15 +1136,15 @@ var ConnectSDK = (() => {
       );
       if (!this.loginPopup) {
         console.warn("[Connect SDK] Failed to pre-open LOGIN partner auth popup");
-        (_c = (_b = this.sdkConfig).onError) == null ? void 0 : _c.call(
-          _b,
+        (_d = (_c = this.sdkConfig).onError) == null ? void 0 : _d.call(
+          _c,
           new Error("Popup blocked. Allow popups for this site and try again."),
           "400",
           { context: buildContext() }
         );
         return false;
       }
-      if (partnerAuthLink) {
+      if (preparedLink) {
         this.hasLoginPopupUrl = true;
       } else {
         writeLoginPopupLoadingDocument(this.loginPopup);
@@ -1138,17 +1195,19 @@ var ConnectSDK = (() => {
       const abortController = new AbortController();
       this.openAbortController = abortController;
       const { signal } = abortController;
+      this.initialize();
+      if (signal.aborted) return;
+      MessageRouter.setMode(mode);
+      MessageRouter.addEventListeners();
       if (this.isLoginPopupOnly()) {
         const opened = this.openLoginPopup();
         if (!opened) {
           this.abortInflightOpen();
+          MessageRouter.removeEventListeners();
           return;
         }
+        this.syncLoginContext(mode);
       }
-      await this.initialize();
-      if (signal.aborted) return;
-      MessageRouter.setMode(mode);
-      MessageRouter.addEventListeners();
       if (signal.aborted) {
         MessageRouter.removeEventListeners();
         return;
@@ -1164,8 +1223,9 @@ var ConnectSDK = (() => {
       });
     }
     openUI() {
-      var _a;
+      var _a, _b;
       if (this.iframe) return;
+      MessageRouter.resetIframeReady();
       const headless = this.isLoginPopupOnly();
       this.container = document.createElement("div");
       if (headless) {
@@ -1183,6 +1243,8 @@ var ConnectSDK = (() => {
         url.searchParams.set("mode", String(this.sdkConfig.mode));
       }
       this.iframe = document.createElement("iframe");
+      this.syncLoginContext((_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */);
+      this.iframe.addEventListener("load", this.onIframeLoad);
       this.iframe.src = url.toString();
       this.container.appendChild(this.iframe);
       document.body.appendChild(this.container);
@@ -1213,9 +1275,9 @@ var ConnectSDK = (() => {
           }
         );
         this.container.addEventListener("click", (e) => {
-          var _a2, _b;
+          var _a2, _b2;
           if (e.target === this.container) {
-            (_b = (_a2 = this.sdkConfig).onExit) == null ? void 0 : _b.call(_a2, {
+            (_b2 = (_a2 = this.sdkConfig).onExit) == null ? void 0 : _b2.call(_a2, {
               context: buildContext(),
               trigger: "TAPPED_OUT_OF_BOUNDS" /* TAPPED_OUT_OF_BOUNDS */
             });
@@ -1223,7 +1285,7 @@ var ConnectSDK = (() => {
           }
         });
       }
-      this.syncLoginContext((_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */);
+      this.syncLoginContext((_b = this.sdkConfig.mode) != null ? _b : 1 /* CONNECT */);
     }
     navigateLoginPopup(url) {
       if (this.hasLoginPopupUrl) return;
@@ -1266,6 +1328,7 @@ var ConnectSDK = (() => {
       this.repositionListeners = null;
       this.layoutState.lastValidAnchoredLayout = null;
       this.popupLayoutState.lastValidAnchoredLayout = null;
+      this.iframe.removeEventListener("load", this.onIframeLoad);
       if ((_b = this.container) == null ? void 0 : _b.parentNode) {
         this.container.parentNode.removeChild(this.container);
       }