Como implementar a autenticação no Next.js com Auth0

“Autenticação” é a ação de validar que um usuário é quem ele afirma ser. Geralmente fazemos isso implementando um sistema de credenciais, como usuário/senha, perguntas de segurança ou até mesmo reconhecimento facial.

“Autorização” determina o que um usuário pode (ou não) fazer. Se precisarmos lidar com autenticação e autorização em nosso aplicativo da web, precisaremos de uma plataforma ou módulo de segurança. Podemos desenvolver nossa própria plataforma, implementá-la e mantê-la. Ou podemos aproveitar as plataformas de autenticação e autorização existentes no mercado que são oferecidas como serviços.

Ao avaliar se é melhor criarmos nossa própria plataforma ou usar um serviço de terceiros, há algumas coisas que devemos considerar:

• Projetar e criar serviços de autenticação não é nossa habilidade principal. Há pessoas trabalhando especialmente focadas em tópicos de segurança que podem criar plataformas melhores e mais seguras do que nós;
• Podemos economizar tempo confiando em uma plataforma de autenticação existente e gastá-lo agregando valor aos produtos e serviços que nos interessam;
• Não armazenamos informações confidenciais em nossos bancos de dados. Nós o separamos de todos os dados envolvidos em nossos aplicativos;
• As ferramentas que os serviços de terceiros oferecem têm usabilidade e desempenho aprimorados, o que facilita a administração dos usuários do nosso aplicativo.

Considerando esses fatores, podemos dizer que contar com plataformas de autenticação de terceiros pode ser mais fácil, barato e ainda mais seguro do que criar nosso próprio módulo de segurança.

Neste artigo veremos como implementar autenticação e autorização em nossas aplicações Next.js utilizando um dos produtos existentes no mercado: Auth0.

O que é Auth0?

Ele permite adicionar segurança aos aplicativos desenvolvidos usando qualquer linguagem de programação ou tecnologia.

“Auth0 é uma solução flexível e drop-in para adicionar serviços de autenticação e autorização aos seus aplicativos.”

— Dan Arias, auth0.com

Auth0 possui vários recursos interessantes, como:

• Single Sign-On : Depois de fazer login em um aplicativo que usa Auth0, você não precisará inserir suas credenciais novamente ao inserir outro que também o use. Você será automaticamente logado em todos eles;
• Login social : Autentique usando seu perfil de rede social preferido;
• Autenticação Multifator ;
• Vários protocolos padrão são permitidos, como OpenID Connect, JSON Web Token ou OAuth 2.0;
• Ferramentas de relatórios e análises .

Existe um plano gratuito que você pode usar para começar a proteger seus aplicativos da Web, cobrindo até 7.000 usuários ativos mensais. Você começará a pagar quando a quantidade de usuários aumentar.

Outra coisa legal sobre Auth0 é que temos um SDK Next.js disponível para uso em nosso aplicativo. Com esta biblioteca, criada especialmente para Next.js, podemos nos conectar facilmente à API Auth0.

SDK Auth0 para Next.js

Como mencionamos anteriormente, o Auth0 criou (e mantém) um SDK focado em Next.js, entre outros SDKs disponíveis para se conectar à API usando várias linguagens de programação. Só precisamos baixar o pacote NPM, configurar alguns detalhes sobre nossa conta e conexão Auth0, e pronto.

Este SDK nos fornece ferramentas para implementar autenticação e autorização com métodos do lado do cliente e do lado do servidor, usando API Routes no backend e React Context com React Hooks no frontend.

Vamos ver como alguns deles funcionam em um exemplo de aplicativo Next.js.

Exemplo de aplicativo Next.js usando Auth0

Vamos voltar ao nosso exemplo de plataforma de vídeo anterior e criar um pequeno aplicativo para mostrar como usar Auth0 Next.js SDK. Vamos configurar o Login Universal do Auth0. Teremos alguns URLs de vídeo do YouTube. Eles ficarão ocultos em uma plataforma de autenticação. Somente usuários registrados poderão ver a lista de vídeos através de nosso aplicativo da web.

