A integração nativa do Lovable com Supabase permite que você gerencie tanto sua interface de usuário front-end quanto seu banco de dados back-end através de uma única interface de chat fácil de usar. Em outras palavras, você pode projetar as telas do seu aplicativo e configurar um banco de dados PostgreSQL na nuvem sem sair do Lovable. Esta abordagem unificada torna o desenvolvimento de aplicativos poderosos acessível a todos – usuários não técnicos podem contar com a orientação do Lovable, enquanto desenvolvedores experientes podem aproveitar recursos avançados do Supabase conforme necessário.

​
Visão Geral

Supabase é uma alternativa open-source ao Firebase, fornecendo um banco de dados PostgreSQL hospedado com capacidades em tempo real, autenticação de usuários, armazenamento de arquivos e funções serverless. Ao conectar Supabase ao seu app Lovable, você ganha instantaneamente um backend pronto para produção sem escrever código boilerplate ou configurar servidores manualmente. O painel web intuitivo do Supabase facilita o gerenciamento de seus dados e usuários, e sua base SQL robusta significa que você mantém todo o poder e escalabilidade de um banco de dados PostgreSQL.

​
Principais recursos desbloqueados pela integração com Supabase:

  • Banco de Dados (PostgreSQL) – Armazene e consulte os dados do seu app com suporte completo ao SQL. Lovable pode gerar automaticamente as tabelas e esquemas necessários baseados em seus prompts.
  • Autenticação de Usuários – Gerencie com segurança cadastros, logins e controle de acesso de usuários. Lovable pode adicionar fluxos de autenticação pré-construídos (email/senha, etc.) ao seu app com um prompt simples.
  • Armazenamento de Arquivos – Faça upload e sirva imagens ou outros arquivos via Supabase Storage. Ótimo para fotos de perfil de usuários, uploads ou qualquer mídia estática que seu app precise gerenciar.
  • Atualizações em Tempo Real – Supabase pode transmitir mudanças de dados ao vivo para seu app. Isso habilita recursos como chat ao vivo, feeds de atividade ou dashboards colaborativos que atualizam instantaneamente para todos os usuários.
  • Edge Functions (Serverless) – Execute lógica de backend personalizada (em JavaScript/TypeScript) na infraestrutura do Supabase. Lovable criará e implantará essas funções para tarefas como envio de emails, processamento de pagamentos ou integração com APIs externas.

​
Por que usar a integração Supabase do Lovable?

Com Lovable, você não precisa fazer malabarismos com ferramentas separadas para design de front-end e configuração de back-end. Simplesmente conversando com a IA do Lovable, você pode construir sua UI e ter o banco de dados subjacente e funções de servidor criadas para você automaticamente. Isso significa desenvolvimento mais rápido e menos dores de cabeça de integração. Por exemplo, se você der o prompt ao Lovable “Adicione um formulário de feedback do usuário e salve as respostas no banco de dados”, Lovable gerará a UI do formulário e configurará uma tabela Supabase para armazenar o feedback – tudo de uma vez. Esta geração end-to-end perfeita é a força única do Lovable, capacitando iniciantes a construir apps complexos e permitindo que usuários avançados se movam mais rapidamente.

​
Primeiros Passos: Conectando Supabase ao Lovable

Conectar um backend Supabase ao seu projeto Lovable é simples. Você precisará de uma conta Supabase (o plano gratuito é suficiente) e um projeto Lovable pronto. Se você ainda não tem uma conta Supabase, pode se inscrever no site do Supabase – não é necessário cartão de crédito para o plano gratuito.
1

Criar uma conta Supabase

Registre uma nova conta Supabase aqui ou faça login se já tiver uma.
2

Criar um novo projeto no Supabase.

Clique em + New Project, preencha os campos necessários e aguarde alguns minutos para a configuração.
3

Conectar Supabase ao Lovable

1

Iniciar a conexão Supabase no Lovable.

No editor Lovable, abra o menu Integrations (geralmente encontrado na barra de ferramentas superior direita). Clique em Connect Supabase. O Lovable solicitará que você faça login no Supabase se ainda não estiver logado.
2

Autorizar e selecionar ou criar um projeto.

Uma tela de login do Supabase aparecerá. Entre na sua conta Supabase e autorize o Lovable. Em seguida, você será solicitado a escolher uma organização e projeto do Supabase para vincular ao seu app Lovable. Você pode selecionar um projeto existente ou criar um novo na hora (o chat do Lovable te guiará na criação de um novo projeto Supabase se necessário).
3

Aguardar a configuração ser concluída.

