Implementarea autentificării fără parolă într-un proiect Next.js 13 cu NextAuth.js și Prisma

Acest articol va aprofunda în pașii necesari pentru a implementa autentificarea fără parolă într-un proiect Next.js folosind biblioteca NextAuth.js. În plus, vom folosi Prisma ca adaptor de bază de date pentru a realiza acest lucru.

Autentificarea fără parolă este o abordare inovatoare care elimină nevoia de combinații tradiționale de nume de utilizator și parolă. În schimb, oferă o experiență de autentificare mai sigură și mai ușor de utilizat, utilizând metode alternative, cum ar fi link-uri magice prin e-mail sau coduri unice trimise prin SMS.

Next.js este un cadru React popular pentru construirea de aplicații web, cunoscut pentru simplitatea și eficiența sa. Putem încorpora cu ușurință autentificarea fără parolă în proiectul nostru prin integrarea NextAuth.js, o bibliotecă de autentificare concepută în mod explicit pentru Next.js.

În plus, ne vom baza pe Prisma ca adaptor de bază de date. Prisma este un instrument ORM (Object-Relational Mapping) care simplifică interacțiunile cu bazele de date, oferind un generator de interogări sigur de tip și generat automat. Acceptă mai multe baze de date, inclusiv PostgreSQL, MySQL și SQLite, ceea ce îl face o alegere versatilă pentru implementarea noastră de autentificare.

Pe parcursul acestui ghid, vom oferi instrucțiuni pas cu pas despre cum să configurați și să configurați autentificarea fără parolă folosind NextAuth.js într-un proiect Next.js. Vom demonstra, de asemenea, cum să integrăm Prisma ca adaptor de bază de date, permițând o comunicare fără întreruperi între aplicația noastră și baza de date.

Vom explora acum cum să îmbunătățim securitatea și experiența utilizatorului aplicației noastre Next.js folosind autentificarea fără parolă și capabilitățile NextAuth.js și Prisma. Sa incepem.

Ce este autentificarea fără parolă?

Conectarea fără parolă, după cum sugerează și numele, este o metodă de autentificare care elimină nevoia de combinații tradiționale de nume de utilizator și parolă. În schimb, utilizează mijloace alternative de verificare a identității unui utilizator, cum ar fi link-uri magice prin e-mail sau coduri unice trimise prin SMS. Această abordare oferă mai multe avantaje față de metodele tradiționale de conectare. În primul rând, elimină riscul vulnerabilităților legate de parole, cum ar fi parolele slabe sau reutilizarea parolelor. În al doilea rând, simplifică experiența utilizatorului, eliminând nevoia de a reține și de a introduce parole complexe.

Pentru a implementa autentificare fără parolă folosind link-uri magice de e-mail sau coduri unice, avem nevoie de un server SMTP (Simple Mail Transfer Protocol).

Un server SMTP este responsabil pentru trimiterea de e-mailuri prin Internet. În contextul autentificării fără parolă, serverul trimite linkurile magice sau codurile unice la adresa de e-mail înregistrată a utilizatorului. Când un utilizator inițiază procesul de conectare, un e-mail care conține un link sau un cod unic este generat și trimis utilizatorului. Apoi utilizatorul poate face clic pe link sau poate introduce codul pentru a finaliza procesul de autentificare. Serverul SMTP acționează ca intermediar între aplicație și serviciul de e-mail al utilizatorului, asigurând livrarea sigură și fiabilă a mesajelor de autentificare. Utilizând un server SMTP, putem implementa eficient autentificarea fără parolă și putem oferi o experiență de autentificare fără probleme pentru utilizatorii noștri.

Să începem!

În primul rând, trebuie să generăm un nou proiect Next.js. Pentru a face acest lucru, utilizați următoarea comandă:

npx create-next-app@latest

După ce ați generat noul proiect Next.js, puteți naviga la directorul de proiect nou creat.

Schimbând directorul în proiect, veți putea explora diferitele foldere și fișiere care alcătuiesc structura proiectului Next.js.

