Implementering av passordløs pålogging i et Next.js 13-prosjekt med NextAuth.js og Prisma

Denne artikkelen vil fordype seg i trinnene som trengs for å implementere passordløs autentisering i et Next.js-prosjekt ved å bruke NextAuth.js-biblioteket. I tillegg vil vi bruke Prisma som databaseadapter for å oppnå dette.

Passordløs autentisering er en innovativ tilnærming som eliminerer behovet for tradisjonelle brukernavn og passordkombinasjoner. I stedet tilbyr den en sikrere og brukervennlig autentiseringsopplevelse ved å utnytte alternative metoder, for eksempel magiske lenker på e-post eller engangskoder sendt via SMS.

Next.js er et populært React-rammeverk for å bygge webapplikasjoner, kjent for sin enkelhet og effektivitet. Vi kan enkelt innlemme passordløs autentisering i prosjektet vårt ved å integrere NextAuth.js, et autentiseringsbibliotek designet eksplisitt for Next.js.

I tillegg kommer vi til å stole på Prisma som databaseadapter. Prisma er et ORM-verktøy (Object-Relational Mapping) som forenkler databaseinteraksjoner ved å tilby en typesikker og autogenerert spørringsbygger. Den støtter flere databaser, inkludert PostgreSQL, MySQL og SQLite, noe som gjør den til et allsidig valg for autentiseringsimplementeringen vår.

Gjennom denne veiledningen vil vi gi trinnvise instruksjoner om hvordan du setter opp og konfigurerer passordløs autentisering ved å bruke NextAuth.js i et Next.js-prosjekt. Vi vil også demonstrere hvordan du integrerer Prisma som vår databaseadapter, noe som muliggjør sømløs kommunikasjon mellom vår applikasjon og databasen.

Vi vil nå utforske hvordan vi kan forbedre sikkerheten og brukeropplevelsen til Next.js-applikasjonen vår ved å bruke passordløs autentisering og funksjonene til NextAuth.js og Prisma. La oss begynne.

Hva er passordløs pålogging?

Passordløs pålogging, som navnet antyder, er en metode for autentisering som fjerner behovet for tradisjonelle brukernavn og passordkombinasjoner. I stedet bruker den alternative metoder for å bekrefte en brukers identitet, for eksempel magiske lenker på e-post eller engangskoder sendt via SMS. Denne tilnærmingen gir flere fordeler i forhold til tradisjonelle påloggingsmetoder. For det første eliminerer det risikoen for passordrelaterte sårbarheter, for eksempel svake passord eller gjenbruk av passord. For det andre forenkler det brukeropplevelsen ved å fjerne behovet for å huske og skrive inn komplekse passord.

For å implementere passordløs pålogging ved hjelp av magiske e-postlenker eller engangskoder, trenger vi en SMTP-server (Simple Mail Transfer Protocol).

En SMTP-server er ansvarlig for å sende e-poster over Internett. I sammenheng med passordløs autentisering sender serveren de magiske lenkene eller engangskodene til brukerens registrerte e-postadresse. Når en bruker starter påloggingsprosessen, genereres en e-post som inneholder en unik lenke eller kode og sendes til brukeren. Brukeren kan deretter klikke på lenken eller skrive inn koden for å fullføre autentiseringsprosessen. SMTP-serveren fungerer som mellomledd mellom applikasjonen og brukerens e-posttjeneste, og sørger for sikker og pålitelig levering av autentiseringsmeldinger. Ved å bruke en SMTP-server kan vi effektivt implementere passordløs pålogging og gi en sømløs autentiseringsopplevelse for brukerne våre.

La oss komme i gang!

Først må vi generere et ferskt nytt Next.js-prosjekt. For å gjøre dette, bruk følgende kommando:

npx create-next-app@latest

Når du har generert det ferske, nye Next.js-prosjektet, kan du navigere til den nyopprettede prosjektkatalogen.

Ved å endre katalogen til prosjektet, vil du kunne utforske de ulike mappene og filene som utgjør Next.js-prosjektstrukturen.

