Novas atualizações no NextAuth.js v4: o que você precisa saber

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 software livre que fornece suporte de autenticação e autorização 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 ao 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:

import { useSession } from "next-auth/react"


export default function Component() {
    const { data: session, status } = useSession()

    return <p> Not signed in </p>
}

2. O 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 no arquivo _app.jsx .

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.

import { SessionProvider } from "next-auth/react"


export default function App({
    Component, pageProps: { session,. ..pageProps },
}) {
    return (
        <SessionProvider session={session} refetchInterval={5 * 60}>
        <Component {...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.

import GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "next-auth/providers/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({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, 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 create-next-app <nome do aplicativo>
2. Execute npm install next-auth em seu terminal para instalar NextAuth.js em seu aplicativo Next.js.
3. Visite a documentação oficial do NextAuth.js e selecione seu(s) provedor(es) preferido(s) na lista dos 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 a URL de rota inicial e a URL de redirecionamento de retorno de chamada , salve as alterações e copie o ClientID e o Client Secret .
5. No diretório raiz do aplicativo Next.js, crie um arquivo. env para conter o Client ID e o Client Secret .
6. Por fim, no diretório /pages/api, crie uma nova pasta chamada auth . 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:

import GoogleProvider from "next-auth/providers/google";


providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.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:

import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"


export default function Component() {
  const { data: session } = useSession()

  return (
    <>
      <p> Not signed in </p>
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

O Gancho useSession 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 versus soluções prontas para uso, como NextAuth.js

Ao escolher entre criar um sistema de autenticação personalizado e integrar uma solução de autenticação pronta para uso, 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.