Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Autentifikacija je ključna komponenta razvoja aplikacije. Pomaže zaštititi korisničke podatke i spriječiti zlonamjerne aktivnosti. Jednostavno rečeno, određuje vjerodostojnost identiteta korisnika, osiguravajući da samo ovlašteni korisnici mogu pristupiti aplikaciji i njezinim resursima.

Stvaranje prilagođenog sustava provjere autentičnosti može biti dugotrajan zadatak, a tu je NextAuth.js koristan. Pruža sigurnu podršku za provjeru autentičnosti za aplikacije izrađene s okvirom Next.js.

Što je NextAuth.js?

NextAuth.js je lagana biblioteka otvorenog koda koja pruža autentifikacija i autorizacija podrška za Next.js aplikacije. Programerima omogućuje brzo i jednostavno postavljanje provjere autentičnosti i autorizacije za njihove Next.js aplikacije. Omogućuje značajke kao što su autentifikacija s višestrukim pružateljima usluga, e-pošta i autentifikacija bez lozinke.

Kako NextAuth.js radi u autentifikaciji?

Rješenje za autentifikaciju NextAuth.js pruža API na strani klijenta koji možete integrirajte u svoju aplikaciju Next.js. Možete ga koristiti za provjeru autentičnosti korisnika s različitim davateljima usluga prijave kod kojih su stvorili račune.

Ispod haube, korisnici se preusmjeravaju na stranicu za prijavu davatelja usluga. Nakon uspješne provjere autentičnosti, pružatelj vraća podatke o sesiji koji sadrže korisnički sadržaj. Taj korisni teret zatim može autorizirati pristup aplikaciji i njezinim resursima.

Nova ažuriranja značajki u NextAuth.js (v4)

U prosincu 2022. NextAuth.js objavio je svoju četvrtu verziju. Ova verzija je poboljšana u odnosu na svoju raniju verziju, v3, s novim ažuriranjima i izmjenama. Promjene su uglavnom usmjerene na poboljšanje korištenja knjižnice u procesu provjere autentičnosti.

1. Ažuriranja useSession kuke

Možete koristiti kuku useSession da provjerite je li korisnik prijavljen ili ne. U ovoj novoj verziji useSession kuka vraća objekt koji pruža jednostavniji način testiranja stanja, zahvaljujući dodatku opcije statusa. Pogledajte kod u nastavku:

uvoz {useSession} iz"next-auth/react"
izvozzadanofunkcijakomponenta() {
konst { podaci: sesija, status } = useSession()


ako (status "ovjereno") { 
povratak<str>Prijavljeni kao {session.user.email}str>
 }
povratak<str> Nije prijavljen str>
}

2. SessionProvider kontekst postaje obavezan

Nova verzija četiri nalaže korištenje konteksta SessionProvider. To znači da ćete svoju aplikaciju morati zamotati pomoću useSession Providera. NextAuth.js preporučuje omotavanje vaše aplikacije unutar _app.jsx datoteka.

Dodatno, metoda clientMaxAge zamijenjena je s refetchInterval. To će olakšati povremeno dohvaćanje sesije u pozadini.

uvoz {SessionProvider} iz"next-auth/react"
izvozzadanofunkcijaaplikacija({
 Komponenta, pageProps: { session, ...pageProps }, 
}) {
povratak ( 
<SessionProvidersjednica={sjednica}refetchInterval={5 * 60}>
<komponenta {...stranicaProps} />SessionProvider>
 )
}

3. Pojedinačni uvoz pružatelja usluga

NextAuth.js pruža nekoliko usluga pružatelja usluga koje možete koristiti za prijavu korisnika. Oni uključuju:

  • Korištenje ugrađenih OAuth pružatelja usluga (npr. GitHub, Google).
  • Korištenje davatelja usluga e-pošte.

U ovoj novoj verziji morate uvesti svakog pružatelja pojedinačno.

