Next.js: implementando autenticação com Auth.js

Fundamentos de autenticação - Apresentação

Olá! Boas-vindas a mais um curso sobre Next.js!

Sou Vinicios Neves, instrutor na Alura.

Audiodescrição: Vinicios é uma pessoa de pele clara, careca e tem olhos e barba castanhos-escuros. Usa óculos de grau com armação quadrada na cor preta e uma camiseta escura. Está sentado em uma cadeira gamer a ao fundo há uma parede lisa com iluminação degradê do azul ao roxo.

Nesse curso, desenvolveremos a camada de autenticação de uma aplicação escrita com o framework Auth.js, muito popular na web.

Então, se você já conhece o Next.js, o AppHalter e como funciona o Prisma com Postgres, venha conosco nessa jornada.

Se você ainda não conhece, não se preocupe, pois nos pré-requisitos deste curso está justamente a formação onde nós criamos o CodeConnect do zero.

O que aprenderemos

Adicionaremos uma camada de autenticação em cima do que já existe. Portanto, além de aprender como funciona o NextAuth, que é a biblioteca que usaremos, também lidaremos com um projeto legado, uma base de código que precisaremos fazer alguns ajustes para nos adequarmos à nova realidade.

Nisso, faremos a página de cadastro de usuário e login. Também cuidaremos para que, se a pessoa usuária não tiver feito login, não consiga persistir algumas informações, como curtir um post.

Aprenderemos também sobre o upload de uma imagem da pessoa usuária, como, por exemplo, a utilizada no avatar.

Venha conosco nessa jornada! Estamos muito animados para começar. Te esperamos no próximo vídeo.

Fundamentos de autenticação - Arquitetando a solução

Iniciaremos o CodeConnect para começarmos a preparar a base e a fundação da aplicação e avançarmos com a parte de autenticação.

O projeto do curso está disponível no Figma e também no repositório.

Preparando o ambiente

Se você está nos acompanhando desde as formações anteriores, já deve ter o CodeConnect sendo executado com um Docker corretamente configurado. Recomendamos que você continue sua jornada de estudos, pois aplicaremos algumas melhorias no projet.

Caso você não tenha feito as outras formações, mas está interessado em aprender sobre autenticação e segurança, fique também conosco. Seu primeiro passo será baixar o projeto do GitHub computador e abri-lo no VS Code.

Levantando o Container Docker

Primeiro levantaremos tudo para fazer funcionar. Para isso, abrimos o terminal no VS Code. Nesse caso, já estamos na pasta code-connect, na área de trabalho, então, passamos o comando pwd no terminal. Mas, está na pasta de usuário, dentro de Desktop.

Queremos levantar o container Docker, então, no terminal, passamos o comando docker compose up -d e pressionamos "Enter".

docker compose up -d

Isso subirá o Postgres, que é nossa dependência, o banco de dados dessa aplicação. Ele vai fará o download das camadas e levantar o que for preciso.

Ao encerrarem, podemos aproveitar o prisma e criar as tabelas, que são as dependências atuais do projeto. Podaríamos recorrer ao comando npx prisma migratedev, por exemplo.

Porém, estaremos executando um script remoto. Analisando o arquivo package.json, no objeto de dependências, próximo à linha 17, temos o prisma como dependência do projeto. Ele está na versão 5.9.1, então seria interessante reaproveitarmos essa versão, pois se for lançado uma atualização, como estamos usando um script remoto, pode não funcionar.

Blindando e protegendo a aplicação

Então, como podemos blindar e proteger a aplicação? Na parte de scripts, que começa próximo à linha 5, abaixo do next-link, colocaremos um novo comando.

Podemos chamar o "prisma:migrate" que executará o debaixo dos panos o comando "prisma migratedev". Além disso, adicionaremos mais comandos do prisma.

O segundo será o "prisma:generate":"prisma migrate dev", ou seja, esse comando atualizará o Prisma Client, para garantir que está alinhado com a estrutura atual do banco. Por fim, teremos o "prisma:seed":"prisma db seed", um pouco diferente para executá-lo.

//Código omitido

{
  "name": "code-connect",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "prisma migrate dev && prisma generate && prisma db seed && next build",
    "start": "next start",
    "lint": "next lint",
    "prisma:migrate": "prisma migrate dev",
    "prisma:generate": "prisma generate",
    "prisma:seed": "prisma db seed"
  },

//Código omitido

Repare que, configuramos o caminho para o seed próximo à linha 15 do arquivo package.json. Se você quer entender como isso foi construído, recomendamos que acesse os cursos anteriores, pois construímos isso do zero.