Observação : este artigo se concentra na configuração e no uso de Auth0 em seu aplicativo Next.js. Não entraremos em detalhes como estilo CSS ou uso de banco de dados. Se você quiser ver o código completo do aplicativo de exemplo, acesse este repositório do GitHub.

Crie uma conta Auth0 e configure os detalhes do aplicativo

Antes de tudo, precisamos criar uma conta Auth0 usando a página de inscrição.

Depois disso, vamos para o Auth0 Dashboard. Vá para Aplicativos e crie um novo aplicativo do tipo [“Aplicativos Web Regulares”].

Agora vamos para a guia Configurações do aplicativo e, na seção URIs do aplicativo , configure os seguintes detalhes e salve as alterações:

• URLs de retorno de chamada permitidos : adicione https://localhost:3000/api/auth/callback
• URLs de logout permitidos : adicione https://localhost:3000/

Ao fazer isso, estamos configurando a URL para onde queremos redirecionar os usuários após o login em nosso site (Callback), e a URL para onde redirecionamos os usuários após o logout (Logout). Devemos adicionar as URLs de produção quando implantarmos a versão final do nosso aplicativo no servidor de hospedagem.

Auth0 Dashboard tem muitas configurações e personalizações que podemos aplicar aos nossos projetos. Podemos alterar o tipo de autenticação que utilizamos, a página de login/cadastro, os dados que solicitamos para os usuários, habilitar/desabilitar novos registros, configurar bancos de dados de usuários, etc.

Criar aplicativo Next.js

Para criar um novo aplicativo Next.js, usaremos create-next-app, que configura tudo automaticamente para você. Para criar o projeto, execute:

 npx create-next-app [name-of-the-app]

Ou

 yarn create next-app [name-of-the-app]

Para iniciar o servidor de desenvolvimento localmente e ver o site que acabou de ser criado no seu navegador, acesse a nova pasta que você criou:

 cd [name-of-the-app]

E corra:

 npm run dev

Ou

 yarn dev

Instalar e configurar o SDK do Auth0 Next.js

Vamos instalar o SDK Auth0 Next.js em nosso aplicativo:

 npm install @auth0/nextjs-auth0

Ou

 yarn add @auth0/nextjs-auth0

Agora, em nosso arquivo env.local (ou no menu de variáveis ​​de ambiente da nossa plataforma de hospedagem), vamos adicionar estas variáveis:

 AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]" AUTH0_BASE_URL="https://localhost:3000" AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]" AUTH0_CLIENT_ AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]" 

Se você quiser mais opções de configuração, pode dar uma olhada nos documentos.

Criar a rota de API dinâmica

Next.js oferece uma maneira de criar APIs sem servidor: API Routes. Com esse recurso, podemos criar um código que será executado em cada solicitação do usuário às nossas rotas. Podemos definir rotas fixas, como /api/index.js . Mas também podemos ter rotas de API dinâmicas, com parâmetros que podemos usar em nosso código de rotas de API, como /api/blog/[postId].js .

Vamos criar o arquivo /pages/api/auth/[...auth0].js , que será uma rota de API dinâmica. Dentro do arquivo, vamos importar o método handleAuth do SDK Auth0 e exportar o resultado:

 import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth();

Isso criará e manipulará as seguintes rotas:

• /api/auth/login
  Para realizar o login ou se inscrever com Auth0.
• /api/auth/logout
  Para desconectar o usuário.
• /api/auth/callback
  Para redirecionar o usuário após um login bem-sucedido.
• /api/auth/me
  Para obter as informações do perfil do usuário.

E essa seria a parte do lado do servidor do nosso aplicativo. Se quisermos fazer login em nosso aplicativo ou criar uma nova conta, devemos visitar https://localhost:3000/api/auth/login . Devemos adicionar um link para essa rota em nosso aplicativo. O mesmo para sair do nosso site: Adicione um link para https://localhost:3000/api/auth/logout .