Após selecionar o projeto, o Lovable configurará automaticamente a conexão. Em alguns segundos, você deve ver uma mensagem de confirmação no chat (ex: ”✅ Supabase connected”). Neste ponto, seu app Lovable está agora vinculado ao banco de dados Supabase – pronto para usar autenticação, armazenamento de dados e outros recursos de backend.
Tanto o Lovable quanto o Supabase oferecem planos gratuitos generosos para desenvolvimento. Se seu app crescer ou precisar de recursos avançados, você pode eventualmente precisar de planos pagos para cada serviço separadamente. Por enquanto, você pode experimentar sem incorrer em custos.

​
Adicionando Autenticação de Usuário

Uma das primeiras coisas que você provavelmente vai querer é autenticação de usuário (para que as pessoas possam se cadastrar e fazer login no seu app). A integração do Lovable com Supabase torna isso trivial de configurar via chat.

​
Email e Senha (Configuração Básica)

Uma vez que seu projeto esteja conectado ao Supabase, o Lovable pode gerar páginas de autenticação para você. Por exemplo, você pode simplesmente solicitar: “Adicionar login”. Isso normalmente criará uma página de login básica (e o fluxo de cadastro relacionado) no seu app, conectada ao sistema de autenticação do Supabase. Depois que o Lovable adicionar a interface de login, você tem algumas maneiras de criar usuários para teste:
Exemplo de prompt:
Adicionar login
  • Via formulário de cadastro do seu app: Use a interface recém-adicionada no seu app para registrar um usuário (isso se comunicará com o Supabase para criar a conta).
  • Via Dashboard do Supabase: Vá para o dashboard do seu projeto Supabase, navegue até Authentication > Users, e adicione manualmente um novo usuário (email e senha). Isso é útil para configurar uma conta de teste rapidamente.
Para conveniência de desenvolvimento, recomendamos desabilitar a confirmação de email no Supabase enquanto você testa. Dessa forma, os usuários podem fazer login imediatamente sem precisar verificar um email. Para fazer isso, abra seu dashboard do Supabase e vá para Authentication > Settings (ou Providers) > Email, então desabilite o requisito “Confirm email”. Você pode reabilitar as confirmações mais tarde em produção para segurança.
O Lovable já terá configurado seu app Lovable para reconhecer usuários autenticados (por exemplo, restringindo certas páginas apenas para usuários logados, se apropriado). Você pode personalizar ainda mais a aparência das páginas de login/cadastro usando o editor do Lovable ou prompts. A Integração Supabase 2.0 até permite adicionar campos extras ao seu formulário de cadastro ou estilizar o formulário para combinar com sua marca.

​
Logins Sociais (ex: Google)

O Supabase suporta logins OAuth como Google, GitHub, Twitter e mais. Você pode integrar esses no seu app Lovable também:
  1. Habilite o provedor no Supabase: No seu dashboard do Supabase, navegue até Authentication > Providers. Você verá uma lista de provedores de login externos. Ative o Google (por exemplo) e siga as instruções para fornecer o Client ID OAuth e Secret necessários do Google. (O Supabase te guiará sobre como obter essas credenciais do console de desenvolvedor do Google.) Salve as configurações – seu projeto Supabase agora sabe como lidar com logins do Google.
  2. Atualize a interface do seu app Lovable: Em seguida, você pode solicitar ao Lovable para adicionar uma opção de login social. Por exemplo: “Adicionar um botão ‘Entrar com Google’ na página de login.” O Lovable modificará a página de autenticação, adicionando um botão de login do Google e o código necessário para iniciar o fluxo OAuth via Supabase.
Uma vez feito isso, os usuários do seu app poderão clicar em “Entrar com Google”, ser redirecionados para o Google para autenticação, e então retornar ao seu app como usuários logados. Você pode habilitar outros provedores (GitHub, Facebook, etc.) de forma similar – apenas lembre-se de configurar cada um no Supabase e então ajustar sua interface Lovable adequadamente.

​
Gerenciando Dados com Supabase

Além da autenticação, o núcleo da maioria dos aplicativos é ler e escrever dados. Com Lovable e Supabase, você pode criar tabelas de banco de dados e conectá-las à sua interface sem sair do prompt de chat.

​
Criando Tabelas de Banco de Dados via Lovable

Após conectar o Supabase, sempre que você precisar armazenar dados de forma persistente, você pode instruir o Lovable e ele coordenará a configuração do banco de dados para você. O processo normalmente se parece com isto:
1

Descreva o recurso e os dados que você precisa

