WhatsApp en Lovable: Edge Function de Supabase, Secrets y el prompt correcto

Paso a paso

1. 1

   Conecta Supabase al proyecto

   En la documentación de Lovable, la integración con Supabase enlaza un proyecto tuyo como backend y permite desplegar edge functions. Conéctalo antes de pedir cualquier envío de WhatsApp.

2. 2

   Agrega los tres secrets

   En More > Settings > Secrets (o cuando Lovable lo pida por el campo seguro del chat), crea ZAPZAP_API_KEY, ZAPZAP_API_SECRET y ZAPZAP_INSTANCE_ID. La documentación dice que los secrets se inyectan en las edge functions en tiempo de ejecución y nunca llegan al código del frontend ni al navegador. Las claves salen de Settings > API en app.zapzapapi.com.

3. 3

   Pide la función con un prompt cerrado

   Ejemplo: "Crea una edge function send-whatsapp que reciba number y text, valide un número de 10 a 15 dígitos y llame a POST https://api.zapzapapi.com/api/v1/{instanceId}/send/text con las cabeceras x-api-key y x-api-secret leídas de los secrets. No uses la clave en el frontend." Pega el código del ejemplo como referencia.

4. 4

   Llama a la función desde la app, con usuario autenticado

   En el frontend, la app usa el cliente de Supabase para invocar send-whatsapp. Exige login antes: una función abierta que envía mensajes se convierte en un canal de spam con tu número. Limita el tamaño del texto y la frecuencia por usuario.

5. 5

   Recibe mensajes con otra edge function

   Crea una segunda función y registra su URL con PUT /instances/{id}/webhook (webhook_url y events). ZapZap devuelve el secreto whsec_ de la instancia: guárdalo como secret y valida la cabecera X-ZapZap-Signature (t=<unix>,v1=<hmac_hex>, HMAC-SHA256 sobre t + punto + cuerpo bruto, tolerancia de 5 minutos).

6. 6

   Prueba con tu propio número

   Antes de salir con clientes, envíate un mensaje, revisa la respuesta HTTP y mira el log de la función. Usa GET /{instanceId}/instance/status para saber si la instancia está conectada.

// Supabase Edge Function (Deno): supabase/functions/send-whatsapp/index.ts
// Secrets: ZAPZAP_API_KEY, ZAPZAP_API_SECRET, ZAPZAP_INSTANCE_ID (never in the frontend)
const cors = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (req: Request) => {
  if (req.method === "OPTIONS") return new Response("ok", { headers: cors });
  const { number, text } = await req.json();
  if (!/^\d{10,15}$/.test(String(number)) || !text) {
    return new Response(JSON.stringify({ error: "invalid number or text" }), { status: 400, headers: cors });
  }
  const r = await fetch("https://api.zapzapapi.com/api/v1/" + Deno.env.get("ZAPZAP_INSTANCE_ID") + "/send/text", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": Deno.env.get("ZAPZAP_API_KEY") ?? "",
      "x-api-secret": Deno.env.get("ZAPZAP_API_SECRET") ?? "",
    },
    body: JSON.stringify({ number, text }),
  });
  return new Response(await r.text(), { status: r.status, headers: { ...cors, "Content-Type": "application/json" } });
});