relay/INTEGRATION_GUIDE.md

Webhook Relay - SvelteKit Integration Guide

This document explains how the original webhook relay concept has been modified and fully integrated into a fullstack SvelteKit application, providing a modern web interface for webhook management and relay functionality.

Overview

The original webhook relay system consisted of:

• Ingest Server (Bun/Hono): Receives webhooks via subdomains
• Relay Server (Bun/Hono): Handles authentication and WebSocket connections
• Database (PostgreSQL/Prisma): Stores users, webhook events, and relay targets

The SvelteKit integration adds:

• Modern Web Interface: Real-time dashboard with beautiful UI
• Enhanced User Experience: Intuitive webhook management
• Advanced Features: Filtering, search, analytics, and target management
• Production-Ready: Scalable architecture with proper authentication

Architecture Modifications

1. Frontend Layer (SvelteKit)

New Components:

• Real-time Dashboard: Live webhook event monitoring
• Webhook History: Complete event history with search/filtering
• Target Management: CRUD operations for relay targets
• User Settings: Profile and subdomain configuration
• Authentication UI: GitHub OAuth integration

Key Technologies:

• SvelteKit: Fullstack framework for the web interface
• TypeScript: Type-safe development
• Tailwind CSS: Modern, responsive styling
• Lucide Svelte: Beautiful icon library
• Svelte Stores: Reactive state management

2. WebSocket Integration

Enhanced Real-time Features:

// WebSocket client with automatic reconnection
class WebSocketClient {
  private ws: WebSocket | null = null;
  private reconnectAttempts = 0;
  private maxReconnectAttempts = 5;
  
  public events: Writable<WebhookEvent[]> = writable([]);
  public state: Writable<WebSocketState> = writable({
    connected: false,
    connecting: false,
    error: null
  });
}

Benefits:

• Automatic reconnection with exponential backoff
• Reactive stores for real-time UI updates
• Connection status monitoring
• Error handling and recovery

3. API Layer Enhancements

New Endpoints:

• GET /api/webhooks/stats - Dashboard statistics
• POST /api/targets - Create relay targets
• PUT /api/targets/[id] - Update targets
• DELETE /api/targets/[id] - Delete targets
• PUT /api/targets/[id]/toggle - Toggle target status
• PUT /api/settings/subdomain - Update user subdomain

Authentication Integration:

• All endpoints protected with session-based authentication
• User isolation for data security
• Proper error handling and validation

Key Features Added

1. Real-time Dashboard

Live Statistics:

• Total webhook events
• Recent activity (last hour)
• Active relay targets
• Success rates

Real-time Event Display:

• Live webhook event updates
• Event details with expandable sections
• HTTP method color coding
• Timestamp formatting

2. Advanced Webhook Management

Event Filtering:

• Search by path or body content
• Filter by HTTP method
• Date range filtering
• Pagination support

Event Actions:

• Copy event data to clipboard
• Download events as JSON
• View full request details
• Expandable headers and body

3. Relay Target Management

Target Operations:

• Add new relay targets with nicknames
• Edit existing targets
• Toggle target active/inactive status
• Delete targets with confirmation

Target Validation:

• URL format validation
• Duplicate target prevention
• User ownership verification

4. User Settings & Configuration

Profile Management:

• View user profile information
• Update subdomain settings
• Copy webhook URLs
• Account statistics

Security Features:

• GitHub OAuth authentication
• Session management
• Secure subdomain validation

Integration Points

1. Database Schema Reuse

The SvelteKit app reuses the existing Prisma schema:

model User {
  id            String          @id @default(cuid())
  email         String          @unique
  subdomain     String          @unique
  name          String?
  username      String         @unique
  // ... other fields
  relayTargets  RelayTarget[]
  webhookEvents WebhookEvent[]
}

model WebhookEvent {
  id        String   @id @default(cuid())
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  userId    String
  path      String
  method    String
  body      String
  headers   String
  createdAt DateTime @default(now())
}

model RelayTarget {
  id        String   @id @default(cuid())
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  userId    String
  target    String
  nickname  String?
  active    Boolean  @default(true)
  createdAt DateTime @default(now())
}

2. Backend Server Integration

Ingest Server Connection:

• Webhooks received at {subdomain}.yourdomain.com
• Events stored in shared database
• Real-time WebSocket broadcasting

Relay Server Connection:

• Authentication via Auth.js
• WebSocket connections for real-time updates
• Session management integration

3. WebSocket Communication

Event Flow:

1. Webhook received by ingest server
2. Event stored in database
3. WebSocket message sent to relay server
4. SvelteKit client receives real-time update
5. UI updates automatically via Svelte stores

Development Workflow

1. Local Development Setup

# Terminal 1: SvelteKit Frontend
cd sveltekit-app
npm install
npm run dev

# Terminal 2: Ingest Server
bun run server/index.ts

# Terminal 3: Relay Server
bun run server/relay.ts

2. Environment Configuration

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/webhook_relay"

# Authentication
AUTH_SECRET="your-auth-secret"
GITHUB_ID="your-github-oauth-app-id"
GITHUB_SECRET="your-github-oauth-app-secret"

# Backend URLs
INGEST_SERVER_URL="http://localhost:4000"
RELAY_SERVER_URL="http://localhost:4200"
WEBSOCKET_URL="ws://localhost:4200/api/relay"

3. Database Setup

# Generate Prisma client
npx prisma generate

# Push schema to database
npx prisma db push

# Optional: Seed with test data
npx prisma db seed

Production Deployment

1. Frontend Deployment

Build Process:

npm run build
npm run preview

Deployment Options:

• Vercel (recommended for SvelteKit)
• Netlify
• Docker containers
• Traditional hosting

2. Backend Deployment

Server Requirements:

• Node.js 18+ or Bun runtime
• PostgreSQL database
• Reverse proxy for subdomain routing
• SSL certificates

Configuration:

• Environment variables for production
• Database connection pooling
• WebSocket proxy configuration
• Rate limiting and security headers

3. Domain Configuration

Subdomain Routing:

• Wildcard DNS records (*.yourdomain.com)
• Reverse proxy configuration (nginx/traefik)
• SSL certificate management
• Load balancing for high availability

Security Considerations

1. Authentication & Authorization

• GitHub OAuth for user authentication
• Session-based authentication with secure cookies
• User data isolation in database queries
• CSRF protection via SvelteKit

2. Data Protection

• Input validation on all API endpoints
• SQL injection prevention via Prisma ORM
• XSS protection via SvelteKit's built-in sanitization
• Secure WebSocket connections

3. Rate Limiting

• API rate limiting for webhook endpoints
• WebSocket connection limits
• Database query optimization
• Request size limits

Monitoring & Analytics

1. Real-time Metrics

• WebSocket connection status
• Webhook event counts
• Relay target success rates
• User activity tracking

2. Error Tracking

• WebSocket connection failures
• API endpoint errors
• Database connection issues
• User action logging

3. Performance Monitoring

• Page load times
• API response times
• WebSocket message latency
• Database query performance

Future Enhancements

1. Advanced Features

• Webhook Templates: Pre-configured webhook formats
• Conditional Relay: Forward based on webhook content
• Retry Mechanisms: Automatic retry for failed relays
• Webhook Testing: Built-in webhook testing tools

2. Enterprise Features

• Team Management: Multi-user organizations
• API Keys: Programmatic access
• Webhook Signatures: Security verification
• Audit Logs: Complete activity tracking

3. Integrations

• Slack Notifications: Webhook event notifications
• Email Alerts: Failure notifications
• Metrics Export: Data export capabilities
• Third-party Integrations: Zapier, webhook.site, etc.

Conclusion

The SvelteKit integration transforms the original webhook relay concept into a comprehensive, production-ready webhook management platform. The modern web interface provides an intuitive user experience while maintaining the core functionality of webhook reception, storage, and relay.

Key benefits of this integration:

• User-Friendly Interface: Modern, responsive web UI
• Real-time Updates: Live webhook event monitoring
• Scalable Architecture: Production-ready deployment
• Enhanced Security: Proper authentication and authorization
• Extensible Design: Easy to add new features and integrations

This integration demonstrates how modern web frameworks like SvelteKit can enhance existing backend systems by providing rich, interactive user interfaces while maintaining the performance and reliability of the underlying infrastructure.