Å forstå prosjektstrukturen er avgjørende for effektiv utvikling og organisering av Next.js-applikasjonen din. Ved å referere til den offisielle dokumentasjonen, kan du utnytte beste praksis og få innsikt i hvordan du strukturerer koden din, administrerer statiske eiendeler og lage gjenbrukbare komponenter.

Installerer avhengighetene våre

For å aktivere passordløs autentisering i Next.js-prosjektet vårt med NextAuth.js, må vi først installere de nødvendige avhengighetene. Kjør kommandoen yarn add next-auth nodemailer for å legge til både NextAuth.js og nodemailer til prosjektet vårt.

Vi bruker spesifikt nodemailer da det er en populær og allsidig modul for å sende e-post i Node.js. Det gir en enkel og pålitelig måte å sende de magiske koblingene eller engangskodene som kreves for passordløs autentisering via e-post.

La oss deretter integrere Prisma som databaseadapteren vår. Start med å installere de nødvendige Prisma-pakkene ved å bruke kommandoen:

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

Disse pakkene vil muliggjøre sømløs kommunikasjon mellom Next.js-applikasjonen vår og databasen. I tillegg må vi også installere Prisma som en utviklingsavhengighet ved å kjøre:

yarn add prisma --dev

Dette trinnet sikrer at vi har de nødvendige verktøyene for å jobbe med Prisma og dens automatisk genererte spørringsbygger for databaseinteraksjoner.

Ved å installere disse avhengighetene legger vi grunnlaget for implementering av passordløs autentisering ved hjelp av NextAuth.js og Prisma i vårt Next.js-prosjekt.

Oppsett Prisma

Det er nødvendig å sette opp Prisma og ha tilgang til en SMTP-server for e-postsending for å bruke passordløs autentisering i et Next.js-prosjekt. Denne opplæringen vil veilede deg gjennom å bruke din personlige Gmail-konto til å sende e-poster. Følg trinnene nedenfor for et vellykket oppsett.

Først oppretter du en "prisma"-mappe i roten av prosjektet. Denne mappen vil inneholde Prisma-relaterte filer og konfigurasjoner. Deretter, i "prisma"-mappen, oppretter du en ny fil kalt "schema.prisma" Skjemafilen definerer strukturen til databasen din og fungerer som en blåkopi for Prismas autogenererte kode.

Hvis du er ny på konseptet med et skjema, ikke bekymre deg! Et skjema spesifiserer databasens tabeller, felt, relasjoner og begrensninger. For å lage skjemaet kan du se den offisielle dokumentasjonen til NextAuth.js og kopiere eksempelskjemaet som er gitt der. Dette skjemaet er et utgangspunkt og kan tilpasses for å passe dine applikasjonskrav.

Deretter oppretter du en ".env"-fil i roten av prosjektet. Denne filen vil lagre miljøvariablene dine, inkludert de nødvendige konfigurasjonene for SMTP-serveren. For å fylle ut ".env"-filen, kan du kopiere eksempelkonfigurasjonene nedenfor. Sørg for å skrive inn påloggingsinformasjonen for Gmail-kontoen din og SMTP-serverinnstillingene i de tilsvarende feltene.

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 å følge disse trinnene har du satt opp Prisma og konfigurert SMTP-serveren for å sende e-poster ved å bruke Gmail-kontoen din. Disse forberedelsene er avgjørende for å aktivere den passordløse autentiseringsflyten i ditt Next.js-prosjekt.

Merk

Du må opprette et app-passord hvis du har aktivert tofaktorautentisering (2FA) for Google-kontoen din. Et app-passord er et distinkt passord som gir tilgang til bestemte apper eller enheter uten å avsløre det primære Google-kontopassordet ditt. Følg instruksjonene nedenfor for å generere et app-passord.

1. Gå til siden for Google-kontoinnstillinger ved å gå til https://myaccount.google.com/.

2. Naviger til fanen "Sikkerhet".

3. Se etter «2FA»-delen, rull ned og velg «App-passord».

