Este artículo profundizará en los pasos necesarios para implementar la autenticación sin contraseña en un proyecto Next.js usando la biblioteca NextAuth.js. Además, utilizaremos Prisma como nuestro adaptador de base de datos para lograr esto.
La autenticación sin contraseña es un enfoque innovador que elimina la necesidad de combinaciones tradicionales de nombre de usuario y contraseña. En cambio, ofrece una experiencia de autenticación más segura y fácil de usar al aprovechar métodos alternativos, como enlaces mágicos de correo electrónico o códigos de un solo uso enviados por SMS.
Next.js es un marco React popular para crear aplicaciones web, conocido por su simplicidad y eficiencia. Podemos incorporar fácilmente la autenticación sin contraseña en nuestro proyecto integrando NextAuth.js, una biblioteca de autenticación diseñada explícitamente para Next.js.
Además, confiaremos en Prisma como nuestro adaptador de base de datos. Prisma es una herramienta ORM (Mapeo relacional de objetos) que simplifica las interacciones de la base de datos al proporcionar un generador de consultas con seguridad de tipos y generación automática. Admite múltiples bases de datos, incluidas PostgreSQL, MySQL y SQLite, lo que la convierte en una opción versátil para nuestra implementación de autenticación.
A lo largo de esta guía, proporcionaremos instrucciones paso a paso sobre cómo instalar y configurar la autenticación sin contraseña mediante NextAuth.js en un proyecto Next.js. También demostraremos cómo integrar Prisma como nuestro adaptador de base de datos, lo que permite una comunicación fluida entre nuestra aplicación y la base de datos.
Ahora exploraremos cómo mejorar la seguridad y la experiencia del usuario de nuestra aplicación Next.js mediante la autenticación sin contraseña y las capacidades de NextAuth.js y Prisma. Vamos a empezar.
¿Qué es el inicio de sesión sin contraseña?
El inicio de sesión sin contraseña, como sugiere el nombre, es un método de autenticación que elimina la necesidad de combinaciones tradicionales de nombre de usuario y contraseña. En su lugar, utiliza medios alternativos para verificar la identidad de un usuario, como enlaces mágicos de correo electrónico o códigos de un solo uso enviados por SMS. Este enfoque ofrece varias ventajas sobre los métodos de inicio de sesión tradicionales. En primer lugar, elimina el riesgo de vulnerabilidades relacionadas con las contraseñas, como contraseñas débiles o reutilización de contraseñas. En segundo lugar, simplifica la experiencia del usuario al eliminar la necesidad de recordar e ingresar contraseñas complejas.
Para implementar el inicio de sesión sin contraseña utilizando enlaces mágicos de correo electrónico o códigos de un solo uso, necesitamos un servidor SMTP (Protocolo simple de transferencia de correo).
Un servidor SMTP es responsable de enviar correos electrónicos a través de Internet. En el contexto de la autenticación sin contraseña, el servidor envía los enlaces mágicos o códigos de un solo uso a la dirección de correo electrónico registrada del usuario. Cuando un usuario inicia el proceso de inicio de sesión, se genera y se envía al usuario un correo electrónico que contiene un enlace o código único. Luego, el usuario puede hacer clic en el enlace o ingresar el código para completar el proceso de autenticación. El servidor SMTP actúa como intermediario entre la aplicación y el servicio de correo electrónico del usuario, lo que garantiza la entrega segura y confiable de los mensajes de autenticación. Al utilizar un servidor SMTP, podemos implementar de manera efectiva el inicio de sesión sin contraseña y proporcionar una experiencia de autenticación perfecta para nuestros usuarios.
¡Empecemos!
Primero, necesitamos generar un nuevo proyecto Next.js nuevo. Para hacer esto, use el siguiente comando:
npx create-next-app@latest
Una vez que haya generado el nuevo proyecto Next.js, puede navegar al directorio del proyecto recién creado.
Al cambiar el directorio al proyecto, podrá explorar las diversas carpetas y archivos que componen la estructura del proyecto Next.js.
Comprender la estructura del proyecto es esencial para el desarrollo y la organización efectivos de su aplicación Next.js. Al consultar la documentación oficial, puede aprovechar las mejores prácticas y obtener información sobre cómo estructurar su código, administrar activos estáticos y crear componentes reutilizables.
Instalando nuestras dependencias
Para habilitar la autenticación sin contraseña en nuestro proyecto Next.js usando NextAuth.js, primero debemos instalar las dependencias requeridas. Ejecute el comando yarn add next-auth nodemailer para agregar NextAuth.js y nodemailer a nuestro proyecto.
Usamos específicamente nodemailer ya que es un módulo popular y versátil para enviar correos electrónicos en Node.js. Proporciona una forma sencilla y confiable de enviar los enlaces mágicos o los códigos de un solo uso necesarios para la autenticación sin contraseña por correo electrónico.
A continuación, integremos Prisma como nuestro adaptador de base de datos. Comience instalando los paquetes Prisma requeridos usando el comando:
yarn add @prisma/client @next-auth/prisma-adapter
Estos paquetes permitirán una comunicación fluida entre nuestra aplicación Next.js y la base de datos. Además, también necesitamos instalar Prisma como una dependencia de desarrollo ejecutando:
yarn add prisma --dev
Este paso garantiza que tengamos las herramientas necesarias para trabajar con Prisma y su generador de consultas generado automáticamente para las interacciones de la base de datos.
Al instalar estas dependencias, sentamos las bases para implementar la autenticación sin contraseña mediante NextAuth.js y Prisma en nuestro proyecto Next.js.
Configurar Prisma
Es necesario configurar Prisma y tener acceso a un servidor SMTP para el envío de correo electrónico para utilizar la autenticación sin contraseña en un proyecto Next.js. Este tutorial lo guiará a través del uso de su cuenta personal de Gmail para enviar correos electrónicos. Siga los pasos a continuación para una configuración exitosa.
Primero, cree una carpeta "prisma" en la raíz de su proyecto. Esta carpeta albergará los archivos y configuraciones relacionados con Prisma. Luego, dentro de la carpeta "prisma", cree un nuevo archivo llamado "schema.prisma". El archivo de esquema define la estructura de su base de datos y sirve como modelo para el código generado automáticamente por Prisma.
Si eres nuevo en el concepto de un esquema, ¡no te preocupes! Un esquema especifica las tablas, los campos, las relaciones y las restricciones de su base de datos. Para crear el esquema, puede consultar la documentación oficial de NextAuth.js y copiar el esquema de ejemplo que se proporciona allí. Este esquema es un punto de partida y puede personalizarse para adaptarse a los requisitos de su aplicación.
A continuación, cree un archivo ".env" en la raíz de su proyecto. Este archivo almacenará sus variables de entorno, incluidas las configuraciones necesarias para su servidor SMTP. Para completar el archivo ".env", puede copiar las configuraciones de ejemplo que se proporcionan a continuación. Asegúrese de ingresar las credenciales de su cuenta de Gmail y la configuración del servidor SMTP en los campos correspondientes.
EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret
Siguiendo estos pasos, habrá configurado Prisma y configurado el servidor SMTP para enviar correos electrónicos utilizando su cuenta de Gmail. Estos preparativos son cruciales para habilitar el flujo de autenticación sin contraseña en su proyecto Next.js.
Nota
Debe crear una contraseña de aplicación si ha habilitado la autenticación de dos factores (2FA) para su cuenta de Google. Una contraseña de aplicación es una contraseña distinta que otorga acceso a aplicaciones o dispositivos particulares sin exponer la contraseña principal de su cuenta de Google. Siga las instrucciones a continuación para generar una contraseña de aplicación.
-
Vaya a la página de configuración de la cuenta de Google visitando https://myaccount.google.com/.
-
Vaya a la pestaña "Seguridad".
-
Busque la sección "2FA", desplácese hacia abajo y seleccione "Contraseñas de aplicaciones".
-
Es posible que se le solicite que ingrese la contraseña de su cuenta de Google nuevamente para verificar la seguridad.
-
En el menú desplegable "Seleccionar aplicación", elija "Correo" u "Otro (nombre personalizado)".
-
Si la opción "Correo" está disponible, selecciónela.
-
Si la opción "Correo" no está disponible, elija "Otro (nombre personalizado)" y proporcione un nombre personalizado para la identificación.
-
Haga clic en el botón "Generar" o "Generar contraseña".
-
Google generará una contraseña de aplicación única para usted. Tome nota de esta contraseña, ya que la usaremos en nuestra aplicación para enviar correos electrónicos.
-
Use esta contraseña de aplicación generada en la configuración del servidor SMTP de su aplicación Next.js. Reemplace la contraseña de su cuenta de Gmail habitual con la contraseña de esta aplicación.
Esto garantiza que incluso con 2FA habilitado, su aplicación puede enviar correos electrónicos de forma segura utilizando su cuenta de Gmail.
PostgreSQL utilizando Supabase
Antes de que podamos continuar, debemos asegurarnos de que la base de datos de nuestro proyecto funcione correctamente. Para esta demostración, recomendamos usar la base de datos Supabase PostgreSQL. Para comenzar con un proyecto de Supabase y obtener la URL de conexión de PostgreSQL, siga estos pasos:
-
Vaya a supabase.io e inicie sesión en su cuenta o cree una nueva si no tiene una.
-
Una vez que haya iniciado sesión, será dirigido al panel de control de Supabase. Haga clic en "Crear nuevo proyecto" para iniciar un nuevo proyecto.
-
Asigne un nombre a su proyecto y seleccione la región más cercana a su ubicación actual. Recuerda tu contraseña, la necesitarás más tarde.
-
Cuando haya creado el proyecto, accederá al panel del proyecto. Haga clic en "Base de datos" en la barra lateral izquierda para acceder a la configuración de la base de datos.
-
En la sección "Base de datos", encontrará la URL de conexión de PostgreSQL. Esta URL contiene toda la información necesaria para conectarse a la base de datos de su proyecto Supabase, como el host, el puerto, el nombre de la base de datos, el nombre de usuario y la contraseña. Se mostrará en el formato:
postgres://<username>:<password>@<host>:<port>/<database>
- Copie la URL de conexión de PostgreSQL y manténgala segura. Lo necesitará para establecer una conexión entre su aplicación y la base de datos de Supabase.
// .env
DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
```
Ahora, asegurémonos de generar nuestro cliente Prisma ejecutando el siguiente comando: `npx prisma generate`.
Prisma Client es un cliente de base de datos generado automáticamente en función de su esquema. De forma predeterminada, Prisma Client se genera en la carpeta `node_modules/.prisma/client`, pero puede [especificar una ubicación personalizada si es necesario](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).
A continuación, procederemos a crear nuestra migración inicial. Ejecute el siguiente comando: `npx prisma migrate dev`. Puede dar a cada migración un nombre descriptivo.
En Prisma, una migración es un método que se utiliza para administrar los ajustes en el esquema de su base de datos a medida que avanza el tiempo. Le permite modificar la estructura de su base de datos sin perder ningún dato preexistente. Estas migraciones son cruciales, ya que garantizan que el esquema de su base de datos se alinee con las necesidades de su aplicación a medida que cambian. Con la herramienta de migración de Prisma, puede versionar, aplicar y revertir convenientemente estos cambios, simplificando el trabajo en equipo y manteniendo un esquema de base de datos uniforme en varios entornos.
Ahora, si revisamos nuestra base de datos, podremos ver los cambios de nuestra migración inicial reflejados en la sección de la base de datos.
Al realizar la migración inicial, hemos aplicado las modificaciones a nuestro esquema de base de datos como se define en el script de migración.
### Configuración de NextAuthJS con adaptador Prisma
En una aplicación Next.js, NextAuthJS usa la ruta catch-all, también conocida como comodín o ruta alternativa, para administrar las solicitudes de autenticación. Esta ruta dinámica se define mediante el sistema de enrutamiento basado en archivos en Next.js.
Cree una carpeta llamada "**api**" dentro de su directorio "**app**". Dentro de la carpeta "**api**", cree una carpeta "**auth**". Dentro de la carpeta "**auth**", cree una ruta general llamada "**[...nextauth]**" como carpeta. Por último, cree un archivo "**route.ts**" dentro de la carpeta de ruta catch-all y agregue el siguiente código.
```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';
const prisma = new PrismaClient();
export const authOptions = {
adapter: PrismaAdapter(prisma),
providers: [
EmailProvider({
server: {
host: process.env.EMAIL_SERVER_HOST,
port: process.env.EMAIL_SERVER_PORT,
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD,
},
},
from: process.env.EMAIL_FROM,
}),
]
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
En el archivo de ruta catch-all, importamos la biblioteca NextAuthJS y configuramos las opciones de autenticación, los proveedores y las configuraciones. NextAuthJS maneja el análisis de las solicitudes entrantes, identifica la acción de autenticación necesaria y ejecuta la lógica adecuada de acuerdo con las opciones especificadas.
El código proporcionado configura NextAuthJS con el adaptador Prisma para la autenticación mediante un proveedor de correo electrónico. Expliquemos cada enunciado:
- Importaciones:
-
PrismaAdapteryPrismaClientse importan de@next-auth/prisma-adaptery@prisma/client, respectivamente. Estos se utilizan para integrar NextAuthJS con Prisma. -
NextAuthse importa denext-authy es la biblioteca principal para gestionar la autenticación en las aplicaciones Next.js. -
EmailProviderse importa denext-auth/providers/emaily se usa como proveedor para la autenticación basada en correo electrónico.
- Configuración del prisma:
- Se crea una instancia de
PrismaClientutilizandonew PrismaClient(). Esto permite la comunicación con Prisma ORM y la base de datos subyacente.
- Opciones de autenticación:
-
authOptionses un objeto que define la configuración para la autenticación en NextAuthJS. -
La propiedad
adapterse establece enPrismaAdapter(prisma), que conecta NextAuthJS con Prisma mediantePrismaAdapter. -
La matriz
providerscontiene un único proveedor,EmailProvider. Está configurado con los detalles necesarios del servidor de correo electrónico y la dirección de correo electrónicode.
- Controlador NextAuth:
-
La función
NextAuthse llama conauthOptionscomo argumento, creando un controlador de autenticación. -
El controlador resultante se asigna a la variable
handler.
- Exportar:
handlerse exporta comoGETyPOSTpara admitir solicitudes HTTP GET y POST.
Ahora, ejecutemos nuestro servidor y probemos la funcionalidad. Primero, inicie el servidor de desarrollo ejecutando yarn dev. A continuación, abra su navegador y visite localhost:3000 para ver la aplicación en acción.
Para probar la funcionalidad de autenticación, visite localhost:3000/api/auth/signin. Aquí experimentará la magia de NextAuthJS. La plantilla proporcionada incluida con NextAuthJS permite un proceso de inicio de sesión sin contraseña. Para probarlo, ingrese una dirección de correo electrónico válida.
Una vez que envíe el correo electrónico, NextAuthJS se encargará del proceso detrás de escena. Primero, generará y enviará un correo electrónico que contenga un enlace de inicio de sesión único a la dirección de correo electrónico proporcionada. Este enlace sirve como un token de autenticación seguro para el usuario. Luego, cuando el usuario haga clic en el enlace, NextAuthJS validará el token y autenticará al usuario.
Esta función de inicio de sesión sin contraseña mejora la seguridad y la experiencia del usuario al eliminar la necesidad de contraseñas. Los usuarios pueden acceder de forma rápida y segura a sus cuentas simplemente haciendo clic en el enlace recibido por correo electrónico. Agiliza el proceso de inicio de sesión y reduce el riesgo de vulnerabilidades relacionadas con la contraseña.
Cuando un usuario hace clic en el correo electrónico de inicio de sesión generado por NextAuthJS y se autentica, se llevan a cabo varias acciones entre bastidores para facilitar una experiencia de inicio de sesión perfecta.
1. Validación del enlace de correo electrónico: cuando el usuario hace clic en el enlace de inicio de sesión, NextAuthJS valida el token de autenticación incrustado en el enlace. Este token garantiza la seguridad y la integridad del proceso de autenticación.
2. Proceso de autenticación: tras la validación exitosa del token, NextAuthJS identifica al usuario y completa el proceso de autenticación. Verifica la identidad del usuario en función del token proporcionado y cualquier factor de autenticación adicional configurado, como la autenticación multifactor.
3. Creación de sesión: después de una autenticación exitosa, NextAuthJS crea una sesión para el usuario. Una sesión es un estado persistente que representa el estado de autenticación del usuario y le permite acceder a recursos protegidos sin tener que volver a autenticarse para solicitudes posteriores.
4. Cookies: NextAuthJS establece cookies seguras solo de HTTP en el navegador del usuario para administrar la sesión. Estas cookies juegan un papel crucial en el mantenimiento del estado autenticado del usuario a través de múltiples solicitudes. Las cookies suelen incluir una cookie de sesión y, opcionalmente, una cookie de token de actualización, según la configuración de autenticación.
-
Cookie de sesión: la cookie de sesión contiene un identificador de sesión (por ejemplo, una cadena generada aleatoriamente) que identifica de forma única la sesión del usuario. Ayuda a NextAuthJS a asociar solicitudes posteriores con la sesión y el usuario correctos.
-
Cookie de token CSRF: NextAuthJS establece una cookie de token CSRF (falsificación de solicitud entre sitios) para proteger contra ataques CSRF. El token CSRF es un valor único generado por NextAuthJS y almacenado en la cookie. Se utiliza para validar y verificar la autenticidad de las solicitudes posteriores realizadas por el usuario. Cuando el usuario envía formularios o realiza acciones confidenciales, el token CSRF se incluye en los encabezados o el cuerpo de la solicitud para garantizar que la solicitud se originó en la sesión del usuario autenticado y no en una fuente malintencionada.
-
Cookie de URL de devolución de llamada: NextAuthJS establece una cookie de URL de devolución de llamada para almacenar la URL original a la que el usuario intentaba acceder antes de ser redirigido al flujo de autenticación. Esta cookie ayuda a NextAuthJS a redirigir al usuario a la página deseada después de una autenticación exitosa. Garantiza una experiencia de usuario fluida al devolver al usuario sin problemas a su destino previsto en lugar de una página de destino genérica.
Mediante el uso de cookies seguras solo de HTTP, NextAuthJS garantiza que el estado de autenticación permanezca seguro y a prueba de manipulaciones. Las cookies están cifradas, lo que impide el acceso no autorizado o la modificación por parte de actores malintencionados.
¡Buen trabajo al integrar con éxito NextAuthJS con el adaptador Prisma en su aplicación Next.js! Con la facilidad y adaptabilidad proporcionada por NextAuthJS, ahora tiene un sistema de autenticación confiable.
Consulte el repositorio de GitHub vinculado a continuación para ver el código utilizado en esta guía: https://github.com/codelabsacademy/next-auth-guide.
Pero ¿por qué detenerse aquí? Si le apasiona el desarrollo web y está ansioso por mejorar sus habilidades, considere solicitar nuestro bootcamp de desarrollo web. Nuestro bootcamp ofrece una experiencia de aprendizaje integral, equipándolo con el conocimiento y las habilidades prácticas necesarias para sobresalir en el dinámico mundo del desarrollo web.
Al unirse a nuestro bootcamp, obtendrá experiencia práctica con tecnologías de vanguardia, trabajará en proyectos del mundo real y recibirá orientación personalizada de expertos de la industria. Ya sea que sea un desarrollador principiante o experimentado, nuestro programa está diseñado para llevar sus habilidades de desarrollo web al siguiente nivel.
No pierda esta oportunidad de acelerar su viaje de desarrollo web. Solicite hoy mismo nuestro bootcamp de desarrollo web y libere todo su potencial en el apasionante campo del desarrollo web. Juntos, construyamos increíbles experiencias digitales y demos forma al futuro de la web.
