Implementació de l'inici de sessió sense contrasenya en un projecte Next.js 13 amb NextAuth.js i Prisma

Aquest article aprofundeix en els passos necessaris per implementar l'autenticació sense contrasenya en un projecte Next.js mitjançant la biblioteca NextAuth.js. A més, utilitzarem Prisma com a adaptador de base de dades per aconseguir-ho.

L'autenticació sense contrasenya és un enfocament innovador que elimina la necessitat de combinacions tradicionals de nom d'usuari i contrasenya. En canvi, ofereix una experiència d'autenticació més segura i fàcil d'utilitzar aprofitant mètodes alternatius, com ara enllaços màgics per correu electrònic o codis d'un sol ús enviats per SMS.

Next.js és un marc popular de React per crear aplicacions web, conegut per la seva senzillesa i eficiència. Podem incorporar fàcilment l'autenticació sense contrasenya al nostre projecte integrant NextAuth.js, una biblioteca d'autenticació dissenyada explícitament per Next.js.

A més, confiarem en Prisma com a adaptador de base de dades. Prisma és una eina ORM (Mapa relacional d'objectes) que simplifica les interaccions de la base de dades proporcionant un generador de consultes de tipus segur i generat automàticament. Admet diverses bases de dades, incloses PostgreSQL, MySQL i SQLite, la qual cosa la converteix en una opció versàtil per a la nostra implementació d'autenticació.

Al llarg d'aquesta guia, proporcionarem instruccions pas a pas sobre com configurar i configurar l'autenticació sense contrasenya mitjançant NextAuth.js en un projecte Next.js. També demostrarem com integrar Prisma com el nostre adaptador de base de dades, permetent una comunicació perfecta entre la nostra aplicació i la base de dades.

Ara explorarem com millorar la seguretat i l'experiència de l'usuari de la nostra aplicació Next.js mitjançant l'autenticació sense contrasenya i les capacitats de NextAuth.js i Prisma. Comencem.

Què és l'inici de sessió sense contrasenya?

L'inici de sessió sense contrasenya, com el seu nom indica, és un mètode d'autenticació que elimina la necessitat de combinacions tradicionals de nom d'usuari i contrasenya. En lloc d'això, utilitza mitjans alternatius per verificar la identitat d'un usuari, com ara enllaços màgics per correu electrònic o codis d'un sol ús enviats per SMS. Aquest enfocament ofereix diversos avantatges respecte als mètodes d'inici de sessió tradicionals. En primer lloc, elimina el risc de vulnerabilitats relacionades amb contrasenyes, com ara contrasenyes febles o reutilització de contrasenyes. En segon lloc, simplifica l'experiència de l'usuari eliminant la necessitat de recordar i introduir contrasenyes complexes.

Per implementar l'inici de sessió sense contrasenya mitjançant enllaços màgics de correu electrònic o codis d'un sol ús, necessitem un servidor SMTP (Simple Mail Transfer Protocol).

Un servidor SMTP s'encarrega d'enviar correus electrònics per Internet. En el context de l'autenticació sense contrasenya, el servidor envia els enllaços màgics o els codis d'un sol ús a l'adreça de correu electrònic registrada de l'usuari. Quan un usuari inicia el procés d'inici de sessió, es genera un correu electrònic que conté un enllaç o codi únic i s'envia a l'usuari. L'usuari pot fer clic a l'enllaç o introduir el codi per completar el procés d'autenticació. El servidor SMTP actua com a intermediari entre l'aplicació i el servei de correu electrònic de l'usuari, assegurant el lliurament segur i fiable dels missatges d'autenticació. Mitjançant l'ús d'un servidor SMTP, podem implementar eficaçment l'inici de sessió sense contrasenya i oferir una experiència d'autenticació perfecta per als nostres usuaris.

Comencem!

Primer, hem de generar un nou projecte Next.js. Per fer-ho, utilitzeu l'ordre següent:

npx create-next-app@latest

Un cop hàgiu generat el nou projecte Next.js, podeu navegar al directori del projecte recentment creat.

Si canvieu el directori al projecte, podreu explorar les diferents carpetes i fitxers que formen l'estructura del projecte Next.js.

Entendre l'estructura del projecte és essencial per al desenvolupament i l'organització eficaços de la vostra aplicació Next.js. Si feu referència a la documentació oficial, podeu aprofitar les millors pràctiques i obtenir informació sobre com estructurar el vostre codi, gestionar actius estàtics i crear components reutilitzables.

Instal·lant les nostres dependències

Per habilitar l'autenticació sense contrasenya al nostre projecte Next.js mitjançant NextAuth.js, primer hem d'instal·lar les dependències necessàries. Executeu l'ordre "yarn add next-auth nodemailer" per afegir NextAuth.js i nodemailer al nostre projecte.

Utilitzem específicament nodemailer, ja que és un mòdul popular i versàtil per enviar correus electrònics a Node.js. Proporciona una manera senzilla i fiable d'enviar els enllaços màgics o els codis d'un sol cop necessaris per a l'autenticació sense contrasenya per correu electrònic.

A continuació, integrem Prisma com el nostre adaptador de base de dades. Comenceu instal·lant els paquets Prisma necessaris mitjançant l'ordre:

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

Aquests paquets permetran una comunicació perfecta entre la nostra aplicació Next.js i la base de dades. A més, també hem d'instal·lar Prisma com a dependència del desenvolupador executant:

yarn add prisma --dev

Aquest pas garanteix que disposem de les eines necessàries per treballar amb Prisma i el seu creador de consultes generades automàticament per a les interaccions amb bases de dades.

En instal·lar aquestes dependències, establim les bases per implementar l'autenticació sense contrasenya mitjançant NextAuth.js i Prisma al nostre projecte Next.js.

Configura Prisma

Cal configurar Prisma i tenir accés a un servidor SMTP per enviar correus electrònics per utilitzar l'autenticació sense contrasenya en un projecte Next.js. Aquest tutorial us guiarà a través de l'ús del vostre compte personal de Gmail per enviar correus electrònics. Seguiu els passos següents per a una configuració correcta.

Primer, creeu una carpeta "prisma" a l'arrel del vostre projecte. Aquesta carpeta allotjarà els fitxers i les configuracions relacionades amb Prisma. A continuació, dins de la carpeta "prisma", creeu un fitxer nou anomenat "schema.prisma". El fitxer d'esquema defineix l'estructura de la vostra base de dades i serveix com a model per al codi generat automàticament de Prisma.

Si sou nou al concepte d'esquema, no us preocupeu! Un esquema especifica les taules, els camps, les relacions i les restriccions de la vostra base de dades. Per crear l'esquema, podeu consultar la documentació oficial de NextAuth.js i copiar l'esquema d'exemple que s'hi proporciona. Aquest esquema és un punt de partida i es pot personalitzar per adaptar-se als requisits de l'aplicació.

A continuació, creeu un fitxer ".env" a l'arrel del vostre projecte. Aquest fitxer emmagatzemarà les variables d'entorn, incloses les configuracions necessàries per al vostre servidor SMTP. Per omplir el fitxer ".env", podeu copiar les configuracions d'exemple que es proporcionen a continuació. Assegureu-vos d'introduir les credencials del vostre compte de Gmail i la configuració del servidor SMTP als camps corresponents.

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

Seguint aquests passos, hauràs configurat Prisma i configurat el servidor SMTP per enviar correus electrònics amb el teu compte de Gmail. Aquests preparatius són crucials per habilitar el flux d'autenticació sense contrasenya al vostre projecte Next.js.

Nota

Heu de crear una contrasenya d'aplicació si heu activat l'autenticació de dos factors (2FA) per al vostre compte de Google. Una contrasenya d'aplicació és una contrasenya diferent que permet accedir a aplicacions o dispositius concrets sense exposar la contrasenya principal del vostre compte de Google. Seguiu les instruccions següents per generar una contrasenya d'aplicació.

1. Aneu a la pàgina de configuració del compte de Google visitant https://myaccount.google.com/.

2. Aneu a la pestanya "Seguretat".

3. Cerqueu la secció "2FA", desplaceu-vos cap avall i seleccioneu "Contrasenyes d'aplicació".

4. És possible que se us demani que torneu a introduir la contrasenya del vostre compte de Google per a la verificació de seguretat.

5. Al menú desplegable "Selecciona l'aplicació", trieu "Correu" o "Altres (nom personalitzat)".

• Si l'opció "Correu" està disponible, seleccioneu-la.

• Si l'opció "Correu" no està disponible, seleccioneu "Altres (nom personalitzat)" i proporcioneu un nom personalitzat per a la identificació.

6. Feu clic al botó "Genera" o "Genera contrasenya".

7. Google us generarà una contrasenya d'aplicació única. Anoteu aquesta contrasenya, ja que la farem servir a la nostra aplicació per enviar correus electrònics.

8. Utilitzeu aquesta contrasenya d'aplicació generada a la configuració del servidor SMTP de l'aplicació Next.js. Substituïu la contrasenya habitual del vostre compte de Gmail per la contrasenya d'aquesta aplicació.

Això garanteix que, fins i tot amb 2FA habilitat, la vostra aplicació pot enviar correus electrònics de manera segura mitjançant el vostre compte de Gmail.

PostgreSQL utilitzant Supabase

Abans de continuar, ens hem d'assegurar que la base de dades del nostre projecte funciona correctament. Per a aquesta demostració, us recomanem que utilitzeu la base de dades Supabase PostgreSQL. Per començar amb un projecte Supabase i obtenir l'URL de connexió PostgreSQL, seguiu aquests passos:

1. Aneu a supabase.io i inicieu la sessió al vostre compte o creeu-ne un de nou si no en teniu.

2. Un cop hàgiu iniciat la sessió, se us dirigirà al tauler de control de Supabase. Feu clic a "Crea un projecte nou" per iniciar un nou projecte.

3. Poseu un nom al vostre projecte i seleccioneu la regió més propera a la vostra ubicació actual. Recorda la teva contrasenya, la necessitaràs més endavant.

4. Quan hàgiu creat el projecte, se us dirigirà al tauler de control del projecte. Feu clic a "Base de dades" a la barra lateral esquerra per accedir a la configuració de la base de dades.

5. A la secció "Base de dades", trobareu l'URL de connexió de PostgreSQL. Aquest URL conté tota la informació necessària per connectar-se a la base de dades del vostre projecte Supabase, com ara l'amfitrió, el port, el nom de la base de dades, el nom d'usuari i la contrasenya. Es mostrarà en el format: postgres://<nom d'usuari>:<contrasenya>@<amfitrió>:<port>/<base de dades>

6. Copieu l'URL de connexió de PostgreSQL i mantingueu-lo segur. El necessitareu per establir una connexió entre la vostra aplicació i la base de dades Supabase.

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

Ara, assegurem-nos que generem el nostre client Prisma executant l'ordre següent: `npx prisma generate`.

El client Prisma és un client de base de dades generat automàticament en funció del vostre esquema. De manera predeterminada, el client Prisma es genera a la carpeta `node_modules/.prisma/client`, però podeu [especificar una ubicació personalitzada si cal](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

A continuació, procedirem a crear la nostra migració inicial. Executeu l'ordre següent: `npx prisma migrate dev`. Podeu donar un nom descriptiu a cada migració.

A Prisma, una migració és un mètode utilitzat per gestionar els ajustos a l'esquema de la vostra base de dades a mesura que avança el temps. Us permet modificar l'estructura de la vostra base de dades sense perdre cap dada preexistent. Aquestes migracions són crucials, ja que asseguren que l'esquema de la vostra base de dades s'alinea amb les necessitats de la vostra aplicació a mesura que canvien. Amb l'eina de migració de Prisma, podeu versionar, aplicar i revertir aquests canvis de manera còmoda, simplificant el treball en equip i mantenint un esquema de base de dades uniforme en diversos entorns.

Ara, si comprovem la nostra base de dades, podrem veure els canvis de la nostra migració inicial reflectits a la secció de bases de dades.

En realitzar la migració inicial, hem aplicat les modificacions al nostre esquema de base de dades tal com es defineix a l'script de migració.

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

### Configuració de NextAuthJS amb l'adaptador Prisma

En una aplicació Next.js, NextAuthJS utilitza la ruta catch-all, també coneguda com a comodí o ruta alternativa, per gestionar les sol·licituds d'autenticació. Aquesta ruta dinàmica es defineix mitjançant el sistema d'encaminament basat en fitxers a Next.js.

Creeu una carpeta anomenada "**api**" dins del vostre directori "**app**". Dins de la carpeta "**api**", creeu una carpeta "**auth**". Dins de la carpeta "**auth**", creeu una ruta global anomenada "**[...nextauth]**" com a carpeta. Finalment, creeu un fitxer "**route.ts**" dins de la carpeta de ruta catch-all i afegiu el codi següent.

```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 };

Al fitxer de ruta general, importem la biblioteca NextAuthJS i configurem les opcions d'autenticació, els proveïdors i les configuracions. NextAuthJS gestiona l'anàlisi de les sol·licituds entrants, identifica l'acció d'autenticació necessària i executa la lògica adequada segons les opcions especificades.

El codi proporcionat configura NextAuthJS amb l'adaptador Prisma per a l'autenticació mitjançant un proveïdor de correu electrònic. Expliquem cada afirmació:

1. Importacions:

• PrismaAdapter i PrismaClient s'importen des de @next-auth/prisma-adapter i @prisma/client, respectivament. S'utilitzen per integrar NextAuthJS amb Prisma.

• NextAuth s'importa de next-auth i és la biblioteca principal per gestionar l'autenticació a les aplicacions Next.js.

• EmailProvider s'importa de next-auth/providers/email i s'utilitza com a proveïdor per a l'autenticació basada en correu electrònic.

2. Configuració de Prisma:

• Es crea una instància de PrismaClient amb new PrismaClient(). Això permet la comunicació amb el Prisma ORM i la base de dades subjacent.

3. Opcions d'autenticació:

• authOptions és un objecte que defineix la configuració per a l'autenticació a NextAuthJS.

• La propietat adapter s'estableix en PrismaAdapter(prisma), que connecta NextAuthJS amb Prisma mitjançant el PrismaAdapter.

• La matriu providers conté un sol proveïdor, EmailProvider. Està configurat amb els detalls del servidor de correu electrònic necessaris i l'adreça de correu electrònic de.

4. Gestor NextAuth:

• La funció NextAuth es crida amb authOptions com a argument, creant un controlador d'autenticació.

• El controlador resultant s'assigna a la variable handler.

5. Exportació:

• handler s'exporta com a GET i POST per suportar les sol·licituds HTTP GET i POST.

Ara, executem el nostre servidor i provem la funcionalitat. Primer, inicieu el servidor de desenvolupament executant yarn dev. A continuació, obriu el vostre navegador i visiteu localhost:3000 per veure l'aplicació en acció.

Per provar la funcionalitat d'autenticació, visiteu localhost:3000/api/auth/signin. Aquí, experimentaràs la màgia de NextAuthJS. La plantilla proporcionada inclosa amb NextAuthJS permet un procés d'inici de sessió sense contrasenya. Per provar-ho, introduïu una adreça de correu electrònic vàlida.

Un cop envieu el correu electrònic, NextAuthJS s'encarregarà del procés darrere de les escenes. En primer lloc, generarà i enviarà un correu electrònic que conté un enllaç d'inici de sessió únic a l'adreça de correu electrònic proporcionada. Aquest enllaç serveix com a testimoni d'autenticació segura per a l'usuari. Aleshores, quan l'usuari faci clic a l'enllaç, NextAuthJS validarà el testimoni i autenticarà l'usuari.

Aquesta funció d'inici de sessió sense contrasenya millora la seguretat i l'experiència de l'usuari eliminant la necessitat de contrasenyes. Els usuaris poden accedir de manera ràpida i segura als seus comptes fent clic a l'enllaç rebut per correu electrònic. Agilitza el procés d'inici de sessió i redueix el risc de vulnerabilitats relacionades amb la contrasenya.

Quan un usuari fa clic al correu electrònic d'inici de sessió generat per NextAuthJS i s'autentica, es duen a terme diverses accions entre bastidors per facilitar una experiència d'inici de sessió perfecta.

1. Validació de l'enllaç del correu electrònic: quan l'usuari fa clic a l'enllaç d'inici de sessió, NextAuthJS valida el testimoni d'autenticació incrustat a l'enllaç. Aquest testimoni garanteix la seguretat i la integritat del procés d'autenticació.

2. Procés d'autenticació: un cop validada correctament el testimoni, NextAuthJS identifica l'usuari i completa el procés d'autenticació. Verifica la identitat de l'usuari en funció del testimoni proporcionat i de qualsevol factor d'autenticació addicional configurat, com ara l'autenticació multifactor.

3. Creació de la sessió: després de l'autenticació correcta, NextAuthJS crea una sessió per a l'usuari. Una sessió és un estat persistent que representa l'estat d'autenticació de l'usuari i li permet accedir a recursos protegits sense haver de tornar a autenticar-se per a sol·licituds posteriors.

4. Cookies: NextAuthJS estableix galetes segures només per a HTTP al navegador de l'usuari per gestionar la sessió. Aquestes galetes tenen un paper crucial per mantenir l'estat d'autenticació de l'usuari a través de múltiples sol·licituds. Les galetes solen incloure una galeta de sessió i opcionalment una galeta de testimoni d'actualització, depenent de la configuració d'autenticació.

1. Galeta de sessió: la galeta de sessió conté un identificador de sessió (p. ex., una cadena generada aleatòriament) que identifica de manera única la sessió de l'usuari. Ajuda a NextAuthJS a associar les sol·licituds posteriors amb la sessió i l'usuari correctes.

2. CSRF Token Cookie: NextAuthJS estableix una galeta de testimoni CSRF (Cross-Site Request Forgery) per protegir-se dels atacs CSRF. El testimoni CSRF és un valor únic generat per NextAuthJS i emmagatzemat a la galeta. S'utilitza per validar i verificar l'autenticitat de les sol·licituds posteriors realitzades per l'usuari. Quan l'usuari envia formularis o realitza accions sensibles, el testimoni CSRF s'inclou a les capçaleres o al cos de la sol·licitud per assegurar-se que la sol·licitud s'ha originat a partir de la sessió de l'usuari autenticat i no d'una font maliciosa.

3. Galeta d'URL de devolució de trucada: NextAuthJS estableix una galeta d'URL de devolució de trucada per emmagatzemar l'URL original al qual l'usuari estava intentant accedir abans de ser redirigit al flux d'autenticació. Aquesta galeta ajuda a NextAuthJS a redirigir l'usuari a la pàgina desitjada després de l'autenticació correcta. Assegura una experiència d'usuari fluida tornant l'usuari sense problemes a la destinació prevista en lloc d'una pàgina de destinació genèrica.

Mitjançant l'ús de galetes segures només per a HTTP, NextAuthJS garanteix que l'estat d'autenticació segueixi sent segur i a prova de manipulacions. Les cookies estan xifrades, impedint l'accés no autoritzat o la modificació per part d'actors maliciosos.

Gran feina per integrar amb èxit NextAuthJS amb l'adaptador Prisma a la vostra aplicació Next.js! Amb la facilitat i adaptabilitat que ofereix NextAuthJS, ara teniu un sistema d'autenticació fiable.

Consulteu el repositori de GitHub enllaçat a continuació per obtenir el codi utilitzat en aquesta guia: https://github.com/codelabsacademy/next-auth-guide.

Però per què aturar-se aquí? Si t'apassiona el desenvolupament web i tens ganes de millorar les teves habilitats, considera sol·licitar el nostre bootcamp de desenvolupament web. El nostre bootcamp ofereix una experiència d'aprenentatge integral, que us proporciona els coneixements i les habilitats pràctiques necessàries per sobresortir en el dinàmic món del desenvolupament web.

En unir-vos al nostre bootcamp, obtindreu experiència pràctica amb tecnologies d'avantguarda, treballareu en projectes del món real i rebreu orientació personalitzada d'experts del sector. Tant si sou un principiant com un desenvolupador experimentat, el nostre programa està dissenyat per portar les vostres habilitats de desenvolupament web al següent nivell.

No perdis aquesta oportunitat d'accelerar el teu viatge de desenvolupament web. Soliciteu el nostre bootcamp de desenvolupament web avui i desbloquegeu tot el vostre potencial en l'apassionant camp del desenvolupament web. Junts, creem experiències digitals sorprenents i donem forma al futur del web.