Este artigo se aprofundará nas etapas necessárias para implementar a autenticação sem senha em um projeto Next.js usando a biblioteca NextAuth.js. Além disso, utilizaremos o Prisma como nosso adaptador de banco de dados para conseguir isso.
A autenticação sem senha é uma abordagem inovadora que elimina a necessidade de combinações tradicionais de nome de usuário e senha. Em vez disso, oferece uma experiência de autenticação mais segura e fácil de usar, aproveitando métodos alternativos, como links mágicos de e-mail ou códigos únicos enviados por SMS.
Next.js é uma estrutura React popular para construção de aplicações web, conhecida por sua simplicidade e eficiência. Podemos incorporar facilmente a autenticação sem senha em nosso projeto integrando NextAuth.js, uma biblioteca de autenticação projetada explicitamente para Next.js.
Além disso, contaremos com o Prisma como nosso adaptador de banco de dados. Prisma é uma ferramenta ORM (Mapeamento Objeto-Relacional) que simplifica as interações com o banco de dados, fornecendo um construtor de consultas gerado automaticamente e com segurança de tipo. Ele oferece suporte a vários bancos de dados, incluindo PostgreSQL, MySQL e SQLite, tornando-o uma escolha versátil para nossa implementação de autenticação.
Ao longo deste guia, forneceremos instruções passo a passo sobre como instalar e configurar a autenticação sem senha usando NextAuth.js em um projeto Next.js. Também demonstraremos como integrar o Prisma como nosso adaptador de banco de dados, permitindo uma comunicação perfeita entre nossa aplicação e o banco de dados.
Exploraremos agora como melhorar a segurança e a experiência do usuário de nosso aplicativo Next.js usando autenticação sem senha e os recursos de NextAuth.js e Prisma. Vamos começar.
O que é login sem senha?
O login sem senha, como o nome sugere, é um método de autenticação que elimina a necessidade de combinações tradicionais de nome de usuário e senha. Em vez disso, utiliza meios alternativos de verificação da identidade de um usuário, como links mágicos de e-mail ou códigos únicos enviados via SMS. Essa abordagem oferece diversas vantagens em relação aos métodos de login tradicionais. Em primeiro lugar, elimina o risco de vulnerabilidades relacionadas com palavras-passe, tais como palavras-passe fracas ou reutilização de palavras-passe. Em segundo lugar, simplifica a experiência do usuário, eliminando a necessidade de lembrar e inserir senhas complexas.
Para implementar o login sem senha usando links mágicos de e-mail ou códigos únicos, precisamos de um servidor SMTP (Simple Mail Transfer Protocol).
Um servidor SMTP é responsável por enviar e-mails pela Internet. No contexto da autenticação sem senha, o servidor envia links mágicos ou códigos únicos para o endereço de e-mail registrado do usuário. Quando um usuário inicia o processo de login, um e-mail contendo um link ou código exclusivo é gerado e enviado ao usuário. O usuário pode então clicar no link ou inserir o código para concluir o processo de autenticação. O servidor SMTP atua como intermediário entre a aplicação e o serviço de e-mail do usuário, garantindo a entrega segura e confiável das mensagens de autenticação. Ao utilizar um servidor SMTP, podemos implementar efetivamente o login sem senha e fornecer uma experiência de autenticação perfeita para nossos usuários.
Vamos começar!
Primeiro, precisamos gerar um novo projeto Next.js. Para fazer isso, use o seguinte comando:
npx create-next-app@latest
Depois de gerar o novo projeto Next.js, você pode navegar até o diretório do projeto recém-criado.
Ao alterar o diretório do projeto, você poderá explorar as diversas pastas e arquivos que compõem a estrutura do projeto Next.js.
Compreender a estrutura do projeto é essencial para o desenvolvimento e organização eficazes de seu aplicativo Next.js. Consultando a documentação oficial, você pode aproveitar as práticas recomendadas e obter insights sobre como estruturar seu código, gerenciar ativos estáticos e criar componentes reutilizáveis.
Instalando nossas dependências
Para habilitar a autenticação sem senha em nosso projeto Next.js usando NextAuth.js, devemos primeiro instalar as dependências necessárias. Execute o comando yarn add next-auth nodemailer para adicionar NextAuth.js e nodemailer ao nosso projeto.
Usamos especificamente o nodemailer, pois é um módulo popular e versátil para envio de e-mails em Node.js. Ele fornece uma maneira direta e confiável de enviar links mágicos ou códigos únicos necessários para autenticação sem senha por e-mail.
A seguir, vamos integrar o Prisma como nosso adaptador de banco de dados. Comece instalando os pacotes Prisma necessários usando o comando:
yarn add @prisma/client @next-auth/prisma-adapter
Esses pacotes permitirão uma comunicação perfeita entre nosso aplicativo Next.js e o banco de dados. Além disso, também precisamos instalar o Prisma como uma dependência de desenvolvimento executando:
yarn add prisma --dev
Esta etapa garante que tenhamos as ferramentas necessárias para trabalhar com o Prisma e seu construtor de consultas gerado automaticamente para interações com o banco de dados.
Ao instalar essas dependências, estabelecemos a base para a implementação da autenticação sem senha usando NextAuth.js e Prisma em nosso projeto Next.js.
Configurar Prisma
É necessário configurar o Prisma e ter acesso a um servidor SMTP para envio de e-mail para utilizar autenticação sem senha em um projeto Next.js. Este tutorial irá guiá-lo no uso de sua conta pessoal do Gmail para enviar e-mails. Siga as etapas abaixo para uma configuração bem-sucedida.
Primeiro, crie uma pasta "prisma" na raiz do seu projeto. Esta pasta abrigará os arquivos e configurações relacionados ao Prisma. Em seguida, dentro da pasta "prisma", crie um novo arquivo chamado "schema.prisma". O arquivo de esquema define a estrutura do seu banco de dados e serve como um modelo para o código gerado automaticamente pelo Prisma.
Se você é novo no conceito de esquema, não se preocupe! Um esquema especifica as tabelas, campos, relacionamentos e restrições do seu banco de dados. Para criar o esquema, você pode consultar a documentação oficial do NextAuth.js e copiar o esquema de exemplo fornecido lá. Este esquema é um ponto de partida e pode ser personalizado para atender aos requisitos da sua aplicação.
Em seguida, crie um arquivo ".env" na raiz do seu projeto. Este arquivo armazenará suas variáveis de ambiente, incluindo as configurações necessárias para o seu servidor SMTP. Para preencher o arquivo ".env", você pode copiar as configurações de exemplo fornecidas abaixo. Certifique-se de inserir as credenciais da sua conta do Gmail e as configurações do servidor SMTP nos campos correspondentes.
EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret
Seguindo estas etapas, você terá configurado o Prisma e configurado o servidor SMTP para enviar e-mails usando sua conta do Gmail. Essas preparações são cruciais para habilitar o fluxo de autenticação sem senha em seu projeto Next.js.
Observação
Você deve criar uma senha de aplicativo se tiver ativado a autenticação de dois fatores (2FA) para sua conta do Google. Uma senha de aplicativo é uma senha distinta que concede acesso a aplicativos ou dispositivos específicos sem expor a senha principal da sua conta do Google. Siga as instruções abaixo para gerar uma senha de aplicativo.
-
Acesse a página de configurações da Conta do Google visitando https://myaccount.google.com/.
-
Navegue até a aba “Segurança”.
-
Procure a seção “2FA”, role para baixo e selecione “Senhas de aplicativos”.
-
Talvez você seja solicitado a inserir a senha da sua conta do Google novamente para verificação de segurança.
-
No menu suspenso "Selecionar aplicativo", escolha "Correio" ou "Outro (nome personalizado)".
-
Se a opção "Correio" estiver disponível, selecione-a.
-
Se a opção "Correio" não estiver disponível, escolha "Outro (nome personalizado)" e forneça um nome personalizado para identificação.
-
Clique no botão “Gerar” ou “Gerar Senha”.
-
O Google irá gerar uma senha de aplicativo exclusiva para você. Anote esta senha, pois iremos utilizá-la em nosso aplicativo para envio de e-mails.
-
Use esta senha de aplicativo gerada na configuração do servidor SMTP do seu aplicativo Next.js. Substitua a senha normal da sua conta do Gmail por esta senha de aplicativo.
Isso garante que mesmo com 2FA ativado, seu aplicativo possa enviar e-mails com segurança usando sua conta do Gmail.
PostgreSQL usando Supabase
Antes de prosseguirmos, precisamos garantir que o banco de dados do nosso projeto esteja funcionando corretamente. Para esta demonstração, recomendamos o uso do banco de dados Supabase PostgreSQL. Para começar com um projeto Supabase e obter o URL de conexão do PostgreSQL, siga estas etapas:
-
Acesse supabase.io e faça login em sua conta ou crie uma nova se ainda não tiver uma.
-
Depois de fazer login, você será direcionado para o painel do Supabase. Clique em “Criar Novo Projeto” para iniciar um novo projeto.
-
Dê um nome ao seu projeto e selecione a região mais próxima da sua localização atual. Lembre-se da sua senha, você precisará dela mais tarde.
-
Depois de criar o projeto, você será levado ao painel do projeto. Clique em “Banco de dados” na barra lateral esquerda para acessar as configurações do banco de dados.
-
Na seção "Banco de dados", você encontrará a URL de conexão do PostgreSQL. Esta URL contém todas as informações necessárias para se conectar ao banco de dados do seu projeto Supabase, como host, porta, nome do banco de dados, nome de usuário e senha. Ele será exibido no formato:
postgres://<username>:<password>@<host>:<port>/<database>
- Copie o URL de conexão do PostgreSQL e mantenha-o seguro. Você precisará dele para estabelecer uma conexão entre seu aplicativo e o banco de dados Supabase.
// .env
DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
```
Agora, vamos garantir que geramos nosso cliente Prisma executando o seguinte comando: `npx prisma generate`.
O Prisma Client é um cliente de banco de dados gerado automaticamente com base no seu esquema. Por padrão, o Prisma Client é gerado na pasta `node_modules/.prisma/client`, mas você pode [especificar um local personalizado, se necessário](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).
A seguir, procederemos à criação de nossa migração inicial. Execute o seguinte comando: `npx prisma Migrate dev`. Você pode dar a cada migração um nome descritivo.
No Prisma, uma migração é um método usado para gerenciar ajustes no esquema do seu banco de dados conforme o tempo passa. Ele permite modificar a estrutura do seu banco de dados sem perder nenhum dado pré-existente. Essas migrações são cruciais porque garantem que o esquema do seu banco de dados se alinhe às necessidades do seu aplicativo à medida que elas mudam. Com a ferramenta de migração do Prisma, você pode criar versões, aplicar e reverter essas alterações de maneira conveniente, simplificando o trabalho em equipe e mantendo um esquema de banco de dados uniforme em vários ambientes.
Agora, se verificarmos nosso banco de dados, poderemos ver as alterações de nossa migração inicial refletidas na seção do banco de dados.
Ao realizar a migração inicial, aplicamos as modificações ao esquema do nosso banco de dados conforme definido no script de migração.
### Configurando NextAuthJS com Adaptador Prisma
Em um aplicativo Next.js, NextAuthJS usa a rota pega-tudo, também conhecida como curinga ou rota alternativa, para gerenciar solicitações de autenticação. Esta rota dinâmica é definida usando o sistema de roteamento baseado em arquivo em Next.js.
Crie uma pasta chamada "**api**" dentro do diretório "**app**". Dentro da pasta "**api**", crie uma pasta "**auth**". Dentro da pasta "**auth**", crie uma rota abrangente chamada "**[...nextauth]**" como uma pasta. Por último, crie um arquivo "**route.ts**" dentro da pasta de rota abrangente e adicione o código a seguir.
```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';
const prisma = new PrismaClient();
export const authOptions = {
adapter: PrismaAdapter(prisma),
providers: [
EmailProvider({
server: {
host: process.env.EMAIL_SERVER_HOST,
port: process.env.EMAIL_SERVER_PORT,
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD,
},
},
from: process.env.EMAIL_FROM,
}),
]
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
No arquivo de rota abrangente, importamos a biblioteca NextAuthJS e definimos as opções de autenticação, provedores e configurações. NextAuthJS lida com a análise de solicitações recebidas, identifica a ação de autenticação necessária e executa a lógica apropriada de acordo com as opções especificadas.
O código fornecido configura NextAuthJS com o adaptador Prisma para autenticação usando um provedor de e-mail. Vamos explicar cada afirmação:
- Importações:
-
PrismaAdapterePrismaClientsão importados de@next-auth/prisma-adaptere@prisma/client, respectivamente. Eles são usados para integrar NextAuthJS com Prisma. -
NextAuthé importado denext-authe é a biblioteca principal para lidar com autenticação em aplicativos Next.js. -
EmailProvideré importado denext-auth/providers/emaile é usado como um provedor para autenticação baseada em email.
- Configuração do Prisma:
- Uma instância de
PrismaClienté criada usandonew PrismaClient(). Isso permite a comunicação com o Prisma ORM e o banco de dados subjacente.
- Opções de autenticação:
-
authOptionsé um objeto que define a configuração para autenticação no NextAuthJS. -
A propriedade
adapteré definida comoPrismaAdapter(prisma), que conecta NextAuthJS com Prisma usando oPrismaAdapter. -
A matriz
providerscontém um único provedor,EmailProvider. Ele é configurado com os detalhes necessários do servidor de e-mail e o endereço de e-mailfrom.
- Manipulador NextAuth:
-
A função
NextAuthé chamada comauthOptionscomo argumento, criando um manipulador de autenticação. -
O manipulador resultante é atribuído à variável
handler.
- Exportar:
handleré exportado comoGETePOSTpara suportar solicitações HTTP GET e POST.
Agora, vamos executar nosso servidor e testar a funcionalidade. Primeiro, inicie o servidor de desenvolvimento executando yarn dev. Em seguida, abra seu navegador e visite localhost:3000 para ver o aplicativo em ação.
Para testar a funcionalidade de autenticação, visite localhost:3000/api/auth/signin. Aqui, você experimentará a magia do NextAuthJS. O modelo fornecido incluído no NextAuthJS permite um processo de login sem senha. Para experimentar, insira um endereço de e-mail válido.
Depois de enviar o e-mail, NextAuthJS cuidará do processo nos bastidores. Primeiro, ele irá gerar e enviar um email contendo um link de login exclusivo para o endereço de email fornecido. Este link serve como um token de autenticação seguro para o usuário. Então, quando o usuário clicar no link, NextAuthJS validará o token e autenticará o usuário.
Esse recurso de login sem senha aumenta a segurança e a experiência do usuário, eliminando a necessidade de senhas. Os usuários podem acessar suas contas de forma rápida e segura, simplesmente clicando no link recebido por e-mail. Ele agiliza o processo de login e reduz o risco de vulnerabilidades relacionadas a senhas.
Quando um usuário clica no e-mail de login gerado pelo NextAuthJS e é autenticado, várias ações ocorrem nos bastidores para facilitar uma experiência de login perfeita.
1. Validação do link de e-mail: quando o usuário clica no link de login, NextAuthJS valida o token de autenticação incorporado no link. Este token garante a segurança e integridade do processo de autenticação.
2. Processo de autenticação: Após a validação bem-sucedida do token, NextAuthJS identifica o usuário e conclui o processo de autenticação. Ele verifica a identidade do usuário com base no token fornecido e em quaisquer fatores de autenticação adicionais configurados, como a autenticação multifator.
3. Criação de sessão: após a autenticação bem-sucedida, NextAuthJS cria uma sessão para o usuário. Uma sessão é um estado persistente que representa o status de autenticação do usuário e permite que ele acesse recursos protegidos sem precisar autenticar novamente para solicitações subsequentes.
4. Cookies: NextAuthJS define cookies seguros somente HTTP no navegador do usuário para gerenciar a sessão. Esses cookies desempenham um papel crucial na manutenção do estado autenticado do usuário em diversas solicitações. Os cookies normalmente incluem um cookie de sessão e, opcionalmente, um cookie de token de atualização, dependendo da configuração de autenticação.
-
Cookie de sessão: O cookie de sessão contém um identificador de sessão (por exemplo, uma string gerada aleatoriamente) que identifica exclusivamente a sessão do usuário. Ajuda o NextAuthJS a associar solicitações subsequentes à sessão e ao usuário corretos.
-
Cookie de token CSRF: NextAuthJS define um cookie de token CSRF (Cross-Site Request Forgery) para proteção contra ataques CSRF. O token CSRF é um valor exclusivo gerado pelo NextAuthJS e armazenado no cookie. É utilizado para validar e verificar a autenticidade das solicitações subsequentes feitas pelo usuário. Quando o usuário envia formulários ou executa ações confidenciais, o token CSRF é incluído nos cabeçalhos ou no corpo da solicitação para garantir que a solicitação tenha origem na sessão do usuário autenticado e não em uma fonte maliciosa.
-
Cookie de URL de retorno: NextAuthJS define um cookie de URL de retorno para armazenar o URL original que o usuário estava tentando acessar antes de ser redirecionado para o fluxo de autenticação. Este cookie ajuda o NextAuthJS a redirecionar o usuário de volta à página desejada após a autenticação bem-sucedida. Ele garante uma experiência tranquila ao usuário, retornando perfeitamente o usuário ao destino pretendido, em vez de uma página de destino genérica.
Ao usar cookies seguros somente HTTP, NextAuthJS garante que o estado de autenticação permaneça seguro e à prova de adulteração. Os cookies são criptografados, evitando acesso não autorizado ou modificação por agentes mal-intencionados.
Excelente trabalho na integração bem-sucedida do NextAuthJS com o adaptador Prisma em seu aplicativo Next.js! Com a facilidade e adaptabilidade proporcionadas pelo NextAuthJS, agora você tem um sistema de autenticação confiável.
Confira o repositório GitHub com link abaixo para o código usado neste guia: https://github.com/codelabsacademy/next-auth-guide.
Mas por que parar aqui? Se você é apaixonado por desenvolvimento web e deseja aprimorar suas habilidades, considere se inscrever em nosso bootcamp de desenvolvimento web. Nosso bootcamp oferece uma experiência de aprendizado abrangente, equipando você com o conhecimento e as habilidades práticas necessárias para se destacar no mundo dinâmico do desenvolvimento web.
Ao ingressar em nosso bootcamp, você ganhará experiência prática com tecnologias de ponta, trabalhará em projetos do mundo real e receberá orientação personalizada de especialistas do setor. Quer você seja um desenvolvedor iniciante ou experiente, nosso programa foi projetado para levar suas habilidades de desenvolvimento web para o próximo nível.
Não perca esta oportunidade de acelerar sua jornada de desenvolvimento web. Inscreva-se hoje em nosso bootcamp de desenvolvimento web e libere todo o seu potencial no emocionante campo do desenvolvimento web. Juntos, vamos construir experiências digitais incríveis e moldar o futuro da web.
