Your Connected Accounts

\n {!Array.isArray(accounts) || accounts.length === 0\n ? (\n

\n No connected accounts yet. Connect an app above to get started.\n

\n )\n : (\n

\n {accounts.map((account) => (\n \n

{account.app?.name || \"Unknown App\"}

\n {account.name || \"Connected Account\"}\n

\n Connected: {account.created_at ? new Date(account.created_at).toLocaleDateString() : \"Unknown\"}\n

\n \n {account.app?.auth_type || \"Unknown\"}\n \n

\n ))}\n \n )}\n

\n );\n}",[],[186,193,200],{"_104":209,"_95":210,"_154":211,"_156":194,"_157":139,"_158":212,"_160":22,"_106":213,"_100":214,"_164":204,"_166":215,"_167":22,"_168":-5,"_169":216,"_98":217},"9f232fb2-4871-11f0-a4c7-76b3cceeab13","Dashboard.tsx","fa617f4c-3817-11f0-972c-9e149126039e",114,["D",1749831328674],35,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport {\n ComponentFormContainer,\n ComponentForm\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?&deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?\";\nimport type { Account, User } from \"../../shared/types.ts\";\nimport { AccountsList } from \"./AccountsList.tsx\";\n\ninterface DashboardProps {\n user: User;\n pipedreamToken: string;\n onLogout: () => void;\n onError: (error: string) => void;\n}\n\nexport function Dashboard(\n { user, pipedreamToken, onLogout, onError }: DashboardProps,\n) {\n const [accounts, setAccounts] = useState([]);\n const [selectedApp, setSelectedApp] = useState(null);\n const [selectedComponent, setSelectedComponent] = useState(null);\n const [componentType, setComponentType] = useState<\"action\" | \"trigger\">(\n \"action\",\n );\n const [configuredProps, setConfiguredProps] = useState({});\n\n // Create Pipedream frontend client\n const frontendClient = createFrontendClient({\n environment: \"development\", // TODO: Make this configurable\n externalUserId: user.id,\n tokenCallback: async () => {\n // Return the token that was passed as a prop\n return { token: pipedreamToken };\n },\n });\n\n useEffect(() => {\n loadAccounts();\n }, []);\n\n const loadAccounts = async () => {\n try {\n // Load user's connected accounts\n const accountsResponse = await fetch(\"/api/pipedream/accounts\");\n const accountsData = await accountsResponse.json();\n if (accountsData.accounts && Array.isArray(accountsData.accounts)) {\n setAccounts(accountsData.accounts);\n } else {\n console.warn(\"Accounts data is not an array:\", accountsData);\n setAccounts([]);\n }\n } catch (err) {\n console.error(\"Failed to load accounts:\", err);\n onError(\"Failed to load accounts. Please try refreshing the page.\");\n setAccounts([]);\n }\n };\n\n const handleConnectionSuccess = () => {\n loadAccounts(); // Refresh the accounts list\n setSelectedApp(null); // Reset selection\n setSelectedComponent(null);\n };\n\n const handleComponentTypeChange = (newType: \"action\" | \"trigger\") => {\n setComponentType(newType);\n setSelectedComponent(null); // Reset component when type changes\n };\n\n const handleComponentSubmit = async (ctx) => {\n try {\n if (componentType === \"action\" ) {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent.key,\n configuredProps: ctx.configuredProps,\n })\n };\n // TODO trigger\n } catch (error) {\n console.error(`Failed to execute ${componentType}:`, error);\n onError(`Failed to execute ${componentType}: ${error.message}`);\n }\n };\n\n return (\n

\n \n

Pipedream Connect

Welcome, {user?.username}!

\n \n Logout\n \n \n\n \n

Connect Apps & Build Workflows

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select Component Type:\n \n \n handleComponentTypeChange(\n e.target.value as \"action\" | \"trigger\",\n )}\n style={{\n width: \"100%\",\n padding: \"8px 12px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n cursor: \"pointer\",\n }}\n >\n \n \n \n

\n )}\n\n {selectedApp && (\n

\n \n 3. Select{\" \"}\n {componentType === \"action\" ? \"an Action\" : \"a Trigger\"}:\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 4. Configure{\" \"}\n {componentType === \"action\" ? \"Action\" : \"Trigger\"}:\n \n \n \n

\n                 const result = await frontendClient.actionRun(\n                {JSON.stringify({\n                    externalUserId: user.id,\n                    actionId: selectedComponent.key,\n                    configuredProps: configuredProps,\n                  }, null, 2)}\n                 )\n

\n )}\n \n \n\n \n \n );\n}",[],[186,193,210],{"_104":219,"_95":220,"_154":221,"_156":194,"_157":139,"_158":202,"_160":22,"_106":222,"_100":188,"_164":204,"_166":223,"_167":22,"_168":-5,"_169":224,"_98":225},"cf20b00a-486b-11f0-8b40-76b3cceeab13","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",["D",1749828832208],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\ninterface ErrorMessageProps {\n error: string;\n onDismiss?: () => void;\n}\n\nexport function ErrorMessage({ error, onDismiss }: ErrorMessageProps) {\n if (!error) return null;\n\n return (\n \n {error}\n {onDismiss && (\n \n ×\n \n )}\n \n );\n}",[],[186,193,220],{"_104":227,"_95":228,"_154":229,"_156":194,"_157":139,"_158":202,"_160":22,"_106":230,"_100":231,"_164":204,"_166":232,"_167":22,"_168":-5,"_169":233,"_98":234},"cf20a812-486b-11f0-8b40-76b3cceeab13","Home.tsx","4646f64c-34e6-11f0-ad7f-9e149126039e",["D",1749828832208],15,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?\";\nimport { LoginForm } from \"./LoginForm.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.tsx\";\nimport type { InitialData, User } from \"../../shared/types.ts\";\n\nexport function Home() {\n const [user, setUser] = useState(null);\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isCheckingAuth, setIsCheckingAuth] = useState(true);\n const [error, setError] = useState(\"\");\n const [pipedreamToken, setPipedreamToken] = useState(\"\");\n\n useEffect(() => {\n // Check initial authentication state from server\n const initialData = (window as any).__INITIAL_DATA__ as InitialData;\n if (initialData?.isAuthenticated && initialData?.user) {\n setUser(initialData.user);\n setIsAuthenticated(true);\n if (initialData.pipedream?.token) {\n setPipedreamToken(initialData.pipedream.token);\n }\n setIsCheckingAuth(false);\n } else {\n // If not authenticated from server, check if we have a valid session\n checkAuthStatus();\n }\n }, []);\n\n const checkAuthStatus = async () => {\n try {\n // First try server-side cookie authentication\n const response = await fetch(\"/api/user\");\n if (response.ok) {\n const data = await response.json();\n setUser(data.user);\n setIsAuthenticated(true);\n\n // Get Pipedream token\n const tokenResponse = await fetch(\"/api/pipedream/token\");\n const tokenData = await tokenResponse.json();\n if (tokenData.token) {\n setPipedreamToken(tokenData.token);\n }\n }\n } catch (err) {\n // User is not authenticated, which is fine\n console.log(\"No valid session found\");\n } finally {\n setIsCheckingAuth(false);\n }\n };\n\n const handleLogin = async (userData: User) => {\n setUser(userData);\n setIsAuthenticated(true);\n\n // Get Pipedream token\n try {\n const tokenResponse = await fetch(\"/api/pipedream/token\");\n const tokenData = await tokenResponse.json();\n if (tokenData.token) {\n setPipedreamToken(tokenData.token);\n }\n } catch (err) {\n console.error(\"Failed to get Pipedream token:\", err);\n setError(\"Failed to initialize Pipedream connection\");\n }\n };\n\n const handleLogout = async () => {\n try {\n await fetch(\"/api/logout\", { method: \"POST\" });\n setUser(null);\n setIsAuthenticated(false);\n setPipedreamToken(\"\");\n setError(\"\");\n } catch (err) {\n console.error(\"Logout error:\", err);\n setError(\"Failed to logout properly\");\n }\n };\n\n const handleError = (errorMessage: string) => {\n setError(errorMessage);\n };\n\n const dismissError = () => {\n setError(\"\");\n };\n\n if (isCheckingAuth) {\n return (\n \n

