Autenticação NextAuth.js com MongoDB

Ahmed Bouchefra10 min read • Published Aug 30, 2024 • Updated Aug 30, 2024

Mongoose Next.js TypeScript JavaScript

APLICATIVO COMPLETO

Avalie esse Tutorial

NextAuth.js é uma biblioteca de autenticação robusta construída para aplicativos Next.js. O NextAuth.js simplifica a integração de funcionalidades de autenticação e oferece compatibilidade com vários métodos de autenticação, incluindo provedores OAuth (Google, Github etc.), logins por e-mail/senha e muito mais.

Este tutorial mostra como configurar o NextAuth.js para autenticação de usuário com e-mail e senha em seu aplicativo Next.js 14 .

Você pode encontrar o código neste repositório do GitHub.

O que é Next-Auth?

Next-Auth é uma biblioteca de autenticação projetada para aplicativos Next.js especificamente. Simplificando, o Next-Auth facilita a adição de autenticação aos seus aplicativos Next.js. Ele fornece uma integração mais perfeita das funcionalidades de autenticação. O Next-Auth também oferece melhor compatibilidade com outros métodos de autenticação, como provedores OAuth (Google, Github, etc.).

O Next-Auth oferece um conjunto de APIs fáceis de usar e outros componentes que podem lidar com fluxos de autenticação muito complexos. Isso significa que os desenvolvedores podem se concentrar mais na criação de seus aplicativos.

O Next-Auth oferece pronto para uso, segurança de autenticação e gerenciamento de sessão integrado. É apropriado para aplicativos de todos os tamanhos e funciona bem com ambientes de computação de borda e sem servidor. Ele também oferece suporte completo ao Typescript , para uma melhor experiência do desenvolvedor.

Requisitos

Antes de começarmos, certifique-se de ter os seguintes pré-requisitos:

Node.js v20: Verifique se você tem o Node.js instalado em sua máquina. Você pode baixá-lo do site oficial.
React e Next.js 14: uma compreensão básica do React e Next.js 14 é útil para este tutorial.
(Opcional) Tenha o MongoDB Community Edition 7.0 instalado e em execução.

Certifique-se de que o serviço mongodb-community foi iniciado localmente. Como alternativa, você pode usar um MongoDB Atlas clustergratuito para sempre.

Criando o projeto Next.js

Vamos criar um novo projeto Next.js usando o seguinte comando no seu terminal:

Trecho de código

Responda às perguntas da seguinte forma:

Trecho de código

Após as instruções, create-next-app criará uma pasta com o nome do projeto e instalará as dependências necessárias.

Instalando dependências

Navegue dentro do seu projeto e instale as seguintes dependências:

Trecho de código

O pacote próximo-auth fornece funcionalidades de autenticação para aplicativos Next.js. O pacote próximo-autenticação também oferece suporte integrado para vários fornecedores de autenticação e permite fácil integração com seu aplicativo.

A biblioteca bcryptjs fornece funções para hash de senhas usando o algoritmo bcrypt. É comumente usado para armazenar senhas com segurança em bancos de dados, gerando hashes de senha salgados.

Mongoose é uma biblioteca de modelagem de dados de objetos (ODM) para MongoDB e Node.js. Ele fornece uma solução simples e baseada em esquema para modelar os dados do aplicativo, facilitando o trabalho com bancos de dados MongoDB.

Depois de instalar essas dependências, você terá as ferramentas e bibliotecas necessárias para configurar os recursos de autenticação em seu aplicativo Next.js, integrá-lo ao MongoDB, criptografar senhas com segurança e definir modelos de dados usando o Mongoose.

Conectando ao MongoDB

Depois de instalar as dependências, é hora de conectar ao MongoDB. Crie um arquivo.env.local na raiz do seu projeto e adicione sua connection string do MongoDB:

Trecho de código

Observação: se você estiver se conectando a um cluster do MongoDB Atlas, poderá encontrar sua string de conexão no painel do Atlas.

Crie um arquivolib/mongodb.ts e adicione o seguinte código para conectar a um MongoDB database utilizando o mongoose:

Trecho de código

Estamos importando a bibliotecamongoose, que é uma biblioteca ODM Node.js popular para o MongoDB. Em seguida, recuperamos o URI MongoDB das variáveis de ambiente. Em seguida, definimos uma função assíncrona denominada connectDB que se conecta ao MongoDB database utilizando o URI obtido das variáveis de ambiente.

