Autenticação no Supabase: e-mail, magic link, OAuth, RLS | We.Inc
Código supabase-js v2 que funciona para e-mail e senha, magic links, login OAuth, listeners de sessão e logout, além de políticas de row level security que usam auth.uid().
O Supabase Auth faz o login das pessoas com e-mail e senha, magic links de uso único, códigos por telefone ou provedores OAuth como o GitHub, tudo pelo objeto supabase.auth do supabase-js. Cada login gera uma sessão cujo token chega ao seu banco de dados, onde políticas de row level security comparam auth.uid() com uma coluna user_id para decidir o que aquela pessoa pode ler.
Métodos de login e a chamada de cada um
Método
Chamada no supabase-js v2
Bom para
E-mail e senha
auth.signUp / auth.signInWithPassword
Contas tradicionais
Magic link
auth.signInWithOtp({ email })
Nada de senhas para esquecer
Código por SMS ou WhatsApp
auth.signInWithOtp({ phone })
Produtos pensados para o celular
Provedor OAuth
auth.signInWithOAuth({ provider })
Login com um clique usando uma conta existente
Logout
auth.signOut()
Encerrar a sessão
A autenticação é a parte de um projeto Supabase que as pessoas mais configuram errado: o login funciona, mas os dados ficam totalmente expostos ou o servidor confia em um cookie em que não deveria. Escolha um método abaixo para pegar o código dele e depois siga a seção de políticas para que cada pessoa veja só as próprias linhas.
Escolha um método de login no seletor de código e copie o trecho para o seu app.
Ative o provedor correspondente no dashboard do Supabase e adicione o endereço do seu site às URLs de redirecionamento permitidas.
Escute os eventos de autenticação para que a interface se atualize quando alguém entra ou sai.
Ative o row level security em todas as tabelas com dados pessoais e adicione políticas que usem auth.uid().
Com a confirmação de e-mail ativada, o signUp retorna um usuário mas uma sessão null até o link ser clicado, então mostre uma mensagem pedindo para conferir a caixa de entrada em vez de um dashboard.
Escreva a função como (select auth.uid()) dentro das políticas. Assim o Postgres pode avaliá-la uma vez por instrução em vez de uma vez por linha.
auth.uid() é null em requisições sem usuário logado, então uma política que o compara com user_id simplesmente não corresponde a nada para visitantes anônimos.
No servidor, não confie no getSession() lido dos cookies; chame getUser() ou getClaims() para verificar quem está pedindo.
A chave publishable (anon) é segura no navegador porque as políticas a limitam. Uma chave secret ou service role ignora o row level security e precisa ficar no servidor.
Perguntas frequentes
O magic link do Supabase é a mesma coisa que OTP?
Os dois começam pelo signInWithOtp. No e-mail, a mensagem traz um link quando o template usa a URL de confirmação e um código quando usa o token. O login por telefone só aceita códigos, por SMS ou WhatsApp.
Como adiciono login com Google ou GitHub?
Ative o provedor no dashboard com o client ID e o secret fornecidos por ele e depois chame signInWithOAuth com o nome do provedor e um endereço redirectTo opcional. A pessoa volta para o seu site já logada.
Como sei quando um usuário entra ou sai?
Registre o onAuthStateChange. Ele informa eventos como INITIAL_SESSION, SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED e PASSWORD_RECOVERY e retorna uma inscrição que você cancela quando o componente é desmontado.
Por que usuários logados não veem nada depois que ativei o RLS?
Com o row level security ativado, a tabela nega tudo até que uma política permita. Adicione uma política de select para o papel authenticated que compare (select auth.uid()) com a coluna do dono.
Devo usar Supabase Auth ou Firebase Auth?
Os dois cobrem os métodos comuns. A diferença maior é o banco de dados por baixo; a nossa comparação Supabase vs Firebase analisa essa escolha em detalhes.
Sessões e tokens
Depois do login, o supabase-js guarda um access token de curta duração e um refresh token, e renova o access token automaticamente. Toda consulta que você faz pelo mesmo client envia o access token, e é assim que o Postgres fica sabendo o ID do usuário.
Em apps renderizados no servidor, a sessão fica em cookies. O guia de autenticação com Next.js deste site cobre essa ligação, então esta página fica com a biblioteca cliente e as regras do banco de dados.
O row level security é a verdadeira tranca
Esconder um botão na interface não protege os dados, já que qualquer pessoa pode chamar a sua API com a chave pública. As políticas rodam dentro do Postgres em cada requisição, o que faz delas o lugar onde a posse dos dados é garantida.
Escreva uma política por ação. Uma política de select usa using, enquanto o insert precisa de with check para que ninguém crie linhas em nome de outra pessoa, e o update geralmente precisa dos dois.
Políticas que usam auth.uid()
Cada pessoa lê e grava só as próprias notas
Rode no editor SQL. O valor padrão preenche user_id a partir do token, e o with check impede que alguém insira linhas para outro usuário.
E-mail e senha
Crie a conta e depois faça login. Com a confirmação ativada, data.session é null até o link do e-mail ser clicado.
Magic link
Envia um e-mail cujo link faz o login da pessoa e a leva para o endereço de redirecionamento.
OAuth (GitHub)
Redireciona para o provedor e de volta. Antes, ative o provedor e configure as chaves dele no dashboard.
Listener de sessão e logout
Mantém a interface em sincronia com a sessão e remove o listener quando você terminar.