Înțelegerea structurii proiectului este esențială pentru dezvoltarea și organizarea eficientă a aplicației dvs. Next.js. Referindu-vă la documentația oficială, puteți folosi cele mai bune practici și obțineți informații despre cum să vă structurați codul, să gestionați activele statice și creați componente reutilizabile.

Instalarea dependențelor noastre

Pentru a activa autentificarea fără parolă în proiectul nostru Next.js folosind NextAuth.js, trebuie mai întâi să instalăm dependențele necesare. Rulați comanda yarn add next-auth nodemailer pentru a adăuga atât NextAuth.js, cât și nodemailer la proiectul nostru.

Folosim în mod special nodemailer, deoarece este un modul popular și versatil pentru trimiterea de e-mailuri în Node.js. Oferă o modalitate simplă și fiabilă de a trimite prin e-mail linkurile magice sau codurile unice necesare pentru autentificarea fără parolă.

În continuare, să integrăm Prisma ca adaptor de bază de date. Începeți prin a instala pachetele Prisma necesare folosind comanda:

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

Aceste pachete vor permite comunicarea fără întreruperi între aplicația noastră Next.js și baza de date. În plus, trebuie să instalăm Prisma ca dependență de dezvoltare, rulând:

yarn add prisma --dev

Acest pas asigură că avem instrumentele necesare pentru a lucra cu Prisma și generatorul său de interogări generat automat pentru interacțiunile cu bazele de date.

Prin instalarea acestor dependențe, punem bazele implementării autentificării fără parolă folosind NextAuth.js și Prisma în proiectul nostru Next.js.

Configurați Prisma

Este necesar să configurați Prisma și să aveți acces la un server SMTP pentru trimiterea de e-mailuri pentru a utiliza autentificarea fără parolă într-un proiect Next.js. Acest tutorial vă va ghida prin utilizarea contului dvs. personal Gmail pentru a trimite e-mailuri. Urmați pașii de mai jos pentru o configurare reușită.

Mai întâi, creați un folder „prisma” la rădăcina proiectului. Acest folder va găzdui fișierele și configurațiile legate de Prisma. Apoi, în folderul „prisma”, creați un fișier nou numit „schema.prisma”. Fișierul cu schemă definește structura bazei de date și servește ca model pentru codul generat automat de Prisma.

Dacă sunteți nou în conceptul de schemă, nu vă faceți griji! O schemă specifică tabelele, câmpurile, relațiile și constrângerile bazei de date. Pentru a crea schema, puteți consulta documentația oficială a NextAuth.js și puteți copia exemplul de schemă furnizat acolo. Această schemă este un punct de plecare și poate fi personalizată pentru a se potrivi cerințelor aplicației dvs.

Apoi, creați un fișier „.env” la rădăcina proiectului. Acest fișier va stoca variabilele de mediu, inclusiv configurațiile necesare pentru serverul SMTP. Pentru a popula fișierul „.env”, puteți copia exemplele de configurații furnizate mai jos. Asigurați-vă că introduceți acreditările contului dvs. Gmail și setările serverului SMTP în câmpurile corespunzătoare.

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

Urmând acești pași, vei fi configurat Prisma și configurat serverul SMTP pentru trimiterea de e-mailuri folosind contul tău Gmail. Aceste pregătiri sunt cruciale pentru activarea fluxului de autentificare fără parolă în proiectul dvs. Next.js.

Notă

Trebuie să creați o parolă pentru aplicație dacă ați activat Autentificarea în doi factori (2FA) pentru contul dvs. Google. O parolă de aplicație este o parolă distinctă care acordă acces la anumite aplicații sau dispozitive fără a expune parola principală a contului Google. Urmați instrucțiunile de mai jos pentru a genera o parolă pentru aplicație.

1. Accesați pagina de setări a Contului Google vizitând https://myaccount.google.com/.

2. Navigați la fila „Securitate”.

3. Căutați secțiunea „2FA”, derulați în jos și selectați „Parole pentru aplicații”.

4. Este posibil să vi se solicite să introduceți din nou parola contului Google pentru verificarea securității.

5. În meniul drop-down „Selectare aplicație”, alegeți „Poștă” sau „Altele (nume personalizat)”.