No chat do Lovable, solicite um recurso que envolva armazenamento de dados. Por exemplo, você pode dizer: “Adicione um formulário de feedback e salve as respostas em uma tabela do banco de dados.” Seja o mais claro possível sobre quais dados você quer armazenar (ex: feedback do usuário com uma mensagem e avaliação, ou um item de inventário com nome, preço, etc.). O Lovable usará essas informações para determinar qual estrutura de banco de dados é necessária.
2

Revise o snippet SQL gerado

A IA do Lovable proporá atualizações para seu aplicativo. Como sua solicitação envolve armazenar dados, o Lovable também produzirá um snippet de esquema SQL – essencialmente os comandos para criar a(s) tabela(s) ou colunas necessárias no Supabase. Por exemplo, pode dizer algo como: _“Vou criar uma tabela feedbackcom colunas _ id, message, e rating” e fornecer o código SQL para isso. Este snippet aparece no chat ou barra lateral para você copiar.
3

Execute o SQL no Supabase

Abra seu painel do Supabase e vá para o SQL Editor. Cole o snippet SQL do Lovable e execute-o, o que criará a nova tabela (ou alterará uma tabela existente) em seu banco de dados. Você pode verificar no Table Editor do Supabase que a tabela agora existe com as colunas especificadas.
4

Confirme e deixe o Lovable finalizar a integração

De volta ao Lovable, confirme que você executou o SQL (o chat pode pedir confirmação, ou você pode simplesmente dizer ao Lovable “pronto” ou clicar em uma confirmação fornecida). O Lovable então finalizará a integração: ele atualiza a interface do seu aplicativo para vincular entradas de formulário, listas ou outros componentes à nova tabela do Supabase. Continuando nosso exemplo, o formulário de feedback em seu aplicativo agora está conectado—quando um usuário enviar feedback, ele será salvo na tabela feedback, e você pode recuperar e exibir essas entradas também.
É isso\! Você não teve que projetar manualmente um esquema de banco de dados ou escrever qualquer código backend – Lovable e Supabase cuidaram disso a partir da sua descrição. Você pode repetir este processo para qualquer novo recurso de dados (posts de blog, comentários, produtos, etc.). Por exemplo, se você quiser que os usuários possam postar artigos em seu aplicativo, você poderia solicitar: “Permita que os usuários criem posts com um título e conteúdo, e armazene estes no banco de dados.” O Lovable geraria uma tabela posts (com campos para título, conteúdo, autor, timestamps, etc.), daria a você o SQL para adicioná-la ao Supabase, e então conectaria os formulários e páginas do front-end a essa tabela.
O painel do Supabase oferece uma interface rica para gerenciar seus dados. Você pode visualizar e editar linhas de tabela em uma interface semelhante a uma planilha, definir relacionamentos entre tabelas, e até mesmo importar dados de CSV ou Excel. Por baixo dos panos, é tudo PostgreSQL – o que significa que você pode realizar consultas complexas ou usar recursos SQL conforme necessário. O Supabase até fornece um AI SQL Assistant em seu editor SQL para ajudá-lo a escrever consultas se você não estiver familiarizado com SQL. Isso pode ser útil para análises avançadas ou solução de problemas.

​
Armazenamento de Arquivos (Imagens e Mídia)

Quando seu aplicativo Lovable precisa lidar com uploads de arquivos (por exemplo, fotos de perfil de usuários, anexos ou qualquer mídia), a integração com Supabase tem você coberto. O Supabase inclui um serviço de Storage para hospedar arquivos (imagens, vídeos, PDFs, etc.) convenientemente junto com seu banco de dados. Se você adicionar um componente de Upload ou um recurso de upload de imagem em seu aplicativo Lovable, o Lovable utilizará o Supabase Storage nos bastidores. Os arquivos enviados serão armazenados em um bucket de armazenamento dentro do seu projeto Supabase, e você obterá uma URL ou referência para usar para exibir ou baixar o arquivo posteriormente. Por padrão, o plano gratuito do Supabase permite que arquivos de até 50MB cada sejam enviados. Isso é suficiente para a maioria das imagens ou vídeos curtos. Se seu aplicativo precisar lidar com arquivos maiores, os planos pagos do Supabase suportam uploads maiores (incluindo uploads resumíveis para arquivos muito grandes). Você pode organizar arquivos em pastas (buckets) e gerenciar permissões de acesso através do painel do Supabase conforme necessário.
Suponha que seu aplicativo tenha perfis de usuário e você queira que os usuários adicionem uma foto de perfil. Você pode solicitar ao Lovable: “Adicione um upload de foto de perfil à página de configurações da conta.” O Lovable criará a interface para fazer upload de uma imagem. Graças à integração com Supabase, quando um usuário faz upload de um arquivo, ele é salvo no seu Supabase Storage (em um bucket, por exemplo public/avatar-images), e o Lovable cuidará de recuperar essa URL da imagem para exibir a foto de perfil em seu aplicativo. Tudo isso acontece sem você escrever nenhum código de manipulação de armazenamento.

