Fixes (to a certain point)

* Switch to the REST API to create a Connect token
* Rename "client user ID" to "external ID"
* Moved some env vars to the server
* Use public key instead of project ID
* Switch from app's name slug to ID

Author: jverce

packages/sdk/examples/next-app/.env.example

@@ -0,0 +1,10 @@
+# Config for the front-end
+NEXT_PUBLIC_PIPEDREAM_APP_ID=oa_
+NEXT_PUBLIC_PIPEDREAM_FRONTEND_HOST=frontend.gkes.pipedream.net
+
+# API host (dev or prod)
+PIPEDREAM_API_HOST=api.<username>.gkes.pipedream.net
+
+# Project credentials
+PIPEDREAM_PROJECT_PUBLIC_KEY=pub_
+PIPEDREAM_PROJECT_SECRET_KEY=sec_

packages/sdk/examples/next-app/app/page.tsx

@@ -4,17 +4,13 @@ import { createRef, useEffect, useState } from "react";
 import { serverConnectTokenCreate, getAppsData } from "./server"
 import { createClient } from "../../../src/browser"
 
-const publicKey = process.env.NEXT_PUBLIC_PIPEDREAM_PROJECT_PUBLIC_KEY
 const frontendHost = process.env.NEXT_PUBLIC_PIPEDREAM_FRONTEND_HOST
