Showing account info on successful connetion

Author: dannyroosevelt

docs-v2/components/AccountConnectionDemo.jsx

@@ -61,9 +61,22 @@ export default function AccountConnectionDemo() {
 
         {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>
-            <div className="mt-1 text-sm">
-              <div>Account ID: <span className="font-mono text-xs">{connectedAccount.id}</span></div>
+            <div className="font-medium text-sm">Successfully connected your {appSlug} account!</div>
+            <div className="mt-4 text-sm">
+              {connectedAccount.loading
+                ? (
+                  <div>Loading account details...</div>
+                )
+                : (
+                  <>
+                    {connectedAccount.name
+                      ? (
+                        <div>Account info: <span className="font-medium">{connectedAccount.name}</span></div>
+                      )
+                      : null}
+                    <div>Account ID: <span className="font-medium">{connectedAccount.id}</span></div>
+                  </>
+                )}
             </div>
           </div>
         )}

docs-v2/components/GlobalConnectProvider.jsx

@@ -97,6 +97,34 @@ export function GlobalConnectProvider({ children }) {
     }
   }
 
+  // Fetch account details from API
+  async function fetchAccountDetails(accountId) {
+    try {
+      // Use the same token credentials to fetch account details
+      const response = await fetch(`/docs/api-demo-connect/accounts/${accountId}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        console.warn("Failed to fetch account details", await response.text());
+        return {
+          id: accountId,
+        }; // Fall back to just the ID
+      }
+
+      const data = await response.json();
+      return data; // Return the full account details
+    } catch (err) {
+      console.warn("Error fetching account details:", err);
+      return {
+        id: accountId,
+      }; // Fall back to just the ID
+    }
+  }
+
   // Connect account function
   function connectAccount() {
     if (!tokenData?.token) {
@@ -111,10 +139,22 @@ export function GlobalConnectProvider({ children }) {
       pd.connectAccount({
         app: appSlug,
         token: tokenData.token,
-        onSuccess: (account) => {
+        onSuccess: async (account) => {
+          // Initialize with just the ID
           setConnectedAccount({
             id: account.id,
+            loading: true,
           });
+
+          // Fetch additional account details
+          const accountDetails = await fetchAccountDetails(account.id);
+
+          // Update with the full details
+          setConnectedAccount({
+            ...accountDetails,
+            loading: false,
+          });
+
           // Token is single-use, so clear it after successful connection
           setTokenData(null);
         },

docs-v2/next.config.mjs

@@ -554,6 +554,10 @@ export default withNextra({
         source: "/api-demo-connect/token",
         destination: "/api/demo-connect/token",
       },
+      {
+        source: "/api-demo-connect/accounts/:id",
+        destination: "/api/demo-connect/accounts/:id",
+      },
     ];
   },
   env: {

docs-v2/pages/api/demo-connect/accounts/[id].js

@@ -0,0 +1,36 @@
+// API route to fetch account details from Pipedream API
+import { createBackendClient } from "@pipedream/sdk/server";
+
+export default async function handler(req, res) {
+  const { id } = req.query;
+
+  if (!id) {
+    return res.status(400).json({
+      error: "Account ID is required",
+    });
+  }
+
+  try {
+    // Initialize the Pipedream SDK client
+    const pd = createBackendClient({
+      environment: process.env.PIPEDREAM_PROJECT_ENVIRONMENT || "development",
+      credentials: {
+        clientId: process.env.PIPEDREAM_CLIENT_ID,
+        clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,
+      },
+      projectId: process.env.PIPEDREAM_PROJECT_ID,
+    });
+
+    // Fetch the specific account by ID
+    const accountDetails = await pd.getAccountById(id);
+
+    // Return the account details
+    return res.status(200).json(accountDetails);
+  } catch (err) {
+    console.error("Error fetching account details:", err);
+    return res.status(500).json({
+      error: "Failed to fetch account details",
+      message: err.message,
+    });
+  }
+}