Como integrar o serviço de autenticação Auth0 com um aplicativo React

2023/01/31

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 com a 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ê também pode adicionar outras opções, como login social, por meio de um provedor como o Google, e autenticação multifator.

A vantagem de usar esse tipo de autenticação é que você não precisa estar familiarizado com protocolos de identidade como OAuth 2.0 ou OpenID Connect, que são comumente usados para criar sistemas de autenticação seguros.

Criar um novo projeto no console do desenvolvedor Auth0

Para começar, você precisará primeiro se inscrever em uma conta Auth0 . Depois de se inscrever, navegue até 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 aplicativo, selecione Aplicativos da Web de página única e clique em Salvar .

Auth0 Nova janela pop-up de configurações do aplicativo,

Em seguida, selecione React na lista de tecnologias suportadas pelo Auth0.

Uma lista de tecnologias de desenvolvimento web 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 na guia Configurações 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.

Depois de preencher os URLs, vá em frente e clique em Salvar alterações na parte inferior da página de configurações.

No painel de menu esquerdo do painel do aplicativo Auth0, clique em Autenticação e selecione Socials . Em seguida, clique no botão Criar conexão na página de configurações de conexões sociais.

Auth0 nova página de configurações de provedores de login social.

Por fim, selecione e adicione seu provedor de login social preferido.

Uma lista de provedores de login social suportados pelo Auth0

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

Crie um aplicativo React e 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= your domain name REACT_APP_AUTH0_CLIENT_ID= your client ID

2. Instale os pacotes necessários

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

npm install @auth0/auth0-react

3. 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:

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import{Auth0Provider} from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render( <Auth0Provider domain = {process.env.REACT_APP_AUTH0_DOMAIN} clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID} redirectUri = {window.location.origin} > <App /> </Auth0Provider>, document.getElementById('root') );

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.

import React from 'react' import { useAuth0 } from '@auth0/auth0-react';

const Login = () => { const { loginWithRedirect, isAuthenticated } = useAuth0();


    return (isAuthenticated || (
      <button onClick={() => loginWithRedirect()}> Log In</button>
    ))
}

export default Login

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:

import React from 'react' import { useAuth0 } from '@auth0/auth0-react'

const Success = () => { const { user, logout, isAuthenticated } = useAuth0();


    return (isAuthenticated && (
        <div> 
            <h1>User Profile</h1> 
            <img src={user.picture} alt={user.name} /> 
            <h2>{user.name}</h2> 
            <p>{user.email}</p> 
            <button onClick={() => logout()}> Log Out</button> 
        </div>
    ))
}

export default Success

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.