Auth0 simplifica o processo de estabelecimento da identidade do usuário em seu aplicativo da web. Ele fornece recursos de autenticação e autorização seguros e personalizáveis por meio de sua API. Use-o e você não precisará se preocupar em criar seu próprio sistema de autenticação do zero.
A integração com o Auth0 facilita a inclusão de autenticação confiável em seu aplicativo React e garante acesso seguro ao seu aplicativo.
As etapas a seguir explicam o que é necessário para integrar Auth0 em um aplicativo React.
O que é Auth0?
Auth0 é um serviço da web que fornece uma API segura para lidar autenticação e autorização do usuário em seus aplicativos.
Ele fornece um sistema de autenticação personalizável que você pode integrar facilmente ao seu aplicativo React. Depois de conectar Auth0 ao seu aplicativo, ele lida com o restante da carga de trabalho de autenticação.
Como o Auth0 funciona?
Auth0 fornece um recurso de login universal que implementa o fluxo de autenticação. Cada vez que um usuário deseja fazer login, a API o redireciona para uma página de login Auth0, ele é autenticado e os dados de carga útil de autenticação bem-sucedida são enviados para seu aplicativo.
Você pode personalizar o fluxo de trabalho de autenticação para seu aplicativo definindo diferentes métodos de login. O Login Universal fornece um nome de usuário e senha como autenticação principal, mas você pode adicione também outras opções, como login social, por meio de um provedor como o Google, e multifator autenticação.
A vantagem de usar esse tipo de autenticação é que você não precisa estar familiarizado com identidade protocolos como OAuth 2.0 ou OpenID Connect, que são comumente usados para criar autenticação segura sistemas.
Criar um novo projeto no console do desenvolvedor Auth0
Para começar, você precisará primeiro se inscrever em um Auth0 conta. Depois de se inscrever, navegue até o seu painel e clique em Criar aplicativo para definir as configurações do projeto de autenticação.
Auth0 fornece diferentes configurações de autenticação, dependendo do tipo de aplicativo que você está construindo. Para este tutorial, preencha o nome do seu aplicativo, selecione Aplicativos da Web de página única, em seguida, clique em Salvar.
Em seguida, selecione Reagir na lista de tecnologias suportadas pelo Auth0.
Configurar os URIs do aplicativo
Depois de criar seu aplicativo e definir as configurações necessárias, no painel do aplicativo, clique no botão Configurações guia para configurar as propriedades de URI necessárias.
Defina as seguintes propriedades:
- URLs de retorno de chamada permitidos. A URL que o servidor Auth0 chamará após a autenticação de um usuário.
- URLs de logout permitidos. A URL para a qual Auth0 redirecionará o usuário quando ele fizer logout.
- Origens da web permitidas. A URL permitida de onde pode vir uma solicitação de autorização.
Para o desenvolvimento local, você pode usar http://localhost: URL 3000. No entanto, depois de enviar seu código para produção, você precisará fornecer as URLs de seu domínio.
Quando terminar de preencher os URLs, vá em frente e clique Salvar alterações na parte inferior da página de configurações.
Defina seus provedores de login social preferidos
No painel de menu esquerdo do painel do aplicativo Auth0, clique em Autenticação, em seguida, selecione redes sociais. A seguir, clique no Criar conexão botão na página de configurações de conexões sociais.
Por fim, selecione e adicione seu provedor de login social preferido.
Configurar Auth0 em seu aplicativo React
Integre o serviço de autenticação Auth0 em seu aplicativo React criando os componentes de login e sucesso.
1. Crie um aplicativo React e configure um arquivo ENV
Criar um aplicativo React, abra a pasta do projeto em seu editor de código. Em seguida, no diretório raiz da pasta do seu projeto, crie um arquivo ENV para conter suas variáveis de ambiente: seu nome de domínio e ID do cliente. Faça login na sua conta Auth0, no painel do aplicativo, copie o nome de domínio e o ID do cliente e salve-os em seu arquivo ENV da seguinte maneira:
REACT_APP_AUTH0_DOMAIN= seu nome de domínio
REACT_APP_AUTH0_CLIENT_ID= seu ID de cliente2. Instale os pacotes necessários
Execute este comando em seu terminal para instalar as dependências necessárias:
npm install @auth0/auth0-react3. Envolva seu componente de aplicativo com o provedor Auth0
O provedor Auth0 usa React Context. Isso permite que você acesse todas as suas propriedades de dentro do componente App. O Provedor Auth0 usa três parâmetros: o domínio do cliente, o ID do cliente e o URI de redirecionamento.
Abra o arquivo index.js, exclua o código React do modelo e adicione o código abaixo:
importar Reagir de'reagir';
importar ReactDOM de'react-dom/client';
importar Aplicativo de'./Aplicativo';
importar{Auth0Provider} de'@auth0/auth0-react';const root = ReactDOM.createRoot(documento.getElementById('raiz'));
root.render(
domínio = {process.env. REACT_APP_AUTH0_DOMAIN}
clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
redirecionarUri = {janela.localização.origem}
>
</Auth0Provider>, document.getElementById('root')
);
4. Criar um componente de página de login
Crie uma nova pasta no diretório /src do seu aplicativo React e nomeie-a como pages. Dentro desta pasta, crie dois arquivos: Login.js e Success.js.
Abra o arquivo login.js e adicione o código abaixo. O componente da página de login renderizará um botão de login.
importar Reagir de'reagir'
importar { useAuth0 } de'@auth0/auth0-react';const Entrar = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();retornar (éAutenticado || (
exportarpadrão Conecte-se
Por padrão, Auth0 fornece um e-mail e senha como método de autenticação. Além disso, dependendo dos provedores de login social selecionados, o Auth0 também exibirá a opção de login do provedor.
5. Crie um componente de página de sucesso
Este componente renderizará dois recursos principais: um perfil de usuário autenticado e um botão de logout.
No arquivo Success.js, adicione o código abaixo:
importar Reagir de'reagir'
importar { useAuth0 } de'@auth0/auth0-react'const Sucesso = () => {
const { usuário, logout, isAuthenticated } = useAuth0();retornar ( éAutenticado && (
Perfil do usuário</h1>
{user.name}</h2>
{usuário.email}</p>
exportarpadrão Sucesso
Depois de fazer login e ser autenticado pelo Auth0, o Auth0 redireciona você de volta ao seu aplicativo e envia dados de carga útil para o seu aplicativo contendo os detalhes do usuário. Você pode usar esses dados em seu aplicativo para criar perfis de usuário personalizados e gerenciar sessões de usuário. A propriedade User do gancho UseAuth permite que você acesse dados específicos do usuário.
O gancho UseAuth0 também fornece uma propriedade chamada isAuthenticated, que permite renderizar os componentes condicionalmente. Se um usuário for autenticado, o código renderizará os detalhes do perfil e exibirá um componente de botão de logout.
Por outro lado, se não estiverem, você renderizará o componente do botão de login. Isso significa que você não precisa especificar as rotas com base no status de autenticação de um usuário, pois essa propriedade gerencia esse processo automaticamente. Auth0 define a lógica de login e logoff, facilitando a implementação da funcionalidade de autenticação.
Vale a pena tentar o serviço de autenticação Auth0?
Auth0 fornece soluções prontas para uso que lidam com os requisitos de autenticação do seu aplicativo. Além disso, o serviço Auth0 oferece suporte para plataformas de desenvolvimento web, móvel e nativo, permitindo que você integre facilmente o sistema de autenticação com uma pilha de tecnologia de sua preferência.