Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Construir um sistema de autenticação personalizado pode ser uma tarefa assustadora. Requer uma compreensão profunda dos protocolos de autenticação e dos processos de autenticação e autorização do usuário. No entanto, ao integrar uma ferramenta como o Supabase, você pode se concentrar mais na construção da lógica principal do seu aplicativo.

Supabase é uma alternativa Firebase de código aberto que fornece uma plataforma de desenvolvimento baseada em nuvem. Ele oferece uma variedade de serviços de back-end, como um banco de dados Postgres completo, um serviço de autenticação e funcionalidades sem servidor.

Ele foi projetado para ser mais acessível, permitindo que você configure projetos rapidamente. Acompanhe para saber como integrar o serviço de autenticação em seus aplicativos React.js.

Criar um novo projeto no Supabase Developer Console

instagram viewer

Para criar um novo projeto no Supabase Developer Console, siga estas etapas:

  1. Inscreva-se para um Supabase conta de desenvolvedor. Navegue até o painel e crie um novo projeto.
  2. Preencha o nome do projeto e uma senha (opcional para este tutorial, mas recomendado ao configurar um banco de dados), selecione a região e, finalmente, clique em Criar novo projeto.
  3. Em Configurações da API, copie o projeto URL e a anônimo público chave.

Configurar um provedor de autenticação

Um provedor de autenticação fornece uma maneira segura para os usuários se autenticarem usando vários logins sociais. Por padrão, o Supabase fornece um provedor de e-mail. Além disso, você pode adicionar outros provedores, como Google, GitHub ou Discord, dependendo de suas preferências.

Este tutorial demonstrará como configurar um Google Provider. Para fazer isso, siga estas etapas:

  1. No painel esquerdo, selecione o Autenticação aba.
  2. Na página Configurações de autenticação, selecione o Provedores opção e, finalmente, selecione a opção Provedor do Google da lista de provedores. Observe que o provedor de e-mail já está configurado por padrão. Você não precisa fazer nenhuma configuração.
  3. Habilite o Fornecedor botão de alternância.
  4. O Google Provider requer duas entradas: um ClientID e um ClientSecret. Você obterá esses dois valores depois de criar um aplicativo no Google Developer Console. Por enquanto, copie o URL de redirecionamento. Você o usará para configurar um aplicativo no Google Developer Console para obter o ClientID e o ClientSecret.

Configure seu projeto no Google Developer Console (GDC)

