WhatsApp Backend API - Quick Start

Get WhatsApp working in 5 minutes with Supabase Edge Functions.

TL;DR - Fast Setup

# 1. Install Supabase CLI
npm install -g supabase

# 2. Login
supabase login

# 3. Link project
cd c:\Projects\robo-hub
supabase link --project-ref bsbjwjpgiangjqqqxota

# 4. Set Twilio secrets
supabase secrets set TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxx
supabase secrets set TWILIO_AUTH_TOKEN=your-auth-token-here

# 5. Deploy function
supabase functions deploy send-whatsapp

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

Done! WhatsApp now works from your browser.

What This Does

Before (Browser → Twilio)

❌ CORS Error: "Failed to fetch"

After (Browser → Supabase → Twilio)

✅ Message sent successfully!

Architecture

Frontend (React)
    ↓ POST /functions/v1/send-whatsapp
Edge Function (Deno)
    ↓ Twilio API call
WhatsApp Message Delivered

Getting Twilio Credentials

1. Sign up: https://www.twilio.com/try-twilio

2. Enable WhatsApp Sandbox: Console → Messaging → Try WhatsApp

3. Send "join " to [phone] from your phone

4. Get credentials:Account SID: ACxxxxxxxxxxxxxxxxAuth Token: (click "View" to reveal)

Verify It Works

Option 1: Test Page (Easiest)

1. Go to http://localhost:3000

2. Console: localStorage.setItem('currentView', 'FLEETOS'); location.reload()

3. Click yellow "Test WhatsApp" button

4. Enter phone number and send

Option 2: curl

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

Expected response:

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

Files

• supabase/functions/send-whatsapp/index.ts - Backend API

• services/WhatsAppService.ts - Frontend service (updated)

• BACKEND_API_SETUP.md - Detailed setup guide

• WHATSAPP_SETUP.md - Original WhatsApp guide

Troubleshooting

Error: "Function not found" → Run: supabase functions deploy send-whatsapp

Error: "Twilio not configured" → Run: supabase secrets set TWILIO_ACCOUNT_SID=...

Error: "Unauthorized" → Check your SUPABASE_ANON_KEY in curl/test

Still seeing CORS error in browser? → Check .env has VITE_SUPABASE_URL configured

Next Steps

1. ✅ Backend API deployed

2. Hook up to Fleet Dashboard → Send service requests

3. Hook up to Supplier Dashboard → Acknowledge requests

4. Add webhook for replies (supplier texts back "ACK")

5. Production: Get real WhatsApp Business number

Cost

• Supabase Edge Functions: Free tier (500K invocations/month)

• Twilio WhatsApp Sandbox: Free for testing

• Twilio Production: ~$0.005 per message

Support

Need help? Check:

• Full guide: BACKEND_API_SETUP.md

• Supabase logs: https://supabase.com/dashboard/project/bsbjwjpgiangjqqqxota/functions

• Twilio logs: https://console.twilio.com/us1/monitor/logs/whatsapp