Como criar autenticação no Lovable: login, cadastro e proteção de rotas com Supabase

O app está bonito, as telas funcionam, mas qualquer pessoa que abre o link tem acesso a tudo.

Não tem login, não tem cadastro, não tem senha.

Adicionar autenticação é o passo que separa um projeto de demonstração de um produto que você pode cobrar de usuário.

Esse guia mostra o caminho completo: do Supabase configurado ao Lovable com login funcional, cadastro de usuário e proteção de rotas que bloqueia acesso sem autenticação.

O que é autenticação e onde ela começa

Autenticação é o processo de verificar quem é o usuário antes de deixar ele acessar o sistema.

No Lovable, a autenticação não fica dentro do Lovable. Ela fica no Supabase.

O Supabase tem um módulo de autenticação pronto que gerencia cadastro, login, logout, recuperação de senha e sessão de usuário. O Lovable se conecta a esse módulo via API e usa os dados de sessão pra saber se o usuário está logado ou não.

Isso significa que a senha do usuário nunca fica no Lovable. Ela fica no Supabase, com criptografia bcrypt, no mesmo padrão usado por sistemas bancários.

Pra funcionar, os dois precisam estar conectados antes de você criar as telas de login no Lovable.

Configurando o Supabase para autenticação

O primeiro passo é criar um projeto no Supabase em supabase.com.

Dentro do projeto, você acessa a seção “Authentication” no menu lateral. O Supabase já vem com o provedor de email/senha ativado por padrão.

Três configurações que vale ajustar antes de conectar ao Lovable:

Email de confirmação: por padrão, o Supabase envia um email de confirmação quando o usuário cria conta. Em ambiente de desenvolvimento, isso atrasa o teste. Você pode desativar temporariamente em “Email Confirmations” nas configurações de autenticação e reativar antes de ir pra produção.

URL de redirecionamento: é pra onde o usuário vai depois que clicar no link de confirmação do email ou de recuperação de senha. Coloca a URL do seu projeto Lovable aqui. Sem isso, o link de email leva pra uma página em branco.

RLS (Row Level Security): quando você cria tabela no Supabase com dados do usuário, precisa ativar RLS e criar política que só permite o usuário ver os próprios dados. Sem RLS, qualquer usuário logado vê o dado de todos os outros.

Com essas três configurações feitas, você pega a URL do projeto e a chave pública (anon key) no menu “API” do Supabase. Esses dois valores são o que o Lovable precisa pra se conectar.

Criando login e cadastro no Lovable

Com o Supabase configurado, você abre o Lovable e conecta os dois projetos no menu de integrações.

Depois, você pede pra o Lovable criar as telas de autenticação. Um prompt que funciona:

Crie um sistema de autenticação completo com:
- Tela de login com email e senha
- Tela de cadastro com nome, email e senha
- Link "Esqueci minha senha" que envia email de recuperação
- Redirecionamento pra [tela inicial] depois do login
- Botão de logout no header
Use o Supabase que já está conectado como backend de autenticação.

O Lovable cria as telas e conecta automaticamente ao Supabase. O formulário de cadastro cria o usuário no Supabase. O formulário de login verifica as credenciais no Supabase e cria a sessão.

Se o Lovable não conectar automaticamente, você pede: “usa a integração do Supabase pra autenticação, não cria lógica de autenticação local”.

Protegendo rotas que precisam de login

Telas de login e cadastro prontas, mas se você abrir qualquer outra URL do app sem estar logado, ainda tem acesso.

Você precisa proteger as rotas que só usuário logado pode ver.

Peça pro Lovable:

Adiciona proteção em todas as rotas exceto /login e /cadastro:
- Se o usuário não está logado, redireciona pra /login
- Verifica a sessão do Supabase pra saber se está autenticado

O Lovable implementa um componente de rota protegida que verifica a sessão antes de renderizar a tela. Se não tem sessão ativa, redireciona pra login automaticamente.

Uma verificação importante depois de implementar: abra o app em aba anônima do navegador e tente acessar uma URL interna direto, sem passar pelo login. Se o Lovable redirecionar pra página de login, a proteção está funcionando. Se carregar a tela diretamente, a proteção não está aplicada em alguma rota.

Boas práticas depois da autenticação funcionando

Autenticação básica funcionando é o piso. Três ajustes que elevam a segurança do produto final:

Política de senha: peça pro Lovable adicionar validação de senha com mínimo de 8 caracteres, pelo menos uma letra maiúscula e um número. Isso vai no formulário de cadastro e de redefinição de senha.

Expiração de sessão: o Supabase por padrão mantém sessão por 1 hora e renova automaticamente se o usuário está ativo. Pra apps com dados sensíveis, vale reduzir o tempo de expiração nas configurações de autenticação do Supabase.

Não guardar informação sensível no localStorage: o Lovable pode ter salvado algum dado do usuário no localStorage do navegador. Verifique com o Lovable se dados como email, nome ou ID estão sendo persistidos ali, e peça pra remover o que não precisa ficar no cliente.

Com autenticação funcionando e RLS ativo no Supabase, o app tem um nível de segurança real, não só aparência de segurança.

A Formação em Vibe Coding da ibe.IA ensina a criar apps com Lovable, Cursor, Claude Code e Supabase e a configurar autenticação, banco de dados e publicação do zero ao app publicado.

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.