diff --git a/docs-v2/components/AccountConnectionDemo.jsx b/docs-v2/components/AccountConnectionDemo.jsx index 83efac386e519..4f81f1807cf6a 100644 --- a/docs-v2/components/AccountConnectionDemo.jsx +++ b/docs-v2/components/AccountConnectionDemo.jsx @@ -63,7 +63,7 @@ export default function AccountConnectionDemo() { )} {connectedAccount && ( -
+
Successfully connected your {appSlug} account!
{connectedAccount.loading diff --git a/docs-v2/components/ConnectLinkDemo.jsx b/docs-v2/components/ConnectLinkDemo.jsx index 079fef294a175..6580434904fe4 100644 --- a/docs-v2/components/ConnectLinkDemo.jsx +++ b/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 @@ -94,7 +94,7 @@ export default function ConnectLinkDemo() { }} className={styles.secondaryButton} > - Copy URL + Copy diff --git a/docs-v2/components/api.js b/docs-v2/components/api.js index 8b356e83b2dbc..979528ec89633 100644 --- a/docs-v2/components/api.js +++ b/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); } diff --git a/docs-v2/next.config.mjs b/docs-v2/next.config.mjs index 9685cf4206800..56450106482e0 100644 --- a/docs-v2/next.config.mjs +++ b/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: { diff --git a/docs-v2/pages/api/demo-connect/accounts/[id].js b/docs-v2/pages/api/demo-connect/accounts/[id].js index deaa287985fdb..d22a3aef81607 100644 --- a/docs-v2/pages/api/demo-connect/accounts/[id].js +++ b/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", });