Implementación do inicio de sesión sen contrasinal nun proxecto Next.js 13 con NextAuth.js e Prisma

Este artigo afondará nos pasos necesarios para implementar a autenticación sen contrasinal nun proxecto Next.js usando a biblioteca NextAuth.js. Ademais, utilizaremos Prisma como o noso adaptador de base de datos para conseguilo.

A autenticación sen contrasinal é un enfoque innovador que elimina a necesidade de combinacións tradicionais de nome de usuario e contrasinal. Pola contra, ofrece unha experiencia de autenticación máis segura e amigable ao aproveitar métodos alternativos, como ligazóns máxicas de correo electrónico ou códigos únicos enviados por SMS.

Next.js é un marco de React popular para crear aplicacións web, coñecido pola súa sinxeleza e eficiencia. Podemos incorporar facilmente a autenticación sen contrasinal ao noso proxecto integrando NextAuth.js, unha biblioteca de autenticación deseñada explícitamente para Next.js.

Ademais, confiaremos en Prisma como o noso adaptador de base de datos. Prisma é unha ferramenta ORM (Object-Relational Mapping) que simplifica as interaccións das bases de datos proporcionando un creador de consultas xerado automaticamente e seguro para tipos. Admite varias bases de datos, incluíndo PostgreSQL, MySQL e SQLite, polo que é unha opción versátil para a nosa implementación de autenticación.

Ao longo desta guía, proporcionaremos instrucións paso a paso sobre como configurar e configurar a autenticación sen contrasinal usando NextAuth.js nun proxecto Next.js. Tamén demostraremos como integrar Prisma como o noso adaptador de base de datos, permitindo unha comunicación perfecta entre a nosa aplicación e a base de datos.

Agora exploraremos como mellorar a seguridade e a experiencia do usuario da nosa aplicación Next.js mediante a autenticación sen contrasinal e as capacidades de NextAuth.js e Prisma. Imos comezar.

Que é o inicio de sesión sen contrasinal?

O inicio de sesión sen contrasinal, como o nome indica, é un método de autenticación que elimina a necesidade de combinacións tradicionais de nome de usuario e contrasinal. Pola contra, utiliza medios alternativos para verificar a identidade dun usuario, como ligazóns máxicas de correo electrónico ou códigos únicos enviados por SMS. Este enfoque ofrece varias vantaxes sobre os métodos de inicio de sesión tradicionais. En primeiro lugar, elimina o risco de vulnerabilidades relacionadas cos contrasinais, como contrasinais débiles ou reutilización de contrasinais. En segundo lugar, simplifica a experiencia do usuario eliminando a necesidade de lembrar e introducir contrasinais complexos.

Para implementar o inicio de sesión sen contrasinal usando ligazóns máxicas de correo electrónico ou códigos únicos, necesitamos un servidor SMTP (Simple Mail Transfer Protocol).

Un servidor SMTP encárgase de enviar correos electrónicos a través de Internet. No contexto da autenticación sen contrasinal, o servidor envía as ligazóns máxicas ou códigos únicos ao enderezo de correo electrónico rexistrado do usuario. Cando un usuario inicia o proceso de inicio de sesión, xérase un correo electrónico que contén unha ligazón ou código único e envíase ao usuario. A continuación, o usuario pode facer clic na ligazón ou introducir o código para completar o proceso de autenticación. O servidor SMTP actúa como intermediario entre a aplicación e o servizo de correo electrónico do usuario, garantindo a entrega segura e fiable das mensaxes de autenticación. Ao utilizar un servidor SMTP, podemos implementar eficazmente o inicio de sesión sen contrasinal e proporcionar unha experiencia de autenticación perfecta para os nosos usuarios.

Comezamos!

En primeiro lugar, necesitamos xerar un novo proxecto Next.js. Para facelo, use o seguinte comando:

npx create-next-app@latest

Unha vez xerado o novo proxecto Next.js, podes navegar ata o directorio do proxecto recén creado.

