Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

A autenticação é um componente chave do desenvolvimento de aplicativos. Isso ajuda a proteger os dados do usuário e evitar atividades maliciosas. Simplificando, ele determina a credibilidade da identidade de um usuário, garantindo que apenas usuários autorizados possam acessar um aplicativo e seus recursos.

A criação de um sistema de autenticação personalizado pode ser uma tarefa demorada, e é aqui que o NextAuth.js é útil. Ele fornece suporte de autenticação segura para aplicativos criados com a estrutura Next.js.

O que é NextAuth.js?

NextAuth.js é uma biblioteca leve de código aberto que fornece autenticação e autorização suporte para aplicativos Next.js. Ele permite que os desenvolvedores configurem autenticação e autorização de forma rápida e fácil para seus aplicativos Next.js. Ele fornece recursos como autenticação com vários provedores, e-mail e autenticação sem senha.

Como o NextAuth.js funciona na autenticação?

A solução de autenticação do NextAuth.js fornece uma API do lado do cliente que você pode integrar em seu aplicativo Next.js. Você pode usá-lo para autenticar usuários com diferentes provedores de login com os quais eles criaram contas.

Nos bastidores, os usuários são redirecionados para a página de login de um provedor. Após a autenticação bem-sucedida, o provedor retorna os dados da sessão que contêm a carga útil do usuário. Essa carga útil pode então autorizar o acesso ao aplicativo e seus recursos.

Novas atualizações de recursos em NextAuth.js (v4)

Em dezembro de 2022, o NextAuth.js lançou sua quarta versão. Esta versão foi aprimorada em relação à versão anterior, v3, com novas atualizações e modificações. As mudanças focam principalmente em melhorar o uso da biblioteca no processo de autenticação.

1. Atualizações para o gancho useSession

Você pode usar o gancho useSession para verificar se um usuário está conectado ou não. Nesta nova versão, o gancho useSession retorna um objeto que fornece uma maneira mais direta de testar estados, graças à adição da opção de status. Veja o código abaixo:

importar { useSession } de"next-auth/react"
exportarpadrãofunçãoComponente() {
const { dados: sessão, status } = useSession()


se (status "autenticado") { 
retornar<p>Conectado como {session.user.email}p>
 }
retornar<p> Não conectado p>
}

2. Contexto SessionProvider torna-se obrigatório

A nova versão quatro exige o uso do contexto SessionProvider. Isso significa que você terá que agrupar seu aplicativo com o provedor useSession. NextAuth.js recomenda agrupar seu aplicativo dentro do _app.jsx arquivo.

Além disso, o método clientMaxAge foi substituído por refetchInterval. Isso tornará mais fácil buscar a sessão periodicamente em segundo plano.

importar { SessionProvider } de"next-auth/react"
exportarpadrãofunçãoAplicativo({
 Componente, pageProps: { sessão, ...pageProps }, 
}) {
retornar ( 
<SessionProvidersessão={sessão}refetchInterval={5 * 60}>
<Componente {...pageProps} />SessionProvider>
 )
}

3. Importando Provedores Individualmente

NextAuth.js fornece vários serviços de provedor que você pode usar para conectar um usuário. Eles incluem:

  • Usando provedores OAuth integrados (por exemplo, GitHub, Google).
  • Usando provedor de e-mail.

Nesta nova versão, você precisa importar cada provedor individualmente.

importar GoogleProvider de"next-auth/providers/google"
importar Auth0Provider de"next-auth/provedores/auth0";

4. Outras pequenas alterações

  • A importação do lado do cliente foi renomeada para next-auth/react de next-auth/client.
  • Mudanças nos argumentos dos métodos de callback: 
    signIn({ usuário, conta, perfil, email, credenciais })
    sessão({ sessão, token, usuário })
    jwt({ token, usuário, conta, perfil, isNewUser })

Introdução ao NextAuth.js na autenticação

Para integrar NextAuth.js em seus aplicativos Next.js, siga os passos abaixo:

  1. Crie um aplicativo Next.js executando este comando: npx criar-próximo-aplicativo
  2. Correr npm install next-auth em seu terminal para instalar NextAuth.js em seu aplicativo Next.js.
  3. Visite a NextAuth.js documentação oficial e selecione seu(s) provedor(es) preferido(s) na lista de fornecedores suportados. Em seguida, crie uma conta no console do desenvolvedor do(s) provedor(es) selecionado(s) e registre seu aplicativo Next.js.
  4. No console do desenvolvedor do(s) provedor(es) selecionado(s), especifique o URL da rota inicial e a URL de redirecionamento de retorno de chamada, salve as alterações e copie o ID do Cliente e Segredo do cliente.
  5. No diretório raiz do aplicativo Next.js, crie um arquivo .env para conter o ID do Cliente e Segredo do cliente.
  6. Por fim, no diretório /pages/api, crie uma nova pasta chamada autenticação. Na pasta auth, crie um novo arquivo e nomeie-o como [...nextauth].js. No arquivo criado, adicione o código abaixo. O código mostra a API do lado do cliente NextAuth.js usando um provedor do Google: 
importar GoogleProvider de"next-auth/providers/google";
provedores: [
 GoogleProvider({
ID do Cliente: processo.env.GOOGLE_CLIENT_ID,
clientesecret: processo.env.GOOGLE_CLIENT_SECRET
 })
]

Agora você pode prosseguir e criar uma página de autenticação de login. Aqui está uma renderização DOM para um componente de login:

importar Reagir de'reagir';
importar { useSession, entrar, sair } de"next-auth/react"
exportarpadrãofunçãoComponente() {
const { dados: sessão } = useSession()


 if (sessão) {
retornar (
<>
<p> Conectado como {session.user.email} p>
<botãoao clicar={() => signOut()}>Sairbotão>

 )
 }
retornar (
<>
<p> Não conectado p>
<botãoao clicar={() => signIn()}>Entrarbotão>

 )
}

O useSession Hook acessa o objeto de sessão do usuário atual. Depois que um usuário faz login e é autenticado pelo Google, um objeto de sessão com a carga útil do usuário é retornado. Isso permite que o Next.js renderize os detalhes do usuário no lado do cliente do aplicativo, neste caso, o e-mail.

Sistemas de autenticação personalizados vs. Soluções prontas para uso, como NextAuth.js

Escolher entre criar um sistema de autenticação personalizado e integrar uma autenticação pronta para uso solução como NextAuth.js, é importante considerar o custo, a complexidade e a segurança de cada solução.

Se você tiver os recursos e experiência para desenvolver um sistema de autenticação personalizado, essa pode ser a melhor abordagem para você. No entanto, se você estiver procurando por uma solução pronta para uso que seja fácil de implementar, segura e econômica, o NextAuth.js pode ser uma boa opção a ser considerada. Em última análise, a escolha dependerá de suas necessidades e preferências.