Checking authentication...

\n \n \n \n \n );\n }\n\n if (!isAuthenticated) {\n return (\n <>\n \n \n \n );\n }\n\n return (\n <>\n \n \n \n );\n}",[],[186,193,228],{"_104":236,"_95":237,"_154":238,"_156":194,"_157":139,"_158":202,"_160":22,"_106":239,"_100":240,"_164":204,"_166":241,"_167":22,"_168":-5,"_169":242,"_98":243},"cf209fac-486b-11f0-8b40-76b3cceeab13","LoginForm.tsx","fa619216-3817-11f0-972c-9e149126039e",["D",1749828832208],4,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface LoginFormProps {\n onLogin: (user: User) => void;\n onError: (error: string) => void;\n}\n\nexport function LoginForm({ onLogin, onError }: LoginFormProps) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n onError(\"\"); // Clear any previous errors\n\n try {\n const response = await fetch(\"/api/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ apiKey }),\n });\n\n const data = await response.json();\n\n if (data.success) {\n setApiKey(\"\");\n onLogin(data.user);\n } else {\n onError(data.error || \"Login failed\");\n }\n } catch (err) {\n onError(\"Network error. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Val Town + Pipedream Connect

Please enter your Val Town API key to get started.

\n\n

\n );\n}",[],[186,193,237],[186,193],{"_104":246,"_95":247,"_154":248,"_156":187,"_157":139,"_158":249,"_160":22,"_106":250,"_100":251,"_164":252,"_166":253,"_167":22,"_168":-5,"_169":254,"_98":255},"fa61b890-3817-11f0-972c-9e149126039e","index.html","8f915482-34e6-11f0-b615-9e149126039e",52,["D",1748033608415],5,"file","\n\n \n \n \n Val Town + Pipedream Connect\n \n \n

