Verificatie is een belangrijk onderdeel van de ontwikkeling van applicaties. Het helpt gebruikersgegevens te beschermen en kwaadaardige activiteiten te voorkomen. Simpel gezegd, het bepaalt de geloofwaardigheid van de identiteit van een gebruiker en zorgt ervoor dat alleen geautoriseerde gebruikers toegang hebben tot een applicatie en zijn bronnen.
Het maken van een aangepast authenticatiesysteem kan een tijdrovende taak zijn, en dit is waar NextAuth.js van pas komt. Het biedt veilige authenticatie-ondersteuning voor applicaties die zijn gebouwd met het Next.js-framework.
Wat is NextAuth.js?
VolgendeAuth.js is een open-source lichtgewicht bibliotheek die biedt authenticatie en authorisatie ondersteuning voor Next.js-toepassingen. Hiermee kunnen ontwikkelaars snel en eenvoudig authenticatie en autorisatie instellen voor hun Next.js-apps. Het biedt functies zoals authenticatie met meerdere providers, e-mail en wachtwoordloze authenticatie.
Hoe werkt NextAuth.js bij authenticatie?
De authenticatieoplossing van NextAuth.js biedt een client-side API die u kunt gebruiken integreren in uw Next.js-toepassing. U kunt het gebruiken om gebruikers te verifiëren met verschillende aanmeldingsproviders waarmee ze accounts hebben gemaakt.
Onder de motorkap worden gebruikers omgeleid naar de inlogpagina van een provider. Na succesvolle authenticatie retourneert de provider sessiegegevens die de payload van de gebruiker bevatten. Deze payload kan vervolgens toegang tot de applicatie en zijn bronnen autoriseren.
Nieuwe functie-updates in NextAuth.js (v4)
In december 2022 bracht NextAuth.js zijn vierde versie uit. Deze versie is verbeterd ten opzichte van de eerdere versie, v3, met nieuwe updates en aanpassingen. De wijzigingen zijn vooral gericht op het verbeteren van het gebruik van de bibliotheek in het authenticatieproces.
1. Updates voor de useSession Hook
U kunt de useSession-hook gebruiken om te controleren of een gebruiker is aangemeld of niet. In deze nieuwe versie retourneert de useSession-hook een object dat een eenvoudigere manier biedt om statussen te testen, dankzij de toevoeging van de statusoptie. Zie onderstaande code:
importeren { gebruikSessie } van"volgende-authenticatie/reageren"exporterenstandaardfunctieOnderdeel() {
const { gegevens: sessie, status } = useSession()als (toestand "geverifieerd") {
opbrengst<P>Ingelogd als {session.user.email}P>
}
opbrengst<P> Niet ingeschreven P>
}
2. SessionProvider-context wordt verplicht
De nieuwe versie vier stelt het gebruik van de SessionProvider-context verplicht. Dit betekent dat u uw app moet verpakken met de useSession Provider. NextAuth.js raadt aan om uw app in de _app.jsx bestand.
Bovendien is de methode clientMaxAge vervangen door refetchInterval. Dit maakt het gemakkelijker om de sessie periodiek op de achtergrond op te halen.
importeren { SessieProvider } van"volgende-authenticatie/reageren"
exporterenstandaardfunctieapp({
Component, pageProps: { session, ...pageProps },
}) {
opbrengst (
<SessieProvidersessie={sessie}refetchInterval={5 * 60}>
<Onderdeel {...paginaProps} />SessieProvider>
)
}
3. Providers afzonderlijk importeren
NextAuth.js biedt verschillende providerservices die u kunt gebruiken om een gebruiker aan te melden. Ze bevatten:
- Gebruik van ingebouwde OAuth-providers (bijv. GitHub, Google).
- E-mailprovider gebruiken.
In deze nieuwe versie moet u elke provider afzonderlijk importeren.
importeren GoogleProvider van"next-auth/providers/google"
importeren Auth0Provider van"next-auth/providers/auth0";4. Andere kleine wijzigingen
- De client-side import is hernoemd naar next-auth/react van next-auth/client.
- Wijzigingen in de argumenten van de callback-methoden:
signIn({ gebruiker, account, profiel, e-mail, referenties })
sessie({ sessie, token, gebruiker })
jwt({ token, gebruiker, account, profiel, isNieuweGebruiker})
Aan de slag met NextAuth.js in Authenticatie
Volg de onderstaande stappen om NextAuth.js te integreren in uw Next.js-applicaties:
- Maak een Next.js-toepassing door deze opdracht uit te voeren: npx create-next-app
- Loop npm install next-auth in uw terminal om NextAuth.js in uw Next.js-toepassing te installeren.
- Bezoek de VolgendeAuth.js officiële documentatie en selecteer uw voorkeursaanbieder(s) uit de lijst met ondersteunde aanbieders. Maak vervolgens een account aan in de ontwikkelaarsconsole van uw geselecteerde provider(s) en registreer uw Next.js-applicatie.
- Geef in de ontwikkelaarsconsole van uw geselecteerde provider(s) het thuisroute-URL en de callback-omleidings-URL, sla de wijzigingen op en kopieer het Klant identificatie En Cliënt geheim.
- Maak in de hoofdmap van uw Next.js-toepassing een .env-bestand om de klant identificatie En Cliënt geheim.
- Maak ten slotte in de map /pages/api een nieuwe map met de naam autoriseren. Maak in de auth-map een nieuw bestand en noem het [...nextauth].js. Voeg in het aangemaakte bestand de onderstaande code toe. De code toont NextAuth.js client-side API met behulp van een Google Provider:
importeren GoogleProvider van"next-auth/providers/google";
aanbieders: [
GoogleProvider({
klant identificatie: proces.env.GOOGLE_CLIENT_ID,
klantgeheim: proces.env.GOOGLE_CLIENT_SECRET
})
]
U kunt nu doorgaan en een login-authenticatiepagina bouwen. Hier is een DOM-weergave voor een inlogcomponent:
importeren Reageer van'Reageer';
importeren { useSession, aanmelden, afmelden} van"volgende-authenticatie/reageren"exporterenstandaardfunctieOnderdeel() {
const { gegevens: sessie } = useSession()als (sessie) {
opbrengst (
<>
<P> Ingelogd als {session.user.email} P>
<knopbij klikken={() => signOut()}>Afmeldenknop>
)
}
opbrengst (
<>
<P> Niet ingeschreven P>
<knopbij klikken={() => signIn()}>Log inknop>
)
}
De gebruikSession Hook benadert het huidige gebruikerssessie-object. Zodra een gebruiker zich aanmeldt en is geverifieerd door Google, wordt een sessieobject met de payload van de gebruiker geretourneerd. Hierdoor kan Next.js de gebruikersgegevens weergeven aan de clientzijde van de app, in dit geval de e-mail.
Aangepaste authenticatiesystemen vs. Kant-en-klare oplossingen zoals NextAuth.js
Kiezen tussen het bouwen van een authenticatiesysteem op maat of het integreren van een kant-en-klare authenticatie oplossing zoals NextAuth.js, is het belangrijk om rekening te houden met de kosten, complexiteit en veiligheid van elk oplossing.
Als u over de middelen en expertise beschikt om een aangepast authenticatiesysteem te ontwikkelen, is dat wellicht de beste aanpak voor u. Als u echter op zoek bent naar een kant-en-klare oplossing die eenvoudig te implementeren, veilig en kosteneffectief is, dan is NextAuth.js wellicht een goede keuze om te overwegen. Uiteindelijk hangt de keuze af van uw wensen en voorkeuren.