• Dacă opțiunea „Poștă” este disponibilă, selectați-o.

• Dacă opțiunea „Poștă” nu este disponibilă, alegeți „Altele (nume personalizat)” și furnizați un nume personalizat pentru identificare.

6. Faceți clic pe butonul „Generează” sau „Generează parolă”.

7. Google va genera o parolă unică pentru aplicație. Notați această parolă, deoarece o vom folosi în aplicația noastră pentru trimiterea de e-mailuri.

8. Utilizați această parolă de aplicație generată în configurația serverului SMTP a aplicației Next.js. Înlocuiți parola obișnuită a contului Gmail cu această parolă pentru aplicație.

Acest lucru asigură că, chiar și cu 2FA activat, aplicația dvs. poate trimite în siguranță e-mailuri folosind contul dvs. Gmail.

PostgreSQL folosind Supabase

Înainte de a putea continua, trebuie să ne asigurăm că baza de date pentru proiectul nostru funcționează corect. Pentru această demonstrație, vă recomandăm să utilizați baza de date Supabase PostgreSQL. Pentru a începe cu un proiect Supabase și pentru a obține adresa URL a conexiunii PostgreSQL, urmați acești pași:

1. Accesați supabase.io și conectați-vă la contul dvs. sau creați unul nou dacă nu aveți unul.

2. După ce v-ați conectat, veți fi direcționat către tabloul de bord Supabase. Faceți clic pe „Creare New Project” pentru a începe un nou proiect.

3. Denumiți-vă proiectul și selectați regiunea cea mai apropiată de locația dvs. curentă. Amintiți-vă parola, veți avea nevoie de ea mai târziu.

4. După ce ați creat proiectul, veți fi dus la tabloul de bord al proiectului. Faceți clic pe „Bază de date” în bara laterală din stânga pentru a accesa setările bazei de date.

5. În secțiunea „Bază de date”, veți găsi adresa URL a conexiunii PostgreSQL. Această adresă URL conține toate informațiile necesare pentru a vă conecta la baza de date a proiectului Supabase, cum ar fi gazda, portul, numele bazei de date, numele de utilizator și parola. Acesta va fi afișat în formatul: postgres://<nume utilizator>:<parolă>@<gazdă>:<port>/<bază de date>

6. Copiați adresa URL a conexiunii PostgreSQL și păstrați-o în siguranță. Veți avea nevoie de el pentru a stabili o conexiune între aplicația dvs. și baza de date Supabase.

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

Acum, să ne asigurăm că generăm clientul nostru Prisma rulând următoarea comandă: `npx prisma generate`.

