Backend API Setup Guide

WhatsApp Messaging Backend (Supabase Edge Function)

This guide shows how to deploy a secure backend API for sending WhatsApp messages via Twilio.

Why Backend API?

Problem: Browsers block direct Twilio API calls (CORS) Solution: Backend API proxies requests securely Benefits:

• No CORS errors

• Twilio credentials stay secret (never exposed to browser)

• Production-ready security

• Works from any device

Prerequisites

1. Supabase account with your FleetOS project

2. Supabase CLI installed

3. Twilio account with WhatsApp sandbox enabled

Step 1: Install Supabase CLI

Windows

# Using Scoop (recommended)
scoop install supabase

# Or using NPM
npm install -g supabase

Mac/Linux

brew install supabase/tap/supabase

# Or using NPM
npm install -g supabase

Step 2: Login to Supabase

supabase login

This opens your browser for authentication.

Step 3: Link Your Project

# Navigate to your project directory
cd c:\Projects\robo-hub

# Link to your Supabase project
supabase link --project-ref bsbjwjpgiangjqqqxota

You'll be prompted for your database password (the one you created when setting up Supabase).

Step 4: Set Environment Variables

Set Twilio credentials as Supabase secrets:

# Set Twilio Account SID
supabase secrets set TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Set Twilio Auth Token
supabase secrets set TWILIO_AUTH_TOKEN=your-auth-token-here

# Set WhatsApp From Number (optional - defaults to sandbox number)
supabase secrets set TWILIO_WHATSAPP_FROM=whatsapp:[phone]

Replace with your actual Twilio credentials from https://console.twilio.com.

Step 5: Deploy the Edge Function

# Deploy the send-whatsapp function
supabase functions deploy send-whatsapp

You should see:

Deploying send-whatsapp (project ref: bsbjwjpgiangjqqqxota)
Bundled send-whatsapp (0.5ms)
Deployed send-whatsapp successfully!
Function URL: https://bsbjwjpgiangjqqqxota.supabase.co/functions/v1/send-whatsapp

Step 6: Test the Deployed Function

Option 1: Test with curl

curl -X POST https://bsbjwjpgiangjqqqxota.supabase.co/functions/v1/send-whatsapp \
  -H "Authorization: Bearer YOUR_SUPABASE_ANON_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "to": "[phone]",
    "message": "🚨 Test from FleetOS Backend API"
  }'

Replace:

• YOUR_SUPABASE_ANON_KEY with your actual anon key from .env

• [phone] with your phone number

Expected response:

{
  "success": true,
  "messageSid": "SMxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

Option 2: Test in Browser (WhatsApp Test Page)

1. Navigate to http://localhost:3000

2. Set view to FLEETOS: localStorage.setItem('currentView', 'FLEETOS'); location.reload()

3. Click "Test WhatsApp" button (yellow button in nav)

4. Enter phone number and click "Send WhatsApp Message"

5. It should now work! (No more CORS error)

Step 7: Verify in Twilio Console

1. Go to https://console.twilio.com/us1/monitor/logs/whatsapp

2. You should see your message in the logs

3. Check your phone for the WhatsApp message

Architecture Flow

┌─────────────┐
│   Browser   │
│  (React UI) │
└──────┬──────┘
       │ HTTPS POST
       │ /functions/v1/send-whatsapp
       ↓
┌─────────────────────┐
│  Supabase Edge      │
│  Function (Deno)    │
│  - Validates input  │
│  - Keeps secrets    │
└──────┬──────────────┘
       │ HTTPS POST
       │ Twilio API
       ↓
┌─────────────────────┐
│   Twilio API        │
│   - Sends WhatsApp  │
│   - Returns SID     │
└─────────────────────┘

Troubleshooting

Error: "Function not found"

• Make sure you deployed: supabase functions deploy send-whatsapp

• Check function exists: supabase functions list

Error: "Twilio not configured on server"

• Verify secrets are set: supabase secrets list

• Re-set secrets if needed

Error: "Unauthorized"

• Check your SUPABASE_ANON_KEY in .env is correct

• Make sure you're using the anon key (not service role key)

Error: "Failed to send WhatsApp"

• Check Twilio credentials are correct

• Verify WhatsApp sandbox is enabled

• Make sure you joined the sandbox (send "join " to sandbox number)

Files Createdsupabase/functions/send-whatsapp/index.ts - Edge Function codeservices/WhatsAppService.ts - Updated to call backend APIThis file (BACKEND_API_SETUP.md) - Setup guideNext Steps✅ Backend API deployed and working⏭️ Hook up to Fleet Dashboard - Add "Request Service" button⏭️ Hook up to Supplier Dashboard - Add "Acknowledge" buttons⏭️ Add WhatsApp Reply Webhook - Handle supplier responses⏭️ Production Launch - Remove sandbox, use real WhatsApp numberProduction ConsiderationsBefore Going Live:Upgrade Twilio AccountRemove sandbox restrictionsGet approved WhatsApp Business numberSet up message templatesAdd Rate LimitingPrevent abuseAdd request throttlingMonitor usageAdd AuthenticationVerify user is logged inCheck user has permission to sendAdd JWT validationError MonitoringSet up Sentry or similarLog all errorsAlert on failuresCost ManagementMonitor Twilio usageSet spending limitsTrack per-user costsSupportSupabase Docs: https://supabase.com/docs/guides/functionsTwilio WhatsApp Docs: https://www.twilio.com/docs/whatsappEdge Function Logs: https://supabase.com/dashboard/project/YOUR_PROJECT/functions