Autenticação de aplicativos React com Auth0

A autenticação é um aspecto crítico da maioria dos aplicativos, pois os desenvolvedores devem garantir que os aplicativos que eles criam sejam seguros e só possam ser acessados ​​por usuários verificados. Embora soluções de autenticação personalizadas possam ser criadas, o custo e os recursos envolvidos para criar, manter, hospedar e protegê-las podem ser pesados. É aqui que entra o Auth0.

O Auth0 fornece SDKs para todas as plataformas populares da Web, móveis e nativas, permitindo uma integração profunda com o idioma e a pilha de sua preferência. Você também pode configurar diferentes opções de login para que seus usuários possam fazer login em seu aplicativo com o método de sua preferência.

Este artigo não cobre uma explicação detalhada de como a autenticação funciona nos bastidores. Auth0 tem um recurso que cobre isso.

Nota: Para acompanhar, você precisará de um conhecimento básico de React e React Hooks.

O que é Auth0?

Auth0 é uma solução flexível para adicionar autenticação e autorização aos seus aplicativos. Você pode conectar qualquer aplicativo ao Auth0 e definir os provedores de identidade que deseja usar, seja Google, Facebook, Github ou outros. Sempre que um usuário fizer login em seu aplicativo, o Auth0 verificará sua identidade e enviará os dados de autenticação de volta ao seu aplicativo.

Embora o Auth0 venha com diferentes formulários de login, o Login Universal é o mais seguro e rápido para começar. Auth0 também recomenda que você use isso. Com o Login Universal, o usuário é redirecionado para a página de login, autenticado pelos servidores da Auth0 e, em seguida, redirecionado de volta ao seu aplicativo. Ao usar o Login Universal, você pode começar usando um nome de usuário e senha simples e, posteriormente, adicionar outros métodos de login, com base nos requisitos do seu aplicativo.

Outro benefício de usar o Login Universal é que você não precisa configurar uma página de login personalizada. No entanto, você pode personalizar o Login Universal para atender às suas necessidades.

Como funciona o Auth0?

Quando os servidores de Auth0 redirecionam um usuário de volta ao seu aplicativo, a URL de redirecionamento é preenchida com informações sobre o usuário autenticado. Isso nos permite acessar dados sobre o usuário a partir das informações que recebemos do provedor de identidade. Um perfil de usuário em Auth0 é a informação obtida de um provedor de identidade. Os dados do usuário que recebemos serão diferentes de um provedor de identidade para outro.

Quando o usuário é redirecionado de volta ao aplicativo, as informações enviadas no URL de redirecionamento são as seguintes:

• token de acesso
  Isso é usado para informar a uma API que o portador do token está autorizado a acessar a API e realizar alguma ação. Os tokens de acesso não se destinam a transportar informações sobre o usuário. Eles são usados ​​apenas para autorizar o acesso a um recurso.
• token de identificação
  Este é um token de segurança concedido pelo OpenID Provider que contém informações sobre um usuário. Essas informações informam ao aplicativo cliente que o usuário está autenticado e também podem fornecer informações como o nome de usuário. Ele vem no formato JSON Web Token (JWT).
• expira em
  Isso nos diz quantos segundos até que o token de acesso não seja mais válido. Por padrão, isso é 1200 segundos (20 minutos). Quando o token de acesso expirar, o aplicativo será forçado a fazer o usuário entrar novamente.
  
• alcance
  Os escopos do OpenID Connect (OIDC) são usados ​​por um aplicativo durante a autenticação para autorizar o acesso aos detalhes de um usuário, como nome e imagem. Cada escopo retorna um conjunto de atributos de usuário, que são chamados de declarações. Os escopos que um aplicativo deve solicitar dependem de quais atributos de usuário o aplicativo precisa. Depois que o usuário autoriza os escopos solicitados, as declarações são retornadas em um token de ID e também ficam disponíveis por meio do ponto de extremidade /userinfo.

Métodos de autenticação Auth0

Auth0 fornece várias integrações de plataforma. Neste artigo, veremos o SDK do JavaScript e o SDK do React.

• SDK JavaScript: Este é um kit de ferramentas JavaScript do lado do cliente para API Auth0.
• React SDK: O Auth0 React SDK (auth0-react.js) é uma biblioteca JavaScript para implementar autenticação e autorização em aplicativos React com Auth0.