Dentro da funçãoconnectDB, usamos um blocotry...catch para lidar com quaisquer erros potenciais que podem ocorrer durante o processo de conexão do banco de dados. Dentro do blocotry, usamos o mongoose.connect() para estabelecer uma conexão com o MongoDB database utilizando o URI fornecido. Se a conexão for bem-sucedida, resolvemos a promessa com um valor de true.

Se ocorrer algum erro durante o processo de conexão, ele será capturado pelo blococatch. Nesse caso, registramos o erro no console e rejeitamos a promessa com o erro capturado.

Em seguida, crie um arquivomodels/User.tse comece adicionando as seguintes importações:

Trecho de código

Adicione a interface do usuário:

Trecho de código

Adicione o esquema de usuário:

Trecho de código

Isso define um esquema Mongoose para um documento de usuário. O UserSchema especifica a estrutura e as regras de validação para dados de usuário armazenados em uma coleção MongoDB.

Por fim, exporte o modelo do usuário:

Trecho de código

Isso garante que o modelo de usuário seja definido e esteja disponível para uso no aplicativo, recuperando um modelo existente ou criando um novo com base no esquema especificado.

Configurando NextAuth.js

Primeiro, precisamos de uma chave secreta NextAuth. Esta chave secreta é usada para criptografar tokens JWT e dados de sessão. Você pode obtê-lo simplesmente executando este comando em seu terminal e ele gerará uma chave aleatória para você:

Trecho de código

Você precisa copiar o segredo para seu arquivo.env:

Trecho de código

Crie um arquivolib/auth.tse comece adicionando as seguintes importações:

Trecho de código

Defina um objeto NextAuth options da seguinte maneira:

Trecho de código

Na funçãoauthorize(), adicione o seguinte código:

Trecho de código

Este código verifica as credenciais do usuário (e-mail e senha) em relação às armazenadas em um MongoDB database. Ele garante que as credenciais fornecidas sejam válidas antes de permitir que o usuário prossiga com a autenticação.

Em seguida, crie um app/api/auth/[...nextauth]/route.ts arquivo e adicione o seguinte código:

Trecho de código

Esse código importa as opções de autenticação de seu módulo, inicializa o manipulador de autenticação usando essas opções e exporta o manipulador a ser usado para solicitaçõesGET e POST nas rotas da API.

Criando uma ação de servidor para registrar usuários

Em Next.js, uma ação do servidor refere-se a qualquer lógica ou funcionalidade que seja executada no lado do servidor antes de renderizar a página. Isso pode incluir tarefas como buscar dados de uma API externa, acessar um banco de dados ou realizar verificações de autenticação.

Em nosso caso, criaremos uma ação de servidor para registrar usuários. Dentro da raiz do seu projeto, crie um arquivoactions/register.ts e comece adicionando as seguintes importações:

Trecho de código

A diretiva "use server", colocada no início do arquivo, instrui Next.js a tratar a(s) função(ões) como uma ação do servidor. Essa função pode ser chamada a partir de componentes do lado do cliente, mas é executada no servidor.

Exporte uma ação de servidor da seguinte maneira:

Trecho de código

A funçãoregisterlida com o processo de registro de um novo usuário conectando-se ao MongoDB database, verificando os endereços de e-mail existentes, fazendo hash das senhas e salvando os dados do usuário no MongoDB database.

Criando páginas

Após configurar o NextAuth e implementar uma ação de servidor para registro de usuário, a próxima etapa é criar as páginas de login e registro.

Para começar, vamos nos concentrar na página de login. Crie um arquivo denominado app/login/page.tsx e comece importando as dependências necessárias:

Trecho de código

A diretivause clienté usada para marcar o componente como código do lado do cliente. Isso significa que o código dentro desse escopo só será executado e estará disponível no ambiente do navegador do usuário, e não no servidor.

Defina uma função e exporte-a:

Trecho de código

No corpo da função, comece adicionando o seguinte código:

Trecho de código

Isso estabelece o gerenciamento de estado para mensagens de erro e acesso ao roteador do lado do cliente.

Adicione a funçãohandleSubmit()da seguinte forma:

Trecho de código

