\n \n \n \n",[],[164,267],"fa619644-3817-11f0-972c-9e149126039e","auth.ts","fa6196c6-3817-11f0-972c-9e149126039e","cb9f25b6-f192-4c8d-8397-4d45cae135bc",["D",1748033608415],"// Authentication utilities for client-side storage\n// Fallback to localStorage if cookies don't work properly\n\nexport const AUTH_STORAGE_KEY = 'vt_auth_data';\n\nexport interface AuthData {\n apiKey: string;\n user: any;\n timestamp: number;\n}\n\nexport function saveAuthData(apiKey: string, user: any) {\n const authData: AuthData = {\n apiKey,\n user,\n timestamp: Date.now()\n };\n \n try {\n localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(authData));\n return true;\n } catch (error) {\n console.error('Failed to save auth data:', error);\n return false;\n }\n}\n\nexport function getAuthData(): AuthData | null {\n try {\n const stored = localStorage.getItem(AUTH_STORAGE_KEY);\n if (!stored) return null;\n \n const authData: AuthData = JSON.parse(stored);\n \n // Check if data is older than 30 days\n const thirtyDaysMs = 30 * 24 * 60 * 60 * 1000;\n if (Date.now() - authData.timestamp > thirtyDaysMs) {\n clearAuthData();\n return null;\n }\n \n return authData;\n } catch (error) {\n console.error('Failed to get auth data:', error);\n return null;\n }\n}\n\nexport function clearAuthData() {\n try {\n localStorage.removeItem(AUTH_STORAGE_KEY);\n } catch (error) {\n console.error('Failed to clear auth data:', error);\n }\n}\n\nexport async function validateStoredAuth(): Promise<{ valid: boolean; user?: any }> {\n const authData = getAuthData();\n if (!authData) return { valid: false };\n \n try {\n // Validate the stored API key with the server\n const response = await fetch('/api/validate-key', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ apiKey: authData.apiKey })\n });\n \n if (response.ok) {\n const data = await response.json();\n return { valid: true, user: data.user };\n } else {\n clearAuthData();\n return { valid: false };\n }\n } catch (error) {\n console.error('Failed to validate stored auth:', error);\n return { valid: false };\n }\n}",[],[164,282,275],"utils","fa61a42c-3817-11f0-972c-9e149126039e",["D",1748033608415],[196],[164,282],"fa61919e-3817-11f0-972c-9e149126039e","LoginForm.tsx","fa619216-3817-11f0-972c-9e149126039e","43c67abe-34e6-11f0-ad7f-9e149126039e",["D",1748033608415],"/** @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\";\nimport { saveAuthData } from \"../utils/auth.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 \n // Save auth data to localStorage as fallback\n if (data.apiKey) {\n saveAuthData(data.apiKey, data.user);\n }\n \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}",[],[164,295,288],"components","fa61b2dc-3817-11f0-972c-9e149126039e","Home.tsx","4646f64c-34e6-11f0-ad7f-9e149126039e",["D",1748033608415],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } 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 { User, InitialData } from \"../../shared/types.ts\";\nimport { validateStoredAuth, clearAuthData } from \"../utils/auth.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 return;\n }\n \n // If server auth fails, try localStorage fallback\n const authResult = await validateStoredAuth();\n if (authResult.valid && authResult.user) {\n setUser(authResult.user);\n setIsAuthenticated(true);\n \n // Get Pipedream token using stored auth\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 clearAuthData(); // Clear localStorage as well\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

Checking authentication...

