Nuevas actualizaciones en NextAuth.js v4: lo que necesita saber

La autenticación es un componente clave del desarrollo de aplicaciones. Ayuda a proteger los datos del usuario y prevenir actividades maliciosas. En pocas palabras, determina la credibilidad de la identidad de un usuario, asegurando que solo los usuarios autorizados puedan acceder a una aplicación y sus recursos.

Crear un sistema de autenticación personalizado puede ser una tarea que requiere mucho tiempo, y aquí es donde NextAuth.js resulta útil. Proporciona soporte de autenticación segura para aplicaciones creadas con el marco Next.js.

¿Qué es NextAuth.js?

NextAuth.js es una biblioteca liviana de código abierto que brinda soporte de autenticación y autorización para aplicaciones Next.js. Permite a los desarrolladores configurar rápida y fácilmente la autenticación y autorización para sus aplicaciones Next.js. Proporciona funciones como autenticación con múltiples proveedores, correo electrónico y autenticación sin contraseña.

¿Cómo funciona NextAuth.js en la autenticación?

La solución de autenticación de NextAuth.js proporciona una API del lado del cliente que puede integrar en su aplicación Next.js. Puede usarlo para autenticar usuarios con diferentes proveedores de inicio de sesión con los que han creado cuentas.

Bajo el capó, los usuarios son redirigidos a la página de inicio de sesión de un proveedor. Tras una autenticación exitosa, el proveedor devuelve los datos de la sesión que contienen la carga útil del usuario. Esta carga útil puede autorizar el acceso a la aplicación y sus recursos.

Nuevas actualizaciones de funciones en NextAuth.js (v4)

En diciembre de 2022, NextAuth.js lanzó su cuarta versión. Esta versión ha sido mejorada desde su versión anterior, v3, con nuevas actualizaciones y modificaciones. Los cambios se centran principalmente en mejorar el uso de la biblioteca en el proceso de autenticación.

1. Actualizaciones del useSession Hook

Puede usar el enlace useSession para verificar si un usuario ha iniciado sesión o no. En esta nueva versión, el enlace useSession devuelve un objeto que proporciona una forma más sencilla de probar estados, gracias a la adición de la opción de estado. Vea el código a continuación:

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


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

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

2. El contexto de SessionProvider se vuelve obligatorio

La nueva versión cuatro exige el uso del contexto SessionProvider. Esto significa que tendrá que envolver su aplicación con el proveedor useSession. NextAuth.js recomienda envolver su aplicación dentro del archivo _app.jsx .

Además, el método clientMaxAge se reemplazó con refetchInterval. Esto hará que sea más fácil recuperar la sesión periódicamente en 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. Importación de proveedores individualmente

NextAuth.js proporciona varios servicios de proveedores que puede usar para iniciar sesión como usuario. Incluyen:

• Uso de proveedores de OAuth integrados (p. ej., GitHub, Google).
• Uso del proveedor de correo electrónico.

En esta nueva versión, debe importar cada proveedor individualmente.

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

4. Otros cambios menores

• Se ha cambiado el nombre de la importación del lado del cliente a next-auth/react de next-auth/client.
• Cambios en los argumentos de los métodos de devolución de llamada: signIn({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, isNewUser })

Primeros pasos con NextAuth.js en la autenticación

Para integrar NextAuth.js en sus aplicaciones Next.js, siga los pasos a continuación:

1. Cree una aplicación Next.js ejecutando este comando: npx create-next-app <nombre de la aplicación>
2. Ejecute npm install next-auth en su terminal para instalar NextAuth.js en su aplicación Next.js.
3. Visite la documentación oficial de NextAuth.js y seleccione sus proveedores preferidos de la lista de los admitidos. A continuación, cree una cuenta en la consola de desarrollador de su(s) proveedor(es) seleccionado(s) y registre su aplicación Next.js.
4. En la consola de desarrollador de su(s) proveedor(es) seleccionado(s), especifique la URL de ruta principal y la URL de redireccionamiento de devolución de llamada , guarde los cambios y copie el ID de cliente y el secreto del cliente .
5. En el directorio raíz de la aplicación Next.js, cree un. env para almacenar el ID del cliente y el secreto del cliente .
6. Por último, en el directorio /pages/api, cree una nueva carpeta llamada auth . En la carpeta auth, cree un nuevo archivo y asígnele el nombre […nextauth].js. En el archivo creado, agregue el código a continuación. El código muestra la API del lado del cliente NextAuth.js usando un proveedor de Google:

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


providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET
   })
]

Ahora puede continuar y crear una página de autenticación de inicio de sesión. Aquí hay una representación DOM para un componente de inicio de sesión:

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>
    </>
  )
}

UseSession Hook accede al objeto de sesión de usuario actual. Una vez que un usuario inicia sesión y Google lo autentica, se devuelve un objeto de sesión con la carga útil del usuario. Esto permite que Next.js muestre los detalles del usuario en el lado del cliente de la aplicación, en este caso, el correo electrónico.

Sistemas de autenticación personalizados frente a soluciones listas para usar como NextAuth.js

Al elegir entre crear un sistema de autenticación personalizado e integrar una solución de autenticación lista para usar como NextAuth.js, es importante considerar el costo, la complejidad y la seguridad de cada solución.

Si tiene los recursos y la experiencia para desarrollar un sistema de autenticación personalizado, ese puede ser el mejor enfoque para usted. Sin embargo, si está buscando una solución lista para usar que sea fácil de implementar, segura y rentable, entonces NextAuth.js puede ser una buena opción a considerar. En definitiva, la elección dependerá de tus necesidades y preferencias.