Fizemos uma melhoria com o update no package.json do CodeConnect. Agora, ao invés de pedir para o npx executar esse script remotamente, pediremos para o npm executar o comando. Escrevemos npm run prisma:migrate.

npm run prisma:migrate

Esse comando executará todas as migrations disponíveis até o momento e atualizar o banco de dados. Agora, podemos chamar o npm run prisma:seed para atualizar e gerar os dados necessários para a aplicação iniciar.

npm run prisma:seed

Por fim, podemos passar o comando npm run prisma:generate para garantir que estamos com o client atualizado.

npm run prisma:generate

Levantando o servidor Next.js

Fechamos o terminal do VS Code e abrimos o terminal do sistema operacional. Nele, passamos o comando npm run dev para finalmente levantar o servidor do Next.

npm run dev

Feito isso, no retorno encontramos um link. Em cima dele, clicamos com o botão direito e depois em "Open link", assim, ele abre no navegador. O CodeConnect é carregado com os posts, isso significa que está tudo funcionando.

Banco criado, migration executada e devidamente populada com as informações iniciais. Agora, podemos dar o passo seguinte que é identificar como faremos a autenticação.

Analisando o Figma, notamos que teremos que criar uma tela de cadastro, de login, além da parte de logout e a integração com o GitHub.

Desafio

Mas, antes de partirmos para o próximo vídeo, preparamos um desafio para você. Nesse cenário inicial, teremos que lidar com usuários logados e deslogados. Fizemos um scroll para cima no Figma, feito isso, encontramos uma barra de componente, a barra lateral, aside. Nela, temos vários ícones disponíveis, inclusive um link para publicar novos artigos.

Como estamos falando de componente React e CSS puro, esse será seu primeiro desafio. Você deverá implementar a barra aside. Disponibilizamos nas atividades todo o material necessário para isso, além de um link para o commit.

O que você precisa fazer é melhorar a aside, criar uma barra de navegação e cada item dessa lista será o link. Te esperamos no próximo vídeo!

Fundamentos de autenticação - Configurando Next Auth

Com a aplicação aberta no navegador, estamos com o desafio da aula anterior resolvido. Repare que os ícones estão corretos, conforme descrito.

Lembrando que disponibilizamos o gabarito, caso queira descobrir como chegamos nessa solução.

Analisando a resolução do desafio

Fazendo uma análise rápida, no arquivo index.jsx, evoluímos o componente botão. Se abrirmos o Figma, temos o "Publicar", que parece um botão, mas tem um comportamento de link.

Então, para ficar semanticamente correto, mantivemos o mesmo componente, porém, seguindo uma estratégia diferente. Se temos um href, retornamos o link do Next, se não, será um botão normal, como antes.

Além disso, na pasta "AsideLink", no arquivo index.jsx, é compilado estilos para combinar um ícone e um texto em um link. Colocamos tudo isso no "Aside". Com tudo isso pronto, podemos continuar a implementação do login.

Instalando o NextAuth

Começamos abrindo o terminal do VS Code para instalar o NextAuth. Lembrando que a versão atual é a 4. Para que você tenha a mesma experiência, recomendamos que você utilize a mesma. Passamos o comando npm next-auth@4, seguido de "Enter".

npm next-auth@4

Configurando opções de autenticação

Agora, precisamos começar a configurar as opções de autenticação. No VS Code, acessamos "src/app/api". Clicamos com o botão direito em "api" e depois em "New Folder". Nomeamos a nova pasta de "auth".

Nela, clicamos com o botão direito e novamente em "New Folder". Nomeamos a outra pasta de "[...nextauth]", uma rota dinâmica do Next para que o parâmetro fique disponível dentro da rota.

Dentro de api/auth/[...nextauth], criaremos um arquivo. Para isso, clicamos com o botão direito e depois em "New File". Nomeamos de options.js.

Precisamos instanciar e criar um provedor que será o GitHub. Para isso, no navegador, acessamos a documentação do NextAuth. Descemos a tela até a seção "Options", onde é indicado que devemos fazer a importação do GitHubProvider. Copiamos a primeira linha de código da documentação e colamos no arquivo options.js, no VS Code.

import GitHubProvider from "next-auth/providers/github";

Após, criaremos uma constante. Então, na linha abaixo, já fazemos o export const options = {}. Esse objeto terá o provider. Então, voltamos na documentação.

Repare que ela indica a propriedade providers que receberá um novo provider, o GitHub que estamos implementando agora. Copiamos o resto do código da documentação e colamos no VS Code, nas chaves.

Feito isso, clicamos com o botão direito na área de código e depois em "Format Document", para o código ser formatado.