Isso define uma função assíncrona que lida com o envio de formulários para o login do usuário. Ele evita o comportamento padrão do formulário, extrai credenciais de usuário do formulário usando FormData, tenta se conectar usando NextAuth.js, e lida com o login bem-sucedido redirecionando o usuário para a página inicial e com possíveis erros atualizando o estado de erro do componente.

Retorna o seguinte código JSX:

Trecho de código

return (
    <section className="w-full h-screen flex items-center justify-center">
      <form
        className="p-6 w-full max-w-[400px] flex flex-col justify-between items-center gap-2 
        border border-solid border-black bg-white rounded"
        onSubmit={handleSubmit}>
        {error && <div className="text-black">{error}</div>}
        <h1 className="mb-5 w-full text-2xl font-bold">Sign In</h1>
        <label className="w-full text-sm">Email</label>
        <input
          type="email"
          placeholder="Email"
          className="w-full h-8 border border-solid border-black rounded p-2"
          name="email" />
        <label className="w-full text-sm">Password</label>
        <div className="flex w-full">
          <input
            type="password"
            placeholder="Password"
            className="w-full h-8 border border-solid border-black rounded p-2"
            name="password" />
        </div>
        <button className="w-full border border-solid border-black rounded">
          Sign In
        </button>

<Link
          href="/register"
          className="text-sm text-[#888] transition duration-150 ease hover:text-black">
          Don't have an account?
        </Link>
      </form>
    </section>
);

Isso simplesmente cria um formulário que permite aos usuários inserir seu e-mail e senha para autenticação e fornece um link para navegar até a página de registro se ainda não tiverem uma conta.

Veja como é o formulário:

Página de registro

Em seguida, vamos criar a página de registro. Crie um arquivoapp/register/page.tsx e comece adicionando o seguinte código:

Trecho de código

Isso cria um componente do lado do cliente que inicializa o estado para tratamento de erros, utiliza o roteador Next.js para navegação e fornece uma referência ao elemento do formulário, que será criado abaixo, usando uma ref.

Adicione a funçãohandleSubmit():

Trecho de código

Isso define uma função assíncrona denominada handleSubmit, que é chamada quando um formulário é enviado. A função lida com o envio do formulário, incluindo a extração dos dados do formulário usando FormData, o registro do usuário chamando a ação do servidor de registro, o tratamento de erros e o redirecionamento do usuário para a página de login após o registro bem-sucedido. Caso contrário, ela define o erro que será exibido.

Retorna o seguinte código JSX:

Trecho de código

return(
<section className="w-full h-screen flex items-center justify-center">
      <form ref = {ref}
        action={handleSubmit}
        className="p-6 w-full max-w-[400px] flex flex-col justify-between items-center gap-2 
        border border-solid border-black bg-white rounded">
        {error && <div className="">{error}</div>}
        <h1 className="mb-5 w-full text-2xl font-bold">Register</h1>

<label className="w-full text-sm">Email</label>
        <input
          type="email"
          placeholder="Email"
          className="w-full h-8 border border-solid border-black py-1 px-2.5 rounded"
          name="email"
        />

<label className="w-full text-sm">Password</label>
        <div className="flex w-full">
          <input
            type="password"
            placeholder="Password"
            className="w-full h-8 border border-solid border-black py-1 px-2.5 rounded"
            name="password"
          />
        </div>

<Link href="/login" className="text-sm text-[#888] transition duration-150 ease hover:text-black">
          Already have an account?
          </Link>
      </form>
</section>
)

É assim que parece:

Usando o provedor de sessão e exibindo o estado de autenticação

Nesta seção, demonstraremos como usar o SessionProvider no layout pai para garantir que o gerenciamento de sessão esteja disponível em todo o aplicativo. Recuperaremos o estado de autenticação da sessão e exibiremos dinamicamente um botão "Sign Out" se o usuário estiver autenticado, ou um botão "Sign In" se o usuário não estiver autenticado.

Crie um app/provider.tsx arquivo e adicione o seguinte código:

Trecho de código

Atualize o app/layout.tsx com o provedor que criamos. Primeiro importe-o:

Trecho de código

Em seguida, adicione da seguinte forma:

Trecho de código

Atualize o arquivoapp/page.tsx da seguinte maneira:

Trecho de código

