Implementering af adgangskodeløst login i et Next.js 13-projekt med NextAuth.js og Prisma

Denne artikel vil dykke ned i de nødvendige trin for at implementere autentificering uden adgangskode i et Next.js-projekt ved hjælp af NextAuth.js-biblioteket. Derudover vil vi bruge Prisma som vores databaseadapter for at opnå dette.

Adgangskodeløs godkendelse er en innovativ tilgang, der eliminerer behovet for traditionelle brugernavn og adgangskodekombinationer. I stedet tilbyder det en mere sikker og brugervenlig godkendelsesoplevelse ved at udnytte alternative metoder, såsom magiske e-mail-links eller engangskoder sendt via SMS.

Next.js er en populær React-ramme til opbygning af webapplikationer, kendt for sin enkelhed og effektivitet. Vi kan nemt inkorporere autentificering uden adgangskode i vores projekt ved at integrere NextAuth.js, et autentificeringsbibliotek designet eksplicit til Next.js.

Derudover vil vi stole på Prisma som vores databaseadapter. Prisma er et ORM-værktøj (Object-Relational Mapping), der forenkler databaseinteraktioner ved at levere en typesikker og autogenereret forespørgselsbygger. Det understøtter flere databaser, inklusive PostgreSQL, MySQL og SQLite, hvilket gør det til et alsidigt valg til vores autentificeringsimplementering.

Gennem denne vejledning vil vi give trin-for-trin instruktioner om, hvordan du opsætter og konfigurerer adgangskodefri godkendelse ved hjælp af NextAuth.js i et Next.js-projekt. Vi vil også demonstrere, hvordan man integrerer Prisma som vores databaseadapter, hvilket muliggør problemfri kommunikation mellem vores applikation og databasen.

Vi vil nu undersøge, hvordan vi kan forbedre sikkerheden og brugeroplevelsen af ​​vores Next.js-applikation ved hjælp af adgangskodefri godkendelse og funktionerne i NextAuth.js og Prisma. Lad os begynde.

Hvad er login uden adgangskode?

Adgangskodeløst login, som navnet antyder, er en godkendelsesmetode, der fjerner behovet for traditionelle brugernavn og adgangskodekombinationer. I stedet bruger den alternative metoder til at bekræfte en brugers identitet, såsom magiske e-mail-links eller engangskoder sendt via SMS. Denne tilgang giver flere fordele i forhold til traditionelle login-metoder. For det første eliminerer det risikoen for adgangskoderelaterede sårbarheder, såsom svage adgangskoder eller genbrug af adgangskoder. For det andet forenkler det brugeroplevelsen ved at fjerne behovet for at huske og indtaste komplekse adgangskoder.

For at implementere login uden adgangskode ved hjælp af magiske e-mail-links eller engangskoder, har vi brug for en SMTP-server (Simple Mail Transfer Protocol).

En SMTP-server er ansvarlig for at sende e-mails over internettet. I forbindelse med adgangskodefri godkendelse sender serveren de magiske links eller engangskoder til brugerens registrerede e-mailadresse. Når en bruger starter login-processen, genereres en e-mail indeholdende et unikt link eller kode og sendes til brugeren. Brugeren kan derefter klikke på linket eller indtaste koden for at fuldføre godkendelsesprocessen. SMTP-serveren fungerer som mellemled mellem applikationen og brugerens e-mail-tjeneste, hvilket sikrer godkendelsesmeddelelsers sikre og pålidelige levering. Ved at bruge en SMTP-server kan vi effektivt implementere login uden adgangskode og give vores brugere en problemfri godkendelsesoplevelse.

Lad os komme igang!

Først skal vi generere et friskt nyt Next.js-projekt. For at gøre dette skal du bruge følgende kommando:

npx create-next-app@latest

Når du har genereret det friske nye Next.js-projekt, kan du navigere til den nyoprettede projektmappe.

Ved at ændre biblioteket til projektet, vil du være i stand til at udforske de forskellige mapper og filer, der udgør Next.js-projektstrukturen.

