Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Autentisering är en nyckelkomponent i applikationsutveckling. Det hjälper till att skydda användardata och förhindra skadliga aktiviteter. Enkelt uttryckt avgör det trovärdigheten för en användares identitet, vilket säkerställer att endast auktoriserade användare kan komma åt en applikation och dess resurser.

Att skapa ett anpassat autentiseringssystem kan vara en tidskrävande uppgift, och det är här NextAuth.js kommer väl till pass. Det ger säkert autentiseringsstöd för applikationer byggda med Next.js-ramverket.

Vad är NextAuth.js?

NextAuth.js är ett lättviktsbibliotek med öppen källkod som tillhandahåller autentisering och auktorisering stöd för Next.js-applikationer. Det låter utvecklare snabbt och enkelt ställa in autentisering och auktorisering för sina Next.js-appar. Den tillhandahåller funktioner som autentisering med flera leverantörer, e-post och lösenordslös autentisering.

instagram viewer

Hur fungerar NextAuth.js i autentisering?

NextAuth.js autentiseringslösning tillhandahåller ett API på klientsidan som du kan integrera i din Next.js-applikation. Du kan använda den för att autentisera användare med olika inloggningsleverantörer som de har skapat konton hos.

Under huven omdirigeras användare till en leverantörs inloggningssida. Efter framgångsrik autentisering returnerar leverantören sessionsdata som innehåller användarens nyttolast. Denna nyttolast kan sedan auktorisera åtkomst till applikationen och dess resurser.

Nya funktionsuppdateringar i NextAuth.js (v4)

I december 2022 släppte NextAuth.js sin fjärde version. Denna version har förbättrats från sin tidigare version, v3, med nya uppdateringar och modifieringar. Förändringarna fokuserar främst på att förbättra användningen av biblioteket i autentiseringsprocessen.

1. Uppdateringar av useSession Hook

Du kan använda useSession-kroken för att kontrollera om en användare är inloggad eller inte. I den här nya versionen returnerar useSession-kroken ett objekt som ger ett enklare sätt att testa tillstånd, tack vare tillägget av statusalternativet. Se koden nedan:

importera { useSession } från"nästa-auth/reagera"
exporterastandardfungeraKomponent() {
konst { data: session, status } = useSession()


om (status "autenticerad") { 
lämna tillbaka<sid>Inloggad som {session.user.email}sid>
 }
lämna tillbaka<sid> Inte inloggad sid>
}

2. SessionProvider-kontext blir obligatorisk

Den nya versionen fyra kräver användning av SessionProvider-kontexten. Detta innebär att du måste slå in din app med useSession Provider. NextAuth.js rekommenderar att du lindar in din app inom _app.jsx fil.

Dessutom har clientMaxAge-metoden ersatts med refetchInterval. Detta gör det lättare att hämta sessionen med jämna mellanrum i bakgrunden.

importera { SessionProvider } från"nästa-auth/reagera"
exporterastandardfungeraApp({
 Komponent, pageProps: { session, ...pageProps }, 
}) {
lämna tillbaka ( 
<SessionProvidersession={session}återhämtningsintervall={5 * 60}>
<Komponent {...pageProps} />SessionProvider>
 )
}

3. Importera leverantörer individuellt

NextAuth.js tillhandahåller flera leverantörstjänster som du kan använda för att logga in en användare. De inkluderar:

  • Använda inbyggda OAuth-leverantörer (t.ex. GitHub, Google).
  • Använder e-postleverantör.

I den här nya versionen måste du importera varje leverantör individuellt.

importera GoogleProvider från"next-auth/providers/google"
importera Auth0Provider från"next-auth/providers/auth0";

4. Andra mindre ändringar

  • Importen på klientsidan har bytt namn till next-auth/react from next-auth/client.
  • Ändringar av argumenten för återuppringningsmetoderna: 
    logga in({ användare, konto, profil, e-post, referenser })
    session({ session, token, användare })
    jwt({ token, användare, konto, profil, isNewUser })

Komma igång med NextAuth.js i autentisering

För att integrera NextAuth.js i dina Next.js-applikationer, följ stegen nedan:

  1. Skapa en Next.js-applikation genom att köra detta kommando: npx skapa-nästa-app
  2. Springa npm installera nästa-auth i din terminal för att installera NextAuth.js i din Next.js-applikation.
  3. Besök NextAuth.js officiell dokumentation och välj önskad leverantör/leverantörer från listan över de som stöds. Skapa sedan ett konto i utvecklarkonsolen för din/de valda leverantörer och registrera din Next.js-applikation.
  4. I utvecklarkonsolen för din/de valda leverantörer, ange hemvägs URL och den callback omdirigering URL, spara ändringarna och kopiera Klient ID och Klienthemlighet.
  5. I din Next.js-applikations rotkatalog skapar du en .env-fil för att hålla Klient ID och Klienthemlighet.
  6. Till sist, i /pages/api-katalogen, skapa en ny mapp som heter auth. Skapa en ny fil i auth-mappen och döp den till [...nextauth].js. Lägg till koden nedan i den skapade filen. Koden visar NextAuth.js klientsidans API med hjälp av en Google-leverantör: 
importera GoogleProvider från"next-auth/providers/google";
leverantörer: [
 GoogleProvider({
Klient ID: bearbeta.env.GOOGLE_CLIENT_ID,
klienthemlighet: bearbeta.env.GOOGLE_CLIENT_SECRET
 })
]

Du kan nu gå vidare och bygga en inloggningsautentiseringssida. Här är en DOM-rendering för en inloggningskomponent:

importera Reagera från'reagera';
importera { useSession, logga in, logga ut } från"nästa-auth/reagera"
exporterastandardfungeraKomponent() {
konst { data: session } = useSession()


 if (session) {
lämna tillbaka (
<>
<sid> Inloggad som {session.user.email} sid>
<knapppåKlicka={() => signOut()}>Logga utknapp>

 )
 }
lämna tillbaka (
<>
<sid> Inte inloggad sid>
<knapppåKlicka={() => signIn()}>Logga inknapp>

 )
}

De useSession Hook kommer åt det aktuella användarsessionsobjektet. När en användare loggar in och har autentiserats av Google, returneras ett sessionsobjekt med användarens nyttolast. Detta gör att Next.js kan återge användarinformationen på klientsidan av appen, i det här fallet e-postmeddelandet.

Anpassade autentiseringssystem vs. Färdiga lösningar som NextAuth.js

Att välja mellan att bygga ett anpassat autentiseringssystem och att integrera en färdig att använda autentisering lösning som NextAuth.js är det viktigt att överväga kostnaden, komplexiteten och säkerheten för var och en lösning.

Om du har resurserna och expertis för att utveckla ett anpassat autentiseringssystem kan det vara det bästa sättet för dig. Men om du letar efter en färdig lösning som är enkel att implementera, säker och kostnadseffektiv kan NextAuth.js vara ett bra val att överväga. I slutändan kommer valet att bero på dina behov och preferenser.