Supabase Tutorial: Como Criar o Backend do seu App com IA em Minutos [2026]

Se você está construindo um app com ferramentas de vibe coding como Lovable, Bolt.new ou Cursor, em algum momento vai precisar de um backend. Banco de dados, autenticação de usuários, armazenamento de arquivos, funções serverless. É aqui que o Supabase entra.

Supabase virou o backend padrão do ecossistema de desenvolvimento com IA em 2026. Não por acaso. Ele oferece PostgreSQL completo, autenticação integrada, storage, edge functions, realtime e uma API REST gerada automaticamente. O plano gratuito é generoso o suficiente para MVPs e projetos pessoais. E a integração com ferramentas de IA é nativa em praticamente todas as plataformas.

Neste tutorial, vamos cobrir tudo: desde criar o projeto e as primeiras tabelas até configurar autenticação, RLS, storage, edge functions e realtime. Vamos mostrar como integrar com as principais ferramentas de vibe coding e comparar com o Firebase.

Por que o Supabase virou o backend padrão

Três fatores explicam a adoção massiva do Supabase no ecossistema de IA.

Integração nativa com ferramentas de IA. O Lovable tem integração direta com Supabase. Você conecta o projeto e a IA cria tabelas, configura autenticação e monta queries automaticamente. O Bolt.new faz o mesmo. O Cursor e o Claude Code se conectam via MCP. Para os LLMs, o Supabase se tornou o backend mais fácil de usar porque a documentação é clara, os padrões são consistentes e as APIs são previsíveis.

PostgreSQL de verdade. Diferente de soluções NoSQL como o Firebase Firestore, o Supabase usa PostgreSQL completo. Isso significa SQL real, tipos fortes, índices, views, funções, triggers, foreign keys e tudo que um banco relacional oferece. Quando o projeto cresce, você não fica preso em limitações de um banco proprietário.

Plano gratuito generoso. O Free tier inclui 500MB de banco de dados, 1GB de storage, 50K auth users ativos mensais, 500K edge function invocations e 2 projetos. Para um MVP ou projeto pessoal, é mais do que suficiente.

A combinação desses fatores criou um efeito de rede: mais ferramentas integram com Supabase, mais desenvolvedores adotam, mais conteúdo é criado, mais ferramentas integram. Em 2026, perguntar "qual backend usar para o app?" geralmente tem uma resposta única: Supabase.

Configuração inicial

Passo 1: criar o projeto

Acesse supabase.com e crie sua conta com GitHub, email ou SSO. Na dashboard, clique em "New Project".

Escolha a organização (ou crie uma), dê um nome ao projeto e defina a senha do banco de dados. Essa senha é usada para conexão direta ao PostgreSQL. Guarde-a em um local seguro.

Selecione a região. Para projetos voltados ao Brasil, escolha "South America (São Paulo)" para menor latência.

O provisionamento leva cerca de um minuto. Quando terminar, você vai ver a dashboard do projeto com todas as seções disponíveis.

Passo 2: explorar a dashboard

A dashboard do Supabase é organizada em seções:

• Table Editor: visualização e edição visual das tabelas
• SQL Editor: execute SQL diretamente, salve queries, use templates
• Authentication: configuração de provedores de login
• Storage: gerenciamento de buckets e arquivos
• Edge Functions: funções serverless TypeScript
• Realtime: configuração de subscriptions em tempo real
• API: documentação automática da API REST gerada

Passo 3: pegar as chaves de API

Vá em Settings, API. Você vai encontrar duas chaves:

• anon key: chave pública, usada no front-end. Segura para expor no client porque o acesso é controlado por Row Level Security (RLS).
• service_role key: chave privada com acesso total. Use apenas no servidor. Nunca exponha no front-end.

