Implementatie van wachtwoordloos inloggen in een Next.js 13-project met NextAuth.js en Prisma

In dit artikel wordt dieper ingegaan op de stappen die nodig zijn om wachtwoordloze authenticatie te implementeren in een Next.js-project met behulp van de NextAuth.js-bibliotheek. Bovendien zullen we Prisma gebruiken als onze databaseadapter om dit te bereiken.

Wachtwoordloze authenticatie is een innovatieve aanpak die de noodzaak van traditionele combinaties van gebruikersnaam en wachtwoord elimineert. In plaats daarvan biedt het een veiligere en gebruiksvriendelijkere authenticatie-ervaring door gebruik te maken van alternatieve methoden, zoals magische e-maillinks of eenmalige codes die via sms worden verzonden.

Next.js is een populair React-framework voor het bouwen van webapplicaties, bekend om zijn eenvoud en efficiëntie. We kunnen eenvoudig wachtwoordloze authenticatie in ons project opnemen door NextAuth.js te integreren, een authenticatiebibliotheek die expliciet is ontworpen voor Next.js.

Bovendien zullen we vertrouwen op Prisma als onze databaseadapter. Prisma is een ORM-tool (Object-Relational Mapping) die database-interacties vereenvoudigt door een typeveilige en automatisch gegenereerde querybuilder te bieden. Het ondersteunt meerdere databases, waaronder PostgreSQL, MySQL en SQLite, waardoor het een veelzijdige keuze is voor onze authenticatie-implementatie.

In deze handleiding geven we stapsgewijze instructies voor het instellen en configureren van wachtwoordloze authenticatie met behulp van NextAuth.js in een Next.js-project. We zullen ook demonstreren hoe we Prisma kunnen integreren als onze databaseadapter, waardoor naadloze communicatie tussen onze applicatie en de database mogelijk wordt.

We zullen nu onderzoeken hoe we de beveiliging en gebruikerservaring van onze Next.js-applicatie kunnen verbeteren met behulp van wachtwoordloze authenticatie en de mogelijkheden van NextAuth.js en Prisma. Laten we beginnen.

Wat is wachtwoordloos inloggen?

Wachtwoordloos inloggen is, zoals de naam al doet vermoeden, een authenticatiemethode die de noodzaak van traditionele gebruikersnaam- en wachtwoordcombinaties overbodig maakt. In plaats daarvan gebruikt het alternatieve manieren om de identiteit van een gebruiker te verifiëren, zoals magische e-maillinks of eenmalige codes die via sms worden verzonden. Deze aanpak biedt verschillende voordelen ten opzichte van traditionele inlogmethoden. Ten eerste elimineert het het risico op wachtwoordgerelateerde kwetsbaarheden, zoals zwakke wachtwoorden of hergebruik van wachtwoorden. Ten tweede vereenvoudigt het de gebruikerservaring door de noodzaak weg te nemen om complexe wachtwoorden te onthouden en in te voeren.

Om wachtwoordloos inloggen te implementeren met behulp van magische e-maillinks of eenmalige codes, hebben we een SMTP-server (Simple Mail Transfer Protocol) nodig.

Een SMTP-server is verantwoordelijk voor het verzenden van e-mails via internet. In het kader van wachtwoordloze authenticatie stuurt de server de magische links of eenmalige codes naar het geregistreerde e-mailadres van de gebruiker. Wanneer een gebruiker het inlogproces start, wordt er een e-mail met een unieke link of code gegenereerd en naar de gebruiker verzonden. De gebruiker kan vervolgens op de link klikken of de code invoeren om het authenticatieproces te voltooien. De SMTP-server fungeert als tussenpersoon tussen de applicatie en de e-mailservice van de gebruiker en zorgt ervoor dat authenticatieberichten veilig en betrouwbaar worden afgeleverd. Door gebruik te maken van een SMTP-server kunnen we effectief inloggen zonder wachtwoord implementeren en onze gebruikers een naadloze authenticatie-ervaring bieden.

Laten we beginnen!

Eerst moeten we een nieuw Next.js-project genereren. Gebruik hiervoor de volgende opdracht:

npx create-next-app@latest

Nadat u het nieuwe Next.js-project heeft gegenereerd, kunt u naar de nieuw gemaakte projectmap navigeren.

Door de map in het project te veranderen, kunt u de verschillende mappen en bestanden verkennen waaruit de Next.js-projectstructuur bestaat.

