Como usar Supabase no Lovable: o setup que evita dor de cabeça

O Supabase funciona muito bem com o Lovable. O problema é que a integração parece simples demais nas primeiras horas: e revela os dentes quando você coloca o primeiro usuário real no app.

Esse guia cobre o setup que evita os problemas mais comuns: a RLS que quebra o app em produção, a autenticação que parece funcionar mas vaza dado, e a estrutura de tabela que o Lovable entende e gera código certo.

O que é Supabase e por que combina com Lovable

O Supabase fornece banco de dados PostgreSQL, autenticação de usuário, storage de arquivo e uma API REST gerada automaticamente. Tudo isso numa conta só, com plano gratuito que aguenta bem os primeiros meses.

A combinação com Lovable funciona porque o Lovable gera código que usa o cliente JavaScript do Supabase: @supabase/supabase-js: e entende bem os padrões de integração quando você descreve o que quer com clareza.

O Supabase tem uma funcionalidade que o Firebase não tem e que faz diferença pra apps com usuários: Row Level Security (RLS). Com RLS ativo, você controla quem pode ler, inserir, atualizar e deletar cada linha do banco, diretamente em políticas SQL. O app não precisa de lógica de autorização no código.

O setup correto antes de conectar ao Lovable

Antes de copiar a URL e a chave de API pro Lovable, configure o Supabase com cuidado.

1. Crie o projeto no Supabase

Acesse supabase.com, crie um projeto e salve a senha do banco em lugar seguro: ela não fica acessível depois.

Escolha a região mais próxima dos seus usuários. Pra Brasil, sa-east-1 (São Paulo) é a opção certa.

2. Crie as tabelas no SQL Editor

Não use a interface visual de tabelas do Supabase pra criar estruturas complexas. Use o SQL Editor: mais confiável e mais fácil de versionar:

create table public.users (
  id uuid references auth.users on delete cascade not null primary key,
  email text not null,
  name text,
  created_at timestamp with time zone default now()
);

alter table public.users enable row level security;

O campo id referenciando auth.users conecta o perfil do usuário com a autenticação do Supabase.

3. Configure a RLS antes de qualquer coisa

O erro mais comum: deixar RLS desativada em ambiente de desenvolvimento, subir pra produção e descobrir que qualquer usuário consegue ler os dados de qualquer outro.

A RLS fica desativada por padrão nas tabelas novas. Quando ativada sem políticas, bloqueia tudo. Você precisa criar políticas explícitas:

-- Usuário pode ler só seu próprio perfil
create policy "Users can view own profile"
  on public.users for select
  using (auth.uid() = id);

-- Usuário pode atualizar só seu próprio perfil
create policy "Users can update own profile"
  on public.users for update
  using (auth.uid() = id);

Ative RLS em todas as tabelas desde o início, mesmo que você ainda não tenha usuários reais. Ajustar políticas depois é simples; descobrir vazamento de dado em produção é uma dor diferente.

Como conectar o Supabase ao Lovable

Com o projeto configurado, conecte ao Lovable:

Passo 1: No painel do Supabase, vá em Settings > API. Copie:

• Project URL: https://xxxx.supabase.co
• Anon public key: começa com eyJ...

Passo 2: No Lovable, abra as configurações do projeto e procure a opção de conectar ao Supabase. Cole a URL e a chave.

Passo 3: Diga ao Lovable o schema do seu banco. Cole o SQL das tabelas que você criou: o Lovable usa isso pra gerar queries corretas:

“Meu projeto usa Supabase. O schema do banco é: [cole o SQL]. Por favor, use o cliente Supabase pra qualquer operação de banco de dados e respeite as políticas de RLS.”

Quando o Lovable sabe o schema, os prompts de funcionalidade ficam bem mais precisos.

Autenticação: o setup que funciona em produção

O Supabase tem autenticação por email/senha, Google, GitHub e outros provedores. O Lovable gera o código de login bem quando você especifica o provider.

Para email/senha:

"Adiciona autenticação por email e senha. O fluxo: formulário de login na rota /login, formulário de cadastro em /cadastro, redirecionamento pra /dashboard depois do login. Usa o Supabase Auth. Se o usuário não estiver logado e tentar acessar /dashboard, redireciona pra /login."

Um ponto que quebra muita gente: o email de confirmação. Por padrão, o Supabase exige que o usuário confirme o email antes de fazer login. Em desenvolvimento, isso atrasa o teste. Duas opções:

1. Desative a confirmação de email em Authentication > Settings (só pra desenvolvimento: reative antes de ir pra produção)
2. Configure um email provider como Resend no Supabase pra os emails chegarem de verdade durante o teste

O erro que todo mundo comete

Usar a service_role key no código do cliente.

O Supabase tem duas chaves de API: a anon (pública, pra usar no browser) e a service_role (privada, pra usar em servidor, com acesso total ao banco ignorando RLS).

O Lovable usa a anon key por padrão: correto. O erro acontece quando alguém substitui pela service_role achando que vai “resolver problemas de permissão”. Isso bypassa toda a RLS e expõe os dados de todos os usuários pra qualquer um que inspetar o código do app.

Se uma query está falhando com erro de permissão, o problema quase sempre está nas políticas de RLS, não na chave. Reveja as políticas antes de mudar a chave.

Estrutura de tabelas que o Lovable entende bem

Alguns padrões que facilitam a geração de código:

UUID como primary key (em vez de serial integer): o Supabase gera UUIDs automaticamente com gen_random_uuid(). O Lovable lida melhor com UUIDs do que com IDs numéricos em sequência.

created_at e updated_at com default: declare no schema e nunca passe na query: o banco preenche automaticamente.

Foreign keys explícitas: declare as relações no SQL. O Lovable consegue fazer joins corretos quando as foreign keys estão declaradas.

Colunas com nomes simples em snake_case: evite camelCase no banco. PostgreSQL é case-insensitive mas o Supabase JS client se confunde com colunas misturadas.

Próximo passo

A Formação em Vibe Coding do ibe.IA ensina a montar esse setup completo e sair da ideia pra app publicado na mesma semana, com Lovable, Supabase e deploy real.

Conheça a Formação em Vibe Coding

E se essa leitura te ajudou a entender o que está acontecendo, segue a ibe.IA no Instagram (@ibe.ia) que toda semana sai conteúdo desse jeito.