Val Town + Pipedream Connect Integration

This application allows Val Town users to authenticate and connect to external services via Pipedream Connect.

This app uses Val Town API tokens for authentication. (Eventually, we'll swap this for Val Town OAuth.)

To login, create and supply a Val Town API token with the user:read scope only. We store it in cookies.

To run actions on connected apps, you'll also need to supply a Val Town API token. If you're doing this from within Val Town, you can use process.env.valtown, which this app's client libraries will use by default.

Pipedream Integration

• Uses Val Town user ID as Pipedream external user ID
• Official Pipedream React components for app selection and workflow building
• TODO: Build authenticated proxy
• TODO: let users copy some code that will run an action
• TODO: List all triggers and where their webhook points to
  • TODO: Let triggers be updated
• TODO: Let connected accounts be deleted

3. Security Features
   • HTTP-only, secure cookies for API key storage
   • Server-side API key validation
   • Protected API endpoints requiring authentication

├── backend/
│   ├── main.tsx              # Main Hono server with auth & API routes
│   └── scratch.tsx           # Development/testing file
├── frontend/
│   ├── components/
│   │   ├── Home.tsx          # Main container component
│   │   ├── LoginForm.tsx     # Authentication form
│   │   ├── Dashboard.tsx     # Authenticated user dashboard with Pipedream components
│   │   ├── AccountsList.tsx  # Connected accounts display
│   │   └── ErrorMessage.tsx  # Reusable error display
│   ├── index.html            # HTML template with styling
│   └── index.tsx             # React app entry point
├── shared/
│   └── types.ts              # Shared TypeScript interfaces
├── reference/
│   └── pipedream-connect.md  # Pipedream Connect documentation
└── README.md                 # This file

• POST /api/login - Authenticate with Val Town API key
• POST /api/logout - Clear authentication session
• GET /api/user - Get current authenticated user

• GET /api/pipedream/token - Get connect token for authenticated user
• GET /api/pipedream/accounts - List user's connected accounts
• POST /api/pipedream/action - Execute a Pipedream action
• POST /api/pipedream/trigger - Execute a Pipedream trigger

PIPEDREAM_CLIENT_ID=your_client_id
PIPEDREAM_CLIENT_SECRET=your_client_secret
PIPEDREAM_PROJECT_ID=your_project_id
PIPEDREAM_PROJECT_ENVIRONMENT=development

1. Login: User enters their Val Town API key
2. Validation: Server validates key with Val Town API
3. Session: API key stored in secure cookie
4. App Selection: User chooses from available apps using Pipedream's SelectApp component
5. Component Type Selection: User selects between Actions or Triggers
6. Component Configuration: User selects and configures actions/triggers using Pipedream's ComponentForm
7. Execution: Actions/triggers are executed directly through Pipedream SDK
8. Management: User can view and manage connected accounts

The frontend is now organized into focused, reusable components:

• Home.tsx: Main container managing authentication state
• LoginForm.tsx: Handles Val Town API key authentication
• Dashboard.tsx: Main authenticated user interface with Pipedream React components
• AccountsList.tsx: Display of connected accounts
• ErrorMessage.tsx: Reusable error display with dismiss functionality

1. User submits Val Town API key via form
2. Server validates key using @valtown/sdk
3. On success, API key stored in HTTP-only cookie
4. User's Val Town ID used as Pipedream external user ID

1. Server creates connect tokens using user's Val Town ID
2. Frontend uses official Pipedream React components for app selection and workflow building
3. Users can select between Actions and Triggers via dropdown
4. Connected accounts fetched and displayed
5. Actions and triggers executed directly through Pipedream SDK with dynamic form generation

• API keys never exposed to client-side JavaScript
• Secure, HTTP-only cookies with proper flags
• Server-side validation for all protected endpoints
• CORS handled automatically by Val Town platform

• Part 2: Action and trigger configuration
• Part 3: Workflow builder interface
• Part 4: Webhook handling and event processing
• Part 5: Advanced features and monitoring

The app is built for Val Town's serverless environment using:

• Backend: Hono framework with TypeScript
• Frontend: React 18 with TypeScript
• Authentication: Val Town SDK + secure cookies
• Integration: Pipedream Connect SDK

To test the authentication flow, you'll need a valid Val Town API key from: https://www.val.town/settings/api