Levar um app à produção é empilhar camadas sobre o que já funciona. O diagrama abaixo mostra a ordem: começar do app no ar, proteger com autenticação e RLS, monetizar com pagamento e, por fim, ligar workflows externos por webhook.

Diagrama ilustrativo — recriação conceitual das camadas de produção, não uma captura de tela real.

Um app sem login é um app aberto: qualquer pessoa com a URL pode disparar o workflow e consumir os seus tokens de IA — e você paga pelo uso dos outros. Autenticar resolve dois problemas de uma vez: protege o uso (só usuários cadastrados acionam o backend) e protege os dados (cada um vê só o que é seu).

O Supabase entra como provedor de banco e autenticação: em Plan Mode, você pede à IA para adicionar login/cadastro ao app usando o Supabase. Do lado da plataforma, você cria o projeto, define a senha do banco (distinta da senha de login) e escolhe a região.

Setup do Supabase

Row-Level Security são regras que vivem dentro do banco, não no código da interface. Elas garantem que um usuário só veja as suas próprias linhas — mesmo que haja um bug no frontend. É uma camada de defesa que não depende do código da tela estar perfeito: uma trava no nível mais profundo.

Duas configurações fazem a autenticação funcionar de ponta a ponta. A migração SQL: rodar no SQL editor do Supabase o SQL gerado pela IA para criar a tabela (ex.: a tabela de leads). E as URLs de auth: configurar a URL do app (Vercel) e a redirect URL, para que o login volte corretamente para o app.

-- migração gerada pela IA
create table leads (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users not null,
  empresa text,
  score int,
  created_at timestamptz default now()
);

-- liga o Row-Level Security
alter table leads enable row level security;

Antes de seguir, faça uma auditoria explícita: limpe a conversa e peça à IA para atuar como especialista em segurança e revisar o app. Uma auditoria pedida de propósito pega vulnerabilidades que passam batido no dia a dia — e dá uma lista clara do que corrigir.

O checklist da auditoria

Com o Stripe, o app vira um SaaS: um modelo freemium com um tier grátis limitado e um tier pago por assinatura, via Stripe Checkout. A motivação é a mesma da autenticação — limitar o uso para você não pagar pelo consumo ilimitado de IA dos usuários — mas agora com receita do outro lado.

A integração do Stripe junta quatro peças que vêm de momentos diferentes. Você cria o produto recorrente e copia o price ID; pega as chaves (publishable + secret); cria o webhook apontando para a sua URL com os eventos certos; e roda a migração da tabela de assinaturas no Supabase.

As peças da integração

Para dar uma interface bonita a um workflow n8n, o padrão é trocar dois nós: o primeiro (o formulário) por um Webhook trigger, e o último por um nó "Respond to Webhook". O frontend (gerado e melhorado com a skill de design) envia os dados para a URL do webhook e exibe a resposta — ligado por uma env var no Vercel.

Converter o workflow + ligar o frontend

A jornada inteira é uma lição de iteração incremental: o app começou como um prompt de uma frase e cresceu por camadas — design → autenticação → pagamento → integração. Boa engenharia é assim: começar pequeno, publicar cedo e escalar conforme a necessidade, sem planejar tudo de uma vez.

As camadas, em ordem