Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Autentifikácia je kľúčovou súčasťou vývoja aplikácií. Pomáha chrániť údaje používateľov a predchádzať škodlivým aktivitám. Jednoducho povedané, určuje dôveryhodnosť identity používateľa a zabezpečuje, že k aplikácii a jej zdrojom majú prístup iba oprávnení používatelia.

Vytvorenie vlastného autentifikačného systému môže byť časovo náročná úloha a práve tu prichádza vhod NextAuth.js. Poskytuje zabezpečenú podporu autentifikácie pre aplikácie vytvorené pomocou rámca Next.js.

Čo je NextAuth.js?

NextAuth.js je ľahká knižnica s otvoreným zdrojom, ktorá poskytuje autentifikáciu a autorizáciu podpora aplikácií Next.js. Umožňuje vývojárom rýchlo a jednoducho nastaviť autentifikáciu a autorizáciu pre ich aplikácie Next.js. Poskytuje funkcie, ako je autentifikácia s viacerými poskytovateľmi, e-mail a autentifikácia bez hesla.

Ako funguje NextAuth.js pri overovaní?

instagram viewer

Overovacie riešenie NextAuth.js poskytuje rozhranie API na strane klienta, ktoré môžete integrovať do vašej aplikácie Next.js. Môžete ho použiť na overenie používateľov s rôznymi poskytovateľmi prihlásenia, u ktorých si vytvorili účty.

Pod kapotou sú používatelia presmerovaní na prihlasovaciu stránku poskytovateľa. Po úspešnej autentifikácii poskytovateľ vráti dáta relácie, ktoré obsahujú užitočné zaťaženie používateľa. Toto užitočné zaťaženie potom môže autorizovať prístup k aplikácii a jej zdrojom.

Nové aktualizácie funkcií v NextAuth.js (v4)

V decembri 2022 vydal NextAuth.js svoju štvrtú verziu. Táto verzia bola vylepšená oproti predchádzajúcej verzii v3 s novými aktualizáciami a úpravami. Zmeny sa zameriavajú najmä na zlepšenie využívania knižnice v procese autentifikácie.

1. Aktualizácie useSession Hook

Pomocou háčika useSession môžete skontrolovať, či je používateľ prihlásený alebo nie. V tejto novej verzii vracia hák useSession objekt, ktorý poskytuje priamočiarejší spôsob testovania stavov vďaka pridaniu možnosti stavu. Pozrite si kód nižšie:

importovať { useSession } od"ďalšie overenie/reakcia"
exportpredvolenáfunkciuKomponent() {
konšt { údajov: session, status } = useSession()


ak (postavenie "overený") { 
vrátiť<p>Prihlásený ako {session.user.email}p>
 }
vrátiť<p> Neprihlásený p>
}

2. Kontext SessionProvider sa stáva povinným

Nová verzia štyri nariaďuje používanie kontextu SessionProvider. To znamená, že svoju aplikáciu budete musieť zabaliť pomocou poskytovateľa useSession. NextAuth.js odporúča zabaliť vašu aplikáciu do _app.jsx súbor.

Okrem toho bola metóda clientMaxAge nahradená metódou refetchInterval. To uľahčí pravidelné načítanie relácie na pozadí.

importovať { SessionProvider } od"ďalšie overenie/reakcia"
exportpredvolenáfunkciuApp({
 Komponent, pageProps: { session, ...pageProps }, 
}) {
vrátiť ( 
<Poskytovateľ relácierelácie={relácia}refetchInterval={5 * 60}>
<Komponent {...pageProps} />Poskytovateľ relácie>
 )
}

3. Individuálny import poskytovateľov

NextAuth.js poskytuje niekoľko služieb poskytovateľa, ktoré môžete použiť na prihlásenie používateľa. Zahŕňajú:

  • Používanie vstavaných poskytovateľov OAuth (napr. GitHub, Google).
  • Používanie poskytovateľa e-mailu.

V tejto novej verzii je potrebné importovať každého poskytovateľa jednotlivo.