Adicionar o componente UserProvider

Para lidar com o estado de autenticação do usuário no frontend de nossa aplicação web, podemos usar o componente UserProvider React, disponível no SDK Auth0 Next.js. o componente usa o React Context internamente.

Se você deseja acessar o estado de autenticação do usuário em um Component, você deve envolvê-lo com um componente UserProvider .

 <UserProvider> <Component {...props} /> </UserProvider>

Se quisermos acessar todas as páginas de nossa aplicação, devemos adicionar o componente ao arquivo pages/_app.js . pages/_app.js substitui o componente React App . É um recurso que o Next.js expõe para personalizar nosso aplicativo. Você pode ler mais sobre isso aqui.

 import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0'; export default function App({ Component, pageProps }) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); }

Temos um gancho React useUser que acessa o estado de autenticação exposto por UserProvider . Podemos usá-lo, por exemplo, para criar uma espécie de página de boas-vindas. Vamos alterar o código do arquivo pages/index.js :

 import { useUser } from "@auth0/nextjs-auth0"; export default () => { const { user, error, isLoading } = useUser(); if (isLoading) return <div>Loading...</div>; if (error) return <div>{error.message}</div>; if (user) { return ( <div> <h2>{user.name}</h2> <p>{user.email}</p> <a href="/api/auth/logout">Logout</a> </div> ); } return <a href="/api/auth/login">Login</a>; };

O objeto de user contém informações relacionadas à identidade do usuário. Se a pessoa que visita a página não estiver logada (não temos um objeto de user disponível), exibiremos um link para a página de login. Se o usuário já estiver autenticado, exibiremos as propriedades user.name e user.email na página e um link de Logout.

Vamos criar um arquivo videos.js, com uma lista de três URLs de vídeos do YouTube que ficarão visíveis apenas para pessoas cadastradas. Para permitir que apenas usuários logados vejam esta página, usaremos o método withPageAuthRequired do SDK.

 import { withPageAuthRequired } from "@auth0/nextjs-auth0"; export default () => { return ( <div> <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a> <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a> <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a> </div> ); }; export const getServerSideProps = withPageAuthRequired();

Leve em consideração que nosso aplicativo web permite que qualquer pessoa se cadastre em uma conta, usando a plataforma Auth0. O usuário também pode reutilizar uma conta Auth0 existente, pois estamos implementando o Login Universal.

Podemos criar nossa própria página de registro para solicitar mais detalhes sobre o usuário ou adicionar informações de pagamento para cobrar mensalmente pelo nosso serviço. Também podemos usar os métodos expostos no SDK para tratar a autorização de forma automática.

Conclusão

Neste artigo, vimos como proteger nossos aplicativos Next.js usando Auth0, uma plataforma de autenticação e autorização. Avaliamos os benefícios de usar um serviço de terceiros para a autenticação de nossos aplicativos da Web em comparação com a criação de nossa própria plataforma de segurança. Criamos um aplicativo Next.js de exemplo e o protegemos usando o plano gratuito Auth0 e o SDK Auth0 Next.js.

Se você deseja implantar um aplicativo de exemplo Auth0 no Vercel, pode fazê-lo aqui.

Leitura e recursos adicionais

• Auth0 Next.js SDK repositório GitHub, Auth0, GitHub
• “O guia definitivo para autenticação Next.js com Auth0”, Sandrino Di Mattia, Auth0 Blog
  Em nosso aplicativo de exemplo, usamos renderização do lado do servidor, com rotas de API e uma abordagem sem servidor. Se você estiver usando o Next.js para um site estático ou um servidor personalizado para hospedar seu aplicativo, este artigo contém alguns detalhes sobre como implementar a autenticação.
• “Nova experiência de login universal”, Login universal Auth0, Documentos Auth0
• "Login universal centralizado versus login incorporado", Auth0 Universal Login, Auth0 Docs