Create global Connect context to properly separate demo steps

dannyroosevelt · dannyroosevelt · commit 7494f4782a60 · 2025-04-23T11:33:22.000-07:00
diff --git a/docs-v2/components/AccountConnectionDemo.jsx b/docs-v2/components/AccountConnectionDemo.jsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 import DemoAppSelector from "./DemoAppSelector";
 import DemoClientCode from "./DemoClientCode";
 import DemoConnectButton from "./DemoConnectButton";
diff --git a/docs-v2/components/ConnectDemo.js b/docs-v2/components/ConnectDemo.js
@@ -156,8 +156,6 @@ pd.connectAccount({
   return (
     <div className={`not-prose border border-gray-200 rounded-lg my-6 ${className || ""}`}>
       <div className="p-4 sm:p-6">
-        <h3 className="text-lg font-medium mb-4">Interactive Demo</h3>
-
         <div className="mb-6 border rounded-md overflow-hidden">
           <div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
             Step 1: Generate a Connect Token (Server-side)
diff --git a/docs-v2/components/DemoAppSelector.jsx b/docs-v2/components/DemoAppSelector.jsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 
 export default function DemoAppSelector() {
-  const { appSlug, setAppSlug, tokenData } = useConnectDemo();
+  const { appSlug, setAppSlug, tokenData } = useGlobalConnect();
   
   return (
     <select
diff --git a/docs-v2/components/DemoClientCode.jsx b/docs-v2/components/DemoClientCode.jsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 import CodeBlock from "./CodeBlock";
 
 export default function DemoClientCode() {
-  const { getClientCodeSnippet } = useConnectDemo();
+  const { getClientCodeSnippet } = useGlobalConnect();
   
   return (
     <CodeBlock code={getClientCodeSnippet()} language="javascript" />
diff --git a/docs-v2/components/DemoConnectButton.jsx b/docs-v2/components/DemoConnectButton.jsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 
 export default function DemoConnectButton() {
-  const { connectAccount, tokenData } = useConnectDemo();
+  const { connectAccount, tokenData } = useGlobalConnect();
   
   return (
     <button
diff --git a/docs-v2/components/DemoConnectionStatus.jsx b/docs-v2/components/DemoConnectionStatus.jsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 
 export default function DemoConnectionStatus() {
-  const { connectedAccount, error } = useConnectDemo();
+  const { connectedAccount, error } = useGlobalConnect();
   
   return (
     <>
diff --git a/docs-v2/components/DemoExternalUserID.jsx b/docs-v2/components/DemoExternalUserID.jsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 
 export default function DemoExternalUserID() {
-  const { externalUserId } = useConnectDemo();
+  const { externalUserId } = useGlobalConnect();
   
   return (
     <code className="px-2 py-1 bg-gray-100 rounded text-sm">{externalUserId}</code>
diff --git a/docs-v2/components/DemoGenerateTokenButton.jsx b/docs-v2/components/DemoGenerateTokenButton.jsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 
 export default function DemoGenerateTokenButton() {
-  const { generateToken, tokenLoading } = useConnectDemo();
+  const { generateToken, tokenLoading } = useGlobalConnect();
   
   return (
     <button
diff --git a/docs-v2/components/DemoServerCode.jsx b/docs-v2/components/DemoServerCode.jsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 import CodeBlock from "./CodeBlock";
 
 export default function DemoServerCode() {
-  const { getServerCodeSnippet } = useConnectDemo();
+  const { getServerCodeSnippet } = useGlobalConnect();
   
   return (
     <CodeBlock code={getServerCodeSnippet()} language="javascript" />
diff --git a/docs-v2/components/DemoTokenResponse.jsx b/docs-v2/components/DemoTokenResponse.jsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 import CodeBlock from "./CodeBlock";
 
 export default function DemoTokenResponse() {
-  const { tokenData } = useConnectDemo();
+  const { tokenData } = useGlobalConnect();
   
   if (!tokenData) return null;
   
diff --git a/docs-v2/components/GlobalConnectProvider.jsx b/docs-v2/components/GlobalConnectProvider.jsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect } from "react";
+import { createFrontendClient } from "@pipedream/sdk/browser";
+
+// Generate a UUID v4 for use as external_user_id
+function generateUUID() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+// Create the context
+const GlobalConnectContext = createContext(null);
+
+// Provider component
+export function GlobalConnectProvider({ children }) {
+  // User and account state
+  const [appSlug, setAppSlug] = useState("slack");
+  const [externalUserId, setExternalUserId] = useState("");
+  const [connectedAccount, setConnectedAccount] = useState(null);
+  
+  // Token state
+  const [tokenData, setTokenData] = useState(null);
+  
+  // UI state
+  const [tokenLoading, setTokenLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Generate a new UUID when the component mounts
+  useEffect(() => {
+    setExternalUserId(generateUUID());
+  }, []);
+
+  // Get server code snippet
+  const getServerCodeSnippet = () => `import { createBackendClient } from "@pipedream/sdk/server";
+ 
+// This code runs on your server
+const pd = createBackendClient({
+  environment: "development", 
+  credentials: {
+    clientId: process.env.PIPEDREAM_CLIENT_ID,
+    clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,
+  },
+  projectId: process.env.PIPEDREAM_PROJECT_ID
+});
+ 
+// Create a token for a specific user
+const { token, expires_at, connect_link_url } = await pd.createConnectToken({
+  external_user_id: "${externalUserId || "YOUR_USER_ID"}", 
+});`;
+
+  // Get client code snippet
+  const getClientCodeSnippet = () => `import { createFrontendClient } from "@pipedream/sdk/browser"
+ 
+// This code runs in the browser
+const pd = createFrontendClient()
+
+// Connect an account using the token from your server
+pd.connectAccount({
+  app: "${appSlug}", 
+  token: "${tokenData?.token ? tokenData.token.substring(0, 10) + "..." : "YOUR_TOKEN"}", 
+  onSuccess: (account) => {
+    // Handle successful connection
+    console.log(\`Account successfully connected: \${account.name}\`)
+  },
+  onError: (err) => {
+    // Handle connection error
+    console.error(\`Connection error: \${err.message}\`)
+  },
+  onClose: () => {
+    // Handle dialog closed by user
+  }
+})`;
+
+  // Generate token async function
+  async function generateToken() {
+    setTokenLoading(true);
+    setError(null);
+    
+    try {
+      const response = await fetch("/docs/api-demo-connect/token", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          external_user_id: externalUserId,
+        }),
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to get token");
+      }
+      
+      const data = await response.json();
+      setTokenData(data);
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    } finally {
+      setTokenLoading(false);
+    }
+  }
+
+  // Connect account function
+  function connectAccount() {
+    if (!tokenData?.token) {
+      setError("Please generate a token first");
+      return;
+    }
+
+    setError(null);
+
+    try {
+      const pd = createFrontendClient();
+      pd.connectAccount({
+        app: appSlug,
+        token: tokenData.token,
+        onSuccess: (account) => {
+          setConnectedAccount(account);
+        },
+        onError: (err) => {
+          setError(err.message || "Failed to connect account");
+        },
+        onClose: () => {
+          // Dialog closed by user - no action needed
+        },
+      });
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    }
+  }
+
+  // Create value object
+  const value = {
+    // State
+    appSlug,
+    externalUserId,
+    tokenData,
+    connectedAccount,
+    error,
+    tokenLoading,
+    
+    // Actions
+    setAppSlug,
+    generateToken,
+    connectAccount,
+    
+    // Code snippets
+    getServerCodeSnippet,
+    getClientCodeSnippet,
+  };
+
+  return (
+    <GlobalConnectContext.Provider value={value}>
+      {children}
+    </GlobalConnectContext.Provider>
+  );
+}
+
+// Custom hook for using the context
+export function useGlobalConnect() {
+  const context = useContext(GlobalConnectContext);
+  if (!context) {
+    throw new Error('useGlobalConnect must be used within a GlobalConnectProvider');
+  }
+  return context;
+}
diff --git a/docs-v2/components/TokenGenerationDemo.jsx b/docs-v2/components/TokenGenerationDemo.jsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useConnectDemo } from "./ConnectDemoContext";
+import { useGlobalConnect } from "./GlobalConnectProvider";
 import DemoExternalUserID from "./DemoExternalUserID";
 import DemoServerCode from "./DemoServerCode";
 import DemoGenerateTokenButton from "./DemoGenerateTokenButton";
diff --git a/docs-v2/pages/connect/managed-auth/quickstart.mdx b/docs-v2/pages/connect/managed-auth/quickstart.mdx
@@ -2,12 +2,14 @@ import Callout from '@/components/Callout'
 import { Steps, Tabs } from 'nextra/components'
 import Image from 'next/image'
 import VideoPlayer from "@/components/VideoPlayer"
-import ConnectDemo from '@/components/ConnectDemo'
+import { GlobalConnectProvider } from '@/components/GlobalConnectProvider'
 import TokenGenerationDemo from '@/components/TokenGenerationDemo'
 import AccountConnectionDemo from '@/components/AccountConnectionDemo'
 
 # Managed Auth Quickstart
 
+<GlobalConnectProvider>
+
 Pipedream Connect is the easiest way for your users to connect to [over {process.env.PUBLIC_APPS}+ APIs](https://pipedream.com/apps), **right in your product**. You can build in-app messaging, CRM syncs, AI agents, [and much more](/connect/use-cases/), all in a few minutes.
 
 ## Visual overview
@@ -84,9 +86,9 @@ To securely initiate account connections for your users, you'll need to generate
 
 Try the interactive demo below to generate a token with your own unique user ID:
 
-<ConnectDemo>
+<div className="not-prose">
   <TokenGenerationDemo />
-</ConnectDemo>
+</div>
 
 In the Next.js example, we're using server components to securely call the Pipedream API. The demo above uses a similar approach with a server-side API route to generate tokens. Once you have a token, return it to your frontend to start the account connection flow for the user, or redirect them to a Pipedream-hosted URL with [Connect Link](#or-use-connect-link).
 
@@ -115,9 +117,9 @@ When the user connects an account in your product, [pass the token from your bac
 
 Try the interactive demo below to connect an account after generating a token in the previous step:
 
-<ConnectDemo>
+<div className="not-prose">
   <AccountConnectionDemo />
-</ConnectDemo>
+</div>
 
 In our example Next.js app, `app/page.tsx` calls the `connectAccount` method from the Pipedream SDK when the user clicks the **Connect your account** button, similar to how our interactive demo above works.
 
@@ -189,3 +191,5 @@ Now that your users have connected an account, you can use their auth in one of
   </ol>
   <p className="mt-2 text-sm opacity-80">Note: Each time you reload this page, a new unique user ID is generated.</p>
 </div>
+
+</GlobalConnectProvider>