Você também vai encontrar a URL do projeto (algo como https://xyzcompanyid.supabase.co). Essa URL + a anon key são tudo que seu front-end precisa para se conectar.

Criando tabelas

O Supabase oferece duas formas de criar tabelas: visual (Table Editor) e por código (SQL Editor). Vamos mostrar as duas.

Via Table Editor (visual)

Clique em "Table Editor" na barra lateral, depois "Create a new table". Defina o nome da tabela, adicione colunas com nome, tipo e constraints. O editor visual é intuitivo: clique para adicionar colunas, defina tipos (text, int4, uuid, timestamptz, boolean, jsonb) e marque opções como primary key, nullable, unique e default value.

Para uma tabela de produtos, por exemplo:

• id: uuid, primary key, default gen_random_uuid()
• name: text, not null
• description: text
• price: numeric, not null
• category: text
• created_at: timestamptz, default now()
• user_id: uuid, referência para auth.users

O Table Editor gera o SQL equivalente automaticamente. Você pode ver o SQL antes de executar, o que é ótimo para aprender.

Via SQL Editor (código)

Para quem prefere SQL, o SQL Editor é direto. Clique em "SQL Editor" na barra lateral e escreva o SQL:

CREATE TABLE products (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  price NUMERIC NOT NULL,
  category TEXT,
  created_at TIMESTAMPTZ DEFAULT now(),
  user_id UUID REFERENCES auth.users(id)
);

O SQL Editor tem autocomplete, syntax highlighting e templates prontos para operações comuns. Ele também salva o histórico de queries executadas.

Relacionamentos entre tabelas

PostgreSQL é um banco relacional. O poder está nos relacionamentos. O Supabase facilita a criação de foreign keys tanto pelo Table Editor quanto por SQL.

Exemplo prático: produtos e categorias

Imagine que você quer normalizar as categorias em uma tabela separada:

CREATE TABLE categories (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL UNIQUE,
  description TEXT
);

CREATE TABLE products (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  price NUMERIC NOT NULL,
  category_id UUID REFERENCES categories(id),
  user_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT now()
);

A foreign key category_id REFERENCES categories(id) cria a relação. O Supabase detecta automaticamente as foreign keys e permite fazer queries com joins via API:

const { data } = await supabase
  .from('products')
  .select('*, categories(name)')

Essa query retorna os produtos com o nome da categoria associada. O Supabase gera o JOIN automaticamente baseado na foreign key. Sem precisar escrever SQL.

Autenticação

Autenticação é uma das features mais fortes do Supabase. Ele suporta múltiplos métodos de login prontos para uso.

Email e senha

O método mais básico. Habilitado por padrão. No front-end:

const { data, error } = await supabase.auth.signUp({
  email: 'usuario@email.com',
  password: 'senha-segura-123'
})

O Supabase envia um email de confirmação automaticamente. Para login:

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'usuario@email.com',
  password: 'senha-segura-123'
})

OAuth com Google e GitHub

Vá em Authentication, Providers na dashboard. Habilite Google e/ou GitHub. Você vai precisar criar um app OAuth no Google Cloud Console ou GitHub Developer Settings e colar o Client ID e Client Secret.

No front-end, o login OAuth é uma linha:

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
})

O Supabase redireciona para o provedor, recebe o callback e cria a sessão automaticamente.

Magic Link

Login sem senha. O usuário recebe um link por email e clica para autenticar. Ótimo para onboarding sem fricção.

const { data, error } = await supabase.auth.signInWithOtp({
  email: 'usuario@email.com'
})

O Supabase gerencia tokens, sessões, refresh tokens e logout automaticamente. Você não precisa implementar nada disso manualmente.

Row Level Security (RLS)

RLS é o mecanismo de segurança mais importante do Supabase. Ele controla quem pode ler, inserir, atualizar e deletar cada linha de cada tabela.

Regra fundamental: habilite RLS em toda tabela que contém dados de usuários. Sem RLS, qualquer pessoa com a anon key pode ler e modificar qualquer dado.

Habilitando RLS

ALTER TABLE products ENABLE ROW LEVEL SECURITY;