\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}",[],[164,295,297],"fa618ec4-3817-11f0-972c-9e149126039e","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",["D",1748033608415],"/** @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}",[],[164,295,305],"fa617eca-3817-11f0-972c-9e149126039e","Dashboard.tsx","fa617f4c-3817-11f0-972c-9e149126039e",["D",1748033608415],"/** @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 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({ user, pipedreamToken, onLogout, onError }: DashboardProps) {\n const [accounts, setAccounts] = useState([]);\n const [selectedApp, setSelectedApp] = useState(null);\n const [selectedComponent, setSelectedComponent] = useState(null);\n const [componentType, setComponentType] = useState<\"action\" | \"trigger\">(\"action\");\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 (configuredProps: any) => {\n try {\n const endpoint = componentType === \"action\" ? \"/api/pipedream/action\" : \"/api/pipedream/trigger\";\n const response = await fetch(endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n [componentType === \"action\" ? \"actionId\" : \"triggerId\"]: selectedComponent.key,\n configuredProps,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || `Failed to execute ${componentType}`);\n }\n\n console.log(`${componentType} executed successfully:`, data.result);\n // You might want to show a success message or update the UI\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

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 handleComponentTypeChange(e.target.value as \"action\" | \"trigger\")}\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 {componentType === \"action\" ? \"an Action\" : \"a Trigger\"}:\n \n {\n setSelectedComponent(comp);\n console.log(comp);\n }}\n />\n

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

\n \n 4. Configure {componentType === \"action\" ? \"Action\" : \"Trigger\"}:\n \n \n console.log(x)}\n onUpdateDynamicProps={x => console.log(x)}\n enableDebugging={true}\n />\n

\n )}\n \n \n\n \n \n );\n}",[],[164,295,312],"fa61754c-3817-11f0-972c-9e149126039e","AccountsList.tsx","fa61761e-3817-11f0-972c-9e149126039e",["D",1748033608415],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { App, Account } from \"../../shared/types.ts\";\n\ninterface AccountsListProps {\n accounts: Account[];\n}\n\nexport function AccountsList({ accounts }: AccountsListProps) {\n return (\n

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}",[],[164,295,319],"48823462-34e6-11f0-afbf-9e149126039e",10,["D",1747682411203],[190,191,192,193,194],[164,295],["D",1747682388024],[189,195,197,198],[164],"fa61aa80-3817-11f0-972c-9e149126039e","main.tsx",["D",1748033608415],7,"import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { createBackendClient } from \"npm:@pipedream/sdk/server\";\nimport { ValTown } from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";\n\nconst app = new Hono();\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\n// Helper function to validate Val Town API key and get user info\nasync function validateValTownUser(apiKey: string) {\n try {\n const vt = new ValTown({ bearerToken: apiKey });\n const user = await vt.me.profile.retrieve();\n return { success: true, user };\n } catch (error) {\n console.log(error);\n return { success: false, error: error.message };\n }\n}\n\n// Helper function to get current user from cookie\nasync function getCurrentUser(c: any) {\n const apiKey = getCookie(c, \"vt_api_key\");\n console.log(\"Cookie check - API key found:\", !!apiKey);\n if (!apiKey) return null;\n\n const result = await validateValTownUser(apiKey);\n return result.success ? { apiKey, user: result.user } : null;\n}\n\n// Login endpoint\napp.post(\"/api/login\", async c => {\n const { apiKey } = await c.req.json();\n\n if (!apiKey) {\n return c.json({ error: \"API key is required\" }, 400);\n }\n\n const result = await validateValTownUser(apiKey);\n\n if (!result.success) {\n return c.json({ error: \"Invalid Val Town API key\" }, 401);\n }\n\n // Set secure cookie with API key\n setCookie(c, \"vt_api_key\", apiKey, {\n httpOnly: true,\n secure: false, // Set to false for development, true for production\n sameSite: \"Lax\", // Changed from Strict to Lax for better compatibility\n maxAge: 60 * 60 * 24 * 30, // 30 days\n path: \"/\", // Ensure cookie is available for all paths\n });\n\n return c.json({\n success: true,\n user: result.user,\n apiKey, // Return API key for client-side storage as fallback\n });\n});\n\n// Validate API key endpoint (for client-side auth checking)\napp.post(\"/api/validate-key\", async c => {\n const { apiKey } = await c.req.json();\n\n if (!apiKey) {\n return c.json({ error: \"API key is required\" }, 400);\n }\n\n const result = await validateValTownUser(apiKey);\n\n if (!result.success) {\n return c.json({ error: \"Invalid API key\" }, 401);\n }\n\n return c.json({\n success: true,\n user: result.user,\n });\n});\n\n// Logout endpoint\napp.post(\"/api/logout\", async c => {\n deleteCookie(c, \"vt_api_key\");\n return c.json({ success: true });\n});\n\n// Get current user endpoint\napp.get(\"/api/user\", async c => {\n const currentUser = await getCurrentUser(c);\n\n if (!currentUser) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n return c.json({ user: currentUser.user });\n});\n\n// Get Pipedream connect token for authenticated user\napp.get(\"/api/pipedream/token\", async c => {\n const currentUser = await getCurrentUser(c);\n\n if (!currentUser) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n try {\n const { token, expires_at, connect_link_url } = await pd.createConnectToken({\n external_user_id: currentUser.user.id,\n allowed_origins: [new URL(c.req.url).origin],\n });\n\n return c.json({ token, expires_at, connect_link_url });\n } catch (error) {\n return c.json({ error: \"Failed to create connect token\" }, 500);\n }\n});\n\n// Get user's Pipedream connections\napp.get(\"/api/pipedream/accounts\", async c => {\n const currentUser = await getCurrentUser(c);\n\n if (!currentUser) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n try {\n const accounts = await pd.getAccounts({\n external_user_id: currentUser.user.id,\n include_credentials: false,\n });\n\n return c.json({ accounts: Array.isArray(accounts) ? accounts : [] });\n } catch (error) {\n console.error(\"Failed to fetch accounts:\", error);\n return c.json({ accounts: [], error: \"Failed to fetch accounts\" });\n }\n});\n\n// Execute Pipedream action\napp.post(\"/api/pipedream/action\", async c => {\n const currentUser = await getCurrentUser(c);\n\n if (!currentUser) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n try {\n const { actionId, configuredProps, dynamicPropsId } = await c.req.json();\n\n const result = await pd.actionRun({\n userId: currentUser.user.id,\n actionId,\n configuredProps,\n dynamicPropsId,\n });\n\n return c.json({ result });\n } catch (error) {\n console.error(\"Failed to execute action:\", error);\n return c.json({ error: \"Failed to execute action\" }, 500);\n }\n});\n\n// Execute Pipedream trigger\napp.post(\"/api/pipedream/trigger\", async c => {\n const currentUser = await getCurrentUser(c);\n\n if (!currentUser) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n try {\n const { triggerId, configuredProps, dynamicPropsId } = await c.req.json();\n\n console.log({ triggerId, configuredProps, dynamicPropsId });\n\n return c.json({ result });\n } catch (error) {\n console.error(\"Failed to execute trigger:\", error);\n return c.json({ error: \"Failed to execute trigger\" }, 500);\n }\n});\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n const currentUser = await getCurrentUser(c);\n\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data\n const initialData = {\n user: currentUser?.user || null,\n isAuthenticated: !!currentUser,\n };\n\n // If user is authenticated, also get Pipedream token\n if (currentUser) {\n try {\n const { token, expires_at, connect_link_url } = await pd.createConnectToken({\n external_user_id: currentUser.user.id,\n allowed_origins: [new URL(c.req.url).origin],\n });\n initialData.pipedream = { token, expires_at, connect_link_url };\n } catch (error) {\n console.error(\"Failed to create Pipedream token:\", error);\n }\n }\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","pipedream",[],[170,334],["D",1747682399458],[187],[170],["D",1747682234550],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":-5,"_103":104,"_105":25},{"_13":87,"_33":88,"_45":44,"_89":46,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":47,"_96":97},"ctx",{"_80":-5,"_126":381,"_382":383,"_384":385,"_386":27,"_387":27,"_388":27,"_389":25,"_390":-5,"_391":-7,"_392":-7,"_393":64,"_394":27,"_395":27,"_396":-5,"_397":27,"_398":27,"_399":27,"_400":-5},"ENV",{"_352":353,"_354":355,"_356":88,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v62