\n \n \n \n",[],[186,247],{"_104":257,"_95":258,"_154":259,"_156":187,"_157":139,"_158":202,"_160":22,"_106":260,"_100":159,"_164":204,"_166":261,"_167":22,"_168":-5,"_169":262,"_98":263},"cf20a63c-486b-11f0-8b40-76b3cceeab13","index.tsx","8855cee6-34e6-11f0-a974-9e149126039e",["D",1749828832208],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?\";\nimport { Home } from \"./components/Home.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[186,258],[186],{"_104":266,"_95":267,"_154":268,"_156":-5,"_157":139,"_158":269,"_160":22,"_106":270,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":271,"_98":282},"02c30d2c-3804-11f0-8e9e-9e149126039e","reference","015a29ac-3804-11f0-a5b3-9e149126039e",47,["D",1748025032578],[272],{"_104":273,"_95":274,"_154":275,"_156":268,"_157":139,"_158":276,"_160":22,"_106":277,"_100":278,"_164":252,"_166":279,"_167":22,"_168":-5,"_169":280,"_98":281},"1d658a92-3804-11f0-9411-9e149126039e","pipedream-connect.md","03c89f70-3804-11f0-addf-9e149126039e",51,["D",1748025077260],3,"# Pipedream Connect Implementation Guide\n\n## Overview\n\nPipedream Connect allows you to embed OAuth and API key authentication flows into your application, enabling your users to connect their accounts from thousands of integrated apps.\n\n## Core Concepts\n\n### 1. External User ID\n- A unique identifier from YOUR system that identifies each user\n- Used to associate connected accounts with your users\n- Must be consistent across all API calls for the same user\n\n### 2. Connect Token\n- Short-lived, one-time use token for secure authentication\n- Generated server-side using your Pipedream credentials\n- Valid for a limited time (check `expires_at`)\n\n### 3. Apps and Components\n- **Apps**: Services like Google Sheets, Slack, etc. (identified by `name_slug`)\n- **Components**: Pre-built actions (e.g., \"add row to sheet\") and triggers\n- Components are identified by keys like `google_sheets-add-single-row`\n\n## Backend Implementation\n\n### Environment Variables Required\n```\nPIPEDREAM_CLIENT_ID=your_client_id\nPIPEDREAM_CLIENT_SECRET=your_client_secret\nPIPEDREAM_PROJECT_ID=your_project_id\nPIPEDREAM_PROJECT_ENVIRONMENT=development # or production\nPIPEDREAM_API_HOST=api.pipedream.com # optional\n```\n\n### Initialize Backend Client\n```ts\nimport { createBackendClient } from \"@pipedream/sdk/server\"\n\nconst backendClient = createBackendClient({\n projectId: process.env.PIPEDREAM_PROJECT_ID,\n environment: process.env.PIPEDREAM_PROJECT_ENVIRONMENT,\n credentials: {\n clientId: process.env.PIPEDREAM_CLIENT_ID,\n clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,\n },\n apiHost: process.env.PIPEDREAM_API_HOST, // optional\n})\n```\n\n### Core Backend Operations\n\n#### 1. Generate Connect Token\n```ts\nconst tokenResponse = await backendClient.createConnectToken({\n external_user_id: \"user-123\", // Your user's ID\n allowed_origins: [\"https://yourdomain.com\"], // For CORS (optional)\n webhook_uri: \"https://yourdomain.com/webhooks\", // For triggers (optional)\n})\n\n// Returns:\n{\n token: \"connect_token_xxx\",\n connect_link_url: \"https://connect.pipedream.com/connect?token=xxx\",\n expires_at: \"2024-01-01T00:00:00Z\"\n}\n```\n\n#### 2. List User's Connected Accounts\n```ts\nconst accounts = await backendClient.getAccounts({\n external_user_id: \"user-123\",\n include_credentials: false, // Set true to get OAuth tokens (server-side only!)\n})\n\n// Returns array of connected accounts with app info\n```\n\n#### 3. Get Specific Account Details\n```ts\nconst account = await backendClient.getAccountById(\"account_id\", {\n include_credentials: true // Gets OAuth tokens for making API calls\n})\n```\n\n#### 4. Get App Information\n```ts\nconst appInfo = await backendClient.app(\"google_sheets\")\n// Returns app details including auth_type, name, etc.\n```\n\n#### 5. Execute Actions\n```ts\nconst result = await backendClient.actionRun({\n userId: \"user-123\",\n actionId: \"google_sheets-add-single-row\",\n configuredProps: {\n drive: \"drive_id\",\n spreadsheet: \"spreadsheet_id\",\n worksheet: \"worksheet_id\",\n row: { \"Column1\": \"Value1\", \"Column2\": \"Value2\" }\n },\n dynamicPropsId: \"optional_id\" // For dynamic form fields\n})\n```\n\n#### 6. Deploy Triggers\n```ts\nconst trigger = await backendClient.deployTrigger({\n userId: \"user-123\",\n triggerId: \"slack-new-message\",\n configuredProps: {\n channel: \"channel_id\"\n },\n webhookUrl: \"https://yourdomain.com/webhook/receive\",\n dynamicPropsId: \"optional_id\"\n})\n```\n\n## Frontend Implementation\n\n### Two Connection Methods\n\n#### Method 1: Connect Link (Simplest)\nNo JavaScript required - just redirect users to the connect URL:\n\n```ts\n// Server-side: Generate token and get connect_link_url\nconst { connect_link_url } = await backendClient.createConnectToken({\n external_user_id: \"user-123\"\n})\n\n// Add app parameter to the URL\nconst fullConnectUrl = `${connect_link_url}&app=google_sheets`\n\n// For custom OAuth clients, add:\nconst urlWithOAuth = `${fullConnectUrl}&oauthAppId=oa_xxxxx`\n\n// Redirect user to this URL\n```\n\n#### Method 2: Embedded SDK (JavaScript)\n```ts\nimport { createFrontendClient } from \"@pipedream/sdk/browser\"\n\n// Initialize client\nconst frontendClient = createFrontendClient({\n environment: \"development\", // or \"production\"\n externalUserId: \"user-123\",\n tokenCallback: async (opts) => {\n // Fetch token from your backend\n const response = await fetch(\"/api/pipedream/token\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ \n externalUserId: opts.externalUserId \n })\n })\n return response.json()\n }\n})\n\n// Connect an account (opens iframe)\nfrontendClient.connectAccount({\n app: \"google_sheets\",\n token: \"connect_token_xxx\", // From your backend\n oauthAppId: \"oa_xxxxx\", // Optional: custom OAuth client\n onSuccess: ({ id }) => {\n console.log(\"Account connected:\", id)\n // Save account ID, refresh account list, etc.\n }\n})\n```\n\n### Using React Components\n```ts\nimport { \n FrontendClientProvider, \n ComponentForm,\n SelectApp,\n SelectComponent \n} from \"@pipedream/connect-react\"\n\n// Wrap your app\n\n {/* Select an app */}\n setSelectedApp(app)}\n />\n \n {/* Select a component (action/trigger) */}\n setSelectedComponent(comp)}\n />\n \n {/* Render dynamic form for component */}\n {\n // Execute the action\n const result = await frontendClient.actionRun({\n userId: \"user-123\",\n actionId: selectedComponent.key,\n configuredProps\n })\n }}\n />\n\n```\n\n## Making API Requests with Connected Accounts\n\nOnce users have connected their accounts, you can make API requests on their behalf:\n\n```ts\n// 1. Get account with credentials (server-side only!)\nconst account = await backendClient.getAccountById(\"account_id\", {\n include_credentials: true\n})\n\n// 2. For OAuth apps:\nconst headers = {\n 'Authorization': `Bearer ${account.credentials.oauth_access_token}`\n}\n\n// 3. For Basic Auth apps:\nconst username = account.credentials.username // Field names vary by app\nconst password = account.credentials.password\nconst basicAuth = Buffer.from(`${username}:${password}`).toString('base64')\nconst headers = {\n 'Authorization': `Basic ${basicAuth}`\n}\n\n// 4. Make your API request\nconst response = await fetch(\"https://api.example.com/endpoint\", {\n headers\n})\n```\n\n## Webhook Handling for Triggers\n\nWhen deploying triggers, Pipedream will send events to your webhook URL:\n\n```ts\n// Your webhook endpoint\napp.post('/webhooks/pipedream', (req, res) => {\n const event = req.body\n \n // Event structure:\n {\n trigger_id: \"trigger_deployment_id\",\n event: {\n // Event-specific data\n },\n metadata: {\n // Additional context\n }\n }\n \n // Process the event\n processEvent(event)\n \n res.status(200).send('OK')\n})\n```\n\n## Component Properties\n\nComponents have configurable properties that can be:\n- Required or optional\n- Different types: string, integer, boolean, array, object, app (for account selection)\n- Dynamic: Some props depend on values of other props\n\nExample component configuration:\n```ts\n{\n drive: \"drive_id\", // App account reference\n spreadsheet: \"sheet_id\", // Dynamic: loaded based on drive\n worksheet: \"worksheet_id\", // Dynamic: loaded based on spreadsheet\n row: { // Object with column values\n \"Name\": \"John Doe\",\n \"Email\": \"john@example.com\"\n }\n}\n```\n\n## Testing Workflow\n\n1. Generate external user ID (or use existing user ID)\n2. Create connect token server-side\n3. User connects account via Connect Link or embedded SDK\n4. List user's connected accounts\n5. Select a component (action/trigger)\n6. Configure component properties\n7. Execute action or deploy trigger\n8. Handle results/events\n\nThis implementation pattern allows you to integrate thousands of apps into your platform while Pipedream handles the authentication, API complexity, and infrastructure.",[],[267,274],[267],{"_104":284,"_95":99,"_154":285,"_156":-5,"_157":139,"_158":249,"_160":22,"_106":286,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":287,"_98":315},"fa61a5b2-3817-11f0-972c-9e149126039e","5f8258b8-a2cc-4934-8fc8-2b9914bda102",["D",1748033608415],[288,297,307],{"_104":289,"_95":290,"_154":291,"_156":285,"_157":139,"_158":292,"_160":22,"_106":293,"_100":163,"_164":178,"_166":294,"_167":22,"_168":-5,"_169":295,"_98":296},"108823a8-4186-11f0-b213-76b3cceeab13","discord-webhook.tsx","fa619e82-3817-11f0-972c-9e149126039e",62,["D",1749070450717],"export default async function(req: Request): Promise {\n const text = await req.text();\n console.log(text);\n return Response.json({ ok: true });\n}",[],[99,290],{"_104":298,"_95":299,"_154":300,"_156":285,"_157":139,"_158":301,"_160":22,"_106":302,"_100":303,"_164":204,"_166":304,"_167":22,"_168":-5,"_169":305,"_98":306},"b8abc7b8-4174-11f0-aeac-76b3cceeab13","discord.tsx","fa61a008-3817-11f0-972c-9e149126039e",61,["D",1749063001867],9,"import { createBackendClient } from \"npm:@pipedream/sdk/server\";\n\nconst authProvisionId = \"apn_pxhxlwV\"; // val town discord server app.id found in https://pipedream.com/@stevekrouse2/projects/proj_nasVajr/connect/users\nconst externalUserId = \"bb89e6f6-754a-445c-8647-65845a173c3e\"; // @valdottown val town account id\n\nconst pd = createBackendClient({\n environment: Deno.env.get(\"PIPEDREAM_PROJECT_ENVIRONMENT\"),\n credentials: {\n clientId: Deno.env.get(\"PIPEDREAM_CLIENT_ID\"),\n clientSecret: Deno.env.get(\"PIPEDREAM_CLIENT_SECRET\"),\n },\n projectId: Deno.env.get(\"PIPEDREAM_PROJECT_ID\"),\n});\n\nconst resp = await pd.deployTrigger({\n externalUserId,\n triggerId: \"discord-reaction-added\",\n configuredProps: {\n discord: {\n authProvisionId,\n // channelId: \"1063180396931592192\", // val town bugs discord channel id\n },\n // projectId: Deno.env.get(\"PIPEDREAM_PROJECT_ID\"),\n },\n webhookUrl: \"https://valdottown--320389c0381511f082029e149126039e.web.val.run\",\n});\n\nconsole.log(resp);",[],[99,299],{"_104":308,"_95":309,"_154":310,"_156":285,"_157":139,"_158":249,"_160":22,"_106":311,"_100":32,"_164":204,"_166":312,"_167":22,"_168":-5,"_169":313,"_98":314},"fa61a148-3817-11f0-972c-9e149126039e","google-sheets.tsx","fa61a1c0-3817-11f0-972c-9e149126039e",["D",1748033608415],"import { createBackendClient } from \"npm:@pipedream/sdk/server\";\n\nconst account_id = \"apn_yghMOEY\"; // steve google sheets\nconst external_user_id = \"6092027c-c397-4bd1-b8d4-ee93ab0fbf33\"; // steve google sheets\nconst sheet_id = \"17Ai5I7FOTpdVownUNocc7ESgR9eQdyP6k3wTzqlrPbU\";\nconst range = \"A1:C1\"; // what you want to read\n\nconst pd = createBackendClient({\n environment: Deno.env.get(\"PIPEDREAM_PROJECT_ENVIRONMENT\"),\n credentials: {\n clientId: Deno.env.get(\"PIPEDREAM_CLIENT_ID\"),\n clientSecret: Deno.env.get(\"PIPEDREAM_CLIENT_SECRET\"),\n },\n projectId: Deno.env.get(\"PIPEDREAM_PROJECT_ID\"),\n});\n\nconst resp = await pd.makeProxyRequest(\n {\n searchParams: {\n account_id,\n external_user_id,\n },\n },\n {\n url: `https://sheets.googleapis.com/v4/spreadsheets/${sheet_id}/values/${\n encodeURIComponent(range)\n }?majorDimension=ROWS`,\n options: {\n method: \"GET\",\n },\n },\n);\n\n// Parse and return the data you need\nconsole.log(resp);",[],[99,309],[99],{"_104":317,"_95":318,"_154":319,"_156":-5,"_157":139,"_158":249,"_160":22,"_106":320,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":321,"_98":330},"fa61a74c-3817-11f0-972c-9e149126039e","shared","9441329a-1a83-4878-853a-9a3043896460",["D",1748033608415],[322],{"_104":323,"_95":324,"_154":325,"_156":319,"_157":139,"_158":249,"_160":22,"_106":326,"_100":32,"_164":204,"_166":327,"_167":22,"_168":-5,"_169":328,"_98":329},"fa61a2ba-3817-11f0-972c-9e149126039e","types.ts","fa61a332-3817-11f0-972c-9e149126039e",["D",1748033608415],"export interface User {\n id: string;\n username: string;\n email?: string;\n}\n\nexport interface Account {\n id: string;\n app: {\n name_slug: string;\n name: string;\n description?: string;\n auth_type: string;\n };\n name?: string;\n created_at: string;\n}\n\nexport interface PipedreamTokenData {\n token: string;\n expires_at: string;\n connect_link_url: string;\n}\n\nexport interface InitialData {\n user: User | null;\n isAuthenticated: boolean;\n pipedream?: PipedreamTokenData;\n}",[],[318,324],[318],{"_104":332,"_95":333,"_154":334,"_156":-5,"_157":139,"_158":101,"_160":22,"_106":335,"_100":159,"_164":252,"_166":336,"_167":22,"_168":-5,"_169":337,"_98":338},"11f68420-4873-11f0-9f17-76b3cceeab13","README.md","fa619964-3817-11f0-972c-9e149126039e",["D",1749831950817],"# Val Town + Pipedream Connect Integration\n\nThis application allows Val Town users to authenticate and connect to external\nservices via Pipedream Connect.\n\n## Authentication\n\nThis app uses Val Town API tokens for authentication. (Eventually, we'll swap\nthis for Val Town OAuth.)\n\nTo login, create and supply a Val Town API token with the `user:read` scope only. We store it in cookies.\n\nTo run actions on connected apps, you'll also need to supply a Val Town API\ntoken. If you're doing this from within Val Town, you can use\n`process.env.valtown`, which this app's client libraries will use by default.\n\n## Pipedream Actions\n\nFor example, send a Slack or Discord message, create a Linear ticket, or update a row in Google Sheets.\n\n1. Select the app (Slack, Discord, Linear, Google, Sheets, 2k+ others)\n2. Select \"Action\" type\n3. Select which action (\"Send a message\", \"Make a ticket\", etc)\n4. Connfigure the action's parameters in the UI\n5. Test-run the action in the UI\n6. Copy the code provided to trigger that action from any Val Town server-side code\n\n## Pipedream Triggers\n\n1.\n\n- Uses Val Town user ID as Pipedream external user ID\n- Official Pipedream React components for app selection and workflow building\n- TODO: Build authenticated proxy\n- TODO: let users copy some code that will run an action\n- TODO: List all triggers and where their webhook points to\n - TODO: Let triggers be updated\n- TODO: Let connected accounts be deleted\n\n3. **Security Features**\n - HTTP-only, secure cookies for API key storage\n - Server-side API key validation\n - Protected API endpoints requiring authentication\n\n## Project Structure\n\n```\n├── backend/\n│ ├── main.tsx # Main Hono server with auth & API routes\n│ └── scratch.tsx # Development/testing file\n├── frontend/\n│ ├── components/\n│ │ ├── Home.tsx # Main container component\n│ │ ├── LoginForm.tsx # Authentication form\n│ │ ├── Dashboard.tsx # Authenticated user dashboard with Pipedream components\n│ │ ├── AccountsList.tsx # Connected accounts display\n│ │ └── ErrorMessage.tsx # Reusable error display\n│ ├── index.html # HTML template with styling\n│ └── index.tsx # React app entry point\n├── shared/\n│ └── types.ts # Shared TypeScript interfaces\n├── reference/\n│ └── pipedream-connect.md # Pipedream Connect documentation\n└── README.md # This file\n```\n\n## API Endpoints\n\n### Authentication\n\n- `POST /api/login` - Authenticate with Val Town API key\n- `POST /api/logout` - Clear authentication session\n- `GET /api/user` - Get current authenticated user\n\n### Pipedream Integration\n\n- `GET /api/pipedream/token` - Get connect token for authenticated user\n- `GET /api/pipedream/accounts` - List user's connected accounts\n- `POST /api/pipedream/action` - Execute a Pipedream action\n- `POST /api/pipedream/trigger` - Execute a Pipedream trigger\n\n## Environment Variables Required\n\n```\nPIPEDREAM_CLIENT_ID=your_client_id\nPIPEDREAM_CLIENT_SECRET=your_client_secret\nPIPEDREAM_PROJECT_ID=your_project_id\nPIPEDREAM_PROJECT_ENVIRONMENT=development\n```\n\n## Usage Flow\n\n1. **Login**: User enters their Val Town API key\n2. **Validation**: Server validates key with Val Town API\n3. **Session**: API key stored in secure cookie\n4. **App Selection**: User chooses from available apps using Pipedream's\n SelectApp component\n5. **Component Type Selection**: User selects between Actions or Triggers\n6. **Component Configuration**: User selects and configures actions/triggers\n using Pipedream's ComponentForm\n7. **Execution**: Actions/triggers are executed directly through Pipedream SDK\n8. **Management**: User can view and manage connected accounts\n\n## Technical Implementation\n\n### Component Architecture\n\nThe frontend is now organized into focused, reusable components:\n\n- **Home.tsx**: Main container managing authentication state\n- **LoginForm.tsx**: Handles Val Town API key authentication\n- **Dashboard.tsx**: Main authenticated user interface with Pipedream React\n components\n- **AccountsList.tsx**: Display of connected accounts\n- **ErrorMessage.tsx**: Reusable error display with dismiss functionality\n\n### Authentication Flow\n\n1. User submits Val Town API key via form\n2. Server validates key using `@valtown/sdk`\n3. On success, API key stored in HTTP-only cookie\n4. User's Val Town ID used as Pipedream external user ID\n\n### Pipedream Integration\n\n1. Server creates connect tokens using user's Val Town ID\n2. Frontend uses official Pipedream React components for app selection and\n workflow building\n3. Users can select between Actions and Triggers via dropdown\n4. Connected accounts fetched and displayed\n5. Actions and triggers executed directly through Pipedream SDK with dynamic\n form generation\n\n### Security Considerations\n\n- API keys never exposed to client-side JavaScript\n- Secure, HTTP-only cookies with proper flags\n- Server-side validation for all protected endpoints\n- CORS handled automatically by Val Town platform\n\n## Next Steps (Future Parts)\n\n- **Part 2**: Action and trigger configuration\n- **Part 3**: Workflow builder interface\n- **Part 4**: Webhook handling and event processing\n- **Part 5**: Advanced features and monitoring\n\n## Development\n\nThe app is built for Val Town's serverless environment using:\n\n- **Backend**: Hono framework with TypeScript\n- **Frontend**: React 18 with TypeScript\n- **Authentication**: Val Town SDK + secure cookies\n- **Integration**: Pipedream Connect SDK\n\nTo test the authentication flow, you'll need a valid Val Town API key from:\nhttps://www.val.town/settings/api",[],[333],"files",[151,171,184,191,198,208,218,226,235,245,256,265,272,283,288,297,307,316,322,331],"counts",{"_343":32,"_344":278,"_345":32,"_346":240},"pulls","branches","forks","envVars","contents",[349,352,355],{"_104":289,"_95":290,"_154":291,"_156":285,"_157":139,"_158":292,"_160":22,"_106":350,"_100":163,"_164":178,"_166":294,"_167":22,"_168":-5,"_98":351},["D",1749070450717],[99,290],{"_104":298,"_95":299,"_154":300,"_156":285,"_157":139,"_158":301,"_160":22,"_106":353,"_100":303,"_164":204,"_166":304,"_167":22,"_168":-5,"_98":354},["D",1749063001867],[99,299],{"_104":308,"_95":309,"_154":310,"_156":285,"_157":139,"_158":249,"_160":22,"_106":356,"_100":32,"_164":204,"_166":312,"_167":22,"_168":-5,"_98":357},["D",1748033608415],[99,309],{"_104":284,"_95":99,"_154":285,"_156":-5,"_157":139,"_158":249,"_160":22,"_106":359,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":360},["D",1748033608415],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":369,"_149":374,"_339":435,"_252":436,"_347":438,"_445":-5,"_446":22,"_447":-5,"_448":-5,"_449":-5,"_450":451},{"_104":105,"_95":96,"_106":370,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":371,"_133":372,"_136":373,"_148":22},["D",1747682234550],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[375,381,408,414,426,432],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_106":162,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":376,"_98":380},[377],{"_104":172,"_95":173,"_154":174,"_156":155,"_157":139,"_158":175,"_160":22,"_106":176,"_100":177,"_164":178,"_166":179,"_167":22,"_168":180,"_169":378,"_98":379},[],[153,173],[153],{"_104":185,"_95":186,"_154":187,"_156":-5,"_157":139,"_158":188,"_160":161,"_106":189,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":382,"_98":407},[383,401,404],{"_104":192,"_95":193,"_154":194,"_156":187,"_157":139,"_158":195,"_160":161,"_106":196,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":384,"_98":400},[385,388,391,394,397],{"_104":199,"_95":200,"_154":201,"_156":194,"_157":139,"_158":202,"_160":22,"_106":203,"_100":188,"_164":204,"_166":205,"_167":22,"_168":-5,"_169":386,"_98":387},[],[186,193,200],{"_104":209,"_95":210,"_154":211,"_156":194,"_157":139,"_158":212,"_160":22,"_106":213,"_100":214,"_164":204,"_166":215,"_167":22,"_168":-5,"_169":389,"_98":390},[],[186,193,210],{"_104":219,"_95":220,"_154":221,"_156":194,"_157":139,"_158":202,"_160":22,"_106":222,"_100":188,"_164":204,"_166":223,"_167":22,"_168":-5,"_169":392,"_98":393},[],[186,193,220],{"_104":227,"_95":228,"_154":229,"_156":194,"_157":139,"_158":202,"_160":22,"_106":230,"_100":231,"_164":204,"_166":232,"_167":22,"_168":-5,"_169":395,"_98":396},[],[186,193,228],{"_104":236,"_95":237,"_154":238,"_156":194,"_157":139,"_158":202,"_160":22,"_106":239,"_100":240,"_164":204,"_166":241,"_167":22,"_168":-5,"_169":398,"_98":399},[],[186,193,237],[186,193],{"_104":246,"_95":247,"_154":248,"_156":187,"_157":139,"_158":249,"_160":22,"_106":250,"_100":251,"_164":252,"_166":253,"_167":22,"_168":-5,"_169":402,"_98":403},[],[186,247],{"_104":257,"_95":258,"_154":259,"_156":187,"_157":139,"_158":202,"_160":22,"_106":260,"_100":159,"_164":204,"_166":261,"_167":22,"_168":-5,"_169":405,"_98":406},[],[186,258],[186],{"_104":266,"_95":267,"_154":268,"_156":-5,"_157":139,"_158":269,"_160":22,"_106":270,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":409,"_98":413},[410],{"_104":273,"_95":274,"_154":275,"_156":268,"_157":139,"_158":276,"_160":22,"_106":277,"_100":278,"_164":252,"_166":279,"_167":22,"_168":-5,"_169":411,"_98":412},[],[267,274],[267],{"_104":284,"_95":99,"_154":285,"_156":-5,"_157":139,"_158":249,"_160":22,"_106":286,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":415,"_98":425},[416,419,422],{"_104":289,"_95":290,"_154":291,"_156":285,"_157":139,"_158":292,"_160":22,"_106":293,"_100":163,"_164":178,"_166":294,"_167":22,"_168":-5,"_169":417,"_98":418},[],[99,290],{"_104":298,"_95":299,"_154":300,"_156":285,"_157":139,"_158":301,"_160":22,"_106":302,"_100":303,"_164":204,"_166":304,"_167":22,"_168":-5,"_169":420,"_98":421},[],[99,299],{"_104":308,"_95":309,"_154":310,"_156":285,"_157":139,"_158":249,"_160":22,"_106":311,"_100":32,"_164":204,"_166":312,"_167":22,"_168":-5,"_169":423,"_98":424},[],[99,309],[99],{"_104":317,"_95":318,"_154":319,"_156":-5,"_157":139,"_158":249,"_160":22,"_106":320,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":427,"_98":431},[428],{"_104":323,"_95":324,"_154":325,"_156":319,"_157":139,"_158":249,"_160":22,"_106":326,"_100":32,"_164":204,"_166":327,"_167":22,"_168":-5,"_169":429,"_98":430},[],[318,324],[318],{"_104":332,"_95":333,"_154":334,"_156":-5,"_157":139,"_158":101,"_160":22,"_106":335,"_100":159,"_164":252,"_166":336,"_167":22,"_168":-5,"_169":433,"_98":434},[],[333],[375,377,381,383,385,388,391,394,397,401,404,408,410,414,416,419,422,426,428,432],{"_104":284,"_95":99,"_154":285,"_156":-5,"_157":139,"_158":249,"_160":22,"_106":359,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":437},[99],[439,441,443],{"_104":289,"_95":290,"_154":291,"_156":285,"_157":139,"_158":292,"_160":22,"_106":350,"_100":163,"_164":178,"_166":294,"_167":22,"_168":-5,"_98":440},[99,290],{"_104":298,"_95":299,"_154":300,"_156":285,"_157":139,"_158":301,"_160":22,"_106":353,"_100":303,"_164":204,"_166":304,"_167":22,"_168":-5,"_98":442},[99,299],{"_104":308,"_95":309,"_154":310,"_156":285,"_157":139,"_158":249,"_160":22,"_106":356,"_100":32,"_164":204,"_166":312,"_167":22,"_168":-5,"_98":444},[99,309],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]