Adding onCancel and onClose callbacks

packages/sdk/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Changelog
 
+## [1.6.4] - 2025-05-30
+
+### Added
+
+- Added `onClose` callback to `connectAccount` method that fires whenever the Connect iFrame is closed (success or cancel)
+- Added `onCancel` callback to `connectAccount` method that fires when the Connect iFrame is closed without successfully connecting
+
 ## [1.6.3] - 2025-05-20b
 
 ### Added
@@ -61,8 +68,8 @@
 
 ### Added
 
-- PD_SDK_DEBUG env var.  Set it to true to enable debugging of Pipedream Connect
-  API requests.  Simple sanitization is performed to prevent sensitive field leakage
+- PD_SDK_DEBUG env var. Set it to true to enable debugging of Pipedream Connect
+  API requests. Simple sanitization is performed to prevent sensitive field leakage
   but use caution.
 
 ## [1.5.1] - 2025-04-15

packages/sdk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pipedream/sdk",
   "type": "module",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Pipedream SDK",
   "main": "./dist/server.js",
   "module": "./dist/server.js",

packages/sdk/src/browser/index.ts

@@ -109,6 +109,17 @@
    * @param err - The error that occurred during the connection.
    */
   onError?: (err: ConnectError) => void;
+
+  /**
+   * Callback function to be called when the Connect iFrame is closed.
+   */
+  onClose?: () => void;
+
+  /**
+   * Callback function to be called when the user cancels/closes the Connect
+   * iFrame without successfully connecting an account.
+   */
+  onCancel?: () => void;
 };
 
 /**
@@ -223,13 +234,22 @@
    *   onError: (err) => {
    *     console.error("Connection error:", err);
    *   },
+   *   onClose: () => {
+   *     console.log("Connect iFrame closed");
+   *   },
+   *   onCancel: () => {
+   *     console.log("User cancelled without connecting");
+   *   },
    * });
    * ```
    */
   public async connectAccount(opts: StartConnectOpts) {
+    let connectionSuccessful = false;
+
     const onMessage = (e: MessageEvent) => {
       switch (e.data?.type) {
       case "success":
+        connectionSuccessful = true;
         opts.onSuccess?.({
           id: e.data?.authProvisionId,
         });
@@ -239,6 +259,11 @@
         break;
       case "close":
         this.cleanup(onMessage);
+        opts.onClose?.();
+        // Call onCancel if the connection wasn't successful
+        if (!connectionSuccessful) {
+          opts.onCancel?.();
+        }
         break;
       default:
         break;