At forstå projektstrukturen er afgørende for effektiv udvikling og organisering af din Next.js-applikation. Ved at henvise til den officielle dokumentation, kan du udnytte bedste praksis og få indsigt i, hvordan du strukturerer din kode, administrerer statiske aktiver og skabe genanvendelige komponenter.

Installerer vores afhængigheder

For at aktivere autentificering uden adgangskode i vores Next.js-projekt ved hjælp af NextAuth.js, skal vi først installere de nødvendige afhængigheder. Kør kommandoen yarn add next-auth nodemailer for at tilføje både NextAuth.js og nodemailer til vores projekt.

Vi bruger specifikt nodemailer, da det er et populært og alsidigt modul til at sende e-mails i Node.js. Det giver en ligetil og pålidelig måde at sende de magiske links eller engangskoder, der kræves til adgangskodefri godkendelse via e-mail.

Lad os derefter integrere Prisma som vores databaseadapter. Start med at installere de nødvendige Prisma-pakker ved hjælp af kommandoen:

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

Disse pakker vil muliggøre problemfri kommunikation mellem vores Next.js-applikation og databasen. Derudover skal vi også installere Prisma som en udviklerafhængighed ved at køre:

yarn add prisma --dev

Dette trin sikrer, at vi har de nødvendige værktøjer til at arbejde med Prisma og dets autogenererede forespørgselsbygger til databaseinteraktioner.

Ved at installere disse afhængigheder sætter vi grundlaget for implementering af adgangskodefri godkendelse ved hjælp af NextAuth.js og Prisma i vores Next.js-projekt.

Opsætning af Prisma

Det er nødvendigt at opsætte Prisma og have adgang til en SMTP-server til afsendelse af e-mail for at bruge adgangskodefri godkendelse i et Next.js-projekt. Denne vejledning vil guide dig gennem brugen af ​​din personlige Gmail-konto til at sende e-mails. Følg nedenstående trin for en vellykket opsætning.

Først skal du oprette en "prisma"-mappe i roden af ​​dit projekt. Denne mappe vil rumme de Prisma-relaterede filer og konfigurationer. Derefter, i "prisma"-mappen, skal du oprette en ny fil kaldet "schema.prisma" Skemafilen definerer strukturen af ​​din database og fungerer som en blueprint for Prismas auto-genererede kode.

Hvis du er ny til konceptet med et skema, så fortvivl ikke! Et skema angiver din databases tabeller, felter, relationer og begrænsninger. For at oprette skemaet kan du henvise til den officielle dokumentation for NextAuth.js og kopiere eksempelskemaet, der findes der. Dette skema er et udgangspunkt og kan tilpasses til dine applikationskrav.

Opret derefter en ".env"-fil i roden af ​​dit projekt. Denne fil gemmer dine miljøvariabler, inklusive de nødvendige konfigurationer til din SMTP-server. For at udfylde filen ".env" kan du kopiere eksempelkonfigurationerne nedenfor. Sørg for at indtaste dine Gmail-kontooplysninger og SMTP-serverindstillinger i de tilsvarende felter.

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

Ved at følge disse trin har du konfigureret Prisma og konfigureret SMTP-serveren til at sende e-mails ved hjælp af din Gmail-konto. Disse forberedelser er afgørende for at aktivere det adgangskodeløse godkendelsesflow i dit Next.js-projekt.

Bemærk

Du skal oprette en app-adgangskode, hvis du har aktiveret tofaktorgodkendelse (2FA) for din Google-konto. En app-adgangskode er en særskilt adgangskode, der giver adgang til bestemte apps eller enheder uden at afsløre adgangskoden til din primære Google-konto. Følg instruktionerne nedenfor for at generere en app-adgangskode.

1. Gå til siden med Google-kontoindstillinger ved at besøge https://myaccount.google.com/.

2. Naviger til fanen "Sikkerhed".

3. Kig efter sektionen "2FA", rul ned og vælg "App-adgangskoder".

4. Du bliver muligvis bedt om at indtaste adgangskoden til din Google-konto igen til sikkerhedsbekræftelse.

