Skip to content

Commit 7629ea6

Browse files
dannyrooseveltdannyroosevelt
committed
Split Connect demo into separate step components
1 parent c763043 commit 7629ea6

File tree

3 files changed

+80
-60
lines changed

3 files changed

+80
-60
lines changed

‎docs-v2/components/AccountConnectionDemo.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
3+
import { useConnectDemo } from "./ConnectDemoContext";
4+
import DemoAppSelector from "./DemoAppSelector";
5+
import DemoClientCode from "./DemoClientCode";
6+
import DemoConnectButton from "./DemoConnectButton";
7+
import DemoConnectionStatus from "./DemoConnectionStatus";
8+
9+
export default function AccountConnectionDemo() {
10+
return (
11+
<div className="border rounded-md overflow-hidden">
12+
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
13+
Step 2: Connect an Account (Client-side)
14+
</div>
15+
<div className="p-4">
16+
<div className="mb-4">
17+
<label className="flex items-center mb-4">
18+
<span className="font-medium text-sm">App to connect:</span>
19+
<span className="ml-2"><DemoAppSelector /></span>
20+
</label>
21+
22+
<div className="mb-4">
23+
<div className="text-sm mb-2 font-medium">Client-side code executed in the browser:</div>
24+
<div className="border border-blue-100 rounded-lg overflow-hidden">
25+
<DemoClientCode />
26+
</div>
27+
</div>
28+
</div>
29+
30+
<div className="mt-4 mb-2">
31+
<DemoConnectButton />
32+
</div>
33+
34+
<DemoConnectionStatus />
35+
</div>
36+
</div>
37+
);
38+
}

‎docs-v2/components/TokenGenerationDemo.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
3+
import { useConnectDemo } from "./ConnectDemoContext";
4+
import DemoExternalUserID from "./DemoExternalUserID";
5+
import DemoServerCode from "./DemoServerCode";
6+
import DemoGenerateTokenButton from "./DemoGenerateTokenButton";
7+
import DemoTokenResponse from "./DemoTokenResponse";
8+
9+
export default function TokenGenerationDemo() {
10+
return (
11+
<div className="border rounded-md overflow-hidden">
12+
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
13+
Step 1: Generate a Connect Token (Server-side)
14+
</div>
15+
<div className="p-4">
16+
<div className="mb-3">
17+
<div className="flex items-center mb-4">
18+
<span className="font-medium text-sm">External User ID:</span>
19+
<span className="ml-2"><DemoExternalUserID /></span>
20+
</div>
21+
22+
<div className="mb-4">
23+
<div className="text-sm mb-2 font-medium">Server-side code running in the API route:</div>
24+
<div className="border border-blue-100 rounded-lg overflow-hidden">
25+
<DemoServerCode />
26+
</div>
27+
</div>
28+
</div>
29+
30+
<div className="mt-4 mb-2">
31+
<DemoGenerateTokenButton />
32+
</div>
33+
34+
<DemoTokenResponse />
35+
</div>
36+
</div>
37+
);
38+
}

‎docs-v2/pages/connect/managed-auth/quickstart.mdx‎

Lines changed: 4 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,8 @@ import { Steps, Tabs } from 'nextra/components'
33
import Image from 'next/image'
44
import VideoPlayer from "@/components/VideoPlayer"
55
import ConnectDemo from '@/components/ConnectDemo'
6-
import DemoExternalUserID from '@/components/DemoExternalUserID'
7-
import DemoServerCode from '@/components/DemoServerCode'
8-
import DemoClientCode from '@/components/DemoClientCode'
9-
import DemoGenerateTokenButton from '@/components/DemoGenerateTokenButton'
10-
import DemoTokenResponse from '@/components/DemoTokenResponse'
11-
import DemoAppSelector from '@/components/DemoAppSelector'
12-
import DemoConnectButton from '@/components/DemoConnectButton'
13-
import DemoConnectionStatus from '@/components/DemoConnectionStatus'
6+
import TokenGenerationDemo from '@/components/TokenGenerationDemo'
7+
import AccountConnectionDemo from '@/components/AccountConnectionDemo'
148

159
# Managed Auth Quickstart
1610

@@ -91,32 +85,7 @@ To securely initiate account connections for your users, you'll need to generate
9185
Try the interactive demo below to generate a token with your own unique user ID:
9286

9387
<ConnectDemo>
94-
<div className="border rounded-md overflow-hidden">
95-
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
96-
Step 1: Generate a Connect Token (Server-side)
97-
</div>
98-
<div className="p-4">
99-
<div className="mb-3">
100-
<div className="flex items-center mb-4">
101-
<span className="font-medium text-sm">External User ID:</span>
102-
<span className="ml-2"><DemoExternalUserID /></span>
103-
</div>
104-
105-
<div className="mb-4">
106-
<div className="text-sm mb-2 font-medium">Server-side code running in the API route:</div>
107-
<div className="border border-blue-100 rounded-lg overflow-hidden">
108-
<DemoServerCode />
109-
</div>
110-
</div>
111-
</div>
112-
113-
<div className="mt-4 mb-2">
114-
<DemoGenerateTokenButton />
115-
</div>
116-
117-
<DemoTokenResponse />
118-
</div>
119-
</div>
88+
<TokenGenerationDemo />
12089
</ConnectDemo>
12190

12291
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).
@@ -147,32 +116,7 @@ When the user connects an account in your product, [pass the token from your bac
147116
Try the interactive demo below to connect an account after generating a token in the previous step:
148117

149118
<ConnectDemo>
150-
<div className="border rounded-md overflow-hidden">
151-
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
152-
Step 2: Connect an Account (Client-side)
153-
</div>
154-
<div className="p-4">
155-
<div className="mb-4">
156-
<label className="flex items-center mb-4">
157-
<span className="font-medium text-sm">App to connect:</span>
158-
<span className="ml-2"><DemoAppSelector /></span>
159-
</label>
160-
161-
<div className="mb-4">
162-
<div className="text-sm mb-2 font-medium">Client-side code executed in the browser:</div>
163-
<div className="border border-blue-100 rounded-lg overflow-hidden">
164-
<DemoClientCode />
165-
</div>
166-
</div>
167-
</div>
168-
169-
<div className="mt-4 mb-2">
170-
<DemoConnectButton />
171-
</div>
172-
173-
<DemoConnectionStatus />
174-
</div>
175-
</div>
119+
<AccountConnectionDemo />
176120
</ConnectDemo>
177121

178122
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.

0 commit comments

Comments
 (0)