Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

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?

SiguienteAuth.js es una biblioteca ligera de código abierto que proporciona autenticacion y autorizacion soporte 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.

instagram viewer

¿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 al 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:

importar { usarSesión } de"siguiente-autorización/reaccionar"
exportarpor defectofunciónComponente() {
constante { datos: sesión, estado } = useSession()


si (estado "autenticado") { 
devolver<pag>Ingresado como {session.user.email}pag>
 }
devolver<pag> No registrado pag>
}

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 _app.jsx archivo.

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.

importar { Proveedor de sesión } de"siguiente-autorización/reaccionar"
exportarpor defectofunciónaplicación({
 Componente, pageProps: { sesión, ...pageProps }, 
}) {
devolver ( 
<Proveedor de sesiónsesión={sesión}refetchInterval={5 * 60}>
<Componente {...páginaAccesorios} />Proveedor de sesión>
 )
}

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 (por ejemplo, GitHub, Google).
  • Uso del proveedor de correo electrónico.

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

importar Proveedor de Google de"próxima autenticación/proveedores/google"
importar Proveedor de autenticación de"siguiente-autorización/proveedores/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: 
    iniciar sesión ({ usuario, cuenta, perfil, correo electrónico, credenciales })
    sesión ({sesión, token, usuario})
    jwt({token, usuario, cuenta, perfil, esNuevoUsuario})

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 crear-siguiente-aplicación
  2. Correr npm instalar siguiente autenticación en su terminal para instalar NextAuth.js en su aplicación Next.js.
  3. Visita el SiguienteAuth.js documentación oficial y selecciona tu/s proveedor/es preferido/s de la lista de 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 el URL de la ruta principal y el URL de redirección de devolución de llamada, guarde los cambios y copie el Identificación del cliente y Secreto del cliente.
  5. En el directorio raíz de la aplicación Next.js, cree un archivo .env para contener el Identificación del cliente y Secreto del cliente.
  6. Por último, en el directorio /pages/api, cree una nueva carpeta llamada autenticación. 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: 
importar Proveedor de Google de"próxima autenticación/proveedores/google";
proveedores: [
 Proveedor de Google({
Identificación del cliente: proceso.env.ID_CLIENTE_GOOGLE,
secreto del cliente: proceso.env.GOOGLE_CLIENTE_SECRETO
 })
]

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:

importar Reaccionar de'reaccionar';
importar { usar sesión, iniciar sesión, cerrar sesión } de"siguiente-autorización/reaccionar"
exportarpor defectofunciónComponente() {
constante { datos: sesión } = usarSesión()


 si (sesión) {
devolver (
<>
<pag> Ingresado como {session.user.email} pag>
<botónal hacer clic={() => signOut()}>Cerrar sesiónbotón>

 )
 }
devolver (
<>
<pag> No registrado pag>
<botónal hacer clic={() => signIn()}>Iniciar sesiónbotón>

 )
}

El sesión de uso 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 vs. Soluciones listas para usar como NextAuth.js

Elegir entre crear un sistema de autenticación personalizado e integrar una autenticación lista para usar solución 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.