Ao cambiar o directorio no proxecto, poderás explorar os distintos cartafoles e ficheiros que compoñen a estrutura do proxecto Next.js.

Comprender a estrutura do proxecto é esencial para o desenvolvemento e a organización eficaces da súa aplicación Next.js. Ao facer referencia á documentación oficial, pode aproveitar as mellores prácticas e obter información sobre como estruturar o seu código, xestionar activos estáticos e crear compoñentes reutilizables.

Instalando as nosas dependencias

Para habilitar a autenticación sen contrasinal no noso proxecto Next.js usando NextAuth.js, primeiro debemos instalar as dependencias necesarias. Executa o comando yarn add next-auth nodemailer para engadir NextAuth.js e nodemailer ao noso proxecto.

Usamos específicamente nodemailer xa que é un módulo popular e versátil para enviar correos electrónicos en Node.js. Ofrece un xeito sinxelo e fiable de enviar as ligazóns máxicas ou os códigos únicos necesarios para a autenticación sen contrasinal por correo electrónico.

A continuación, integremos Prisma como o noso adaptador de base de datos. Comeza instalando os paquetes Prisma necesarios usando o comando:

yarn add @prisma/client @next-auth/prisma-adapter

Estes paquetes permitirán unha comunicación perfecta entre a nosa aplicación Next.js e a base de datos. Ademais, tamén necesitamos instalar Prisma como unha dependencia do desenvolvemento executando:

yarn add prisma --dev

Este paso garante que dispoñemos das ferramentas necesarias para traballar con Prisma e o seu creador de consultas xerado automaticamente para as interaccións con bases de datos.

Ao instalar estas dependencias, establecemos as bases para implementar a autenticación sen contrasinal usando NextAuth.js e Prisma no noso proxecto Next.js.

Configuración de Prisma

É necesario configurar Prisma e ter acceso a un servidor SMTP para o envío de correo electrónico para usar a autenticación sen contrasinal nun proxecto Next.js. Este tutorial guiarache a través do uso da túa conta persoal de Gmail para enviar correos electrónicos. Siga os pasos seguintes para unha configuración exitosa.

Primeiro, crea un cartafol "prisma" na raíz do teu proxecto. Este cartafol albergará os ficheiros e configuracións relacionados con Prisma. A continuación, dentro do cartafol "prisma", cree un ficheiro novo chamado "schema.prisma". O ficheiro de esquema define a estrutura da súa base de datos e serve como modelo para o código xerado automaticamente de Prisma.

Se es novo no concepto de esquema, non te preocupes! Un esquema especifica as táboas, os campos, as relacións e as restricións da súa base de datos. Para crear o esquema, pode consultar a documentación oficial de NextAuth.js e copiar o esquema de exemplo proporcionado alí. Este esquema é un punto de partida e pódese personalizar para adaptarse aos requisitos da súa aplicación.

A continuación, crea un ficheiro ".env" na raíz do teu proxecto. Este ficheiro almacenará as variables de ambiente, incluídas as configuracións necesarias para o seu servidor SMTP. Para encher o ficheiro ".env", pode copiar as configuracións de exemplo que se proporcionan a continuación. Asegúrese de introducir as credenciais da súa conta de Gmail e a configuración do servidor SMTP nos campos correspondentes.

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

Ao seguir estes pasos, terás configurado Prisma e configurado o servidor SMTP para enviar correos electrónicos coa túa conta de Gmail. Estes preparativos son fundamentais para habilitar o fluxo de autenticación sen contrasinal no teu proxecto Next.js.

Nota

Debes crear un contrasinal de aplicación se activaches a autenticación de dous factores (2FA) para a túa conta de Google. Un contrasinal de aplicación é un contrasinal distinto que outorga acceso a determinadas aplicacións ou dispositivos sen expoñer o contrasinal principal da súa conta de Google. Siga as instrucións a continuación para xerar un contrasinal da aplicación.

1. Vai á páxina de configuración da Conta de Google visitando https://myaccount.google.com/.

2. Vaia á pestana "Seguridade".