Het begrijpen van de projectstructuur is essentieel voor een effectieve ontwikkeling en organisatie van uw Next.js-applicatie. Door de officiële documentatie te raadplegen, kunt u gebruik maken van best practices en inzicht krijgen in hoe u uw code kunt structureren, statische assets kunt beheren en herbruikbare componenten maken.

Onze afhankelijkheden installeren

Om wachtwoordloze authenticatie in ons Next.js-project met NextAuth.js in te schakelen, moeten we eerst de vereiste afhankelijkheden installeren. Voer het commando yarn add next-auth nodemailer uit om zowel NextAuth.js als nodemailer aan ons project toe te voegen.

We gebruiken specifiek nodemailer omdat het een populaire en veelzijdige module is voor het verzenden van e-mails in Node.js. Het biedt een eenvoudige en betrouwbare manier om de magische links of eenmalige codes die nodig zijn voor wachtwoordloze authenticatie via e-mail te verzenden.

Laten we vervolgens Prisma integreren als onze databaseadapter. Begin met het installeren van de vereiste Prisma-pakketten met behulp van de opdracht:

yarn add @prisma/client @next-auth/prisma-adapter

Deze pakketten zorgen voor een naadloze communicatie tussen onze Next.js-applicatie en de database. Bovendien moeten we Prisma ook als een ontwikkelaarsafhankelijkheid installeren door het volgende uit te voeren:

yarn add prisma --dev

Deze stap zorgt ervoor dat we over de benodigde tools beschikken om met Prisma en de automatisch gegenereerde querybuilder voor database-interacties te werken.

Door deze afhankelijkheden te installeren, hebben we de basis gelegd voor het implementeren van wachtwoordloze authenticatie met behulp van NextAuth.js en Prisma in ons Next.js-project.

Prisma instellen

Het is noodzakelijk om Prisma in te stellen en toegang te hebben tot een SMTP-server voor het verzenden van e-mail om wachtwoordloze authenticatie te kunnen gebruiken in een Next.js-project. Deze tutorial begeleidt u bij het gebruik van uw persoonlijke Gmail-account om e-mails te verzenden. Volg de onderstaande stappen voor een succesvolle installatie.

Maak eerst een map "prisma" in de hoofdmap van uw project. Deze map bevat de Prisma-gerelateerde bestanden en configuraties. Maak vervolgens in de map "prisma" een nieuw bestand aan met de naam "schema.prisma". Het schemabestand definieert de structuur van uw database en dient als blauwdruk voor de automatisch gegenereerde code van Prisma.

Als u nog niet bekend bent met het concept van een schema, hoeft u zich geen zorgen te maken! Een schema specificeert de tabellen, velden, relaties en beperkingen van uw database. Om het schema te maken, kunt u de officiële documentatie van NextAuth.js raadplegen en het daar verstrekte voorbeeldschema kopiëren. Dit schema is een startpunt en kan worden aangepast aan uw toepassingsvereisten.

Maak vervolgens een ".env"-bestand in de hoofdmap van uw project. In dit bestand worden uw omgevingsvariabelen opgeslagen, inclusief de benodigde configuraties voor uw SMTP-server. Om het bestand ".env" in te vullen, kunt u de onderstaande voorbeeldconfiguraties kopiëren. Zorg ervoor dat u de inloggegevens van uw Gmail-account en de SMTP-serverinstellingen in de overeenkomstige velden invoert.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Door deze stappen te volgen, heeft u Prisma ingesteld en de SMTP-server geconfigureerd voor het verzenden van e-mails met uw Gmail-account. Deze voorbereidingen zijn cruciaal voor het mogelijk maken van de wachtwoordloze authenticatiestroom in uw Next.js-project.

Opmerking

U moet een app-wachtwoord maken als u twee-factor-authenticatie (2FA) heeft ingeschakeld voor uw Google-account. Een app-wachtwoord is een afzonderlijk wachtwoord dat toegang geeft tot bepaalde apps of apparaten zonder dat het wachtwoord van uw primaire Google-account openbaar wordt gemaakt. Volg de onderstaande instructies om een ​​app-wachtwoord te genereren.

1. Ga naar de pagina met Google-accountinstellingen door naar https://myaccount.google.com/ te gaan.

2. Navigeer naar het tabblad "Beveiliging".

3. Zoek naar het gedeelte "2FA", scroll naar beneden en selecteer "App-wachtwoorden".