Para autenticar com o Google, você precisará registrar seu aplicativo no Google Developer Console (GDC) e obter um ClientID e ClientSecret. Siga estas etapas para configurar um projeto no GDC:

  1. Vá para Console do desenvolvedor do Google e faça login com sua conta do Google para acessar o console.
  2. Uma vez logado, navegue até o APIs e serviços guia, escolha o Criar credenciais opção e, em seguida, selecione ID do cliente OAuth.
  3. Especifique o tipo de aplicativo nas opções fornecidas e, em seguida, preencha o nome do seu aplicativo.
  4. Em seguida, especifique a URL de rota inicial do seu aplicativo (http//:localhost: 3000) e, finalmente, especifique a URL de redirecionamento de retorno de chamada. Cole o URL de redirecionamento que você copiou da página de configurações do Supabase Google Provider. Clique em Salvar para concluir o processo.
  5. Copie o ID do Cliente e Cliente Secreto e volte para o painel do projeto Supabase e cole-os nos campos de entrada ClientID e ClientSecret na página de configurações do Google Provider. Clique Salvar para habilitar o provedor.

Configurar o serviço de autenticação Supabase em um aplicativo React.js

Criar um aplicativo React.jse abra a pasta do projeto em seu editor de código favorito. Em seguida, no diretório raiz da pasta do projeto, crie um arquivo ENV para armazenar as variáveis ​​de ambiente: a URL do projeto e a chave anônima pública. Vá para a página de configurações do Supabase, abra a seção API e copie o URL do projeto e a chave anônima pública.

REACT_APP_SUPABASE_URL= URL do projeto
REACT_APP_SUPABASE_API_KEY = público chave anônima

1. Instale os pacotes necessários

Execute este comando em seu terminal para instalar as dependências necessárias:

npm instalar @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Crie os componentes da página de login e da página de sucesso

Crie uma nova pasta no diretório /src de seu aplicativo React.js e nomeie-a como pages. Dentro desta pasta, crie dois arquivos: Login.js e Success.js.

3. Componente da página de login

Este componente renderizará um recurso de inscrição e login, utilizando a IU de autenticação React.js fornecida pelo Supabase. Você importou a IU de autenticação como uma dependência (@supabase/auth-UI-react), simplificando a implementação da funcionalidade de autenticação.

No arquivo login.js, adicione o código abaixo:

importar Reagir de'reagir';
importar {criarCliente} de'@supabase/supabase-js';
importar {Auth, ThemeSupa} de'@supabase/auth-ui-react';
importar {useNavigate} de'react-router-dom';
const supabase = criarCliente(
processo.env.REACT_APP_SUPABASE_URL,
processo.env.REACT_APP_SUPABASE_API_KEY
); 
funçãoConecte-se() {
const navegue = useNavigate(); 
 supabase.auth.onAuthStateChange(assíncrono (evento) =>{
se (evento !== "ASSINADO") {
 navegar('/sucesso');
 }outro{
 navegar('/');
 }
 })
retornar (
<divnome da classe="Aplicativo">
<cabeçalhonome da classe="Cabeçalho do aplicativo">
 supabaseClient={supabase}
 aparência={{tema: TemaSupa}}
 tema="escuro"
 provedores={['Google']}
 /> 
cabeçalho>
div>
 );
}
exportarpadrão Conecte-se;

Vamos decompô-lo:

  • Inicialize um cliente Supabase com as variáveis ​​de ambiente - o URL do seu projeto e sua chave anônima pública no arquivo ENV.
  • Configure um ouvinte de evento para rastrear alterações no estado de autenticação usando o método supabase.auth.onAuthStateChange(), ou seja, se o o estado de autenticação não é "SIGNED_OUT" então o usuário é navegado para a página '/success', caso contrário, o usuário é navegado para a página '/' (página inicial/login).
  • Você usará o método de navegação do gancho useNavigate para gerenciar esse processo.
  • Por fim, retorne um div contendo o componente React Auth UI da biblioteca Supabase com uma aparência de themeSupa (fornecido por Supabase), tema escuro e provedor do Google definido como propriedades.

4. Componente da página de sucesso

Este componente renderizará uma página de sucesso com os detalhes do usuário depois que um usuário for autenticado com sucesso e um botão de saída.

No arquivo Success.js, adicione o código abaixo:

importar Reagir de'reagir';
importar {criarCliente} de'@supabase/supabase-js';
importar {useNavigate} de'react-router-dom';
importar {useEffect, useState} de'reagir';
const supabase = criarCliente(
processo.env.REACT_APP_SUPABASE_URL,
processo.env.REACT_APP_SUPABASE_API_KEY
); 
funçãoSucesso() {
const [usuário, setUsuário] = useState([]); 
const navegue = useNavigate(); 
 useEffect (() => {
assíncronofunçãogetUserData(){
aguardam supabase.auth.getUser().then((valor) => {
se(valor.dados?.do utilizador) {
setUser(valor.dados.do utilizador)} 
 }) }
 getUserData();
 },[]);
const avatar = usuário?.user_metadata?.avatar_url; 
const userName = user?.user_metadata?.full_Name; 
assíncronofunçãosignOutUser(){
aguardamsupabase.auth.sair();
 navegar('/');
 };
retornar (
<divnome da classe="Aplicativo">
<cabeçalhonome da classe="Cabeçalho do aplicativo">
<h1>Login bem-sucedidoh1>
<h2>{nome de usuário}h2>
<imgorigem={avatar} />
<botãoao clicar={()=> signOutUser()}>Sairbotão>
cabeçalho>
div>
 );
}
exportarpadrão Sucesso;

Vamos decompô-lo:

  • Inicialize um cliente Supabase com as variáveis ​​de ambiente - o URL do seu projeto e sua chave anônima pública no arquivo ENV.
  • Usar Ganchos do React.js, useState e useEffect, para obter dados da resposta da API.
  • O gancho useEffect implementa uma função assíncrona que chama o método supabase.auth.getUser. Este método recupera as informações do usuário associadas à sessão do usuário atual.
  • A função assíncrona então verifica se os dados do usuário existem e os configura para a variável de estado, se existirem.
  • A função signOutUser usa o método supabase.auth.signOut para desconectar o usuário e levá-lo de volta à página de login quando ele clicar no botão sair.
  • Por fim, retorne um div com algumas das informações do usuário.

5. Configurar as rotas de página

Por fim, configure as rotas para as páginas de login e sucesso.

No arquivo app.js, adicione o código abaixo:

importar Reagir de'reagir';
importar { NavegadorRouter como Roteador, Rotas, Rota } de'react-router-dom';
importar Conecte-se de'./pages/Login';
importar Sucesso de'./páginas/Sucesso';
funçãoAplicativo() {
retornar (
<Roteador>
//Define as rotas
"/" elemento={} />
"/sucesso" elemento={} />
Rotas>
Roteador>
 );
}
exportarpadrão Aplicativo;

Vamos decompô-lo:

  • Defina as duas rotas: uma rota para a página de login e uma rota para a página de sucesso usando os componentes do roteador da biblioteca react-router.
  • Defina os caminhos de rota como '/' e '/success', respectivamente, e atribua os componentes Login e Success às ​​suas respectivas rotas.
  • Por fim, execute este comando em seu terminal para ativar o servidor de desenvolvimento: 
 npm começar
  • Navegar para http//:localhost: 3000 no seu navegador para ver o resultado. O componente de login renderiza o React-auth-UI do Supabase com os provedores de e-mail e Google.

Você pode autenticar usando o Google ou se inscrever com seu e-mail e senha e usar essas credenciais para fazer login. A vantagem de usar os provedores de login social do Supabase ou o provedor de e-mail é que você não precisa se preocupar com a lógica de inscrição.

Uma vez que um usuário se cadastra com um provedor social ou com um e-mail e uma senha, os dados serão armazenados no banco de dados de usuários Auth do Supabase para o seu projeto. Quando eles fazem login usando suas credenciais, o Supabase valida os detalhes com as credenciais usadas para se inscrever.

Supabase torna a autenticação no React Easy

O Supabase oferece um conjunto abrangente de recursos além da autenticação, como hospedagem de banco de dados, acesso à API e streaming de dados em tempo real. Ele também oferece recursos como construtor de consultas e visualização de dados para ajudar os desenvolvedores a criar e gerenciar seus aplicativos com mais eficiência.

Com seu painel intuitivo e API robusta, o Supabase é uma ferramenta poderosa para criar aplicativos escaláveis ​​e seguros.