3. Busca a sección "2FA", desprázate cara abaixo e selecciona "Contrasinales da aplicación".

4. É posible que se lle solicite que introduza de novo o contrasinal da súa conta de Google para a verificación de seguranza.

5. No menú despregable "Seleccionar aplicación", escolla "Correo" ou "Outro (nome personalizado)".

• Se a opción "Correo" está dispoñible, selecciónaa.

• Se a opción "Correo" non está dispoñible, escolla "Outro (nome personalizado)" e proporcione un nome personalizado para a identificación.

6. Fai clic no botón "Xerar" ou "Xerar contrasinal".

7. Google xerará un contrasinal de aplicación único para ti. Anota este contrasinal, xa que o usaremos na nosa aplicación para enviar correos electrónicos.

8. Use este contrasinal da aplicación xerado na configuración do servidor SMTP da aplicación Next.js. Substitúe o contrasinal da súa conta de Gmail habitual por este contrasinal da aplicación.

Isto garante que mesmo con 2FA activado, a túa aplicación pode enviar correos electrónicos de forma segura usando a túa conta de Gmail.

PostgreSQL usando Supabase

Antes de continuar, debemos asegurarnos de que a base de datos do noso proxecto funciona correctamente. Para esta demostración, recomendamos usar a base de datos Supabase PostgreSQL. Para comezar cun proxecto Supabase e obter o URL de conexión PostgreSQL, siga estes pasos:

1. Vai a supabase.io e inicia sesión na túa conta ou crea unha nova se non a tes.

2. Unha vez que inicie sesión, dirixirase ao panel de control de Supabase. Fai clic en "Crear novo proxecto" para comezar un novo proxecto.

3. Nomee o seu proxecto e seleccione a rexión máis próxima á súa localización actual. Lembra o teu contrasinal, necesitarásllo máis tarde.

4. Cando crees o proxecto, dirixirase ao panel de control do proxecto. Fai clic en "Base de datos" na barra lateral esquerda para acceder á configuración da base de datos.

5. Na sección "Base de datos", atoparás o URL de conexión de PostgreSQL. Este URL contén toda a información necesaria para conectarse á base de datos do teu proxecto Supabase, como o host, o porto, o nome da base de datos, o nome de usuario e o contrasinal. Mostrarase no formato: postgres://<nome de usuario>:<contrasinal>@<host>:<porto>/<base de datos>

6. Copie o URL de conexión de PostgreSQL e mantelo seguro. Necesitarás para establecer unha conexión entre a túa aplicación e a base de datos Supabase.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Agora, asegurémonos de xerar o noso cliente Prisma executando o seguinte comando: `npx prisma generate`.

O cliente Prisma é un cliente de base de datos xerado automaticamente en función do teu esquema. Por defecto, o cliente Prisma xérase no cartafol `node_modules/.prisma/client`, pero pode [especificar unha localización personalizada se é 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 a nosa migración inicial. Executa o seguinte comando: `npx prisma migrate dev`. Podes dar un nome descritivo a cada migración.

En Prisma, unha migración é un método usado para xestionar os axustes do esquema da súa base de datos a medida que avanza o tempo. Permítelle modificar a estrutura da súa base de datos sen perder ningún dato preexistente. Estas migracións son cruciais xa que garanten que o esquema da súa base de datos se aliña coas necesidades da súa aplicación a medida que cambian. Coa ferramenta de migración de Prisma, podes versión, aplicar e reverter estes cambios comodamente, simplificando o traballo en equipo e mantendo un esquema de base de datos uniforme en varios ambientes.

Agora, se comprobamos a nosa base de datos, poderemos ver os cambios da nosa migración inicial reflectidos na sección de base de datos.

Ao realizar a migración inicial, aplicamos as modificacións ao noso esquema de base de datos segundo se define no script de migración.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Configurando NextAuthJS co adaptador Prisma

Nunha aplicación Next.js, NextAuthJS usa a ruta catch-all, tamén coñecida como comodín ou ruta alternativa, para xestionar as solicitudes de autenticación. Esta ruta dinámica defínese usando o sistema de enrutamento baseado en ficheiros en Next.js.

Crea un cartafol chamado "**api**" dentro do teu directorio "**app**". Dentro do cartafol "**api**", crea un cartafol "**auth**". Dentro do cartafol "**auth**", crea unha ruta completa chamada "**[...nextauth]**" como cartafol. Por último, crea un ficheiro "**route.ts**" dentro do cartafol de ruta catch-all e engade o seguinte 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 };