4. Du kan bli bedt om å skrive inn passordet for Google-kontoen din på nytt for sikkerhetsverifisering.

5. Under «Velg app»-rullegardinmenyen velger du «Mail» eller «Annet (egendefinert navn)».

• Hvis alternativet "Mail" er tilgjengelig, velg det.

• Hvis alternativet "Mail" ikke er tilgjengelig, velg "Annet (Egendefinert navn)" og oppgi et tilpasset navn for identifikasjon.

6. Klikk på "Generer" eller "Generer passord".

7. Google vil generere et unikt app-passord for deg. Noter dette passordet, siden vi kommer til å bruke dette i applikasjonen vår for å sende e-post.

8. Bruk dette genererte apppassordet i Next.js-applikasjonens SMTP-serverkonfigurasjon. Bytt ut det vanlige passordet for Gmail-kontoen din med dette app-passordet.

Dette sikrer at selv med 2FA aktivert, kan applikasjonen din sikkert sende e-poster med Gmail-kontoen din.

PostgreSQL med Supabase

Før vi kan fortsette, må vi sikre at databasen for prosjektet vårt fungerer som det skal. For denne demoen anbefaler vi å bruke Supabase PostgreSQL-databasen. For å komme i gang med et Supabase-prosjekt og få PostgreSQL-tilkoblings-URLen, følg disse trinnene:

1. Gå til supabase.io og logg på kontoen din eller opprett en ny hvis du ikke har en.

2. Når du er logget på, blir du dirigert til Supabase-dashbordet. Klikk på "Opprett nytt prosjekt" for å starte et nytt prosjekt.

3. Gi prosjektet et navn og velg regionen nærmest din nåværende plassering. Husk passordet ditt, du trenger det senere.

4. Når du har opprettet prosjektet, kommer du til prosjektdashbordet. Klikk "Database" på venstre sidefelt for å få tilgang til databaseinnstillingene.

5. I "Database"-delen finner du PostgreSQL-tilkoblings-URLen. Denne URLen inneholder all nødvendig informasjon for å koble til Supabase-prosjektets database, for eksempel verten, porten, databasenavnet, brukernavnet og passordet. Det vil bli vist i formatet: postgres://<brukernavn>:<passord>@<vert>:<port>/<database>

6. Kopier PostgreSQL-tilkoblings-URLen og hold den sikker. Du trenger den for å etablere en forbindelse mellom applikasjonen og Supabase-databasen.

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

La oss nå sørge for at vi genererer Prisma-klienten vår ved å kjøre følgende kommando: `npx prisma generer`.

