Nye opdateringer i NextAuth.js v4: Hvad du behøver at vide

Autentificering er en nøglekomponent i applikationsudvikling. Det hjælper med at beskytte brugerdata og forhindre ondsindede aktiviteter. Kort sagt bestemmer det troværdigheden af ​​en brugers identitet og sikrer, at kun autoriserede brugere kan få adgang til en applikation og dens ressourcer.

Oprettelse af et brugerdefineret godkendelsessystem kan være en tidskrævende opgave, og det er her, NextAuth.js kommer til nytte. Det giver sikker godkendelsesunderstøttelse til applikationer bygget med Next.js-rammeværket.

Hvad er NextAuth.js?

NextAuth.js er et open source letvægtsbibliotek, der giver autentificering og autorisation understøttelse af Next.js-applikationer. Det giver udviklere mulighed for hurtigt og nemt at konfigurere godkendelse og godkendelse for deres Next.js-apps. Det giver funktioner såsom godkendelse med flere udbydere, e-mail og adgangskodefri godkendelse.

Hvordan fungerer NextAuth.js i godkendelse?

NextAuth.js's godkendelsesløsning giver en klient-side API, som du kan integreres i din Next.js-applikation. Du kan bruge den til at godkende brugere med forskellige login-udbydere, som de har oprettet konti hos.

Under hætten bliver brugere omdirigeret til en udbyders login-side. Efter vellykket godkendelse returnerer udbyderen sessionsdata, der indeholder brugerens nyttelast. Denne nyttelast kan derefter autorisere adgang til applikationen og dens ressourcer.

Nye funktionsopdateringer i NextAuth.js (v4)

I december 2022 udgav NextAuth.js sin fjerde version. Denne version er blevet forbedret fra sin tidligere version, v3, med nye opdateringer og ændringer. Ændringerne fokuserer hovedsageligt på at forbedre brugen af ​​biblioteket i godkendelsesprocessen.

1. Opdateringer til useSession Hook

Du kan bruge useSession hook til at kontrollere, om en bruger er logget ind eller ej. I denne nye version returnerer useSession hook et objekt, der giver en mere ligetil måde at teste tilstande på, takket være tilføjelsen af ​​statusindstillingen. Se koden nedenfor:

importere { useSession } fra"next-auth/react"
eksportStandardfungereKomponent() {
konst { data: session, status } = useSession()
hvis (status "godkendt") { 
Vend tilbage<s>Logget ind som {session.user.email}s>
 }
Vend tilbage<s> Ikke logget ind s>
}

2. SessionProvider-kontekst bliver obligatorisk

Den nye version fire påbyder brugen af ​​SessionProvider-konteksten. Det betyder, at du bliver nødt til at indpakke din app med useSession-udbyderen. NextAuth.js anbefaler, at du pakker din app ind i _app.jsx fil.

Derudover er clientMaxAge-metoden blevet erstattet med refetchInterval. Dette vil gøre det lettere at hente sessionen med jævne mellemrum i baggrunden.

importere { SessionProvider } fra"next-auth/react"
eksportStandardfungereApp({
 Komponent, pageProps: { session, ...pageProps }, 
}) {
Vend tilbage ( 
<SessionProvidersession={session}genhentInterval={5 * 60}>
<Komponent {...siderekvisitter} />SessionProvider>
 )
}

3. Importer udbydere individuelt

NextAuth.js tilbyder flere udbydertjenester, som du kan bruge til at logge på en bruger. De omfatter:

• Brug af indbyggede OAuth-udbydere (f.eks. GitHub, Google).
• Brug af e-mail-udbyder.

I denne nye version skal du importere hver udbyder individuelt.

importere GoogleProvider fra"next-auth/providers/google"
importere Auth0Provider fra"next-auth/providers/auth0";

4. Andre mindre ændringer

• Importen på klientsiden er blevet omdøbt til next-auth/react from next-auth/client.
• Ændringer i argumenterne for tilbagekaldsmetoderne:

  login({ bruger, konto, profil, e-mail, legitimationsoplysninger })
  session({ session, token, bruger })
  jwt({ token, bruger, konto, profil, isNewUser })

Kom godt i gang med NextAuth.js i godkendelse

Følg nedenstående trin for at integrere NextAuth.js i dine Next.js-applikationer:

1. Opret en Next.js-applikation ved at køre denne kommando: npx opret-næste-app
2. Løb npm installer næste auth i din terminal for at installere NextAuth.js i din Next.js-applikation.
3. Besøg NextAuth.js officiel dokumentation og vælg dine foretrukne udbydere fra listen over de understøttede. Derefter skal du oprette en konto i udviklerkonsollen hos dine valgte udbydere og registrere din Next.js-applikation.
4. Angiv i udviklerkonsollen for din/dine valgte udbydere hjem rute URL og callback-omdirigerings-URL, gem ændringerne og kopier ClientID og Klientens hemmelighed.
5. I din Next.js-applikations rodmappe skal du oprette en .env-fil til at holde Klient-id og Klientens hemmelighed.
6. Til sidst, i mappen /pages/api, opret en ny mappe kaldet auth. I godkendelsesmappen skal du oprette en ny fil og navngive den [...nextauth].js. Tilføj koden nedenfor i den oprettede fil. Koden viser NextAuth.js klientside-API ved hjælp af en Google-udbyder:

importere GoogleProvider fra"next-auth/providers/google";
udbydere: [
 GoogleProvider({
klient-id: behandle.env.GOOGLE_CLIENT_ID,
klienthemmelighed: behandle.env.GOOGLE_CLIENT_SECRET
 })
]

Du kan nu gå videre og bygge en login-godkendelsesside. Her er en DOM-gengivelse for en login-komponent:

importere Reagere fra'reagere';
importere { useSession, logIn, signOut } fra"next-auth/react"
eksportStandardfungereKomponent() {
konst { data: session } = useSession()
 if (session) {
Vend tilbage (
<>
<s> Logget ind som {session.user.email} s>
<knappåKlik={() => signOut()}>Log udknap>

 )
 }
Vend tilbage (
<>
<s> Ikke logget ind s>
<knappåKlik={() => signIn()}>Log indknap>

 )
}

Det useSession Hook får adgang til det aktuelle brugersessionsobjekt. Når en bruger logger ind og er godkendt af Google, returneres et sessionsobjekt med brugerens nyttelast. Dette giver Next.js mulighed for at gengive brugeroplysningerne på klientsiden af ​​appen, i dette tilfælde e-mailen.

Brugerdefinerede godkendelsessystemer vs. Klar-til-brug-løsninger såsom NextAuth.js

Vælg mellem at bygge et brugerdefineret autentificeringssystem og integrere en klar-til-brug-godkendelse løsning såsom NextAuth.js, er det vigtigt at overveje omkostningerne, kompleksiteten og sikkerheden for hver enkelt løsning.

Hvis du har ressourcerne og ekspertisen til at udvikle et tilpasset godkendelsessystem, kan det være den bedste tilgang for dig. Men hvis du leder efter en out-of-the-box løsning, der er nem at implementere, sikker og omkostningseffektiv, kan NextAuth.js være et godt valg at overveje. I sidste ende vil valget afhænge af dine behov og præferencer.