No ficheiro de ruta catch-all, importamos a biblioteca NextAuthJS e configuramos as opcións de autenticación, os provedores e as configuracións. NextAuthJS xestiona a análise das solicitudes entrantes, identifica a acción de autenticación necesaria e executa a lóxica adecuada segundo as opcións especificadas.

O código proporcionado configura NextAuthJS co adaptador Prisma para a autenticación mediante un provedor de correo electrónico. Imos explicar cada afirmación:

1. Importacións:

• PrismaAdapter e PrismaClient impórtanse desde @next-auth/prisma-adapter e @prisma/client, respectivamente. Estes úsanse para integrar NextAuthJS con Prisma.

• NextAuth impórtase de next-auth e é a biblioteca principal para xestionar a autenticación nas aplicacións Next.js.

• EmailProvider impórtase de next-auth/providers/email e úsase como provedor para a autenticación baseada no correo electrónico.

2. Configuración de Prisma:

• Créase unha instancia de PrismaClient usando new PrismaClient(). Isto permite a comunicación co Prisma ORM e a base de datos subxacente.

3. Opcións de autenticación:

• authOptions é un obxecto que define a configuración para a autenticación en NextAuthJS.

• A propiedade adapter está definida como PrismaAdapter(prisma), que conecta NextAuthJS con Prisma mediante o PrismaAdapter.

• A matriz providers contén un único provedor, EmailProvider. Está configurado cos detalles do servidor de correo electrónico necesarios e o enderezo de correo electrónico de.

4. Manexador NextAuth:

• A función NextAuth chámase con authOptions como argumento, creando un controlador de autenticación.

• O controlador resultante asígnase á variable handler.

5. Exportación:

• handler expórtase como GET e POST para admitir solicitudes HTTP GET e POST.

Agora, imos executar o noso servidor e probar a funcionalidade. Primeiro, inicie o servidor de desenvolvemento executando yarn dev. A continuación, abra o seu navegador e visite localhost:3000 para ver a aplicación en acción.

Para probar a funcionalidade de autenticación, visite localhost:3000/api/auth/signin. Aquí experimentarás a maxia de NextAuthJS. O modelo proporcionado incluído con NextAuthJS permite un proceso de inicio de sesión sen contrasinal. Para probalo, introduce un enderezo de correo electrónico válido.

Unha vez que envíe o correo electrónico, NextAuthJS xestionará o proceso detrás das cámaras. En primeiro lugar, xerará e enviará un correo electrónico que conteña unha ligazón de inicio de sesión única ao enderezo de correo electrónico proporcionado. Esta ligazón serve como token de autenticación segura para o usuario. Despois, cando o usuario faga clic na ligazón, NextAuthJS validará o token e autenticará o usuario.

Esta función de inicio de sesión sen contrasinal mellora a seguridade e a experiencia do usuario eliminando a necesidade de contrasinais. Os usuarios poden acceder ás súas contas de forma rápida e segura facendo clic na ligazón recibida por correo electrónico. Axiliza o proceso de inicio de sesión e reduce o risco de vulnerabilidades relacionadas co contrasinal.

Cando un usuario fai clic no correo electrónico de inicio de sesión xerado por NextAuthJS e se autentica, lévanse a cabo varias accións entre bastidores para facilitar unha experiencia de inicio de sesión sen problemas.

1. Validación da ligazón de correo electrónico: cando o usuario fai clic na ligazón de inicio de sesión, NextAuthJS valida o token de autenticación inserido na ligazón. Este token garante a seguridade e integridade do proceso de autenticación.

