Adding polish and temporary logging (#16424)

Author: dannyroosevelt

docs-v2/components/AccountConnectionDemo.jsx

@@ -63,7 +63,7 @@ export default function AccountConnectionDemo() {
         )}
 
         {connectedAccount && (
-          <div className={styles.statusBox.success}>
+          <div className={`${styles.statusBox.success} p-4`}>
             <div className="font-medium text-sm">Successfully connected your {appSlug} account!</div>
             <div className="mt-4 text-sm">
               {connectedAccount.loading

docs-v2/components/ConnectLinkDemo.jsx

@@ -82,7 +82,7 @@ export default function ConnectLinkDemo() {
             rel="noopener noreferrer"
             className={`${styles.primaryButton} inline-flex items-center`}
           >
-            Open Connect Link
+            Open
             <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
             </svg>
@@ -94,7 +94,7 @@ export default function ConnectLinkDemo() {
             }}
             className={styles.secondaryButton}
           >
-            Copy URL
+            Copy
             <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
             </svg>

docs-v2/components/api.js

@@ -5,10 +5,14 @@
 /**
  * Generate a request token based on the browser environment
  * Creates a token that matches what the API will generate
+ *
+ * Note: Server-side uses the origin's hostname for token generation
+ * to handle domain mapping in production environments
  */
 export function generateRequestToken() {
   if (typeof window === "undefined") return "";
 
+  // Use the same origin's hostname that the server will use when generating the token
   const baseString = `${navigator.userAgent}:${window.location.host}:connect-demo`;
   return btoa(baseString);
 }

docs-v2/next.config.mjs

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

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

@@ -3,7 +3,9 @@
  * Retrieves information about connected accounts for the interactive demo
  */
 import { createBackendClient } from "@pipedream/sdk/server";
-import { createApiHandler } from "../utils";
+import {
+  createApiHandler, generateRequestToken,
+} from "../utils";
 
 /**
  * Handler for account details retrieval
@@ -17,6 +19,15 @@ async function accountHandler(req, res) {
     });
   }
 
+  // Debug logging for troubleshooting token validation
+  console.log("Account API request:", {
+    id,
+    host: req.headers.host,
+    origin: req.headers.origin,
+    requestToken: req.headers["x-request-token"],
+    expectedToken: generateRequestToken(req),
+  });
+
   try {
     // Initialize the Pipedream SDK client
     const pd = createBackendClient({
@@ -34,6 +45,7 @@ async function accountHandler(req, res) {
     // Return the account details
     return res.status(200).json(accountDetails);
   } catch (err) {
+    console.error("Error fetching account details:", err.message);
     return res.status(500).json({
       error: "Failed to fetch account details",
     });