Prisma Client er en databaseklient som genereres automatisk basert på skjemaet ditt. Som standard genereres Prisma-klienten i mappen `node_modules/.prisma/client`, men du kan [spesifisere en egendefinert plassering om nødvendig](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Deretter fortsetter vi med å opprette vår første migrering. Kjør følgende kommando: `npx prisma migrate dev`. Du kan gi hver migrering et beskrivende navn.

I Prisma er en migrering en metode som brukes til å administrere justeringer av databaseskjemaet etter hvert som tiden går. Den lar deg endre databasestrukturen uten å miste noen forhåndseksisterende data. Disse migreringene er avgjørende siden de sikrer at databaseskjemaet ditt stemmer overens med applikasjonens behov når de endres. Med Prismas migreringsverktøy kan du enkelt versjonere, bruke og tilbakestille disse endringene, noe som forenkler teamarbeid og opprettholder et enhetlig databaseskjema på tvers av ulike miljøer.

Nå, hvis vi sjekker databasen vår, vil vi kunne se endringene fra vår første migrering gjenspeilet i databasedelen.

Ved å utføre den innledende migreringen har vi brukt endringene på databaseskjemaet vårt som definert i migreringsskriptet.

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

### Sette opp NextAuthJS med Prisma Adapter

I en Next.js-applikasjon bruker NextAuthJS oppsamlingsruten, også kjent som jokertegn eller reserverute, for å administrere autentiseringsforespørsler. Denne dynamiske ruten er definert ved hjelp av det filbaserte rutingsystemet i Next.js.

Opprett en mappe kalt "**api**" i "**app**"-katalogen din. I "**api**"-mappen oppretter du en "**auth**"-mappe. Inne i mappen "**auth**" oppretter du en oppsamlingsrute kalt "**[...nextauth]**" som en mappe. Til slutt, lag en "**route.ts**"-fil i oppsamlingsrutemappen og legg til 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 oppsamlingsrutefilen importerer vi NextAuthJS-biblioteket og konfigurerer autentiseringsalternativene, leverandørene og konfigurasjonene. NextAuthJS håndterer parsing av innkommende forespørsler, identifiserer den nødvendige autentiseringshandlingen og utfører riktig logikk i henhold til de spesifiserte alternativene.

Den medfølgende koden setter opp NextAuthJS med Prisma-adapteren for autentisering ved hjelp av en e-postleverandør. La oss forklare hver påstand:

1. Importer:

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

• NextAuth er importert fra next-auth og er hovedbiblioteket for håndtering av autentisering i Next.js-applikasjoner.

• EmailProvider importeres fra next-auth/providers/email og brukes som leverandør for e-postbasert autentisering.

2. Prisma-oppsett:

• En forekomst av PrismaClient opprettes ved å bruke new PrismaClient(). Dette tillater kommunikasjon med Prisma ORM og den underliggende databasen.

3. Autentiseringsalternativer:

• authOptions er et objekt som definerer konfigurasjonen for autentisering i NextAuthJS.

• Egenskapen adapter er satt til PrismaAdapter(prisma), som kobler NextAuthJS med Prisma ved hjelp av PrismaAdapter.

• providers-matrisen inneholder en enkelt leverandør, EmailProvider. Den er konfigurert med de nødvendige e-postserverdetaljer og fra e-postadressen.

4. NextAuth Handler:

• NextAuth-funksjonen kalles med authOptions som argument, og skaper en autentiseringsbehandler.

• Den resulterende behandleren er tilordnet handler-variabelen.

5. Eksporter:

• handler eksporteres som GET og POST for å støtte både HTTP GET- og POST-forespørsler.

La oss nå kjøre serveren vår og teste funksjonaliteten. Start først utviklingsserveren ved å kjøre yarn dev. Deretter åpner du nettleseren din og går til localhost:3000 for å se applikasjonen i aksjon.

For å teste autentiseringsfunksjonaliteten, besøk localhost:3000/api/auth/signin. Her vil du oppleve magien til NextAuthJS. Den medfølgende malen som følger med NextAuthJS, muliggjør en passordløs påloggingsprosess. For å prøve det, skriv inn en gyldig e-postadresse.

Når du har sendt inn e-posten, vil NextAuthJS håndtere prosessen bak kulissene. Først vil den generere og sende en e-post som inneholder en unik påloggingslenke til den oppgitte e-postadressen. Denne lenken fungerer som et sikkert autentiseringstoken for brukeren. Deretter, når brukeren klikker på lenken, vil NextAuthJS validere tokenet og autentisere brukeren.

Denne passordløse påloggingsfunksjonen forbedrer sikkerheten og brukeropplevelsen ved å eliminere behovet for passord. Brukere kan raskt og sikkert få tilgang til kontoene sine ved å klikke på lenken mottatt via e-post. Det effektiviserer påloggingsprosessen og reduserer risikoen for passordrelaterte sårbarheter.

Når en bruker klikker på påloggings-e-posten generert av NextAuthJS og blir autentisert, skjer flere handlinger bak kulissene for å lette en sømløs påloggingsopplevelse.

1. E-postkoblingsvalidering: Når brukeren klikker på påloggingslenken, validerer NextAuthJS autentiseringstokenet som er innebygd i koblingen. Dette tokenet sikrer sikkerheten og integriteten til autentiseringsprosessen.

2. Autentiseringsprosess: Etter vellykket tokenvalidering identifiserer NextAuthJS brukeren og fullfører autentiseringsprosessen. Den verifiserer brukerens identitet basert på det angitte tokenet og eventuelle ekstra autentiseringsfaktorer som er konfigurert, for eksempel multifaktorautentisering.

3. Oppretting av økter: Etter vellykket autentisering oppretter NextAuthJS en økt for brukeren. En økt er en vedvarende tilstand som representerer brukerens autentiseringsstatus og lar dem få tilgang til beskyttede ressurser uten å måtte autentisere på nytt for påfølgende forespørsler.

4. Informasjonskapsler: NextAuthJS setter sikre HTTP-bare informasjonskapsler i brukerens nettleser for å administrere økten. Disse informasjonskapslene spiller en avgjørende rolle for å opprettholde brukerens autentiserte tilstand på tvers av flere forespørsler. Informasjonskapslene inkluderer vanligvis en økt-informasjonskapsel og eventuelt en oppdateringstoken-informasjonskapsel, avhengig av autentiseringskonfigurasjonen.

1. Session Cookie: Sesjonsinformasjonskapselen inneholder en øktidentifikator (f.eks. en tilfeldig generert streng) som unikt identifiserer brukerens økt. Det hjelper NextAuthJS med å knytte påfølgende forespørsler til riktig økt og bruker.

2. CSRF Token Cookie: NextAuthJS setter en CSRF (Cross-Site Request Forgery) token-informasjonskapsel for å beskytte mot CSRF-angrep. CSRF-tokenet er en unik verdi generert av NextAuthJS og lagret i informasjonskapselen. Den brukes til å validere og verifisere ektheten av påfølgende forespørsler fra brukeren. Når brukeren sender inn skjemaer eller utfører sensitive handlinger, inkluderes CSRF-tokenet i forespørselshodene eller kroppen for å sikre at forespørselen stammer fra den autentiserte brukerens økt og ikke fra en ondsinnet kilde.

3. Callback URL Cookie: NextAuthJS setter en callback URL cookie for å lagre den opprinnelige URLen som brukeren prøvde å få tilgang til før den ble omdirigert til autentiseringsflyten. Denne informasjonskapselen hjelper NextAuthJS omdirigere brukeren tilbake til ønsket side etter vellykket autentisering. Det sikrer en jevn brukeropplevelse ved å sømløst returnere brukeren til den tiltenkte destinasjonen i stedet for en generisk landingsside.

Ved å bruke sikre HTTP-bare informasjonskapsler, sikrer NextAuthJS at autentiseringstilstanden forblir sikker og manipulasjonssikker. Informasjonskapslene er kryptert, og forhindrer uautorisert tilgang eller modifikasjon av ondsinnede aktører.

Flott jobb med å integrere NextAuthJS med Prisma-adapter i Next.js-applikasjonen din! Med enkelheten og tilpasningsevnen som tilbys av NextAuthJS, har du nå et pålitelig autentiseringssystem.

Sjekk ut GitHub-depotet som er koblet til nedenfor for koden som brukes i denne veiledningen: https://github.com/codelabsacademy/next-auth-guide.

Men hvorfor stoppe her? Hvis du brenner for nettutvikling og er ivrig etter å forbedre ferdighetene dine, kan du vurdere å søke på vår nettutviklings-bootcamp. Vår bootcamp tilbyr en omfattende læringsopplevelse, og utstyrer deg med kunnskapen og praktiske ferdighetene som er nødvendige for å utmerke seg i den dynamiske verdenen av webutvikling.

Ved å bli med på vår bootcamp, vil du få praktisk erfaring med banebrytende teknologier, jobbe med virkelige prosjekter og motta personlig veiledning fra bransjeeksperter. Enten du er en nybegynner eller en erfaren utvikler, er programmet vårt utviklet for å ta webutviklingsferdighetene dine til neste nivå.

Ikke gå glipp av denne muligheten til å akselerere din webutviklingsreise. Søk på vår nettutviklings-bootcamp i dag og lås opp ditt fulle potensial innen det spennende feltet nettutvikling. La oss sammen bygge fantastiske digitale opplevelser og forme fremtiden til nettet.