2. Proceso de autenticación: tras a validación do token con éxito, NextAuthJS identifica o usuario e completa o proceso de autenticación. Verifica a identidade do usuario en función do token proporcionado e de calquera factor de autenticación adicional configurado, como a autenticación multifactor.

3. Creación de sesións: despois dunha autenticación exitosa, NextAuthJS crea unha sesión para o usuario. Unha sesión é un estado persistente que representa o estado de autenticación do usuario e permítelle acceder a recursos protexidos sen ter que volver a autenticarse para solicitudes posteriores.

4. Cookies: NextAuthJS establece cookies seguras só para HTTP no navegador do usuario para xestionar a sesión. Estas cookies xogan un papel crucial para manter o estado de autenticación do usuario en varias solicitudes. As cookies normalmente inclúen unha cookie de sesión e, opcionalmente, unha cookie de token de actualización, dependendo da configuración de autenticación.

1. Cookie de sesión: a cookie de sesión contén un identificador de sesión (por exemplo, unha cadea xerada aleatoriamente) que identifica de forma única a sesión do usuario. Axuda a NextAuthJS a asociar solicitudes posteriores coa sesión e o usuario correctos.

2. CSRF Token Cookie: NextAuthJS establece unha cookie de token CSRF (Cross-Site Request Forgery) para protexerse contra ataques CSRF. O token CSRF é un valor único xerado por NextAuthJS e almacenado na cookie. Utilízase para validar e verificar a autenticidade das solicitudes posteriores realizadas polo usuario. Cando o usuario envía formularios ou realiza accións sensibles, o token CSRF inclúese nas cabeceiras ou no corpo da solicitude para garantir que a solicitude se orixinou na sesión do usuario autenticado e non nunha fonte maliciosa.

3. Cookie de URL de devolución de chamada: NextAuthJS establece unha cookie de URL de devolución de chamada para almacenar o URL orixinal ao que o usuario estaba tentando acceder antes de ser redirixido ao fluxo de autenticación. Esta cookie axuda a NextAuthJS a redirixir o usuario de volta á páxina desexada despois da autenticación correcta. Asegura unha experiencia de usuario sen problemas ao devolver o usuario ao seu destino previsto en lugar dunha páxina de destino xenérica.

Mediante o uso de cookies seguras só para HTTP, NextAuthJS garante que o estado de autenticación segue sendo seguro e a proba de manipulacións. As cookies están cifradas, evitando o acceso non autorizado ou a modificación por parte de actores malintencionados.

Gran traballo para integrar con éxito NextAuthJS co adaptador Prisma na túa aplicación Next.js. Coa facilidade e adaptabilidade que ofrece NextAuthJS, agora tes un sistema de autenticación fiable.

Consulte o repositorio de GitHub ligado a continuación para ver o código usado nesta guía: https://github.com/codelabsacademy/next-auth-guide.

Pero por que parar aquí? Se che apaixona o desenvolvemento web e estás ansioso por mellorar as túas habilidades, considera solicitar o noso bootcamp de desenvolvemento web. O noso bootcamp ofrece unha experiencia de aprendizaxe completa, dotándoo dos coñecementos e habilidades prácticas necesarias para sobresaír no dinámico mundo do desenvolvemento web.

Ao unirte ao noso bootcamp, obterás experiencia práctica con tecnoloxías de punta, traballarás en proxectos do mundo real e recibirás orientación personalizada de expertos do sector. Tanto se es un principiante como un programador experimentado, o noso programa está deseñado para levar as túas habilidades de desenvolvemento web ao seguinte nivel.

Non perdas esta oportunidade de acelerar a túa viaxe de desenvolvemento web. Solicita hoxe o noso bootcamp de desenvolvemento web e desbloquea todo o teu potencial no apaixonante campo do desenvolvemento web. Xuntos, imos crear experiencias dixitais incribles e dar forma ao futuro da web.