Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Autentisering er en nøkkelkomponent i applikasjonsutvikling. Det bidrar til å beskytte brukerdata og forhindre ondsinnede aktiviteter. Enkelt sagt, det bestemmer troverdigheten til en brukers identitet, og sikrer at bare autoriserte brukere har tilgang til en applikasjon og dens ressurser.

Å lage et tilpasset autentiseringssystem kan være en tidkrevende oppgave, og det er her NextAuth.js kommer godt med. Det gir sikker autentiseringsstøtte for applikasjoner bygget med Next.js-rammeverket.

Hva er NextAuth.js?

NextAuth.js er et lettvektsbibliotek med åpen kildekode som gir autentisering og autorisasjon støtte for Next.js-applikasjoner. Det lar utviklere raskt og enkelt sette opp autentisering og autorisasjon for Next.js-appene deres. Den gir funksjoner som autentisering med flere leverandører, e-post og passordløs autentisering.

Hvordan fungerer NextAuth.js i autentisering?

NextAuth.js sin autentiseringsløsning gir en klientside API som du kan integrer i Next.js-applikasjonen din. Du kan bruke den til å autentisere brukere med forskjellige påloggingsleverandører som de har opprettet kontoer med.

Under panseret blir brukere omdirigert til en leverandørs påloggingsside. Ved vellykket autentisering returnerer leverandøren øktdata som inneholder brukerens nyttelast. Denne nyttelasten kan deretter autorisere tilgang til applikasjonen og dens ressurser.

Nye funksjonsoppdateringer i NextAuth.js (v4)

I desember 2022 ga NextAuth.js ut sin fjerde versjon. Denne versjonen er forbedret fra sin tidligere versjon, v3, med nye oppdateringer og modifikasjoner. Endringene fokuserer hovedsakelig på å forbedre bruken av biblioteket i autentiseringsprosessen.

1. Oppdateringer til useSession Hook

Du kan bruke useSession-kroken for å sjekke om en bruker er pålogget eller ikke. I denne nye versjonen returnerer useSession-kroken et objekt som gir en mer enkel måte å teste tilstander på, takket være tillegget av statusalternativet. Se koden nedenfor:

import { useSession } fra"neste-auth/reager"
eksportmisligholdefunksjonKomponent() {
konst { data: session, status } = useSession()


hvis (status "autentisert") { 
komme tilbake<s>Logget på som {session.user.email}s>
 }
komme tilbake<s> Ikke pålogget s>
}

2. SessionProvider-kontekst blir obligatorisk

Den nye versjonen fire krever bruk av SessionProvider-konteksten. Dette betyr at du må pakke inn appen din med useSession-leverandøren. NextAuth.js anbefaler å pakke inn appen din i _app.jsx fil.

I tillegg har clientMaxAge-metoden blitt erstattet med refetchInterval. Dette vil gjøre det lettere å hente økten med jevne mellomrom i bakgrunnen.

import { SessionProvider } fra"neste-auth/reager"
eksportmisligholdefunksjonApp({
 Component, pageProps: { session, ...pageProps }, 
}) {
komme tilbake ( 
<SessionProviderøkt={økt}gjenhentintervall={5 * 60}>
<Komponent {...siderekvisitter} />SessionProvider>
 )
}

3. Importere leverandører individuelt

NextAuth.js tilbyr flere leverandørtjenester som du kan bruke til å logge på en bruker. De inkluderer:

  • Bruk av innebygde OAuth-leverandører (f.eks. GitHub, Google).
  • Bruker e-postleverandør.

I denne nye versjonen må du importere hver leverandør individuelt.

import Google Provider fra"next-auth/providers/google"
import Auth0Provider fra"next-auth/providers/auth0";

4. Andre mindre endringer

  • Importen på klientsiden har fått nytt navn til next-auth/react from next-auth/client.
  • Endringer i argumentene til tilbakeringingsmetodene: 
    pålogging({ bruker, konto, profil, e-post, legitimasjon })
    økt({ økt, token, bruker })
    jwt({ token, bruker, konto, profil, isNewUser })

Komme i gang med NextAuth.js i autentisering

Følg trinnene nedenfor for å integrere NextAuth.js i Next.js-applikasjonene dine:

  1. Opprett en Next.js-applikasjon ved å kjøre denne kommandoen: npx opprette-neste-app
  2. Løpe npm install next-auth i terminalen for å installere NextAuth.js i Next.js-applikasjonen.
  3. Besøk NextAuth.js offisiell dokumentasjon og velg dine foretrukne leverandør(er) fra listen over de som støttes. Deretter oppretter du en konto i utviklerkonsollen til de valgte leverandørene og registrerer Next.js-applikasjonen din.
  4. I utviklerkonsollen til de valgte leverandørene, spesifiser hjem rute URL og tilbakeringingsadresse for omdirigering, lagre endringene og kopier Klient-ID og Klienthemmelighet.
  5. I rotkatalogen for Next.js-applikasjonen oppretter du en .env-fil for å holde klient-ID og Klienthemmelighet.
  6. Til slutt, i /pages/api-katalogen, opprett en ny mappe kalt auth. I auth-mappen oppretter du en ny fil og gir den navnet [...nextauth].js. Legg til koden nedenfor i filen som er opprettet. Koden viser NextAuth.js klientside-API ved bruk av en Google-leverandør: 
import Google Provider fra"next-auth/providers/google";
leverandører: [
 GoogleProvider({
klient-ID: prosess.env.GOOGLE_CLIENT_ID,
klienthemmelighet: prosess.env.GOOGLE_CLIENT_SECRET
 })
]

Du kan nå gå videre og bygge en påloggingsautentiseringsside. Her er en DOM-gjengivelse for en påloggingskomponent:

import Reagere fra'reagere';
import { useSession, signIn, signOut } fra"neste-auth/reager"
eksportmisligholdefunksjonKomponent() {
konst { data: session } = useSession()


 if (økt) {
komme tilbake (
<>
<s> Logget på som {session.user.email} s>
<knappved trykk={() => signOut()}>Logg avknapp>

 )
 }
komme tilbake (
<>
<s> Ikke pålogget s>
<knappved trykk={() => signIn()}>Logg påknapp>

 )
}

De useSession Hook får tilgang til gjeldende brukersesjonsobjekt. Når en bruker logger på og er autentisert av Google, returneres et øktobjekt med brukerens nyttelast. Dette gjør at Next.js kan gjengi brukerdetaljene på klientsiden av appen, for dette tilfellet e-posten.

Egendefinerte autentiseringssystemer vs. Klar-til-bruk-løsninger som NextAuth.js

Velge mellom å bygge et tilpasset autentiseringssystem og å integrere en klar til bruk autentisering løsning som NextAuth.js, er det viktig å vurdere kostnadene, kompleksiteten og sikkerheten til hver løsning.

Hvis du har ressursene og ekspertisen til å utvikle et tilpasset autentiseringssystem, kan det være den beste tilnærmingen for deg. Men hvis du leter etter en klar løsning som er enkel å implementere, sikker og kostnadseffektiv, kan NextAuth.js være et godt valg å vurdere. Til syvende og sist vil valget avhenge av dine behov og preferanser.