5. Under rullemenuen "Vælg app" skal du vælge "Mail" eller "Andet (brugerdefineret navn)".

• Hvis indstillingen "Mail" er tilgængelig, skal du vælge den.

• Hvis indstillingen "Mail" ikke er tilgængelig, skal du vælge "Andet (brugerdefineret navn)" og angive et brugerdefineret navn til identifikation.

6. Klik på knappen "Generer" eller "Generér adgangskode".

7. Google genererer en unik app-adgangskode til dig. Noter denne adgangskode, da vi vil bruge denne i vores applikation til at sende e-mails.

8. Brug denne genererede app-adgangskode i din Next.js-applikations SMTP-serverkonfiguration. Erstat din almindelige Gmail-kontoadgangskode med denne app-adgangskode.

Dette sikrer, at selv med 2FA aktiveret, kan din applikation sikkert sende e-mails ved hjælp af din Gmail-konto.

PostgreSQL ved hjælp af Supabase

Før vi kan fortsætte, skal vi sikre os, at databasen for vores projekt fungerer korrekt. Til denne demo anbefaler vi at bruge Supabase PostgreSQL-databasen. For at komme i gang med et Supabase-projekt og få PostgreSQL-forbindelses-URL'en skal du følge disse trin:

1. Gå til supabase.io og log ind på din konto eller opret en ny, hvis du ikke har en.

2. Når du er logget ind, bliver du dirigeret til Supabase-dashboardet. Klik på "Opret nyt projekt" for at starte et nyt projekt.

3. Navngiv dit projekt, og vælg det område, der er tættest på din nuværende placering. Husk din adgangskode, du skal bruge den senere.

4. Når du har oprettet projektet, føres du til projektets dashboard. Klik på "Database" i venstre sidebjælke for at få adgang til databaseindstillingerne.

5. I afsnittet "Database" finder du PostgreSQL-forbindelsens URL. Denne URL indeholder alle de nødvendige oplysninger for at oprette forbindelse til dit Supabase-projekts database, såsom vært, port, databasenavn, brugernavn og adgangskode. Det vil blive vist i formatet: postgres://<brugernavn>:<adgangskode>@<host>:<port>/<database>

6. Kopier PostgreSQL-forbindelsens URL og hold den sikker. Du skal bruge den for at etablere en forbindelse mellem din applikation og Supabase-databasen.

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

Lad os nu sikre, at vi genererer vores Prisma-klient ved at køre følgende kommando: `npx prisma generer`.