import GitHubProvider from "next-auth/providers/github";

export const options = {
    providers: [
        GitHubProvider({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET
        })
    ]
}

Na linha 1, importamos o GitHubProvider, iniciamos um objeto padrão JavaScript, o objeto de configuração do NextAuth. Esse objeto tem uma propriedade chamada providers, sendo um array, no qual podemos ter vários.

O primeiro deles é o GitHubProvider que espera duas propriedades, clientId e clientSecret, tudo isso vindo do .env, o arquivo de variáveis de ambiente. Feito isso, salvamos o arquivo.

No Explorador, acessamos o arquivo .env. Nele, temos o POSTGRES_PRISMA_URL e o POSTGRES_URL_NON_POOLING apontando para a conexão local, assim como o login e senha pedem. Então é tranquilo comitar isso e aparecer no GitHub.

Quando estamos falando de um GITHUB_ID e um GITHUB_SECRET, são informações sensíveis, então não queremos expô-las. Então, na raiz do projeto, ao lado do .env, clicamos com o botão direito e depois em "New File". Nomeamos a nova pasta de .env.local.

Nisso, o Node e o próprio Next, conseguirão sobrepor. Então, usarão o ".env" de base e farão um replace, sobrescrever as informações preenchidas no .env.local.

Repare que o .env.local está até com uma cor diferente, um tom de cinza. Isso porque ele não será comitado, quando fizermos git add, commit e push, ele não vai para o GitHub, então temos que tomar cuidado com essas informações.

Sabendo disso, voltamos para o arquivo options.js. Queremos o GITHUB_ID e o GITHUB_SECRET, então, copiamos o nome dessas variáveis e colamos no .env.local. Após, colocamos o sinal de igual, seguido de aspas duplas, para ficar legível.

.env.local

GITHUB_ID=""
GITHUB_SECRET=""

Conectando o GitHub na aplicação

Mas, como conectamos o GitHub na aplicação? Vamos para o navegador novamente, agora acessamos o GitHub. Clicamos no menu, localizado na lateral superior direita e indicado pelo avatar. Depois, clicamos em "Settings".

Somos encaminhados para outra página. No menu lateral esquerdo, clicamos em "Developer settings" e depois em "OAuth Apps". No centro da tela, clicamos no botão "Register a new application".

Abre uma janela com campos de preenchimento. No campo Application name, definimos como "Code Connect Local". Em Homepage URL preenchemos com "http://localhost:3000", pois estamos falando de um ambiente local.

O Authorization callback URL será "localhost:3000/api/auth/callback/gitHub". Isso significa que ele vai apontar para a pasta que acabamos de criar. Ainda não temos um render para essa rota, mas implementaremos depois.

Abaixo, há um campo de seleção para habilitar o Device flow, não precisamos disso, então, mantemos desmarcado. Por fim, clicamos no botão "Register Application". Assim, temos um Client ID, que colocaremos no .env.local.

Importante: Você não deve usar o Client ID gerado nessa aula e sim criar o seu. O nosso deixará de existir, portanto, você não conseguirá fazer a autenticação. Crie sua própria API, esse processo é gratuito.

Voltamos ao VS Code, no .env.local. Nas aspas de GITHUB_ID, colamos o código que copiamos no navegador. Agora, precisamos do GITHUB_SECRET.

Voltamos no GitHub. Abaixo de Client ID, encontramos o Client secrets. Na lateral direita, clicamos no botão "Generate a new client secret". Assim, é gerado um código hash aleatório. Copiamos e colamos no VS Code.

Novamente, você também deve gerar esse código. Não utilize o gerado nessa aula, pois não funcionará. Abaixo, você encontra o código apenas para visualização de como ficará. Você deve seguir os mesmos passos e substituir pelo código que gerou.

GITHUB_ID="f28dbf66d6e0a3b904fa"
GITHUB_SECRET="057a2e119f2faed8b354f7225216e4d197894fce"

Ao salvar o arquivo, temos o cenário preparado. Porém, de alguma forma precisamos conectar a aplicação com essa autenticação.

Próximos passos

Como configuramos uma sessão do NextAuth e fazemos tudo funcionar de forma que a pessoa usuária consiga fazer login pelo GitHub? Descobriremos isso no vídeo seguinte.

Nos encontramos lá!

Sobre o curso Next.js: implementando autenticação com Auth.js

O curso Next.js: implementando autenticação com Auth.js possui 139 minutos de vídeos, em um total de 49 atividades. Gostou? Conheça nossos outros cursos de Next.JS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Fundamentos de autenticação
• Persistindo o usuário
• Custom Provider
• Página de perfil
• Login customizado