-const oauthAppId = process.env.NEXT_PUBLIC_PIPEDREAM_TEST_APP_ID
-const appSlug = process.env.NEXT_PUBLIC_PIPEDREAM_APP_SLUG
+const oauthAppId = process.env.NEXT_PUBLIC_PIPEDREAM_APP_ID
 
 export default function Home() {
-  if (!publicKey) throw new Error("Missing NEXT_PUBLIC_PIPEDREAM_PROJECT_PUBLIC_KEY env var")
-  if (!oauthAppId) throw new Error("Missing NEXT_PUBLIC_PIPEDREAM_TEST_APP_ID env var")
-  if (!appSlug) throw new Error("Missing NEXT_PUBLIC_PIPEDREAM_APP_SLUG env var")
+  if (!oauthAppId) throw new Error("Missing NEXT_PUBLIC_PIPEDREAM_APP_ID env var")
 
-    const pd = createClient({ publicKey, frontendHost })
+  const pd = createClient({ frontendHost })
   const [externalUserId, setExternalUserId] = useState<string | null>(null)
   const [githubData, setGithubData] = useState<{ login: string } | null>(null)
   const [token, setToken] = useState<string | null>(null)
@@ -35,8 +31,7 @@ export default function Home() {
   }
 
   const connectAccount = async () => {
-    connectApp(oauthAppId as string)
-
+    await connectApp(oauthAppId as string)
   }
 
   const signIn = () => {
@@ -55,7 +50,10 @@ export default function Home() {
       setOauthAppId(null)
       setAuthProvisionId(null)
     } else {
-      serverConnectTokenCreate(externalUserId).then((t) => setToken(t))
+      serverConnectTokenCreate({
+        app_id: oauthAppId,
+        external_id: externalUserId
+      }).then((t) => setToken(t))
       getAppsData(externalUserId).then((d) => {
         setGithubData(d.github)
       })

packages/sdk/examples/next-app/app/server.ts

@@ -1,55 +1,59 @@
 "use server";
 
-import { createClient } from "../../../src";
+import {
+  createClient,
+  type ConnectTokenCreateOpts,
+} from "../../../src";
 
 const {
+  NEXT_PUBLIC_PIPEDREAM_APP_ID,
+  PIPEDREAM_API_HOST,
+  PIPEDREAM_PROJECT_PUBLIC_KEY,
   PIPEDREAM_PROJECT_SECRET_KEY,
-  NEXT_PUBLIC_PIPEDREAM_APP_SLUG,
-  PIPEDREAM_PROJECT_ID,
-  NEXT_PUBLIC_PIPEDREAM_PROJECT_PUBLIC_KEY,
 } = process.env;
 
-if (!PIPEDREAM_PROJECT_SECRET_KEY) throw new Error("PIPEDREAM_PROJECT_SECRET_KEY not set in environment");
-if (!NEXT_PUBLIC_PIPEDREAM_APP_SLUG) throw new Error("NEXT_PUBLIC_PIPEDREAM_APP_SLUG not set in environment");
+if (!NEXT_PUBLIC_PIPEDREAM_APP_ID)
+  throw new Error("NEXT_PUBLIC_PIPEDREAM_APP_ID not set in environment");
+if (!PIPEDREAM_PROJECT_PUBLIC_KEY)
+  throw new Error("PIPEDREAM_PROJECT_SECRET_KEY not set in environment");
+if (!PIPEDREAM_PROJECT_SECRET_KEY)
+  throw new Error("PIPEDREAM_PROJECT_SECRET_KEY not set in environment");
 
 const pd = createClient({
   secretKey: PIPEDREAM_PROJECT_SECRET_KEY,
-  apiHost: process.env.PIPEDREAM_API_HOST,
-  //projectId: PIPEDREAM_PROJECT_ID,
-  publicKey: process.env.NEXT_PUBLIC_PIPEDREAM_PROJECT_PUBLIC_KEY,
+  apiHost: PIPEDREAM_API_HOST,
+  publicKey: PIPEDREAM_PROJECT_PUBLIC_KEY,
 });
 
-export async function serverConnectTokenCreate(clientUserId: string) {
-  return pd.connectTokenCreate({
-    clientUserId,
-  });
+export async function serverConnectTokenCreate(opts: ConnectTokenCreateOpts) {
+  return pd.connectTokenCreate(opts);
 }
 
-export async function getAppsData(clientUserId: string) {
+export async function getAppsData(externalId: string) {
   const [
     github,
   ] = await Promise.all([
-    getGithubData(clientUserId),
+    getGithubData(externalId),
   ]);
   return {
     github,
   };
 }
 
-export async function getGithubData(clientUserId: string) {
-  if (!NEXT_PUBLIC_PIPEDREAM_APP_SLUG) {
-    throw new Error("NEXT_PUBLIC_PIPEDREAM_APP_SLUG not set in environment");
-  }
+export async function getGithubData(externalId: string) {
+  if (!NEXT_PUBLIC_PIPEDREAM_APP_ID)
+    throw new Error("NEXT_PUBLIC_PIPEDREAM_APP_ID not set in environment");
+
   const data = await pd.getAccount({
-    app: NEXT_PUBLIC_PIPEDREAM_APP_SLUG,
-    clientUserId,
+    appId: NEXT_PUBLIC_PIPEDREAM_APP_ID,
+    externalId,
   }, {
     includeCredentials: true,
   });
   if (!data?.accounts.length) {
     return null;
   }
-  const account = data.accounts[data.accounts.length - 1]
+  const account = data.accounts[data.accounts.length - 1];
   const resp = await fetch("https://api.github.com/user", {
     headers: {
       Authorization: `Bearer ${account.credentials.oauth_access_token}`,

packages/sdk/src/browser/index.ts

@@ -1,6 +1,5 @@
 type CreateBrowserClientOpts = {
   environment?: string;
-  publicKey: string;
   frontendHost?: string;
 };
 
@@ -29,15 +28,13 @@ export function createClient(opts: CreateBrowserClientOpts) {
 
 class BrowserClient {
   environment?: string;
-  publicKey: string;
   baseURL: string;
   iframeURL: string;
   iframe?: HTMLIFrameElement;
   iframeId = 0;
 
   constructor(opts: CreateBrowserClientOpts) {
     this.environment = opts.environment;
-    this.publicKey = opts.publicKey;
     this.baseURL = `https://${opts.frontendHost || "pipedream.com"}`;
     this.iframeURL = `${this.baseURL}/_static/connect.html`;
   }
@@ -59,7 +56,6 @@ class BrowserClient {
 
     const qp = new URLSearchParams();
     qp.set("token", opts.token);
-    qp.set("publicKey", this.publicKey);
     if (this.environment) {
       qp.set("environment", this.environment);
     }

packages/sdk/src/index.ts

@@ -1,19 +1,20 @@
 type CreateServerClientOpts = {
-  environment?: string;
-  secretKey: string;
   apiHost?: string;
-  //projectId?: string;
+  environment?: string;
   publicKey: string;
+  secretKey: string;
 };
 
-type ConnectTokenCreateOpts = {
-  clientUserId: string;
+export type ConnectTokenCreateOpts = {
+  app_id: string;
+  client_name?: string;
+  external_id: string;
 };
 
 type AccountId = string;
 type AccountKeyFields = {
-  clientUserId: string;
-  app: string;
+  externalId: string;
+  appId: string;
 };
 type AccountKey = AccountId | AccountKeyFields;
 
@@ -25,57 +26,39 @@ class ServerClient {
   environment?: string;
   secretKey: string;
   publicKey: string;
-  //projectId: string;
   baseURL: string;
 
   constructor(opts: CreateServerClientOpts) {
     this.environment = opts.environment;
     this.secretKey = opts.secretKey;
     this.publicKey = opts.publicKey;
-    //this.projectId = opts.projectId;
-    this.baseURL = `https://${opts.apiHost || "pipedream.com"}`;
+
+    const { apiHost = "pipedream.com" } = opts;
+    this.baseURL = `https://${apiHost}`;
   }
 
   private _authorizonHeader(): string {
-    return "Basic " + Buffer.from(`${this.publicKey}:${this.secretKey}`).toString("base64");
+    const encoded = Buffer
+      .from(`${this.publicKey}:${this.secretKey}`)
+      .toString("base64");
+    return `Basic ${encoded}`;
   }
 
   // XXX move to REST API endpoint
   async connectTokenCreate(opts: ConnectTokenCreateOpts): Promise<string> {
-    const resp = await fetch(`${this.baseURL}/graphql`, {
+    const resp = await fetch(`${this.baseURL}/v1/connect/tokens`, {
       method: "POST",
       headers: {
+        "authorization": this._authorizonHeader(),
         "content-type": "application/json",
       },
-      body: JSON.stringify({
-        query: `mutation sdkConnectTokenCreate(
-          $publicKey: String!
-          $secretKey: String!
-          $externalId: String!
-          $oauthAppId: String!
-        ) {
-          connectTokenCreate(
-            publicKey: $publicKey
-            secretKey: $secretKey
-            externalId: $externalId
-            oauthAppId: $oauthAppId
-          ) {
-            token
-          }
-        }`,
-        variables: {
-          publicKey: this.publicKey,
-          secretKey: this.secretKey,
-          externalId: opts.clientUserId,
-          oauthAppId: "oa_aLZiMJ",
-        },
-      }),
+      body: JSON.stringify(opts),
     });
     const res = await resp.json();
     // XXX expose error here
-    console.log("connect token create result")
-    console.log(res)
-    return res.data?.connectTokenCreate?.token;
+    console.log("connect token create result");
+    console.log(res);
+    return res?.token;
   }
 
   async getAccount(key: AccountKey, opts?: { includeCredentials?: boolean; }) {
@@ -86,7 +69,7 @@ class ServerClient {
       id = key;
       url = `${baseAccountURL}/${id}`;
     } else {
-      url = `${baseAccountURL}?app=${key.app}&limit=100&external_id=${key.clientUserId}`;
+      url = `${baseAccountURL}?app=${key.appId}&limit=100&external_id=${key.externalId}`;
     }
     if (opts?.includeCredentials) {
       url += `${id
@@ -99,7 +82,7 @@ class ServerClient {
       },
     });
     const res = await resp.json();
-    console.log('res :>> ', res);
+    console.log("res :>> ", res);
     const {
       data, error,
     } = res;