feat(sdk-package): call apis directly from client sdk

Author: TheBestMoshe

packages/sdk/package-lock.json

@@ -38,7 +38,7 @@
   "devDependencies": {
     "@types/fetch-mock": "^7.3.8",
     "@types/jest": "^29.5.13",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.17.6",
     "@types/simple-oauth2": "^5.0.7",
     "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",

packages/sdk/package.json

@@ -4,6 +4,10 @@
 // operations, like connecting accounts via Pipedream Connect. See the server/
 // directory for the server client.
 
+import {
+  BaseClient, ConnectTokenResponse,
+} from "../shared";
+
 /**
  * Options for creating a browser-side client. This is used to configure the
  * BrowserClient instance.
@@ -20,8 +24,31 @@ type CreateBrowserClientOpts = {
    * "pipedream.com" if not provided.
    */
   frontendHost?: string;
+
+  /**
+   * The API host URL. Used by Pipedream employees. Defaults to
+   * "api.pipedream.com" if not provided.
+   */
+  apiHost?: string;
+
+  /**
+   * Will be called whenever we need a new token.
+   *
+   * The callback function should return the response from
+   * `serverClient.createConnectToken`.
+   */
+  tokenCallback?: TokenCallback;
+
+  /**
+   * An external user ID associated with the token.
+   */
+  externalUserId?: string;
 };
 
+export type TokenCallback = (opts: {
+  externalUserId: string;
+}) => Promise<ConnectTokenResponse>;
+
 /**
  * The name slug for an app, a unique, human-readable identifier like "github"
  * or "google_sheets". Find this in the Authentication section for any app's
@@ -51,8 +78,10 @@ class ConnectError extends Error {}
 type StartConnectOpts = {
   /**
    * The token used for authenticating the connection.
+   *
+   * Optional if client already initialized with token
    */
-  token: string;
+  token?: string;
 
   /**
    * The app to connect to, either as an ID or an object containing the ID.
@@ -98,22 +127,48 @@ export function createFrontendClient(opts: CreateBrowserClientOpts = {}) {
 /**
  * A client for interacting with the Pipedream Connect API from the browser.
  */
-class BrowserClient {
-  private environment?: string;
+export class BrowserClient extends BaseClient {
   private baseURL: string;
   private iframeURL: string;
   private iframe?: HTMLIFrameElement;
   private iframeId = 0;
+  private tokenCallback?: TokenCallback;
+  private _token?: string;
+  externalUserId?: string;
 
   /**
    * Constructs a new `BrowserClient` instance.
    *
    * @param opts - The options for configuring the browser client.
    */
   constructor(opts: CreateBrowserClientOpts) {
-    this.environment = opts.environment;
+    super(opts);
     this.baseURL = `https://${opts.frontendHost || "pipedream.com"}`;
     this.iframeURL = `${this.baseURL}/_static/connect.html`;
+    this.tokenCallback = opts.tokenCallback;
+    this.externalUserId = opts.externalUserId;
+  }
+
+  private async token() {
+    // TODO: handle token expiration
+    if (this._token) {
+      return this._token;
+    }
+    if (this.tokenCallback) {
+      if (!this.externalUserId) {
+        throw new Error("No external user ID provided");
+      }
+      const token = await this.tokenCallback({
+        externalUserId: this.externalUserId,
+      });
+      this._token = token.token;
+      return token.token;
+    }
+    throw new Error("No token provided");
+  }
+
+  private refreshToken() {
+    this._token = undefined;
   }
 
   /**
@@ -161,6 +216,7 @@ class BrowserClient {
     } catch (err) {
       opts.onError?.(err as ConnectError);
     }
+    this.refreshToken(); // token is used only once
   }
 
   /**
@@ -182,9 +238,10 @@ class BrowserClient {
    *
    * @throws {ConnectError} If the app option is not a string.
    */
-  private createIframe(opts: StartConnectOpts) {
+  private async createIframe(opts: StartConnectOpts) {
+    const token = opts.token || (await this.token());
     const qp = new URLSearchParams({
-      token: opts.token,
+      token,
     });
 
     if (this.environment) {
@@ -216,4 +273,11 @@ class BrowserClient {
 
     document.body.appendChild(iframe);
   }
+
+  protected async authHeaders(): Promise<string> {
+    if (!(await this.token())) {
+      throw new Error("No token provided");
+    }
+    return `Bearer ${await this.token()}`;
+  }
 }