4. Mogelijk wordt u gevraagd het wachtwoord van uw Google-account opnieuw in te voeren ter veiligheidsverificatie.

5. Kies in de vervolgkeuzelijst 'App selecteren' de optie 'Mail' of 'Anders (aangepaste naam)'.

• Als de optie "Mail" beschikbaar is, selecteert u deze.

• Als de optie "Mail" niet beschikbaar is, kiest u "Anders (aangepaste naam)" en geeft u een aangepaste naam op ter identificatie.

6. Klik op de knop "Genereren" of "Wachtwoord genereren".

7. Google genereert een uniek app-wachtwoord voor u. Noteer dit wachtwoord, want we zullen dit gebruiken in onze applicatie voor het verzenden van e-mails.

8. Gebruik dit gegenereerde app-wachtwoord in de SMTP-serverconfiguratie van uw Next.js-applicatie. Vervang het wachtwoord van uw normale Gmail-account door dit app-wachtwoord.

Dit zorgt ervoor dat uw applicatie, zelfs als 2FA is ingeschakeld, veilig e-mails kan verzenden via uw Gmail-account.

PostgreSQL met Supabase

Voordat we verder kunnen gaan, moeten we ervoor zorgen dat de database voor ons project correct functioneert. Voor deze demo raden wij u aan de Supabase PostgreSQL-database te gebruiken. Volg deze stappen om aan de slag te gaan met een Supabase-project en de PostgreSQL-verbindings-URL te verkrijgen:

1. Ga naar supabase.io en log in op uw account of maak een nieuw account als u er nog geen heeft.

2. Zodra u bent ingelogd, wordt u doorgestuurd naar het Supabase dashboard. Klik op "Nieuw project maken" om een ​​nieuw project te starten.

3. Geef uw project een naam en selecteer de regio die het dichtst bij uw huidige locatie ligt. Onthoud uw wachtwoord, u heeft het later nodig.

4. Wanneer u het project heeft aangemaakt, wordt u naar het projectdashboard geleid. Klik op "Database" in de linkerzijbalk om toegang te krijgen tot de database-instellingen.

5. In het gedeelte 'Database' vindt u de PostgreSQL-verbindings-URL. Deze URL bevat alle benodigde informatie om verbinding te maken met de database van uw Supabase-project, zoals de host, poort, databasenaam, gebruikersnaam en wachtwoord. Het wordt weergegeven in het formaat: postgres://<gebruikersnaam>:<wachtwoord>@<host>:<poort>/<database>

6. Kopieer de PostgreSQL-verbindings-URL en bewaar deze veilig. U heeft deze nodig om een ​​verbinding tot stand te brengen tussen uw applicatie en de Supabase database.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Laten we er nu voor zorgen dat we onze Prisma-client genereren door de volgende opdracht uit te voeren: `npx prisma genereer`.