Configurando seu aplicativo Auth0

• Crie seu aplicativo Auth0 em seu painel.

• Selecione o tipo de aplicativo. O nosso é um SPA.

• Selecione a tecnologia.

• Anote as credenciais do seu aplicativo. Vamos precisar deles para integrar Auth0 em nosso aplicativo de reação.

Configuramos as URLs do aplicativo em suas configurações para que a funcionalidade de login e logout funcione corretamente.

Um URL de retorno de chamada é um URL em seu aplicativo em que Auth0 redireciona o usuário após a autenticação. Para nosso aplicativo, defina o URL de retorno de chamada permitido como https://localhost:3000 .

Depois que Auth0 desconecta o usuário do servidor de autorização, a URL de logout é a URL para a qual o usuário é redirecionado. Também definimos isso para https://localhost:3000 . URLs de retorno de chamada podem ser manipulados por partes não autorizadas, portanto, Auth0 reconhece apenas URLs no campo URLs de retorno de chamada permitidos das configurações de um aplicativo como válidos.

Origens da Web permitidas lidam com a verificação de sessões de autenticação atuais. Isso garante que o login do usuário persista quando ele sair do aplicativo ou atualizar a página. Também definimos isso para https://localhost:3000 .

Autenticação usando o SDK do JavaScript Auth0

Vamos usar este SDK para simular um fluxo de login Auth0 básico. O código-fonte desta seção está disponível no GitHub. Os componentes deste aplicativo de demonstração são:

• App.js : este é o componente raiz. Passamos a classe Auth que criaremos posteriormente para cada componente daqui.
• Nav.js : conterá os botões de login e logout, ajudando o usuário a navegar corretamente de uma página para outra.
• Profile.js : o perfil do usuário. Ele só estará acessível se o usuário estiver logado no aplicativo.
• Home.js : o componente Home.
• Auth.js : definimos os utilitários de autenticação aqui em uma classe Auth que definiremos.
• Callback.js : o componente Auth0 redireciona o usuário para o qual ele faz login.

Vamos configurar as credenciais do nosso aplicativo como variáveis ​​de ambiente.

 REACT_APP_AUTH0_DOMAIN=your-domain REACT_APP_AUTH0_CLIENTID=your-client-id REACT_APP_AUTH0_CALLBACK_URL=your-callback-url

Crie um .env para armazenar as credenciais de domain e cleintId do seu aplicativo. Além disso, defina o URL de retorno de chamada no arquivo. Neste aplicativo, usarei https://localhost:3000 como meu URL de retorno de chamada.

Adicionando instância Auth0

 npm i auth0-js import auth0 from 'auth0-js';