​
Armazenando Segredos (Chaves de API e Configuração)

Muitas aplicações requerem chaves secretas ou credenciais de API para se conectar com serviços de terceiros — por exemplo, Stripe para pagamentos ou OpenAI para recursos de IA. Quando o Supabase está conectado, o Lovable oferece uma maneira segura de gerenciar e usar esses segredos. O Lovable detecta automaticamente quando um recurso requer um segredo e solicita com uma interface para inserir os valores necessários. Esses segredos são armazenados com segurança no gerenciador de segredos do Edge Function do Supabase para seu projeto. Eles são criptografados e mantidos seguros no backend. Quando você implanta Edge Functions (veja a próxima seção), elas podem acessar esses segredos para se conectar com serviços externos.
Por exemplo, se você integrar o Stripe para pagamentos, você armazenaria sua Chave Secreta do Stripe como um segredo. Quando o Lovable implanta uma função de processamento de pagamento no Supabase, ela incluirá automaticamente essa chave do armazenamento de segredos para que a função possa se autenticar com o Stripe. Dessa forma, você nunca precisa codificar segredos diretamente em seu aplicativo e evita expô-los publicamente.

​
Lógica de Backend com Edge Functions

Às vezes seu app precisa de lógica de backend personalizada além do CRUD básico de dados (Create, Read, Update, Delete). Supabase Edge Functions são funções serverless (similares ao AWS Lambda) que permitem executar código no backend acionado por eventos ou requisições. A integração do Lovable significa que você pode definir o comportamento desejado do backend em linguagem simples, e o Lovable escreverá e implantará o código necessário da Edge Function no Supabase para você. Casos de uso típicos para Edge Functions no Lovable incluem:
  • Usando serviços de IA: por exemplo, processando alguma entrada com APIs do OpenAI ou Anthropic (com a chave da API armazenada como um segredo conforme descrito acima).
  • Enviando emails ou notificações: por exemplo, enviando um email de boas-vindas quando um usuário se cadastra, via uma API de email como Resend.
  • Processando pagamentos: por exemplo, criando uma sessão de checkout ou cumprindo um pedido usando a API do Stripe.
  • Tarefas agendadas: por exemplo, executando uma tarefa de limpeza ou resumo a cada hora/dia (Supabase Edge Functions podem ser acionadas em um cronograma).
  • Computações complexas ou integrações com terceiros: qualquer código que você não queira executar no lado do cliente pode ser feito em uma Edge Function.
Para adicionar uma função de backend, simplesmente descreva o que você precisa no chat do Lovable. Por exemplo: “Quando um usuário enviar o formulário de feedback, analise o texto usando OpenAI e armazene uma pontuação de sentimento.” O Lovable gerará o código para essa lógica como uma Supabase Edge Function (neste caso, chamando a API do OpenAI) e a implantará no seu projeto Supabase. Ele também atualizará seu app Lovable para chamar essa função no momento certo (por exemplo, no envio do formulário) e lidar com a resposta. Você pode encontrar e monitorar suas Edge Functions no painel do Supabase em Functions. Cada função terá logs que mostram execuções recentes e qualquer saída ou erro. A Integração Supabase 2.0 do Lovable melhora essa experiência lendo automaticamente esses logs quando algo dá errado – se sua função apresentar erro, o Lovable mostrará a mensagem de erro no chat para ajudá-lo a solucionar problemas. É claro, você sempre pode verificar os logs do Supabase por conta própria para mais detalhes ou para ter tranquilidade.
Antes de entrar no ar: As regras de segurança padrão do Supabase são permissivas para desenvolvimento, mas você deve configurar políticas de Row Level Security (RLS) para proteger seus dados em produção. RLS permite que você defina quem pode ler ou escrever cada linha nas suas tabelas de banco de dados (por exemplo, garantindo que usuários possam acessar apenas seus próprios dados). O Lovable pode ajudar na geração de políticas RLS básicas se você solicitar (por exemplo, “Aplique políticas de segurança para que usuários possam editar apenas seu próprio feedback”). No entanto, sempre revise e teste essas políticas no painel do Supabase em Auth > Policies. A configuração adequada de segurança é crucial antes de convidar usuários reais para seu app.

​
FAQ