How to Build a Integration Hub with Lovable

1Build an integration hub app. Create these Supabase tables:
2
3- connectors: id, name, logo_url, base_url, auth_type (api_key|oauth2|basic|bearer), config_schema (jsonb, describes required fields for this connector type), is_builtin (bool), created_at
4- credentials: id, user_id, connector_id (FK connectors), name (user label like 'My Shopify Store'), vault_secret_id (uuid, references vault.secrets), status (active|invalid|expired), last_validated_at, created_at
5- integrations: id, user_id, name, source_credential_id (FK credentials), destination_credential_id (FK credentials), field_mapping (jsonb), filter_config (jsonb, optional data filtering), schedule (cron string e.g. '0 * * * *'), is_active (bool default true), last_run_at, next_run_at, created_at
6- sync_logs: id, integration_id (FK integrations), status (running|success|error|retrying), records_processed (int), error_message (text), started_at, completed_at, retry_count (int default 0), next_retry_at
7
8For credential creation: use the Supabase Vault SQL function select vault.create_secret(secret_value, name) to store the credential. Insert the returned UUID as vault_secret_id in the credentials table.
9
10RLS: all tables require user_id = auth.uid(). sync_logs is accessible via integration_id FK chain. Never expose vault.secrets directly to the frontend.

1Build the credentials management page at src/pages/Credentials.tsx:
2
31. Credential Cards: show existing credentials as Cards with connector logo, credential name, status Badge (active=green, invalid=red, expired=yellow), last_validated_at, and an Edit/Delete actions menu
42. 'Add Credential' Dialog:
5   - Connector Select: shows all connectors with logos
6   - Credential name Input (user labels this, e.g. 'Production Shopify')
7   - Dynamic credential fields: based on the selected connector's config_schema, render the appropriate Input fields (api_key, shop_url, etc.)
8   - On submit: call an Edge Function add-credential that calls vault.create_secret() server-side and returns only the new credential record ID. Never send the plaintext key back to the frontend.
9   - Show a success Alert: 'Credential saved securely. The key cannot be retrieved after this.'
103. 'Validate' Button per Card: calls a validate-credential Edge Function that fetches the credential from vault, makes a test API call to the connector, and updates credentials.status based on the result
114. Revoke (delete) Button: prompts with a Dialog warning that all integrations using this credential will stop. Deletes the vault secret and the credential row.

1// supabase/functions/run-integration/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'authorization, apikey, content-type' }
6
7serve(async (req: Request) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
9
10  const supabase = createClient(Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? '')
11  const { integrationId } = await req.json()
12
13  const { data: integration } = await supabase
14    .from('integrations')
15    .select('*, source_credential:credentials!source_credential_id(connector_id, vault_secret_id), destination_credential:credentials!destination_credential_id(connector_id, vault_secret_id)')
16    .eq('id', integrationId)
17    .single()
18
19  if (!integration) return new Response(JSON.stringify({ error: 'Integration not found' }), { status: 404, headers: corsHeaders })
20
21  const { data: logRow } = await supabase.from('sync_logs').insert({ integration_id: integrationId, status: 'running', started_at: new Date().toISOString() }).select().single()
22  const logId = logRow?.id
23
24  try {
25    const { data: srcSecret } = await supabase.from('vault.decrypted_secrets').select('decrypted_secret').eq('id', integration.source_credential.vault_secret_id).single()
26    const { data: dstSecret } = await supabase.from('vault.decrypted_secrets').select('decrypted_secret').eq('id', integration.destination_credential.vault_secret_id).single()
27
28    const sourceData = await fetchFromSource(integration.source_credential.connector_id, srcSecret?.decrypted_secret, integration.filter_config)
29    const transformed = applyFieldMapping(sourceData, integration.field_mapping)
30    const count = await postToDestination(integration.destination_credential.connector_id, dstSecret?.decrypted_secret, transformed)
31
32    await supabase.from('sync_logs').update({ status: 'success', records_processed: count, completed_at: new Date().toISOString() }).eq('id', logId)
33    await supabase.from('integrations').update({ last_run_at: new Date().toISOString() }).eq('id', integrationId)
34
35    return new Response(JSON.stringify({ success: true, records: count }), { headers: corsHeaders })
36  } catch (err) {
37    const msg = err instanceof Error ? err.message : 'Unknown error'
38    await supabase.from('sync_logs').update({ status: 'error', error_message: msg, completed_at: new Date().toISOString() }).eq('id', logId)
39    return new Response(JSON.stringify({ error: msg }), { status: 500, headers: corsHeaders })
40  }
41})
42
43function applyFieldMapping(data: any[], mapping: Record<string, string>): any[] {
44  return data.map((row) => Object.fromEntries(Object.entries(mapping).map(([dest, src]) => [dest, row[src]])))
45}
46
47async function fetchFromSource(connectorId: string, secret: string, filters: any): Promise<any[]> {
48  // Implement per-connector fetch logic based on connectorId
49  return []
50}
51
52async function postToDestination(connectorId: string, secret: string, data: any[]): Promise<number> {
53  // Implement per-connector post logic based on connectorId
54  return data.length
55}

1Build two features:
2
31. Webhook receiver Edge Function at supabase/functions/webhook-receiver/index.ts:
4   - Accept POST requests at URL pattern /functions/v1/webhook-receiver?integration_id=UUID
5   - Validate the integration_id exists and is active
6   - Look up the integration's source connector and validate an optional webhook_secret header (HMAC-SHA256)
7   - Insert the raw payload into a webhooks_queue table: id, integration_id, payload (jsonb), received_at, processed (bool default false)
8   - Return 200 immediately so the sender doesn't time out
9   - A separate pg_cron job processes webhooks_queue every minute: for each unprocessed row, call run-integration with the queued payload
10
112. Health monitoring dashboard at src/pages/IntegrationHealth.tsx:
12   - Summary Cards at top: Total Active Integrations, Syncs Today, Error Rate (%), Average Duration
13   - Integration list as a DataTable: name, source → destination, last run (relative time), status Badge (healthy|warning|error|idle), error rate last 24h, 'Run Now' Button
14   - Clicking a row opens a Sheet with: last 50 sync_logs for that integration as a mini DataTable, a Recharts AreaChart showing daily sync counts and error counts over 30 days
15   - 'Pause/Resume' Toggle per integration (sets is_active)
16   - Error state integrations show at the top of the list with a red left border