uvoz GoogleProvider iz"next-auth/providers/google"
uvoz Auth0Provider iz"next-auth/providers/auth0";

4. Ostale manje promjene

  • Uvoz na strani klijenta preimenovan je u next-auth/react iz next-auth/client.
  • Promjene u argumentima metoda povratnog poziva: 
    prijava({ korisnik, račun, profil, e-pošta, vjerodajnice })
    sesija({ sesija, token, korisnik})
    jwt({ token, korisnik, račun, profil, isNewUser })

Početak rada s NextAuth.js u autentifikaciji

Da biste integrirali NextAuth.js u svoje Next.js aplikacije, slijedite korake u nastavku:

  1. Napravite Next.js aplikaciju pokretanjem ove naredbe: npx create-next-app
  2. Trčanje npm instaliraj next-auth u vašem terminalu da instalirate NextAuth.js u svoju aplikaciju Next.js.
  3. Posjetiti NextAuth.js službenu dokumentaciju i odaberite željenog pružatelja/e s popisa podržanih. Zatim kreirajte račun na konzoli za razvojne programere vašeg odabranog pružatelja usluga i registrirajte svoju aplikaciju Next.js.
  4. Na konzoli za razvojne programere vašeg odabranog pružatelja usluga navedite URL početne rute i URL za preusmjeravanje povratnog poziva, spremite promjene i kopirajte ID klijenta i Tajna klijenta.
  5. U korijenskom direktoriju aplikacije Next.js stvorite .env datoteku za čuvanje ID klijenta i Tajna klijenta.
  6. Na kraju, u direktoriju /pages/api kreirajte novu mapu pod nazivom auth. U auth mapi stvorite novu datoteku i nazovite je [...nextauth].js. U stvorenu datoteku dodajte kod u nastavku. Kod prikazuje NextAuth.js API na strani klijenta koji koristi Google Provider: 
uvoz GoogleProvider iz"next-auth/providers/google";
pružatelji usluga: [
 GoogleProvider({
clientId: postupak.env.GOOGLE_CLIENT_ID,
clientSecret: postupak.env.GOOGLE_KLIJENT_TAJNA
 })
]

Sada možete nastaviti i izraditi stranicu za autentifikaciju prijave. Ovo je DOM prikaz za komponentu za prijavu:

uvoz Reagirati iz'reagirati';
uvoz { useSession, signIn, signout } iz"next-auth/react"
izvozzadanofunkcijakomponenta() {
konst { podaci: sesija } = useSession()


 ako (sesija) {
povratak (
<>
<str> Prijavljeni kao {session.user.email} str>
<dugmena klik={() => signOut()}>Odjavadugme>

 )
 }
povratak (
<>
<str> Nije prijavljen str>
<dugmena klik={() => signIn()}>Prijavite sedugme>

 )
}

The useSession Hook pristupa objektu trenutne korisničke sesije. Nakon što se korisnik prijavi i Google ga provjeri autentičnost, vraća se objekt sesije s korisnim sadržajem korisnika. To omogućuje Next.js da prikaže korisničke podatke na strani klijenta aplikacije, u ovom slučaju e-pošte.

Prilagođeni sustavi provjere autentičnosti vs. Rješenja spremna za korištenje kao što je NextAuth.js

Odabir između izrade prilagođenog sustava provjere autentičnosti i integriranja provjere autentičnosti spremne za korištenje rješenja kao što je NextAuth.js, važno je uzeti u obzir cijenu, složenost i sigurnost svakog od njih riješenje.

Ako imate resurse i stručnost za razvoj prilagođenog sustava provjere autentičnosti, to bi mogao biti najbolji pristup za vas. Međutim, ako ste u potrazi za gotovim rješenjem koje je jednostavno implementirati, sigurno je i isplativo, NextAuth.js bi mogao biti dobar izbor za razmatranje. U konačnici, izbor će ovisiti o vašim potrebama i preferencijama.