@benji-money/connect-sdk 1.1.3 → 1.1.4-beta.2

package/README.md

@@ -87,7 +87,8 @@ The SDK accepts the following configuration options:
 - `environment` (required): One of `local`, `development`, `sandbox`, or `production`
 - `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
+- `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`), `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
@@ -102,7 +103,7 @@ The SDK accepts the following configuration options:
 | ---- | ---------- | ----- |
 | **CONNECT** (default) | Centered or anchored modal iframe | No `authType`; standard connect / verify flow |
 | **LOGIN + DUMMY / no `authType`** | Same visible modal iframe | Partner auth runs in a nested iframe inside Benji Connect |
-| **LOGIN + non-DUMMY** | Partner popup only | Pass `authType`; Benji Connect iframe is headless — popup shows a loading spinner until partner auth navigates — see [LOGIN popup example](#login-popup-example) below |
+| **LOGIN + non-DUMMY** | Partner popup only | Pass `authType` (or `tokenData.authType`); Benji Connect iframe is headless — popup opens partner auth immediately when `tokenData.partnerAuthLink` is set, otherwise shows loading UI until Benji Connect navigates — see [LOGIN popup example](#login-popup-example) below |
 
 ### Placement
 
@@ -160,7 +161,11 @@ const sdk = new ConnectSDK({
   environment: "sandbox",
   token: connectToken,
   mode: BenjiConnectMode.LOGIN,
-  authType: PartnerIntegrationType.OAUTH_PKCE,
+  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,
   offset: { top: 8 },
@@ -172,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). 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). 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.3" ? String("1.1.3") : "0.0.0"
+    version: "1.1.4-beta.2" ? String("1.1.4-beta.2") : "0.0.0"
   });
   function isBenjiConnectEnvironment(environment) {
     return environment === "local" /* LOCAL */ || environment === "development" /* DEVELOPMENT */ || environment === "sandbox" /* SANDBOX */ || environment === "production" /* PRODUCTION */;
@@ -216,6 +216,37 @@ 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) {
+    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
   var IFRAME_WIDTH = 400;
   var IFRAME_HEIGHT = 645;
@@ -826,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;
@@ -846,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) {
@@ -868,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");
@@ -980,6 +1032,8 @@ var ConnectSDK = (() => {
   _MessageRouter.loginPopup = null;
   _MessageRouter.mode = 1 /* CONNECT */;
   _MessageRouter.connectOrigin = "";
+  _MessageRouter.isIframeReady = false;
+  _MessageRouter.pendingPopupAuth = [];
   _MessageRouter.errorEventHandler = (event) => {
     return _MessageRouter.handleErrorMessage(event);
   };
@@ -1009,6 +1063,7 @@ var ConnectSDK = (() => {
       };
       this.repositionListeners = null;
       this.loginPopup = null;
+      this.hasLoginPopupUrl = false;
       this.popupClosedPollId = null;
       this.isClosing = false;
       /**
@@ -1018,6 +1073,10 @@ var ConnectSDK = (() => {
        * while the in-flight open() still registers listeners and 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");
@@ -1025,10 +1084,15 @@ var ConnectSDK = (() => {
       this.sdkConfig.environment = environment;
       configureConfig(environment);
     }
+    resolveAuthType() {
+      var _a, _b;
+      return (_b = (_a = this.sdkConfig.tokenData) == null ? void 0 : _a.authType) != null ? _b : this.sdkConfig.authType;
+    }
     isLoginPopupOnly() {
       var _a;
       const mode = (_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */;
-      return mode === 5 /* LOGIN */ && this.sdkConfig.authType != null && this.sdkConfig.authType !== 0 /* DUMMY */;
+      const authType = this.resolveAuthType();
+      return mode === 5 /* LOGIN */ && authType != null && authType !== 0 /* DUMMY */;
     }
     isSessionActive() {
       return this.iframe != null || this.loginPopup != null;
@@ -1051,28 +1115,36 @@ var ConnectSDK = (() => {
       });
     }
     openLoginPopup() {
-      var _a, _b;
+      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 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(
-        "about:blank",
+        popupUrl,
         "benji_partner_auth",
         buildLoginPopupFeatures(position)
       );
       if (!this.loginPopup) {
         console.warn("[Connect SDK] Failed to pre-open LOGIN partner auth popup");
-        (_b = (_a = this.sdkConfig).onError) == null ? void 0 : _b.call(
-          _a,
+        (_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;
       }
-      writeLoginPopupLoadingDocument(this.loginPopup);
+      if (preparedLink) {
+        this.hasLoginPopupUrl = true;
+      } else {
+        writeLoginPopupLoadingDocument(this.loginPopup);
+      }
       this.startPopupClosedPoll();
       return true;
     }
@@ -1145,8 +1217,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) {
@@ -1164,6 +1237,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);
@@ -1194,9 +1269,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 */
             });
@@ -1204,15 +1279,17 @@ 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;
       if (!this.loginPopup || this.loginPopup.closed) {
         console.warn("[Connect SDK] Cannot navigate LOGIN popup \u2014 window unavailable");
         return;
       }
       try {
         this.loginPopup.location.href = url;
+        this.hasLoginPopupUrl = true;
       } catch (error) {
         console.warn("[Connect SDK] Failed to navigate LOGIN popup", error);
       }
@@ -1227,6 +1304,7 @@ var ConnectSDK = (() => {
         console.warn("[Connect SDK] Error closing LOGIN popup", error);
       } finally {
         this.loginPopup = null;
+        this.hasLoginPopupUrl = false;
       }
     }
     close() {
@@ -1244,6 +1322,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);
       }