Depois de habilitar, ninguém tem acesso até você criar policies explícitas.

Policies comuns

Qualquer pessoa pode ler (dados públicos):

CREATE POLICY "Produtos são públicos para leitura"
ON products FOR SELECT
TO authenticated, anon
USING (true);

Apenas o dono pode inserir:

CREATE POLICY "Usuários inserem seus próprios produtos"
ON products FOR INSERT
TO authenticated
WITH CHECK (auth.uid() = user_id);

Apenas o dono pode atualizar:

CREATE POLICY "Usuários atualizam seus próprios produtos"
ON products FOR UPDATE
TO authenticated
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);

Apenas o dono pode deletar:

CREATE POLICY "Usuários deletam seus próprios produtos"
ON products FOR DELETE
TO authenticated
USING (auth.uid() = user_id);

A função auth.uid() retorna o ID do usuário autenticado. O Supabase injeta automaticamente essa informação baseada no JWT do request. É elegante, seguro e funciona sem código adicional no servidor.

Storage

O Supabase Storage permite armazenar e servir arquivos (imagens, PDFs, vídeos) com controle de acesso granular.

Criando um bucket

Na dashboard, vá em Storage e clique "New bucket". Defina o nome (ex: "avatars") e escolha se o bucket é público ou privado.

• Público: qualquer pessoa pode acessar os arquivos via URL
• Privado: acesso controlado por policies (igual ao RLS)

Upload de arquivo

const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.png`, file, {
    contentType: 'image/png',
    upsert: true
  })

Obtendo a URL pública

const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`)

Transformações de imagem

O Supabase transforma imagens on-the-fly. Para gerar thumbnails:

