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 \n

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

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

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

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

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

\n );\n}",[],[195,201,207],{"_102":214,"_95":215,"_151":216,"_153":202,"_154":136,"_155":135,"_156":157,"_104":217,"_99":32,"_159":171,"_161":218,"_162":22,"_163":-5,"_164":219,"_98":220},"c7b0f362-536e-11f0-a449-f69ea79377d9","Dashboard.tsx","fe7eef6b-50cf-4b77-aa82-d2f13feb2c77",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport {\n ComponentForm\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 { AccountsList } from \"./AccountsList.tsx\";\n\nexport function Dashboard(\n { user, pipedreamToken, onLogout, onError },\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 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}",[],[195,201,215],{"_102":222,"_95":223,"_151":224,"_153":202,"_154":136,"_155":135,"_156":157,"_104":225,"_99":32,"_159":171,"_161":226,"_162":22,"_163":-5,"_164":227,"_98":228},"c7b1051e-536e-11f0-a449-f69ea79377d9","ErrorMessage.tsx","7343ac5c-9a95-4303-9f4f-5f37fdd3e111",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ErrorMessage({ error, onDismiss }) {\n if (!error) return null;\n\n return (\n \n {error}\n {onDismiss && (\n \n ×\n \n )}\n \n );\n}",[],[195,201,223],{"_102":230,"_95":231,"_151":232,"_153":202,"_154":136,"_155":135,"_156":157,"_104":233,"_99":32,"_159":171,"_161":234,"_162":22,"_163":-5,"_164":235,"_98":236},"c7b10744-536e-11f0-a449-f69ea79377d9","Home.tsx","3f7b5ff5-6700-4c9e-ba4e-307389117eb4",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.tsx\";\nimport { LoginForm } from \"./LoginForm.tsx\";\n\nexport function Home({ user, pipedreamToken }) {\n const [error, setError] = useState(\"\");\n\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.href = \"/\";\n };\n\n const handleError = (errorMessage: string) => {\n setError(errorMessage);\n };\n\n const dismissError = () => {\n setError(\"\");\n };\n\n if (!user) {\n return (\n <>\n \n console.log(x)} onError={handleError} />\n \n );\n }\n\n return (\n <>\n \n \n \n );\n}",[],[195,201,231],{"_102":238,"_95":239,"_151":240,"_153":202,"_154":136,"_155":135,"_156":157,"_104":241,"_99":32,"_159":171,"_161":242,"_162":22,"_163":-5,"_164":243,"_98":244},"c7b108f2-536e-11f0-a449-f69ea79377d9","LoginForm.tsx","1ce7334f-3c08-4cca-a088-25d7b07f217e",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\n\nexport function LoginForm({ onLogin, onError }) {\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(\"/auth/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}",[],[195,201,239],[195,201],{"_102":247,"_95":248,"_151":249,"_153":196,"_154":136,"_155":135,"_156":157,"_104":250,"_99":32,"_159":251,"_161":252,"_162":22,"_163":-5,"_164":253,"_98":254},"c7b10f14-536e-11f0-a449-f69ea79377d9","index.html","fd1f1e89-35ed-4305-b317-bd0e575f3635",["D",1751039570946],"file","\n\n \n \n \n Val Town + Pipedream Connect\n \n \n

\n \n \n \n",[],[195,248],{"_102":256,"_95":257,"_151":258,"_153":196,"_154":136,"_155":135,"_156":157,"_104":259,"_99":32,"_159":171,"_161":260,"_162":22,"_163":-5,"_164":261,"_98":262},"c7b1119e-536e-11f0-a449-f69ea79377d9","index.tsx","e10f28ef-7e0b-4a99-a85a-dda1d027aa64",["D",1751039570946],"/** @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();",[],[195,257],[195],{"_102":265,"_95":266,"_151":267,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":268,"_99":32,"_159":251,"_161":269,"_162":22,"_163":-5,"_164":270,"_98":271},"c7b114b4-536e-11f0-a449-f69ea79377d9","README.md","b33ab990-9aac-440b-a617-bba9407d7469",["D",1751039570946],"# Val Town + Pipedream Connect Integration\n\nThis application allows Val Town users to authenticate and connect to external services via Pipedream Connect.\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\n5. Test-run the action\n6. Copy the code provided to trigger that action from any Val Town server-side code\n - TODO: build proxy\n - TODO: write sdk\n - TODO: provide copyable code\n - Maybe TODO: create a database of actions that were performed for debugging?\n\n## Pipedream Triggers\n\n- TODO: list existing triggers\n- TODO: list trigger & endpoint\n- TODO: Let triggers be updated\n- TODO: Let trigger be deleted\n- TODO: Help users connect trigger to val more directly than copying endpoint (via val town sdk)\n\n## Connected Apps\n\n- TODO: put these on their own page\n\n## Custom OAuth clients\n\n- Docs: https://pipedream.com/docs/connect/managed-auth/oauth-clients/#using-a-custom-oauth-client\n- I made one for discord, but am struggling to figure out where to supply the `oauthAppId`. I asked Pipedream.\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.",[],[266],"files",[148,166,175,184,193,199,205,213,221,229,237,246,255,264],"counts",{"_276":32,"_277":135,"_278":32,"_279":280},"pulls","branches","forks","envVars",{"_281":282,"_283":282},"count",4,"emptyCount","contents",[286,289,292],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":287,"_99":32,"_159":160,"_161":-5,"_162":22,"_163":-5,"_98":288},["D",1751039570946],[150],{"_102":194,"_95":195,"_151":196,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":290,"_99":32,"_159":160,"_161":-5,"_162":22,"_163":-5,"_98":291},["D",1751039570946],[195],{"_102":265,"_95":266,"_151":267,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":293,"_99":32,"_159":251,"_161":269,"_162":22,"_163":-5,"_98":294},["D",1751039570946],[266],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":303,"_279":308},{"_102":103,"_95":96,"_104":304,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":305,"_130":306,"_133":307,"_145":22},["D",1751039570946],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[309,315,318,321],{"_310":311,"_104":312,"_313":-5,"_110":72,"_314":157},"key","PIPEDREAM_CLIENT_ID",["D",1751039570946],"updatedAt","isEmpty",{"_310":316,"_104":317,"_313":-5,"_110":72,"_314":157},"PIPEDREAM_CLIENT_SECRET",["D",1751039570946],{"_310":319,"_104":320,"_313":-5,"_110":72,"_314":157},"PIPEDREAM_PROJECT_ENVIRONMENT",["D",1751039570946],{"_310":322,"_104":323,"_313":-5,"_110":72,"_314":157},"PIPEDREAM_PROJECT_ID",["D",1751039570946],"actionData","errors"]

Key	Description
PIPEDREAM_CLIENT_ID
PIPEDREAM_CLIENT_SECRET
PIPEDREAM_PROJECT_ENVIRONMENT
PIPEDREAM_PROJECT_ID

tlefebvre

pipedream-connect

Environment variables