Para usar o SDK do JavaScript em nosso aplicativo, primeiro instalamos o SDK. Em seguida, criamos um arquivo Auth.js onde configuramos a funcionalidade de autenticação. Importe auth0 de auth0-js para o arquivo Auth.js

 export default class Auth { constructor(history){ this.history = history; this.auth0 = new auth0.WebAuth({ domain: process.env.REACT_APP_AUTH0_DOMAIN, clientID: process.env.REACT_APP_AUTH0_CLIENTID, redirectUri: process.env.REACT_APP_AUTH0_CALLBACK_URL, responseType: "token id_token", scope: "openid profile email" }) }

Em seguida, inicializamos uma nova instância do aplicativo Auth0. Para fazer isso, crie uma classe chamada Auth . Aqui, inicializamos uma nova instância Auth0. Passamos um objeto de options que contém alguns parâmetros.

Existem vários parâmetros que podemos adicionar à instância Auth0 e, desses parâmetros, apenas o domain e o clientID são necessários.

• domain : o domínio da sua conta Auth0.
• clientID : seu ID de cliente Auth0.
• redirectUri : a URL Auth0 redireciona seu usuário quando ele é autenticado. Por padrão, o URL que você especificou para o URL de retorno de chamada do seu aplicativo será usado, portanto, esse parâmetro não é obrigatório.
• responseType : definimos a resposta que queremos receber de Auth0 quando ele autenticar nosso usuário. Especificamos que queremos obter o id_token de volta da resposta.
• scope : definimos quais informações queremos obter do usuário. Dessa forma, poderemos acessar seu endereço de e-mail e qualquer informação armazenada em seu perfil. As informações que poderemos obter do usuário dependem do provedor de identidade que ele usa para fazer login. Usaremos o protocolo OpenID Connect para acessar informações sobre o usuário.

A classe Auth aceita a prop history do react react-router como um argumento. Mais tarde, usaremos isso para redirecionar o usuário para diferentes páginas em nosso aplicativo.

Criamos uma nova instância de auth0 e passamos as configurações. Atribuímos a nova instância a this.auth0 . Obtemos valores de domain , clientID e redirectUri são do arquivo .env que criamos anteriormente.

Adicionando a funcionalidade de login

Precisamos adicionar um método de login à classe que criamos em Auth.js .

 login = () => { this.auth0.authorize() }

Para fazer isso, adicionamos o método authorize() de Auth0 ao login . authorize() é usado para fazer login de usuários por meio do Login Universal. Quando authorize() é chamado, ele redireciona o usuário para a página de login do Auth0.

A classe Auth precisa ser passada para outros componentes, os componentes Nav , Home e Callback .

 import Auth from './Auth'; function App({history}) { const auth = new Auth(history) return ( <div className="App"> <Nav auth={auth}/> <Switch> <div className="body"> <Route exact path="/" render={props => <Home auth={auth} {...props} />} /> <Route exact path="/callback" render={props => <Callback auth={auth} {...props} />} /> <Route exact path="/profile" render={props => <Profile auth={auth} {...props} />} /> </div> </Switch> </div> ); } export default withRouter(App);

Aqui, criamos uma nova instância da classe Auth e a passamos para os componentes que precisam dela como prop.

Como a classe Auth precisa de history , usaremos withRouter para podermos acessar history .

 import { Link } from 'react-router-dom' const Nav = ({auth}) => { return ( <nav> <ul> <li><Link to="/">Home</Link></li> <li> <button onClick={auth.login}>log in</button> </li> </ul> </nav> ) } export default Nav

Agora que definimos o método login() , podemos usá-lo no botão de login. O usuário será redirecionado para a página de login do Auth0 e, em seguida, para a URL de retorno de chamada assim que tiver sido autenticado.

Em seguida, temos que criar o componente para o qual o usuário será redirecionado assim que fizer login.

 import React from 'react' const Callback = () => { return ( <div> <h1>I am the callback component</h1> </div> ) } export default Callback

Crie um arquivo Callback.js e configure um componente Callback nele. Agora, quando o usuário faz login, ele é redirecionado para o componente Callback .

Manipulando a autenticação

Quando Auth0 redireciona o usuário de volta ao aplicativo, ele envia alguns dados de autenticação na URL de retorno de chamada. Esses dados contêm informações codificadas sobre o usuário autenticado. Para acessar os dados que Auth0 envia de volta na URL de redirecionamento, configuramos um método handleAuth() na classe Auth . Este método será chamado no componente Callback .

 handleAuth = () => { this.auth0.parseHash((err, authResult) => { if(authResult && authResult.accessToken && authResult.idToken) { this.setSession(authResult); this.history.push("/"); } else if (err) { alert(`Error: ${err.error}`) console.log(err); } }) }

Depois que o usuário é redirecionado, podemos usar o método parseHash para analisar as informações que são enviadas de volta na URL de retorno de chamada. Após a análise, recebemos de volta um objeto de error e um authResult . Verificamos se existe um authResult , um accessToken e um idToken . Se true, passamos o authResult para o método setSession e redirecionamos o usuário para a página inicial.

Usaremos setSession() para criar uma sessão para o usuário autenticado e armazenar os dados de autenticação no armazenamento local posteriormente. Se houver algum erro, usamos o método alert para mostrá-lo e também registramos o objeto de erro no console.

Chamamos o método handleAuth() que definimos acima no useEffect sempre que o Callback é montado, ou seja, quando o usuário é redirecionado após o login.

 import React, {useEffect} from 'react' const Callback = ({auth}) => { useEffect(() => { auth.handleAuth() }, []) return ( <div> <h1>I am the callback component</h1> </div> ) } export default Callback

Fazemos isso porque quando Auth0 redireciona o usuário para o componente Callback , queremos poder acessar os dados de resposta que ele envia na URL de redirecionamento, e o método handleAuth() é onde chamamos o método parseHash de parseHash . Então, quando o componente é montado, chamamos handleAuth() no useEffect .

Estado de autenticação de rastreamento

Não queremos que a página de profile seja acessível se um usuário não tiver feito login. Precisamos ser capazes de verificar se o usuário está autenticado e, em seguida, dar-lhe acesso à página de profile . Podemos usar o método setSession() que chamamos no método handleAuth() que temos na classe Auth .

 setSession = authResult => { //set the time the access token will expire const expiresAt = JSON.stringify( authResult.expiresIn * 1000 + new Date().getTime() ) localStorage.setItem("access_token", authResult.accessToken) localStorage.setItem("id_token", authResult.idToken) localStorage.setItem("expires_at", expiresAt) }

Em setSession() adicionamos uma variável expiresAt para manter o tempo que o token de acesso irá expirar. expiresIn é uma string contendo o tempo de expiração (em segundos) do accessToken . Convertemos o tempo de expiração que obtemos de expiresIn para o tempo de época do Unix. Em seguida, salvamos expiresAt e o authResult e accessToken do idToken no armazenamento local.

A próxima etapa na configuração de um rastreador para o estado de autenticação é criar um método isAuthenticated .

 isAuthenticated = () => { const expiresAt =JSON.parse(localStorage.getItem("expires_at")); return new Date().getTime() < expiresAt; }

No método acima, analisamos o valor expires_at que salvamos no armazenamento local e verificamos se a hora atual é menor que a hora em que o token expira. Se true , o usuário será autenticado.

Agora que podemos rastrear o estado isAuthenticated , podemos usá-lo em nosso aplicativo. Vamos usá-lo no arquivo Nav.js

 import React from 'react'; import { Link } from 'react-router-dom' const Nav = ({auth}) => { return ( <nav> <ul> <li><Link to="/">Home</Link></li> <li> <button onClick={auth.isAuthenticated() ? auth.logout : auth.login}> {auth.isAuthenticated() ? "log out" : "log in"} </button> </li> </ul> </nav> ) } export default Nav

Em vez de codificar um botão de login e usar o método login() , renderizamos dinamicamente o botão de login com o método login() ou o botão de logout com o método logout() com base no estado isAuthenticated . No componente Nav usamos um operador ternário para determinar o texto que é exibido no botão e o método que é chamado quando o usuário clica no botão. O texto exibido e o método chamado dependem do valor de auth.isAuthenticated() .

Agora podemos avançar para implementar o componente Home .

 import {Link} from 'react-router-dom' const Home = ({auth}) => { return ( <div> <h1>home</h1> { auth.isAuthenticated() && ( <h4> You are logged in! You can now view your{' '} <Link to="/profile">profile</Link> </h4> ) } </div> ) } export default Home

No componente Home acima, usamos o estado isAuthenticated para exibir dinamicamente um link para o perfil do usuário se o usuário estiver logado.

Queremos exibir informações sobre um usuário quando ele fizer login no aplicativo. Para fazer isso, temos que criar dois métodos na classe Auth que obterão essa informação.

 getAccessToken = () => { const accessToken = localStorage.getItem("access_token") if(!accessToken){ throw new Error("No access token found") } return accessToken }

O token de acesso é necessário para obter os dados do usuário. Criamos um método getAccessToken() que obtém o token de acesso do armazenamento local. Se não houver token de acesso, lançamos um erro.

O método getProfile() obtém os dados do usuário para nós e aqui está como deve ser.

 getProfile = callback => { this.auth0.client.userInfo(this.getAccessToken(), (err, profile) => { callback(profile); }); }

O método getProfile() chama o método userInfo() que fará uma solicitação ao terminal /userinfo e retornará o objeto de usuário, que contém as informações do usuário. O token de acesso é necessário para o terminal /userinfo , portanto, passamos getAccessToken() como um argumento.

As informações do perfil do usuário incluídas na resposta dependem dos escopos que definimos. Anteriormente, definimos o escopo do nosso aplicativo para profile e email , portanto, essas são as únicas informações sobre o usuário que receberemos de volta.

Vamos configurar o componente Profile .

 import React, { useEffect, useState } from "react"; const Profile = ({ auth }) => { const [profile, setProfile] = useState(null); useEffect(() => { auth.getProfile((profile) => { setProfile(profile); }); }, [auth]); if (!profile) { return <h1>Loading...</h1>; } return ( <div> <h1>profile</h1> <> <p>{profile.name}</p> <p>{profile.nickname}</p> <img src={profile.picture} /> <pre>{JSON.stringify(profile, null, 2)}</pre> </> </div> ); }; export default Profile;

Em Profile.js , criamos um estado de profile e no useEffect chamamos o método getProfile para acessar o perfil do usuário. Em seguida, exibimos os dados do usuário que obtemos do estado do profile .

Adicionando a funcionalidade de logout

Definimos um método logout() na classe Auth .

 logout = () => { localStorage.removeItem("access_token") localStorage.removeItem("id_token") localStorage.removeItem("expires_at") this.auth0.logout({ clientID: process.env.REACT_APP_AUTH0_CLIENTID, returnTo: "https://localhost:3000" }); }

Aqui, removemos o authResult , accessToken e idToken que armazenamos anteriormente no armazenamento local. Em seguida, direcionamos o usuário para a página inicial.

Para desconectar um usuário dos servidores de Auth0, use o método Auth0 logout() . Este método aceita um objeto de opções que contém o clientID e uma propriedade returnTo . returnTo é onde você especifica o URL em seu aplicativo para o qual o usuário deve ser redirecionado após o logout. A URL returnTo fornecida deve ser listada nas URLs de logout permitidas do aplicativo no painel Auth0.

Autenticação usando o SDK do React

Ao contrário do SDK do JavaScript, o SDK do React é mais fácil de usar. O código para esta seção está disponível no GitHub.

Vamos configurá-lo em nosso aplicativo. Os componentes deste aplicativo de demonstração são:

• App.js : este é o componente raiz.
• LoginButton.js : trata da funcionalidade de login.
• LogoutButon.js : trata da funcionalidade de logout.
• Navbar.js : contém os botões de logout e login.
• Profile.js : conterá as informações do usuário logado.

Primeiro, instalamos o React SDK do Auth0 em nosso aplicativo React.

 npm install @auth0/auth0-react

Da mesma forma que configuramos usando o SDK do JavaScript, configuramos as credenciais Auth0 de que precisamos. Criamos um .env para armazenar as credenciais de domain e cleintId do seu aplicativo.

 import {Auth0Provider} from '@auth0/auth0-react'; const domain = process.env.REACT_APP_AUTH0_DOMAIN const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID ReactDOM.render( <Auth0Provider domain={domain} clientId={clientId} redirectUri={window.location.origin} > <App /> </Auth0Provider>, document.getElementById('root') );

Para usar o SDK, precisamos envolver nosso aplicativo em um componente Auth0Provider . Isso fornecerá o React Context para os componentes que estão dentro do seu aplicativo. Também definimos um redirectUri , que é para onde Auth0 redireciona o usuário quando ele faz login. Sob o capô, o Auth0 React SDK usa o React Context para gerenciar o estado de autenticação de seus usuários.

Configurando o Login

Aqui, configuramos o botão de login.

 import {useAuth0} from '@auth0/auth0-react'; import {Button} from './Styles'; const LoginButton = () => { const {loginWithPopup} = useAuth0() return( <Button onClick={() => loginWithPopup()}> Log in </Button> ) }

Auth0 nos fornece duas maneiras de configurar o login em nossos aplicativos. Podemos usar os loginWithPopup() ou loginWithRedirect() . Nesse caso, usei loginWithPopup() .

loginWithPopup() do gancho useAuth0 o SDK fornece. Em seguida, passamos loginWithPopup() para o evento onClick do botão. Com isso, configuramos o botão de login. Se tivéssemos usado loginWithRedirect() , o usuário seria redirecionado para a página de login Auth0. Depois que o usuário for autenticado, Auth0 redirecionará de volta ao seu aplicativo.

Configurando o Logout

Vamos configurar a funcionalidade de logout.

 import {Button} from './Styles'; import {useAuth0} from '@auth0/auth0-react'; const LogoutButton = () => { const {logout} = useAuth0() return( <Button onClick={() => logout()}> Log Out </Button> ) }

O que temos aqui é semelhante à configuração do botão de login. A única diferença é que o que extraímos do SDK é a função de logout , e é isso que passamos para o evento onClick do botão.

Chamar logout() redireciona seus usuários para seu ponto de extremidade de logout Auth0 ( https://YOUR_DOMAIN/v2/logout ) e, em seguida, os redireciona imediatamente para o URL especificado no arquivo URLs de logout permitidos das configurações do seu aplicativo.

Estado de autenticação de rastreamento

Queremos renderizar condicionalmente o LogoutButton ou o LoginButton com base no estado de autenticação.

 import {StyledNavbar} from './Styles'; import {useAuth0} from '@auth0/auth0-react'; import LoginButton from './LoginButton'; import LogoutButton from './LogoutButton'; const Navbar = () => { const {isAuthenticated} = useAuth0() return ( <StyledNavbar> { isAuthenticated ? <LogoutButton/> : <LoginButton/> } </StyledNavbar> ) }

isAuthenticated de useAuth0 . isAuthenticated é um booleano que nos informa se alguém entrou ou não. Em nossa Navbar , usamos isAuthenticated para renderizar condicionalmente os botões. Não precisamos passar pelo processo tedioso de configurar vários métodos personalizados apenas para rastrear o estado de autenticação, como fizemos com o SDK do JavaScript. O booleano isAuthenticated facilita nossa vida.

Exibindo dados do usuário

Queremos exibir os dados do usuário assim que ele fizer login com sucesso em nosso aplicativo.

 import {useAuth0} from '@auth0/auth0-react' import {ProfileBox, Image, P} from './Styles'; const Profile = () => { const {user, isAuthenticated} = useAuth0() return( isAuthenticated && (<ProfileBox> <Image src={user.picture} alt={user.name}/> <P>Name: {user.name}</P> <P>Username: {user.nickname}</P> <P>Email: {user.email}</P> </ProfileBox>) ) }

Uma vez logado, temos acesso a um objeto de user , que podemos obter de useAuth0 e possibilitando o acesso a informações sobre o usuário a partir do objeto. Aqui, também obtemos isAuthenticated de useAuth0 porque queremos exibir os dados apenas quando um usuário estiver logado.

Ao contrário do SDK JavaScript, onde tivemos que usar os getAccessToken() e getProfile() para acessar o perfil do usuário, não precisamos fazer isso com o SDK React.

Adicionando logins sociais

Por padrão, o Auth0 vem com o login do Google ativado. No entanto, você pode dar ao seu usuário mais opções para fazer login no seu aplicativo. Vamos adicionar o Github Login ao nosso aplicativo.

• Em seu painel, vá para a guia Conexões e selecione Social. Lá, você verá as conexões que configurou. Clique no botão Criar Conexão . Eu já habilitei o Github no meu aplicativo e é por isso que você o vê aqui.

• Selecione a conexão do Github. Obteremos o clientID e o clientSecret do Github e colocaremos isso nas configurações de conexão social.

• Em seguida, você deve registrar um novo aplicativo no Github.

Para os campos URL da página inicial e URL de retorno de autorização, você pode usar https://localhost:3000 ou qualquer URL que seu projeto precise.

Em seguida, passe o ID do cliente e o segredo para a conexão do Github em sua conta Auth0. Com isso, você configurou o login do Github em seu aplicativo.

Conclusão

Neste artigo, vimos como autenticar nossos aplicativos React usando Auth0. Também passamos pelo processo de configuração do login social do Github em nosso aplicativo. Divirta-se adicionando autenticação ao seu aplicativo React com Auth0.

Também vimos como autenticar nosso aplicativo com Auth0 e os benefícios da experiência do desenvolvedor de usar o SDK do React sobre o SDK do JavaScript.

Recursos

• Documentos Auth0
• Escopos OpenID Connect
• Protocolo de conexão OpenID
• Fichas
• Tokens da Web JSON
  
• Vida útil do token de acesso
• Alcance
• SDK de JavaScript
• SDK de reação