Actualizări noi în NextAuth.js v4: Ce trebuie să știți

Autentificarea este o componentă cheie a dezvoltării aplicațiilor. Ajută la protejarea datelor utilizatorilor și la prevenirea activităților rău intenționate. Mai simplu spus, determină credibilitatea identității unui utilizator, asigurând că numai utilizatorii autorizați pot accesa o aplicație și resursele acesteia.

Crearea unui sistem de autentificare personalizat poate fi o sarcină consumatoare de timp și aici este locul în care NextAuth.js este util. Oferă suport de autentificare securizat pentru aplicațiile create cu cadrul Next.js.

Ce este NextAuth.js?

NextAuth.js este o bibliotecă ușoară open-source care oferă autentificare și autorizare suport pentru aplicațiile Next.js. Permite dezvoltatorilor să configureze rapid și ușor autentificarea și autorizarea pentru aplicațiile lor Next.js. Oferă funcții precum autentificarea cu mai mulți furnizori, e-mail și autentificare fără parolă.

Cum funcționează NextAuth.js în autentificare?

Soluția de autentificare NextAuth.js oferă un API la nivelul clientului pe care îl puteți integrați în aplicația dvs. Next.js. Îl puteți folosi pentru a autentifica utilizatorii cu diferiți furnizori de conectare cu care au creat conturi.

Sub capotă, utilizatorii sunt redirecționați către pagina de conectare a furnizorului. După autentificarea cu succes, furnizorul returnează datele de sesiune care conțin încărcătura utilă a utilizatorului. Această sarcină utilă poate autoriza apoi accesul la aplicație și la resursele acesteia.

Actualizări noi de funcții în NextAuth.js (v4)

În decembrie 2022, NextAuth.js a lansat a patra versiune. Această versiune a fost îmbunătățită față de versiunea sa anterioară, v3, cu noi actualizări și modificări. Schimbările se concentrează în principal pe îmbunătățirea utilizării bibliotecii în procesul de autentificare.

1. Actualizări ale useSession Hook

Puteți utiliza cârligul useSession pentru a verifica dacă un utilizator este conectat sau nu. În această nouă versiune, cârligul useSession returnează un obiect care oferă o modalitate mai simplă de a testa stările, datorită adăugării opțiunii de stare. Vezi codul de mai jos:

import { useSession } din„următoarea autorizare/reacție”
exportMod implicitfuncţieComponentă() {
const { date: sesiune, stare } = useSession()
dacă (stare "autentificat") { 
întoarcere<p>Conectat ca {session.user.email}p>
 }
întoarcere<p> Neconectat p>
}

2. Contextul SessionProvider devine obligatoriu

Noua versiune patru impune utilizarea contextului SessionProvider. Aceasta înseamnă că va trebui să împachetați aplicația cu furnizorul useSession. NextAuth.js recomandă să vă includeți aplicația în _app.jsx fişier.

În plus, metoda clientMaxAge a fost înlocuită cu refetchInterval. Acest lucru va facilita preluarea periodică a sesiunii în fundal.

import { SessionProvider } din„următoarea autorizare/reacție”
exportMod implicitfuncţieApp({
 Component, pageProps: { session, ...pageProps }, 
}) {
întoarcere ( 
<SessionProvidersesiune={sesiune}refetchInterval={5 * 60}>
<Componentă {...pageProps} />SessionProvider>
 )
}

3. Importarea furnizorilor individual

NextAuth.js oferă mai multe servicii de furnizor pe care le puteți utiliza pentru a vă conecta un utilizator. Ei includ:

• Folosind furnizori OAuth încorporați (de exemplu, GitHub, Google).
• Folosind furnizorul de e-mail.

În această nouă versiune, trebuie să importați fiecare furnizor în mod individual.

import GoogleProvider din„next-auth/providers/google”
import Auth0Provider din„next-auth/providers/auth0”;

4. Alte modificări minore

• Importul pe partea client a fost redenumit în next-auth/react din next-auth/client.
• Modificări ale argumentelor metodelor de apel invers:

  signIn({ utilizator, cont, profil, e-mail, acreditări })
  sesiune ({ sesiune, simbol, utilizator })
  jwt({ simbol, utilizator, cont, profil, isNewUser })

Noțiuni introductive cu NextAuth.js în autentificare

Pentru a integra NextAuth.js în aplicațiile dvs. Next.js, urmați pașii de mai jos:

1. Creați o aplicație Next.js rulând această comandă: npx create-next-app
2. Alerga npm install next-auth în terminalul dvs. pentru a instala NextAuth.js în aplicația dvs. Next.js.
3. Viziteaza NextAuth.js documentația oficială și selectați furnizorii dvs. preferat(i) din lista celor acceptați. Apoi, creați un cont în consola pentru dezvoltatori a furnizorilor selectați și înregistrați-vă aplicația Next.js.
4. În consola pentru dezvoltatori a furnizorilor selectați, specificați URL rută de acasă si URL de redirecționare a apelului invers, salvați modificările și copiați ClientID și Secretul clientului.
5. În directorul rădăcină al aplicației Next.js, creați un fișier .env pentru a păstra fișierul ID client și Secretul clientului.
6. În sfârșit, în directorul /pages/api, creați un folder nou numit auth. În folderul auth, creați un fișier nou și denumiți-l [...nextauth].js. În fișierul creat, adăugați codul de mai jos. Codul arată API-ul client NextAuth.js folosind un furnizor Google:

import GoogleProvider din„next-auth/providers/google”;
furnizori: [
 GoogleProvider({
clientId: proces.env.GOOGLE_CLIENT_ID,
clientSecret: proces.env.GOOGLE_CLIENT_SECRET
 })
]

Acum puteți să continuați și să creați o pagină de autentificare. Iată o redare DOM pentru o componentă de conectare:

import Reacţiona din'reacţiona';
import { useSession, signIn, signOut } din„următoarea autorizare/reacție”
exportMod implicitfuncţieComponentă() {
const { date: sesiune } = useSession()
 if (sesiune) {
întoarcere (
<>
<p> Conectat ca {session.user.email} p>
<butononClick={() => signOut()}>Deconectați-văbuton>

 )
 }
întoarcere (
<>
<p> Neconectat p>
<butononClick={() => signIn()}>Conectează-tebuton>

 )
}

The useSession Hook accesează obiectul sesiune utilizator curent. Odată ce un utilizator se conectează și este autentificat de Google, este returnat un obiect de sesiune cu sarcina utilă a utilizatorului. Acest lucru permite Next.js să redeze detaliile utilizatorului pe partea client a aplicației, în acest caz e-mailul.

Sisteme de autentificare personalizate vs. Soluții gata de utilizare, cum ar fi NextAuth.js

Alegerea între construirea unui sistem de autentificare personalizat și integrarea unei autentificări gata de utilizare soluție precum NextAuth.js, este important să luați în considerare costul, complexitatea și securitatea fiecăruia soluţie.

Dacă aveți resursele și expertiza pentru a dezvolta un sistem de autentificare personalizat, aceasta poate fi cea mai bună abordare pentru dvs. Cu toate acestea, dacă sunteți în căutarea unei soluții ieșite din cutie, ușor de implementat, sigură și rentabilă, NextAuth.js poate fi o alegere bună de luat în considerare. În cele din urmă, alegerea va depinde de nevoile și preferințele dvs.