importovať GoogleProvider od"next-auth/providers/google"
importovať Auth0Provider od"next-auth/providers/auth0";

4. Iné menšie zmeny

  • Import na strane klienta bol premenovaný na next-auth/react z next-auth/client.
  • Zmeny v argumentoch metód spätného volania: 
    prihlásenie ({ používateľ, účet, profil, e-mail, poverenia })
    relácia ({ session, token, user })
    jwt({ token, používateľ, účet, profil, isNewUser })

Začíname s NextAuth.js v autentifikácii

Ak chcete integrovať NextAuth.js do svojich aplikácií Next.js, postupujte podľa nasledujúcich krokov:

  1. Vytvorte aplikáciu Next.js spustením tohto príkazu: npx create-next-app
  2. Bežať npm install next-auth vo vašom termináli a nainštalovať NextAuth.js do vašej aplikácie Next.js.
  3. Navštíviť NextAuth.js oficiálnu dokumentáciu a vyberte svojho preferovaného poskytovateľa/poskytovateľov zo zoznamu podporovaných. Potom si vytvorte účet vo vývojárskej konzole vášho vybraného poskytovateľa a zaregistrujte svoju aplikáciu Next.js.
  4. Vo vývojárskej konzole vášho vybraného poskytovateľa/poskytovateľov zadajte adresa URL domácej trasy a URL presmerovania spätného volania, uložte zmeny a skopírujte súbor ClientID a Tajomstvo klienta.
  5. V koreňovom adresári aplikácie Next.js vytvorte súbor .env, do ktorého bude uložený ID klienta a Tajomstvo klienta.
  6. Nakoniec v adresári /pages/api vytvorte nový priečinok s názvom auth. V priečinku auth vytvorte nový súbor a pomenujte ho [...nextauth].js. Do vytvoreného súboru pridajte nižšie uvedený kód. Kód zobrazuje rozhranie API NextAuth.js na strane klienta pomocou poskytovateľa Google: 
importovať GoogleProvider od"next-auth/providers/google";
poskytovatelia: [
 GoogleProvider({
clientId: proces.env.GOOGLE_CLIENT_ID,
klient Tajomstvo: proces.env.GOOGLE_CLIENT_SECRET
 })
]

Teraz môžete pokračovať a vytvoriť stránku na overenie prihlásenia. Tu je vykreslenie DOM pre komponent prihlásenia:

importovať Reagovať od'reagovať';
importovať { useSession, signIn, signOut } od"ďalšie overenie/reakcia"
exportpredvolenáfunkciuKomponent() {
konšt { údajov: session } = useSession()


 if (relácia) {
vrátiť (
<>
<p> Prihlásený ako {session.user.email} p>
<tlačidlopo kliknutí={() => signOut()}>Odhlásiť satlačidlo>

 )
 }
vrátiť (
<>
<p> Neprihlásený p>
<tlačidlopo kliknutí={() => signIn()}>Prihlásiť satlačidlo>

 )
}

The useSession Hook pristupuje k objektu aktuálnej relácie používateľa. Keď sa používateľ prihlási a je overený spoločnosťou Google, vráti sa objekt relácie s užitočným zaťažením používateľa. To umožňuje Next.js vykresliť podrobnosti o používateľovi na strane klienta aplikácie, v tomto prípade e-mail.

Vlastné autentizačné systémy vs. Riešenia pripravené na použitie, ako napríklad NextAuth.js

Výber medzi vytvorením vlastného autentifikačného systému a integráciou autentifikácie pripravenej na použitie riešenie, ako je NextAuth.js, je dôležité zvážiť náklady, zložitosť a bezpečnosť každého z nich Riešenie.

Ak máte zdroje a odborné znalosti na vývoj vlastného autentifikačného systému, môže to byť pre vás najlepší prístup. Ak však hľadáte hotové riešenie, ktoré sa ľahko implementuje, je bezpečné a nákladovo efektívne, potom môže byť NextAuth.js dobrou voľbou. V konečnom dôsledku bude výber závisieť od vašich potrieb a preferencií.