const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`, {
    transform: { width: 200, height: 200, resize: 'cover' }
  })

Sem precisar de serviço externo. O redimensionamento acontece no edge, com cache automático.

Edge Functions

Edge Functions são funções serverless TypeScript que rodam no Deno runtime, distribuídas globalmente. Use para lógica de servidor que não cabe em policies de banco: integrações com APIs externas, webhooks, processamento de pagamentos, envio de emails.

Criando uma edge function

Via CLI do Supabase:

supabase functions new send-welcome-email

Isso cria a estrutura em supabase/functions/send-welcome-email/index.ts:

import { serve } from "https://deno.land/std/http/server.ts"

serve(async (req) => {
  const { email, name } = await req.json()
  
  // Sua lógica aqui (ex: chamar API do SendGrid)
  
  return new Response(
    JSON.stringify({ message: "Email enviado" }),
    { headers: { "Content-Type": "application/json" } }
  )
})

Deploy

supabase functions deploy send-welcome-email

A função fica acessível em https://seu-projeto.supabase.co/functions/v1/send-welcome-email. Você pode chamá-la do front-end com o client do Supabase:

const { data, error } = await supabase.functions.invoke('send-welcome-email', {
  body: { email: 'usuario@email.com', name: 'João' }
})

Realtime

Supabase Realtime permite que o front-end receba atualizações do banco em tempo real, sem polling. Perfeito para chats, dashboards ao vivo, notificações e qualquer feature que precisa de dados atualizados instantaneamente.

Subscription básica

const channel = supabase
  .channel('products-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'products' },
    (payload) => {
      console.log('Mudança:', payload)
    }
  )
  .subscribe()

Esse código escuta todas as mudanças (INSERT, UPDATE, DELETE) na tabela products. Você pode filtrar por evento específico ou por condição:

.on(
  'postgres_changes',
  { event: 'INSERT', schema: 'public', table: 'products', filter: 'category=eq.electronics' },
  handleNewProduct
)

Para que o Realtime funcione, a tabela precisa ter a feature habilitada na dashboard (Database, Replication).

Integração com ferramentas de vibe coding

Lovable (integração nativa)

O Lovable é a ferramenta que tem a integração mais profunda com Supabase. Na barra lateral do Lovable, clique no ícone do Supabase, conecte seu projeto (ou crie um novo automaticamente), e a IA ganha acesso direto ao banco.

Na prática, você escreve "adicione autenticação com Google e crie uma página de perfil do usuário" e o Lovable cria as tabelas, configura OAuth, monta as telas e configura as policies de RLS. Tudo via prompt.

Bolt.new

O Bolt.new também integra com Supabase nativamente. O workflow é similar: conecte o projeto e a IA gerencia o backend via prompts. A integração não é tão profunda quanto a do Lovable, mas funciona para a maioria dos cenários.

Cursor e Claude Code (via MCP)

O Cursor e o Claude Code se conectam ao Supabase via MCP (Model Context Protocol). O MCP permite que a IA acesse a dashboard do Supabase programaticamente: crie tabelas, execute queries, gerencie autenticação e faça deploy de edge functions diretamente pelo editor ou terminal.

Para configurar o MCP do Supabase no Claude Code, adicione ao arquivo de configuração:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server"]
    }
  }
}

Com o MCP configurado, o Claude Code pode executar queries SQL, criar tabelas, configurar RLS e fazer deploy de edge functions sem que você precise abrir a dashboard.

Supabase vs Firebase

A pergunta que todo mundo faz. Aqui vai a comparação direta.

Supabase vence quando: você quer SQL real, precisa de queries complexas, quer integração com ferramentas de IA, valoriza open source e portabilidade, ou está construindo um SaaS.

Firebase vence quando: você precisa de integração profunda com o ecossistema Google (Android nativo, Google Cloud), quer push notifications nativas, ou já tem um time que conhece Firebase bem.

Para projetos novos em 2026, especialmente se você está usando ferramentas de vibe coding, o Supabase é a escolha padrão. A integração é mais profunda, o modelo de dados é mais flexível e a comunidade de IA está centrada nele.

Preços

O plano Free é surpreendentemente generoso. Para um MVP ou projeto pessoal, você dificilmente vai precisar do Pro nos primeiros meses. O Pro entra quando o projeto cresce e precisa de mais storage, backups diários e suporte por email.

7 dicas para usar o Supabase melhor

1. Sempre habilite RLS. Repita como mantra. Toda tabela com dados de usuários precisa de RLS habilitado com policies explícitas. Sem isso, seus dados estão expostos para qualquer pessoa com a anon key.

2. Use o SQL Editor para aprender. Mesmo que o Table Editor visual seja mais fácil, escrever SQL diretamente ensina como o banco funciona. O SQL que você aprende aqui vale para qualquer banco PostgreSQL.

3. Crie índices para queries frequentes. Se você faz buscas frequentes por uma coluna (ex: email, category), crie um índice. A diferença de performance é enorme em tabelas grandes.

CREATE INDEX idx_products_category ON products(category);

4. Use views para queries complexas. Em vez de repetir queries longas no front-end, crie views no banco e acesse como se fossem tabelas.

5. Guarde a service_role key no servidor. Nunca exponha no front-end. Se precisar fazer operações privilegiadas (ex: criar usuários por admin), use uma edge function com a service key.

6. Use database functions para lógica de negócio. Em vez de fazer tudo no front-end, crie funções PostgreSQL para validações e cálculos complexos. Elas rodam no servidor, mais perto dos dados.

7. Teste localmente com o Supabase CLI. O CLI permite rodar o Supabase inteiro localmente: banco, auth, storage, edge functions. Desenvolva e teste sem depender do ambiente de produção.

Para quem está começando a criar um site com IA ou quer montar o tech stack ideal para 2026, o Supabase é a peça de backend que conecta tudo.

Leia também:

• Lovable Tutorial
• Bolt.new Tutorial
• Como Criar App sem Programar
• V0 Vercel Tutorial
• Cursor AI: Tutorial Completo
• Claude Code: Tutorial Completo
• O Que é Vibe Coding
• O Que é SaaS
• Tech Stack 2026
• Como Criar um Site com IA