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}",[],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":101,"_160":22,"_106":233,"_100":234,"_164":178,"_166":235,"_167":22,"_168":-5,"_169":236,"_98":237},"8bbca536-4883-11f0-9dfb-76b3cceeab13","Dashboard.tsx","fa617f4c-3817-11f0-972c-9e149126039e",["D",1749839027069],42,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport {\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 { 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: {\n ...ctx.configuredProps,\n include_sent_via_pipedream_flag: false,\n },\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, include_sent_via_pipedream_flag: false},\n\n                  }, null, 2)}\n                 )\n

\n )}\n \n \n\n \n \n );\n}",[],[207,214,231],{"_104":239,"_95":240,"_154":241,"_156":215,"_157":139,"_158":242,"_160":22,"_106":243,"_100":244,"_164":178,"_166":245,"_167":22,"_168":-5,"_169":246,"_98":247},"16374962-487c-11f0-9910-76b3cceeab13","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",141,["D",1749835823421],4,"/** @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}",[],[207,214,240],{"_104":249,"_95":250,"_154":251,"_156":215,"_157":139,"_158":252,"_160":22,"_106":253,"_100":254,"_164":178,"_166":255,"_167":22,"_168":-5,"_169":256,"_98":257},"be031d5e-487e-11f0-b4e3-76b3cceeab13","Home.tsx","4646f64c-34e6-11f0-ad7f-9e149126039e",192,["D",1749836963933],23,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { LoginForm } from \"./LoginForm.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.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}",[],[207,214,250],{"_104":259,"_95":260,"_154":261,"_156":215,"_157":139,"_158":262,"_160":22,"_106":263,"_100":264,"_164":178,"_166":265,"_167":22,"_168":-5,"_169":266,"_98":267},"134fed94-4881-11f0-b890-76b3cceeab13","LoginForm.tsx","fa619216-3817-11f0-972c-9e149126039e",202,["D",1749837966038],12,"/** @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(\"\");\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 if (response.ok) window.location.href = \"/\";\n } catch (err) {\n console.error(err);\n onError(err.message);\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}",[],[207,214,260],[207,214],{"_104":270,"_95":271,"_154":272,"_156":208,"_157":139,"_158":273,"_160":22,"_106":274,"_100":275,"_164":276,"_166":277,"_167":22,"_168":-5,"_169":278,"_98":279},"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",[],[207,271],{"_104":281,"_95":282,"_154":283,"_156":208,"_157":139,"_158":284,"_160":22,"_106":285,"_100":216,"_164":178,"_166":286,"_167":22,"_168":-5,"_169":287,"_98":288},"5d544fc0-4881-11f0-902b-76b3cceeab13","index.tsx","8855cee6-34e6-11f0-a974-9e149126039e",207,["D",1749838090218],"/** @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(\n ,\n);",[],[207,282],[207],{"_104":291,"_95":292,"_154":293,"_156":-5,"_157":139,"_158":294,"_160":22,"_106":295,"_100":296,"_164":276,"_166":297,"_167":22,"_168":-5,"_169":298,"_98":299},"8ce1da98-487a-11f0-acd2-76b3cceeab13","README.md","fa619964-3817-11f0-972c-9e149126039e",128,["D",1749835163518],14,"# 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.",[],[292],"files",[151,171,182,194,205,212,219,229,238,248,258,269,280,290],"counts",{"_304":32,"_305":225,"_306":32,"_307":244},"pulls","branches","forks","envVars","contents",[310,313,316,319,322],{"_104":220,"_95":221,"_154":222,"_156":215,"_157":139,"_158":223,"_160":22,"_106":311,"_100":225,"_164":178,"_166":226,"_167":22,"_168":-5,"_98":312},["D",1749835797413],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":101,"_160":22,"_106":314,"_100":234,"_164":178,"_166":235,"_167":22,"_168":-5,"_98":315},["D",1749839027069],[207,214,231],{"_104":239,"_95":240,"_154":241,"_156":215,"_157":139,"_158":242,"_160":22,"_106":317,"_100":244,"_164":178,"_166":245,"_167":22,"_168":-5,"_98":318},["D",1749835823421],[207,214,240],{"_104":249,"_95":250,"_154":251,"_156":215,"_157":139,"_158":252,"_160":22,"_106":320,"_100":254,"_164":178,"_166":255,"_167":22,"_168":-5,"_98":321},["D",1749836963933],[207,214,250],{"_104":259,"_95":260,"_154":261,"_156":215,"_157":139,"_158":262,"_160":22,"_106":323,"_100":264,"_164":178,"_166":265,"_167":22,"_168":-5,"_98":324},["D",1749837966038],[207,214,260],{"_104":213,"_95":214,"_154":215,"_156":208,"_157":139,"_158":216,"_160":161,"_106":326,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":327},["D",1747682411203],[207,214],"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":336,"_149":341,"_300":384,"_276":385,"_308":387,"_398":-5,"_399":22,"_400":-5,"_401":-5,"_402":-5,"_403":404},{"_104":105,"_95":96,"_106":337,"_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":338,"_133":339,"_136":340,"_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},[342,354,381],{"_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":343,"_98":353},[344,347,350],{"_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":-5,"_169":345,"_98":346},[],[153,173],{"_104":183,"_95":184,"_154":185,"_156":155,"_157":139,"_158":186,"_160":22,"_106":187,"_100":188,"_164":189,"_166":190,"_167":22,"_168":191,"_169":348,"_98":349},[],[153,184],{"_104":195,"_95":196,"_154":197,"_156":155,"_157":139,"_158":198,"_160":22,"_106":199,"_100":200,"_164":178,"_166":201,"_167":22,"_168":-5,"_169":351,"_98":352},[],[153,196],[153],{"_104":206,"_95":207,"_154":208,"_156":-5,"_157":139,"_158":209,"_160":161,"_106":210,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":355,"_98":380},[356,374,377],{"_104":213,"_95":214,"_154":215,"_156":208,"_157":139,"_158":216,"_160":161,"_106":217,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":357,"_98":373},[358,361,364,367,370],{"_104":220,"_95":221,"_154":222,"_156":215,"_157":139,"_158":223,"_160":22,"_106":224,"_100":225,"_164":178,"_166":226,"_167":22,"_168":-5,"_169":359,"_98":360},[],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":101,"_160":22,"_106":233,"_100":234,"_164":178,"_166":235,"_167":22,"_168":-5,"_169":362,"_98":363},[],[207,214,231],{"_104":239,"_95":240,"_154":241,"_156":215,"_157":139,"_158":242,"_160":22,"_106":243,"_100":244,"_164":178,"_166":245,"_167":22,"_168":-5,"_169":365,"_98":366},[],[207,214,240],{"_104":249,"_95":250,"_154":251,"_156":215,"_157":139,"_158":252,"_160":22,"_106":253,"_100":254,"_164":178,"_166":255,"_167":22,"_168":-5,"_169":368,"_98":369},[],[207,214,250],{"_104":259,"_95":260,"_154":261,"_156":215,"_157":139,"_158":262,"_160":22,"_106":263,"_100":264,"_164":178,"_166":265,"_167":22,"_168":-5,"_169":371,"_98":372},[],[207,214,260],[207,214],{"_104":270,"_95":271,"_154":272,"_156":208,"_157":139,"_158":273,"_160":22,"_106":274,"_100":275,"_164":276,"_166":277,"_167":22,"_168":-5,"_169":375,"_98":376},[],[207,271],{"_104":281,"_95":282,"_154":283,"_156":208,"_157":139,"_158":284,"_160":22,"_106":285,"_100":216,"_164":178,"_166":286,"_167":22,"_168":-5,"_169":378,"_98":379},[],[207,282],[207],{"_104":291,"_95":292,"_154":293,"_156":-5,"_157":139,"_158":294,"_160":22,"_106":295,"_100":296,"_164":276,"_166":297,"_167":22,"_168":-5,"_169":382,"_98":383},[],[292],[342,344,347,350,354,356,358,361,364,367,370,374,377,381],{"_104":213,"_95":214,"_154":215,"_156":208,"_157":139,"_158":216,"_160":161,"_106":326,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":386},[207,214],[388,390,392,394,396],{"_104":220,"_95":221,"_154":222,"_156":215,"_157":139,"_158":223,"_160":22,"_106":311,"_100":225,"_164":178,"_166":226,"_167":22,"_168":-5,"_98":389},[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":101,"_160":22,"_106":314,"_100":234,"_164":178,"_166":235,"_167":22,"_168":-5,"_98":391},[207,214,231],{"_104":239,"_95":240,"_154":241,"_156":215,"_157":139,"_158":242,"_160":22,"_106":317,"_100":244,"_164":178,"_166":245,"_167":22,"_168":-5,"_98":393},[207,214,240],{"_104":249,"_95":250,"_154":251,"_156":215,"_157":139,"_158":252,"_160":22,"_106":320,"_100":254,"_164":178,"_166":255,"_167":22,"_168":-5,"_98":395},[207,214,250],{"_104":259,"_95":260,"_154":261,"_156":215,"_157":139,"_158":262,"_160":22,"_106":323,"_100":264,"_164":178,"_166":265,"_167":22,"_168":-5,"_98":397},[207,214,260],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

valdottown

pipedream-connect