Prisma Client er en databaseklient, der genereres automatisk baseret på dit skema. Prisma-klienten genereres som standard i mappen `node_modules/.prisma/client`, men du kan [specificere en brugerdefineret placering om nødvendigt](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Dernæst vil vi fortsætte med at oprette vores indledende migrering. Kør følgende kommando: `npx prisma migrate dev`. Du kan give hver migration et beskrivende navn.

I Prisma er en migration en metode, der bruges til at styre justeringer af dit databaseskema, efterhånden som tiden skrider frem. Det lader dig ændre din databasestruktur uden at miste nogen allerede eksisterende data. Disse migreringer er afgørende, da de sikrer, at dit databaseskema stemmer overens med din applikations behov, efterhånden som de ændrer sig. Med Prismas migreringsværktøj kan du nemt versionere, anvende og vende tilbage til disse ændringer, hvilket forenkler teamwork og opretholder et ensartet databaseskema på tværs af forskellige miljøer.

Nu, hvis vi tjekker vores database, vil vi være i stand til at se ændringerne fra vores indledende migrering afspejlet i databasesektionen.

Ved at udføre den indledende migrering har vi anvendt ændringerne til vores databaseskema som defineret i migreringsscriptet.

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

### Opsætning af NextAuthJS med Prisma Adapter

I en Next.js-applikation bruger NextAuthJS catch-all-ruten, også kendt som jokertegn eller fallback-rute, til at administrere godkendelsesanmodninger. Denne dynamiske rute er defineret ved hjælp af det filbaserede routingsystem i Next.js.

Opret en mappe med navnet "**api**" i din "**app**"-mappe. I mappen "**api**" skal du oprette en "**auth**"-mappe. Inde i mappen "**auth**" skal du oprette en opsamlingsrute kaldet "**[...nextauth]**" som en mappe. Til sidst skal du oprette en "**route.ts**"-fil inde i catch-all-rutemappen og tilføje følgende kode.

```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 };

I catch-all-rutefilen importerer vi NextAuthJS-biblioteket og opsætter godkendelsesmuligheder, udbydere og konfigurationer. NextAuthJS håndterer parsing af indgående anmodninger, identificerer den nødvendige godkendelseshandling og udfører den passende logik i henhold til de specificerede muligheder.

Den medfølgende kode sætter NextAuthJS op med Prisma-adapteren til godkendelse ved hjælp af en e-mail-udbyder. Lad os forklare hvert udsagn:

1. Import:

• PrismaAdapter og PrismaClient importeres fra henholdsvis @next-auth/prisma-adapter og @prisma/client. Disse bruges til at integrere NextAuthJS med Prisma.

• NextAuth er importeret fra next-auth og er hovedbiblioteket til håndtering af godkendelse i Next.js-applikationer.

• EmailProvider importeres fra next-auth/providers/email og bruges som udbyder til e-mail-baseret godkendelse.

2. Prisma-opsætning:

• En forekomst af PrismaClient oprettes ved hjælp af new PrismaClient(). Dette muliggør kommunikation med Prisma ORM og den underliggende database.

3. Godkendelsesmuligheder:

• authOptions er et objekt, der definerer konfigurationen for godkendelse i NextAuthJS.

• Egenskaben adapter er indstillet til PrismaAdapter(prisma), som forbinder NextAuthJS med Prisma ved hjælp af PrismaAdapter.

• Arrayet providers indeholder en enkelt udbyder, EmailProvider. Den er konfigureret med de nødvendige e-mail-serveroplysninger og fra e-mailadressen.

4. NextAuth Handler:

• Funktionen NextAuth kaldes med authOptions som argument, hvilket skaber en godkendelsesbehandler.

• Den resulterende handler tildeles til variablen handler.

5. Eksporter:

• handler eksporteres som GET og POST for at understøtte både HTTP GET- og POST-anmodninger.

Lad os nu køre vores server og teste funktionaliteten. Start først udviklingsserveren ved at køre yarn dev. Åbn derefter din browser og besøg localhost:3000 for at se applikationen i aktion.

For at teste godkendelsesfunktionaliteten, besøg localhost:3000/api/auth/signin. Her vil du opleve magien ved NextAuthJS. Den medfølgende skabelon, der følger med NextAuthJS, muliggør en login-proces uden adgangskode. Indtast en gyldig e-mailadresse for at prøve det.

Når du har indsendt e-mailen, håndterer NextAuthJS processen bag kulisserne. Først vil den generere og sende en e-mail indeholdende et unikt login-link til den angivne e-mailadresse. Dette link fungerer som et sikkert godkendelsestoken for brugeren. Derefter, når brugeren klikker på linket, vil NextAuthJS validere tokenet og autentificere brugeren.

Denne adgangskodeløse login-funktion forbedrer sikkerheden og brugeroplevelsen ved at eliminere behovet for adgangskoder. Brugere kan hurtigt og sikkert få adgang til deres konti ved blot at klikke på linket modtaget via e-mail. Det strømliner login-processen og reducerer risikoen for adgangskode-relaterede sårbarheder.

Når en bruger klikker på login-e-mailen, der er genereret af NextAuthJS og bliver godkendt, sker der flere handlinger bag kulisserne for at lette en problemfri login-oplevelse.

1. E-mail-linkvalidering: Når brugeren klikker på login-linket, validerer NextAuthJS det godkendelsestoken, der er indlejret i linket. Dette token sikrer sikkerheden og integriteten af ​​godkendelsesprocessen.

2. Godkendelsesproces: Efter vellykket tokenvalidering identificerer NextAuthJS brugeren og fuldfører godkendelsesprocessen. Den verificerer brugerens identitet baseret på det angivne token og eventuelle yderligere konfigurerede godkendelsesfaktorer, såsom multifaktorgodkendelse.

3. Sessionsoprettelse: Efter vellykket godkendelse opretter NextAuthJS en session for brugeren. En session er en vedvarende tilstand, der repræsenterer brugerens godkendelsesstatus og giver dem mulighed for at få adgang til beskyttede ressourcer uden at skulle genautentificere for efterfølgende anmodninger.

4. Cookies: NextAuthJS sætter sikre kun HTTP-cookies i brugerens browser for at administrere sessionen. Disse cookies spiller en afgørende rolle i at opretholde brugerens autentificerede tilstand på tværs af flere anmodninger. Cookies inkluderer typisk en sessionscookie og eventuelt en refresh token-cookie, afhængigt af godkendelseskonfigurationen.

1. Sessionscookie: Sessionscookien indeholder en sessionsidentifikator (f.eks. en tilfældigt genereret streng), der unikt identificerer brugerens session. Det hjælper NextAuthJS med at knytte efterfølgende anmodninger til den korrekte session og bruger.

2. CSRF Token Cookie: NextAuthJS sætter en CSRF (Cross-Site Request Forgery) token-cookie for at beskytte mod CSRF-angreb. CSRF-tokenet er en unik værdi genereret af NextAuthJS og gemt i cookien. Det bruges til at validere og verificere ægtheden af ​​efterfølgende anmodninger fra brugeren. Når brugeren indsender formularer eller udfører følsomme handlinger, inkluderes CSRF-tokenet i anmodningsheaderne eller brødteksten for at sikre, at anmodningen stammer fra den godkendte brugers session og ikke fra en ondsindet kilde.

3. Callback URL-cookie: NextAuthJS indstiller en callback-URL-cookie til at gemme den originale URL, som brugeren forsøgte at få adgang til, før den blev omdirigeret til godkendelsesflowet. Denne cookie hjælper NextAuthJS med at omdirigere brugeren tilbage til den ønskede side efter vellykket godkendelse. Det sikrer en smidig brugeroplevelse ved problemfrit at returnere brugeren til deres tilsigtede destination i stedet for en generisk landingsside.

Ved at bruge sikre HTTP-only cookies sikrer NextAuthJS, at godkendelsestilstanden forbliver sikker og manipulationssikker. Cookies er krypteret, hvilket forhindrer uautoriseret adgang eller modifikation af ondsindede aktører.

Fantastisk arbejde med at integrere NextAuthJS med Prisma-adapter i din Next.js-applikation! Med den lethed og tilpasningsevne, som NextAuthJS giver, har du nu et pålideligt autentificeringssystem.

Tjek GitHub-lageret, der er linket nedenfor, for koden, der bruges i denne guide: https://github.com/codelabsacademy/next-auth-guide.

Men hvorfor stoppe her? Hvis du brænder for webudvikling og ivrig efter at forbedre dine færdigheder, kan du overveje at ansøge om vores webudviklings bootcamp. Vores bootcamp tilbyder en omfattende læringsoplevelse, der udstyrer dig med den viden og de praktiske færdigheder, der er nødvendige for at udmærke sig i den dynamiske verden af ​​webudvikling.

Ved at deltage i vores bootcamp får du praktisk erfaring med banebrydende teknologier, arbejder på projekter i den virkelige verden og modtager personlig vejledning fra brancheeksperter. Uanset om du er nybegynder eller erfaren udvikler, er vores program designet til at tage dine webudviklingsfærdigheder til næste niveau.

Gå ikke glip af denne mulighed for at fremskynde din webudviklingsrejse. Ansøg om vores webudviklings-bootcamp i dag og frigør dit fulde potentiale inden for det spændende felt af webudvikling. Lad os sammen bygge fantastiske digitale oplevelser og forme fremtiden for nettet.