De Prisma Client is een databaseclient die automatisch wordt gegenereerd op basis van uw schema. Standaard wordt de Prisma Client gegenereerd in de map `node_modules/.prisma/client`, maar u kunt [indien nodig een aangepaste locatie opgeven](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Vervolgens gaan we verder met het maken van onze eerste migratie. Voer het volgende commando uit: `npx prisma migreer dev`. U kunt elke migratie een beschrijvende naam geven.

In Prisma is een migratie een methode die wordt gebruikt om aanpassingen aan uw databaseschema naarmate de tijd vordert te beheren. Hiermee kunt u uw databasestructuur wijzigen zonder reeds bestaande gegevens te verliezen. Deze migraties zijn van cruciaal belang omdat ze ervoor zorgen dat uw databaseschema aansluit bij de behoeften van uw applicatie wanneer deze veranderen. Met de migratietool van Prisma kunt u deze wijzigingen gemakkelijk versieleren, toepassen en ongedaan maken, waardoor teamwerk wordt vereenvoudigd en een uniform databaseschema in verschillende omgevingen wordt gehandhaafd.

Als we nu onze database controleren, kunnen we de veranderingen ten opzichte van onze initiële migratie weerspiegeld zien in de databasesectie.

Door de initiële migratie uit te voeren, hebben we de wijzigingen toegepast op ons databaseschema zoals gedefinieerd in het migratiescript.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### NextAuthJS instellen met Prisma Adapter

In een Next.js-toepassing gebruikt NextAuthJS de catch-all-route, ook wel bekend als de wildcard- of fallback-route, om authenticatieverzoeken te beheren. Deze dynamische route wordt gedefinieerd met behulp van het op bestanden gebaseerde routeringssysteem in Next.js.

Maak een map met de naam "**api**" in uw map "**app**". Maak in de map "**api**" een map "**auth**". Maak in de map "**auth**" een verzamelroute met de naam "**[...nextauth]**" als map. Maak ten slotte een "**route.ts**"-bestand in de catch-all routemap en voeg de volgende code toe.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

In het catch-all routebestand importeren we de NextAuthJS-bibliotheek en stellen we de authenticatieopties, providers en configuraties in. NextAuthJS verzorgt het parseren van inkomende verzoeken, identificeert de noodzakelijke authenticatieactie en voert de juiste logica uit volgens de opgegeven opties.

Met de meegeleverde code wordt NextAuthJS ingesteld met de Prisma-adapter voor authenticatie via een e-mailprovider. Laten we elke verklaring uitleggen:

1. Import:

• PrismaAdapter en PrismaClient worden respectievelijk geïmporteerd uit @next-auth/prisma-adapter en @prisma/client. Deze worden gebruikt om NextAuthJS met Prisma te integreren.

• NextAuth wordt geïmporteerd uit next-auth en is de hoofdbibliotheek voor het afhandelen van authenticatie in Next.js-applicaties.

• EmailProvider wordt geïmporteerd uit next-auth/providers/email en wordt gebruikt als provider voor op e-mail gebaseerde authenticatie.

2. Prisma-opstelling:

• Er wordt een exemplaar van PrismaClient gemaakt met behulp van new PrismaClient(). Hierdoor is communicatie mogelijk met de Prisma ORM en de onderliggende database.

3. Authenticatieopties:

• authOptions is een object dat de configuratie voor authenticatie in NextAuthJS definieert.

• De eigenschap adapter is ingesteld op PrismaAdapter(prisma), die NextAuthJS verbindt met Prisma met behulp van de PrismaAdapter.

• De array providers bevat één enkele provider, EmailProvider. Het is geconfigureerd met de benodigde e-mailservergegevens en het van e-mailadres.

4. VolgendeAuth-handler:

• De functie NextAuth wordt aangeroepen met authOptions als argument, waardoor een authenticatiehandler wordt gemaakt.

• De resulterende handler wordt toegewezen aan de variabele handler.

5. Exporteren:

• handler wordt geëxporteerd als GET en POST om zowel HTTP GET- als POST-verzoeken te ondersteunen.

Laten we nu onze server draaien en de functionaliteit testen. Start eerst de ontwikkelserver door yarn dev uit te voeren. Open vervolgens uw browser en ga naar localhost:3000 om de applicatie in actie te zien.

Om de authenticatiefunctionaliteit te testen, gaat u naar localhost:3000/api/auth/signin. Hier ervaar je de magie van NextAuthJS. De meegeleverde sjabloon die bij NextAuthJS wordt geleverd, maakt een wachtwoordloos aanmeldingsproces mogelijk. Om het uit te proberen, voert u een geldig e-mailadres in.

Zodra u de e-mail heeft verzonden, zal NextAuthJS het proces achter de schermen afhandelen. Eerst wordt er een e-mail met een unieke inloglink gegenereerd en verzonden naar het opgegeven e-mailadres. Deze link dient als een veilig authenticatietoken voor de gebruiker. Wanneer de gebruiker vervolgens op de link klikt, valideert NextAuthJS het token en authenticeert de gebruiker.

Deze wachtwoordloze inlogfunctie verbetert de beveiliging en gebruikerservaring door de noodzaak van wachtwoorden te elimineren. Gebruikers hebben snel en veilig toegang tot hun accounts door eenvoudigweg op de link te klikken die ze via e-mail ontvangen. Het stroomlijnt het inlogproces en vermindert het risico op wachtwoordgerelateerde kwetsbaarheden.

Wanneer een gebruiker op de door NextAuthJS gegenereerde inlog-e-mail klikt en wordt geverifieerd, vinden er achter de schermen verschillende acties plaats om een ​​naadloze inlogervaring te vergemakkelijken.

1. E-maillinkvalidatie: wanneer de gebruiker op de inloglink klikt, valideert NextAuthJS het authenticatietoken dat in de link is ingesloten. Dit token garandeert de veiligheid en integriteit van het authenticatieproces.

2. Authenticatieproces: na succesvolle tokenvalidatie identificeert NextAuthJS de gebruiker en voltooit het authenticatieproces. Het verifieert de identiteit van de gebruiker op basis van het verstrekte token en eventuele aanvullende authenticatiefactoren die zijn geconfigureerd, zoals multi-factor authenticatie.

3. Sessie maken: na succesvolle authenticatie maakt NextAuthJS een sessie voor de gebruiker. Een sessie is een persistente status die de authenticatiestatus van de gebruiker vertegenwoordigt en hem/haar toegang geeft tot beschermde bronnen zonder dat hij zich opnieuw hoeft te authenticeren voor volgende verzoeken.

4. Cookies: NextAuthJS stelt veilige HTTP-only cookies in de browser van de gebruiker in om de sessie te beheren. Deze cookies spelen een cruciale rol bij het behouden van de geverifieerde status van de gebruiker bij meerdere verzoeken. De cookies omvatten doorgaans een sessiecookie en optioneel een vernieuwingstokencookie, afhankelijk van de authenticatieconfiguratie.

1. Sessiecookie: De sessiecookie bevat een sessie-ID (bijvoorbeeld een willekeurig gegenereerde tekenreeks) die de sessie van de gebruiker op unieke wijze identificeert. Het helpt NextAuthJS om daaropvolgende verzoeken aan de juiste sessie en gebruiker te koppelen.

2. CSRF Token Cookie: NextAuthJS stelt een CSRF (Cross-Site Request Forgery) token cookie in om te beschermen tegen CSRF-aanvallen. Het CSRF-token is een unieke waarde die wordt gegenereerd door NextAuthJS en wordt opgeslagen in de cookie. Het wordt gebruikt om de authenticiteit van daaropvolgende verzoeken van de gebruiker te valideren en te verifiëren. Wanneer de gebruiker formulieren indient of gevoelige acties uitvoert, wordt het CSRF-token opgenomen in de verzoekheaders of hoofdtekst om ervoor te zorgen dat het verzoek afkomstig is van de sessie van de geverifieerde gebruiker en niet van een kwaadwillende bron.

3. Callback URL-cookie: NextAuthJS stelt een callback-URL-cookie in om de oorspronkelijke URL op te slaan waartoe de gebruiker toegang probeerde te krijgen voordat hij werd omgeleid naar de authenticatiestroom. Deze cookie helpt NextAuthJS de gebruiker na succesvolle authenticatie terug te leiden naar de gewenste pagina. Het zorgt voor een soepele gebruikerservaring door de gebruiker naadloos terug te sturen naar de beoogde bestemming in plaats van naar een generieke landingspagina.

Door gebruik te maken van veilige HTTP-only cookies zorgt NextAuthJS ervoor dat de authenticatiestatus veilig en fraudebestendig blijft. De cookies zijn gecodeerd, waardoor ongeautoriseerde toegang of wijziging door kwaadwillende actoren wordt voorkomen.

Geweldig werk bij het succesvol integreren van NextAuthJS met Prisma-adapter in uw Next.js-applicatie! Met het gemak en de aanpasbaarheid van NextAuthJS beschikt u nu over een betrouwbaar authenticatiesysteem.

Bekijk de hieronder gelinkte GitHub-repository voor de code die in deze handleiding wordt gebruikt: https://github.com/codelabsacademy/next-auth-guide.

Maar waarom zou je hier stoppen? Als je een passie hebt voor webontwikkeling en graag je vaardigheden wilt verbeteren, overweeg dan om je aan te melden voor onze webontwikkelingsbootcamp. Onze bootcamp biedt een uitgebreide leerervaring, waardoor u de kennis en praktische vaardigheden krijgt die nodig zijn om uit te blinken in de dynamische wereld van webontwikkeling.

Door deel te nemen aan onze bootcamp, doe je praktijkervaring op met de allernieuwste technologieën, werk je aan projecten in de echte wereld en ontvang je persoonlijke begeleiding van experts uit de industrie. Of u nu een beginner of een ervaren ontwikkelaar bent, ons programma is ontworpen om uw vaardigheden op het gebied van webontwikkeling naar een hoger niveau te tillen.

Mis deze kans niet om uw webontwikkelingstraject te versnellen. Meld je vandaag nog aan voor onze webontwikkelingsbootcamp en ontgrendel je volledige potentieel op het opwindende gebied van webontwikkeling. Laten we samen geweldige digitale ervaringen bouwen en de toekomst van het internet vormgeven.