"use client";
import { signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function Home() {
  const { status } = useSession();
  const router = useRouter();

const showSession = () => {
    if (status === "authenticated") {
      return (
        <button
          className="border border-solid border-black rounded"
          onClick={() => {
            signOut({ redirect: false }).then(() => {
              router.push("/");
            });

}}
        >
          Sign Out
        </button>
      )
    } else if (status === "loading") {
      return (
        <span className="text-[#888] text-sm mt-7">Loading...</span>
      )
    } else {
      return (
        <Link
          href="/login"
          className="border border-solid border-black rounded"
        >
          Sign In
        </Link>
      )
    }
  }
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-xl">Home</h1>
      {showSession()}
    </main>
  );
}

Atualize o arquivoapp/globals.csspara remover o CSS personalizado e manter apenas o seguinte:

Trecho de código

Teste

Você primeiro precisa se registrar a partir desta interface:

Você pode então fazer login a partir desta interface:

Você será redirecionado para a página inicial com o botão “Sign Out”, que aparece somente quando o usuário está logado, e você pode usá-lo para sair do aplicativo:

Conclusão

Neste tutorial, analisamos as etapas para configurar a autenticação NextAuth.js com o MongoDB como banco de dados de back-end. Começamos criando um novo projeto Next.js e instalando as dependências necessárias. Em seguida, estabelecemos uma conexão com o MongoDB usando o Mongoose e definimos um esquema de usuário para estruturar nossos dados de usuário.

Em seguida, configuramos NextAuth.js gerando uma chave secreta, definindo opções de autenticação e implementando a lógica de autorização para verificar as credenciais do usuário em relação ao MongoDB. Também criamos ações de servidor para o registro de usuários, lidando com operações de banco de dados com segurança no lado do servidor.

Depois de configurar a autenticação, criamos páginas de login e registro usando componentes React e as integramos ao NextAuth.js para autenticação. Lidamos com envios de formulários, tratamento de erros e redirecionamento de usuários com base no status da autenticação.

Por fim, atualizamos o layout para incluir um provedor de sessão para gerenciar sessões de usuário e garantir a exibição adequada do status de autenticação na página inicial.

Ao seguir essas etapas, você pode implementar efetivamente a autenticação em seu aplicativo Next.js usando o NextAuth.js e o MongoDB, fornecendo uma experiência segura e contínua para seus usuários e simplificando o processo de configuração da autenticação para desenvolvedores.

Quer continuar a conversa? Vá para a comunidade de desenvolvedores do MongoDB em seguida.

Principais comentários nos fóruns

Akash_Mishra1Akash Mishralast month

este código não está funcionando no modo de produção. está mostrando erro
O erro foi causado pela importação de 'mongoose/dist/browser.umd.js

Responder

Swapnil_KotkarSwapnil Kotkaryesterday

@Dvir_Ben_Ishay Hello, I am also facinf exact issue from past 7 days. Failed to figure out this issue. Have you resolved this issue?. Please inform or you can write me at: swapnilkotkar793@gmail.com

Responder

Veja mais nos fóruns

Avalie esse Tutorial

Relacionado

Tutorial

Build a JavaScript AI Agent With LangGraph.js and MongoDB

Sep 10, 2024 | 15 min read

Tutorial

Crie uma REST API com Cloudflare Workers e MongoDB Atlas

Mar 29, 2024 | 7 min read

Tutorial

GraphQL APIs instantâneas para MongoDB com Grafbase

Oct 12, 2023 | 7 min read

Início rápido

Introdução ao Bun e ao MongoDB

Jul 19, 2024 | 9 min read

Sumário

O que é Next-Auth?
Requisitos
Criando o projeto Next.js
Instalando dependências
Conectando ao MongoDB
Configurando NextAuth.js
Criando uma ação de servidor para registrar usuários
Criando páginas
Usando o provedor de sessão e exibindo o estado de autenticação
Teste
Conclusão

TypeScript

Autenticação NextAuth.js com MongoDB

O que é Next-Auth?

Requisitos

Criando o projeto Next.js

Instalando dependências

Conectando ao MongoDB

Configurando NextAuth.js

Criando uma ação de servidor para registrar usuários

Criando páginas

Login page

Página de registro

Usando o provedor de sessão e exibindo o estado de autenticação

Teste

Conclusão

Principais comentários nos fóruns

Relacionado

Build a JavaScript AI Agent With LangGraph.js and MongoDB

Crie uma REST API com Cloudflare Workers e MongoDB Atlas

GraphQL APIs instantâneas para MongoDB com Grafbase

Introdução ao Bun e ao MongoDB

Sumário