Clientul Prisma este un client de bază de date generat automat pe baza schemei dumneavoastră. În mod implicit, clientul Prisma este generat în folderul `node_modules/.prisma/client`, dar puteți [specifica o locație personalizată dacă este necesar](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

În continuare, vom continua la crearea migrației noastre inițiale. Rulați următoarea comandă: `npx prisma migrate dev`. Puteți da fiecărei migrari un nume descriptiv.

În Prisma, o migrare este o metodă folosită pentru a gestiona ajustările la schema bazei de date pe măsură ce trece timpul. Vă permite să vă modificați structura bazei de date fără a pierde date preexistente. Aceste migrări sunt cruciale, deoarece asigură că schema bazei de date se aliniază cu nevoile aplicației dvs. pe măsură ce acestea se modifică. Cu instrumentul de migrare Prisma, puteți versiunea, aplica și anula în mod convenabil aceste modificări, simplificând munca în echipă și menținând o schemă uniformă a bazei de date în diferite medii.

Acum, dacă ne verificăm baza de date, vom putea vedea modificările de la migrarea noastră inițială reflectate în secțiunea bazei de date.

Efectuând migrarea inițială, am aplicat modificările schemei bazei de date așa cum este definită în scriptul de migrare.

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

### Configurarea NextAuthJS cu adaptorul Prisma

Într-o aplicație Next.js, NextAuthJS utilizează ruta catch-all, cunoscută și sub denumirea de wildcard sau ruta alternativă, pentru a gestiona cererile de autentificare. Această rută dinamică este definită folosind sistemul de rutare bazat pe fișiere din Next.js.

Creați un folder numit „**api**” în directorul „**aplicație**”. În dosarul „**api**”, creați un dosar „**auth**”. În dosarul „**auth**”, creați o rută catch-all numită „**[...nextauth]**” ca dosar. În cele din urmă, creați un fișier „**route.ts**” în folderul catch-all route și adăugați următorul cod.

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

În fișierul de rută catch-all, importăm biblioteca NextAuthJS și setăm opțiunile de autentificare, furnizorii și configurațiile. NextAuthJS se ocupă de analizarea solicitărilor primite, identifică acțiunea de autentificare necesară și execută logica corespunzătoare conform opțiunilor specificate.

Codul furnizat configurează NextAuthJS cu adaptorul Prisma pentru autentificare folosind un furnizor de e-mail. Să explicăm fiecare afirmație:

1. Importuri:

• PrismaAdapter și PrismaClient sunt importate din @next-auth/prisma-adapter și, respectiv, @prisma/client. Acestea sunt folosite pentru a integra NextAuthJS cu Prisma.

• NextAuth este importat din next-auth și este biblioteca principală pentru gestionarea autentificării în aplicațiile Next.js.

• EmailProvider este importat din next-auth/providers/email și este folosit ca furnizor pentru autentificarea pe bază de e-mail.

2. Configurare Prisma:

• O instanță de PrismaClient este creată folosind new PrismaClient(). Acest lucru permite comunicarea cu Prisma ORM și baza de date de bază.

3. Opțiuni de autentificare:

• authOptions este un obiect care definește configurația pentru autentificare în NextAuthJS.

• Proprietatea adapter este setată la PrismaAdapter(prisma), care conectează NextAuthJS cu Prisma folosind PrismaAdapter.

• Matricea providers conține un singur furnizor, EmailProvider. Este configurat cu detaliile necesare serverului de e-mail și adresa de e-mail de la.

4. Handler NextAuth:

• Funcția NextAuth este apelată cu authOptions ca argument, creând un handler de autentificare.

• Handler-ul rezultat este atribuit variabilei handler.

5. Export:

• handler este exportat ca GET și POST pentru a accepta atât solicitările HTTP GET, cât și POST.

Acum, să rulăm serverul nostru și să testăm funcționalitatea. Mai întâi, porniți serverul de dezvoltare rulând „yarn dev”. Apoi, deschideți browserul și vizitați localhost:3000 pentru a vedea aplicația în acțiune.

Pentru a testa funcționalitatea de autentificare, vizitați localhost:3000/api/auth/signin. Aici vei experimenta magia NextAuthJS. Șablonul furnizat inclus cu NextAuthJS permite un proces de conectare fără parolă. Pentru a o încerca, introduceți o adresă de e-mail validă.

Odată ce trimiteți e-mailul, NextAuthJS se va ocupa de procesul din culise. În primul rând, va genera și trimite un e-mail care conține un link unic de conectare către adresa de e-mail furnizată. Acest link servește ca un token de autentificare sigur pentru utilizator. Apoi, când utilizatorul face clic pe link, NextAuthJS va valida jetonul și va autentifica utilizatorul.

Această caracteristică de conectare fără parolă îmbunătățește securitatea și experiența utilizatorului prin eliminarea necesității parolelor. Utilizatorii își pot accesa rapid și în siguranță conturile făcând clic pe linkul primit prin e-mail. Ea eficientizează procesul de conectare și reduce riscul de vulnerabilități legate de parole.

Când un utilizator face clic pe e-mailul de conectare generat de NextAuthJS și se autentifică, mai multe acțiuni au loc în culise pentru a facilita o experiență de conectare fără probleme.

1. Validarea linkului prin e-mail: când utilizatorul face clic pe linkul de conectare, NextAuthJS validează simbolul de autentificare încorporat în link. Acest token asigură securitatea și integritatea procesului de autentificare.

2. Proces de autentificare: după validarea cu succes a simbolului, NextAuthJS identifică utilizatorul și finalizează procesul de autentificare. Acesta verifică identitatea utilizatorului pe baza jetonului furnizat și a oricăror factori de autentificare suplimentari configurați, cum ar fi autentificarea cu mai mulți factori.

3. Crearea sesiunii: după autentificarea cu succes, NextAuthJS creează o sesiune pentru utilizator. O sesiune este o stare persistentă care reprezintă starea de autentificare a utilizatorului și le permite acestuia să acceseze resursele protejate fără a fi nevoie să se autentifice din nou pentru solicitările ulterioare.

4. Cookie-uri: NextAuthJS setează cookie-uri securizate exclusiv HTTP în browserul utilizatorului pentru a gestiona sesiunea. Aceste cookie-uri joacă un rol crucial în menținerea stării de autentificare a utilizatorului în mai multe solicitări. Cookie-urile includ, de obicei, un cookie de sesiune și, opțional, un cookie cu simbol de reîmprospătare, în funcție de configurația de autentificare.

1. Session Cookie: Cookie-ul de sesiune conține un identificator de sesiune (de exemplu, un șir generat aleatoriu) care identifică în mod unic sesiunea utilizatorului. Acesta ajută NextAuthJS să asocieze cererile ulterioare cu sesiunea și utilizatorul corecte.

2. CSRF Token Cookie: NextAuthJS setează un cookie token CSRF (Cross-Site Request Forgery) pentru a proteja împotriva atacurilor CSRF. Indicatorul CSRF este o valoare unică generată de NextAuthJS și stocată în cookie. Este folosit pentru validarea și verificarea autenticității solicitărilor ulterioare făcute de utilizator. Când utilizatorul trimite formulare sau efectuează acțiuni sensibile, jetonul CSRF este inclus în anteturile sau corpul cererii pentru a se asigura că cererea provine din sesiunea utilizatorului autentificat și nu dintr-o sursă rău intenționată.

3. Cookie URL de apel invers: NextAuthJS setează un cookie URL de apel invers pentru a stoca adresa URL inițială pe care utilizatorul încerca să o acceseze înainte de a fi redirecționat către fluxul de autentificare. Acest cookie ajută NextAuthJS să redirecționeze utilizatorul înapoi la pagina dorită după autentificarea cu succes. Asigură o experiență ușoară a utilizatorului prin întoarcerea fără probleme a utilizatorului la destinația dorită în loc de o pagină de destinație generică.

Prin utilizarea cookie-urilor securizate exclusiv HTTP, NextAuthJS se asigură că starea de autentificare rămâne sigură și inviolabilă. Cookie-urile sunt criptate, împiedicând accesul sau modificarea neautorizată de către actori rău intenționați.

O treabă grozavă la integrarea cu succes a NextAuthJS cu adaptorul Prisma în aplicația dvs. Next.js! Cu ușurința și adaptabilitatea oferite de NextAuthJS, acum aveți un sistem de autentificare fiabil.

Consultați depozitul GitHub de mai jos pentru codul folosit în acest ghid: https://github.com/codelabsacademy/next-auth-guide.

Dar de ce să te oprești aici? Dacă sunteți pasionat de dezvoltarea web și dornici să vă îmbunătățiți abilitățile, luați în considerare aplicarea pentru campania noastră de dezvoltare web. Bootcampul nostru oferă o experiență de învățare cuprinzătoare, echipându-vă cu cunoștințele și abilitățile practice necesare pentru a excela în lumea dinamică a dezvoltării web.

Alăturându-vă la bootcampul nostru, veți câștiga experiență practică cu tehnologii de ultimă oră, veți lucra la proiecte din lumea reală și veți primi îndrumări personalizate de la experți din industrie. Indiferent dacă sunteți un începător sau un dezvoltator cu experiență, programul nostru este conceput pentru a vă duce abilitățile de dezvoltare web la nivelul următor.

Nu ratați această oportunitate de a vă accelera călătoria de dezvoltare web. Aplicați astăzi pentru bootcampul nostru de dezvoltare web și deblocați-vă întregul potențial în domeniul captivant al dezvoltării web. Împreună, să construim experiențe digitale uimitoare și să modelăm viitorul webului.