Working well

dannyroosevelt · dannyroosevelt · commit 0b31b6f14d24 · 2025-04-23T12:30:43.000-07:00
diff --git a/docs-v2/components/AccountConnectionDemo.jsx b/docs-v2/components/AccountConnectionDemo.jsx
@@ -4,14 +4,14 @@ import { useGlobalConnect } from "./GlobalConnectProvider";
 import CodeBlock from "./CodeBlock";
 
 export default function AccountConnectionDemo() {
-  const { 
-    appSlug, 
-    setAppSlug, 
-    tokenData, 
-    getClientCodeSnippet, 
+  const {
+    appSlug,
+    setAppSlug,
+    tokenData,
+    getClientCodeSnippet,
     connectAccount,
     connectedAccount,
-    error
+    error,
   } = useGlobalConnect();
 
   return (
@@ -34,7 +34,7 @@ export default function AccountConnectionDemo() {
               <option value="google_sheets">Google Sheets</option>
             </select>
           </label>
-          
+
           <div className="mb-4">
             <div className="border border-blue-100 rounded-lg overflow-hidden">
               <CodeBlock code={getClientCodeSnippet()} language="javascript" />
@@ -50,6 +50,7 @@ export default function AccountConnectionDemo() {
           >
             Connect Account
           </button>
+          {!tokenData && <p className="mt-2 text-sm text-gray-500"><a href="/docs/connect/managed-auth/quickstart/#generate-a-short-lived-token" className="font-semibold underline underline-offset-4 hover:decoration-2 decoration-brand/50">Generate a token above</a> in order to test the account connection flow</p>}
         </div>
 
         {error && (
@@ -58,7 +59,7 @@ export default function AccountConnectionDemo() {
             <div className="mt-1 text-sm">{error}</div>
           </div>
         )}
-        
+
         {connectedAccount && (
           <div className="mt-4 p-3 bg-green-50 border border-green-200 text-green-800 rounded-md">
             <div className="font-medium text-sm">Account successfully connected!</div>
@@ -75,4 +76,4 @@ export default function AccountConnectionDemo() {
       </div>
     </div>
   );
-}
+}
diff --git a/docs-v2/components/ConnectCodeSnippets.js b/docs-v2/components/ConnectCodeSnippets.js
@@ -36,25 +36,30 @@ const { token, expires_at, connect_link_url } = await pd.createConnectToken({
 export function getClientCodeSnippet(appSlug, tokenData) {
   return `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
+// This code runs in the frontend using the token from your server
+export default function Home() {
+  function connectAccount() {
+  const pd = createFrontendClient()
+    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
+    : "{connect_token}"}", 
+      onSuccess: (account) => {
+        // Handle successful connection
+        console.log(\`Account successfully connected: \${account.id}\`)
+      },
+      onError: (err) => {
+        // Handle connection error
+        console.error(\`Connection error: \${err.message}\`)
+      }
+    })
   }
-})`;
+
+  return (
+    <main>
+      <button onClick={connectAccount}>Connect Account</button>
+    </main>
+  )
+}`;
 }
diff --git a/docs-v2/components/TokenGenerationDemo.jsx b/docs-v2/components/TokenGenerationDemo.jsx
@@ -4,12 +4,12 @@ import { useGlobalConnect } from "./GlobalConnectProvider";
 import CodeBlock from "./CodeBlock";
 
 export default function TokenGenerationDemo() {
-  const { 
-    externalUserId, 
-    getServerCodeSnippet, 
-    generateToken, 
+  const {
+    externalUserId,
+    getServerCodeSnippet,
+    generateToken,
     tokenLoading,
-    tokenData 
+    tokenData,
   } = useGlobalConnect();
 
   return (
@@ -36,23 +36,25 @@ export default function TokenGenerationDemo() {
             disabled={tokenLoading}
             className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm"
           >
-            {tokenLoading ? "Generating..." : "Generate Token"}
+            {tokenLoading
+              ? "Generating..."
+              : "Generate Token"}
           </button>
         </div>
 
         {tokenData && (
           <div className="mt-4">
-            <div className="text-sm mb-2 font-medium">Server Response:</div>
+            <div className="text-sm mb-2 font-medium">Response:</div>
             <div className="border border-green-200 rounded-lg overflow-hidden">
-              <CodeBlock 
-                code={JSON.stringify(tokenData, null, 2)} 
-                language="json" 
-                className="max-h-48 overflow-auto" 
+              <CodeBlock
+                code={JSON.stringify(tokenData, null, 2)}
+                language="json"
+                className="max-h-48 overflow-auto"
               />
             </div>
           </div>
         )}
       </div>
     </div>
   );
-}
+}
diff --git a/docs-v2/pages/connect/managed-auth/quickstart.mdx b/docs-v2/pages/connect/managed-auth/quickstart.mdx
@@ -24,10 +24,6 @@ Here's how Connect sits in your frontend and backend, and communicates with Pipe
 <br />
 <Image src="https://res.cloudinary.com/pipedreamin/image/upload/v1723834101/docs/Screenshot_2024-08-16_at_11.48.15_AM_kijxa7.png" alt="Connect developer flow" width={800} height={500} />
 
-## Interactive Demo
-
-Below, we'll walk through the full implementation step by step, with interactive examples you can try.
-
 ## Getting started
 
 <Steps>
@@ -121,53 +117,21 @@ Try the interactive demo below to connect an account after generating a token in
   <AccountConnectionDemo />
 </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.
-
-<br />
-<Image src="https://res.cloudinary.com/pipedreamin/image/upload/v1733865948/Google_Chrome_-_Pipedream_Connect_Demo_2024-12-10_at_1.23.47_PM_mwxfzh.png" alt="Connect your account button" width={650} height={300} />
-
-```typescript
-import { createFrontendClient } from "@pipedream/sdk/browser"
-
-export default function Home() {
-  const pd = createFrontendClient()
-  function connectAccount() {
-    pd.connectAccount({
-      app: appSlug, // Pass the app name slug of the app you want to integrate
-      oauthAppId: appId, // For OAuth apps, pass the OAuth app ID; omit this param to use Pipedream's OAuth client or for key-based apps
-      token: "YOUR_TOKEN", // The token you received from your server above
-      onSuccess: ({ id: accountId }) => {
-        console.log(`Account successfully connected: ${accountId}`)
-      }
-    })
-  }
-
-  return (
-    <main>
-      <button onClick={connectAccount}>Connect your account</button>
-    </main>
-  )
-}
-```
-
-Press that button to connect an account for the app you configured.
-
 #### Or use Connect Link
 
-Use this option when you can't execute JavaScript or open an iFrame in your environment (e.g. mobile apps), or when you want to offload the account connection flow to Pipedream and avoid frontend work. You can also send these links via email or SMS.
+Use this option when you can't execute JavaScript or open an iFrame in your environment (e.g. mobile apps) and instead want to share a URL with your end users.
 
-The Connect Link opens a Pipedream-hosted page, guiding users through the account connection process. The URL is specific to the user and expires after 4 hours.
+The Connect Link URL opens a Pipedream-hosted page, guiding users through the account connection process. The URL is specific to the user and expires after 4 hours.
 
-1. First, [generate a token](#generate-a-short-lived-token) for your users.
-2. Extract the `connect_link_url` from the token response.
-3. Before returning the URL to your user, add an `app` parameter to the end of the query string:
+1. First, [generate a token](#generate-a-short-lived-token) for your users
+2. Check out the [optional arguments](/connect/api/#create-a-new-token) to define redirect URLs on success or error 
+3. Extract the `connect_link_url` from the token response
+4. Before returning the URL to your user, add an `app` parameter to the end of the query string:
 
 ```
 https://pipedream.com/_static/connect.html?token={token}&connectLink=true&app={appSlug}&oauthAppId={oauthAppId}
 ```
 
-4. Redirect your users to this URL, or send it to them via email, SMS, and more.
-
 ### Make authenticated requests
 
 Now that your users have connected an account, you can use their auth in one of a few ways:
