Resposta rápida: para receber eventos externos em um app criado na Lovable, o padrão mais seguro é expor um endpoint server-side, normalmente uma Edge Function no Supabase, validar a requisição e então gravar ou processar os dados. Ferramentas como Make e n8n podem chamar esse endpoint por HTTP sem que você precise expor chaves privadas no frontend.
Esse modelo é especialmente útil quando seu app precisa receber dados de formulários, gateways de pagamento, CRMs, WhatsApp, automações e outros serviços. Em vez de colocar a integração diretamente no navegador, você cria uma camada de backend que recebe o webhook, valida o payload e decide o que acontece em seguida.
O que é um webhook na Lovable
Webhook é uma chamada HTTP enviada automaticamente quando algum evento acontece em outro sistema. Na prática, o serviço externo dispara uma requisição para uma URL do seu projeto. Um app Lovable conectado ao Supabase pode usar uma Edge Function como essa URL pública e transformar o evento recebido em uma ação dentro do sistema.
A documentação oficial da Lovable explica que a integração com Supabase inclui Edge Functions para lógica de backend e que ferramentas externas como Make e Zapier podem conversar com o backend do app por HTTP. Isso cria uma ponte natural para fluxos com n8n, Make e serviços que oferecem webhooks.
Quando vale a pena usar webhook
- Receber confirmação de pagamento e atualizar um pedido no banco.
- Receber uma nova mensagem ou evento de uma API de WhatsApp.
- Enviar um lead criado no Make ou n8n para o seu app.
- Sincronizar status de CRM, agenda, suporte ou automações externas.
- Disparar uma ação no backend sem depender de o usuário manter a página aberta.
Arquitetura recomendada: serviço externo → Edge Function → banco
O fluxo recomendado é simples: o serviço externo envia o evento para uma Edge Function; a função valida assinatura, token ou segredo quando existir; depois normaliza os dados e grava apenas o que precisa no banco. O frontend consulta o banco ou recebe atualização em tempo real. Assim, o navegador não precisa conhecer credenciais administrativas nem executar lógica sensível.
Serviço externo
↓ POST /webhook
Edge Function no Supabase
↓ validação + regra de negócio
Banco / fila / automação
↓
Interface criada na LovableComo criar o endpoint passo a passo
1. Defina qual evento você quer receber
Antes de construir, escreva qual evento dispara o fluxo e qual resultado você espera. Exemplo: quando um pagamento for aprovado, atualizar o campo status da assinatura para ativa. Isso evita criar um endpoint genérico demais e facilita testar cada etapa.
2. Crie uma Edge Function para receber POST
No projeto conectado ao Supabase, crie uma função dedicada ao evento. Use um nome claro, como payment-webhook, lead-webhook ou whatsapp-webhook. A função deve aceitar somente os métodos necessários, ler o corpo da requisição e retornar rapidamente um status HTTP coerente.
Deno.serve(async (req) => {
if (req.method !== "POST") {
return new Response("Method not allowed", { status: 405 })
}
const payload = await req.json()
// valide o evento antes de gravar dados
// aplique sua regra de negócio aqui
return Response.json({ ok: true })
})3. Proteja o webhook
Não trate uma URL difícil de adivinhar como mecanismo de segurança. Quando o provedor oferecer assinatura de webhook, valide a assinatura no servidor. Em integrações próprias, use um segredo no header e compare esse valor dentro da Edge Function. A credencial deve ficar em Secrets, nunca em componente React ou variável enviada ao navegador.
4. Configure o Make ou n8n
No Make ou n8n, use um módulo HTTP para enviar POST para a URL da Edge Function. Defina Content-Type como application/json e envie somente os campos necessários. Para testar, comece com um payload pequeno e confirme nos logs da função se a requisição chegou antes de adicionar etapas extras.
5. Torne o processamento idempotente
Muitos provedores reenviam webhooks quando não recebem resposta ou quando ocorre instabilidade. Por isso, use um identificador único do evento e confira se ele já foi processado antes de aplicar a mesma alteração novamente. Isso evita pedidos duplicados, créditos concedidos duas vezes ou múltiplas mensagens.
Exemplo: receber um lead do Make
Imagine um formulário externo conectado ao Make. Quando o formulário é preenchido, o Make envia nome, e-mail e origem para a Edge Function. A função valida um header secreto, procura se o e-mail já existe e cria ou atualiza o lead. O painel criado na Lovable passa a mostrar o novo contato usando os dados já persistidos no Supabase.
