Implementera lösenordslös inloggning i ett Next.js 13-projekt med NextAuth.js och Prisma

Den här artikeln kommer att fördjupa sig i stegen som behövs för att implementera lösenordslös autentisering i ett Next.js-projekt med hjälp av NextAuth.js-biblioteket. Dessutom kommer vi att använda Prisma som vår databasadapter för att uppnå detta.

Lösenordslös autentisering är en innovativ metod som eliminerar behovet av traditionella användarnamn och lösenordskombinationer. Istället erbjuder den en säkrare och användarvänligare autentiseringsupplevelse genom att utnyttja alternativa metoder, såsom magiska e-postlänkar eller engångskoder som skickas via SMS.

Next.js är ett populärt React-ramverk för att bygga webbapplikationer, känt för sin enkelhet och effektivitet. Vi kan enkelt införliva lösenordslös autentisering i vårt projekt genom att integrera NextAuth.js, ett autentiseringsbibliotek designat specifikt för Next.js.

Dessutom kommer vi att förlita oss på Prisma som vår databasadapter. Prisma är ett ORM-verktyg (Object-Relational Mapping) som förenklar databasinteraktioner genom att tillhandahålla en typsäker och automatiskt genererad frågebyggare. Den stöder flera databaser, inklusive PostgreSQL, MySQL och SQLite, vilket gör det till ett mångsidigt val för vår autentiseringsimplementering.

I den här guiden kommer vi att tillhandahålla steg-för-steg-instruktioner om hur du ställer in och konfigurerar lösenordslös autentisering med NextAuth.js i ett Next.js-projekt. Vi kommer också att visa hur man integrerar Prisma som vår databasadapter, vilket möjliggör sömlös kommunikation mellan vår applikation och databasen.

Vi kommer nu att utforska hur vi kan förbättra säkerheten och användarupplevelsen för vår Next.js-applikation med hjälp av lösenordslös autentisering och funktionerna hos NextAuth.js och Prisma. Låt oss börja.

Vad är lösenordslös inloggning?

Lösenordslös inloggning, som namnet antyder, är en metod för autentisering som tar bort behovet av traditionella användarnamn och lösenordskombinationer. Istället använder den alternativa metoder för att verifiera en användares identitet, såsom magiska e-postlänkar eller engångskoder som skickas via SMS. Detta tillvägagångssätt erbjuder flera fördelar jämfört med traditionella inloggningsmetoder. För det första eliminerar det risken för lösenordsrelaterade sårbarheter, såsom svaga lösenord eller återanvändning av lösenord. För det andra förenklar det användarupplevelsen genom att ta bort behovet av att komma ihåg och ange komplexa lösenord.

För att implementera lösenordslös inloggning med magiska e-postlänkar eller engångskoder behöver vi en SMTP-server (Simple Mail Transfer Protocol).

En SMTP-server ansvarar för att skicka e-postmeddelanden över Internet. I samband med lösenordslös autentisering skickar servern de magiska länkarna eller engångskoderna till användarens registrerade e-postadress. När en användare initierar inloggningsprocessen genereras ett e-postmeddelande som innehåller en unik länk eller kod och skickas till användaren. Användaren kan sedan klicka på länken eller ange koden för att slutföra autentiseringsprocessen. SMTP-servern fungerar som mellanhand mellan applikationen och användarens e-posttjänst, vilket säkerställer säker och pålitlig leverans av autentiseringsmeddelanden. Genom att använda en SMTP-server kan vi effektivt implementera lösenordslös inloggning och tillhandahålla en sömlös autentiseringsupplevelse för våra användare.

Låt oss börja!

Först måste vi skapa ett nytt nytt Next.js-projekt. För att göra detta, använd följande kommando:

npx create-next-app@latest

När du har skapat det fräscha nya Next.js-projektet kan du navigera till den nyskapade projektkatalogen.

Genom att ändra katalogen till projektet kommer du att kunna utforska de olika mappar och filer som utgör Next.js-projektstrukturen.

Att förstå projektstrukturen är avgörande för effektiv utveckling och organisation av din Next.js-applikation. Genom att hänvisa till den officiella dokumentationen kan du dra nytta av bästa praxis och få insikter i hur du strukturerar din kod, hanterar statiska tillgångar och skapa återanvändbara komponenter.

Installerar våra beroenden

För att aktivera lösenordslös autentisering i vårt Next.js-projekt med NextAuth.js måste vi först installera de nödvändiga beroenden. Kör kommandot yarn add next-auth nodemailer för att lägga till både NextAuth.js och nodemailer till vårt projekt.

Vi använder specifikt nodemailer eftersom det är en populär och mångsidig modul för att skicka e-postmeddelanden i Node.js. Det ger ett enkelt och pålitligt sätt att skicka de magiska länkarna eller engångskoderna som krävs för lösenordslös autentisering via e-post.

Låt oss sedan integrera Prisma som vår databasadapter. Börja med att installera de nödvändiga Prisma-paketen med kommandot:

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

Dessa paket kommer att möjliggöra sömlös kommunikation mellan vår Next.js-applikation och databasen. Dessutom måste vi också installera Prisma som ett utvecklingsberoende genom att köra:

yarn add prisma --dev

Detta steg säkerställer att vi har de nödvändiga verktygen för att arbeta med Prisma och dess automatiskt genererade frågebyggare för databasinteraktioner.

Genom att installera dessa beroenden lägger vi grunden för att implementera lösenordslös autentisering med NextAuth.js och Prisma i vårt Next.js-projekt.

Ställ in Prisma

Det är nödvändigt att ställa in Prisma och ha tillgång till en SMTP-server för att skicka e-post för att använda lösenordslös autentisering i ett Next.js-projekt. Denna handledning guidar dig genom att använda ditt personliga Gmail-konto för att skicka e-post. Följ stegen nedan för en lyckad installation.

Skapa först en "prisma"-mapp i roten av ditt projekt. Den här mappen kommer att innehålla Prisma-relaterade filer och konfigurationer. Skapa sedan en ny fil som heter "schema.prisma" i mappen "prisma" Schemafilen definierar strukturen för din databas och fungerar som en ritning för Prismas automatiskt genererade kod.

Om du är ny på konceptet med ett schema, oroa dig inte! Ett schema anger databasens tabeller, fält, relationer och begränsningar. För att skapa schemat kan du hänvisa till den officiella dokumentationen för NextAuth.js och kopiera exempelschemat som tillhandahålls där. Detta schema är en utgångspunkt och kan anpassas för att passa dina applikationskrav.

Skapa sedan en ".env"-fil i roten av ditt projekt. Den här filen kommer att lagra dina miljövariabler, inklusive nödvändiga konfigurationer för din SMTP-server. För att fylla i ".env"-filen kan du kopiera exempelkonfigurationerna nedan. Se till att ange dina Gmail-kontouppgifter och SMTP-serverinställningar i motsvarande fält.

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

Genom att följa dessa steg har du ställt in Prisma och konfigurerat SMTP-servern för att skicka e-post med ditt Gmail-konto. Dessa förberedelser är avgörande för att möjliggöra det lösenordslösa autentiseringsflödet i ditt Next.js-projekt.

Notera

Du måste skapa ett applösenord om du har aktiverat tvåfaktorsautentisering (2FA) för ditt Google-konto. Ett applösenord är ett distinkt lösenord som ger åtkomst till särskilda appar eller enheter utan att avslöja ditt primära Google-kontolösenord. Följ instruktionerna nedan för att skapa ett applösenord.

1. Gå till sidan med Google-kontoinställningar genom att besöka https://myaccount.google.com/.

2. Navigera till fliken "Säkerhet".

3. Leta efter avsnittet "2FA", scrolla ned och välj "Applösenord".

4. Du kan bli ombedd att ange lösenordet till ditt Google-konto igen för säkerhetsverifiering.

5. Under rullgardinsmenyn "Välj app", välj "Mail" eller "Annat (Anpassat namn)".

• Om alternativet "Mail" är tillgängligt, välj det.

• Om alternativet "Mail" inte är tillgängligt, välj "Annat (Anpassat namn)" och ange ett anpassat namn för identifiering.

6. Klicka på knappen "Generera" eller "Generera lösenord".

7. Google genererar ett unikt applösenord åt dig. Anteckna detta lösenord, eftersom vi kommer att använda detta i vår ansökan för att skicka e-post.

8. Använd det här genererade applösenordet i din Next.js-applikations SMTP-serverkonfiguration. Byt ut ditt vanliga Gmail-kontolösenord med detta applösenord.

Detta säkerställer att även med 2FA aktiverat kan din applikation säkert skicka e-postmeddelanden med ditt Gmail-konto.

PostgreSQL med Supabase

Innan vi kan fortsätta måste vi se till att databasen för vårt projekt fungerar korrekt. För denna demo rekommenderar vi att du använder Supabase PostgreSQL-databasen. För att komma igång med ett Supabase-projekt och få PostgreSQL-anslutningsadressen, följ dessa steg:

1. Gå till supabase.io och logga in på ditt konto eller skapa ett nytt om du inte har ett.

2. När du är inloggad kommer du att dirigeras till Supabase-instrumentpanelen. Klicka på "Skapa nytt projekt" för att starta ett nytt projekt.

3. Namnge ditt projekt och välj den region som ligger närmast din nuvarande plats. Kom ihåg ditt lösenord, du behöver det senare.

4. När du har skapat projektet kommer du till projektinstrumentpanelen. Klicka på "Databas" på vänster sidofält för att komma åt databasinställningarna.

5. I avsnittet "Databas" hittar du PostgreSQL-anslutningsadressen. Denna URL innehåller all nödvändig information för att ansluta till ditt Supabase-projekts databas, såsom värd, port, databasnamn, användarnamn och lösenord. Det kommer att visas i formatet: postgres://<användarnamn>:<lösenord>@<värd>:<port>/<databas>

6. Kopiera PostgreSQL-anslutningsadressen och håll den säker. Du behöver den för att upprätta en anslutning mellan din applikation och Supabase-databasen.

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

Låt oss nu se till att vi genererar vår Prisma-klient genom att köra följande kommando: `npx prisma generera`.

Prisma-klienten är en databasklient som genereras automatiskt baserat på ditt schema. Som standard genereras Prisma-klienten i mappen `node_modules/.prisma/client`, men du kan [ange en anpassad plats om det behövs](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Därefter fortsätter vi med att skapa vår första migrering. Kör följande kommando: `npx prisma migrate dev`. Du kan ge varje migrering ett beskrivande namn.

I Prisma är en migrering en metod som används för att hantera justeringar av ditt databasschema allt eftersom tiden går. Det låter dig ändra din databasstruktur utan att förlora några befintliga data. Dessa migreringar är avgörande eftersom de säkerställer att ditt databasschema överensstämmer med din applikations behov när de förändras. Med Prismas migreringsverktyg kan du enkelt versionera, tillämpa och återställa dessa ändringar, vilket förenklar lagarbete och upprätthåller ett enhetligt databasschema över olika miljöer.

Om vi ​​nu kontrollerar vår databas kommer vi att kunna se ändringarna från vår första migrering som återspeglas i databassektionen.

Genom att utföra den första migreringen har vi tillämpat ändringarna på vårt databasschema som definierats i migreringsskriptet.

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

### Konfigurera NextAuthJS med Prisma Adapter

I en Next.js-applikation använder NextAuthJS catch-all-rutten, även känd som jokertecken eller reservrutten, för att hantera autentiseringsförfrågningar. Denna dynamiska rutt definieras med det filbaserade routingsystemet i Next.js.

Skapa en mapp med namnet "**api**" i din "**app**"-katalog. Skapa en "**auth**"-mapp i mappen "**api**". Inuti mappen "**auth**" skapar du en catch-all-rutt som heter "**[...nextauth]**" som en mapp. Slutligen, skapa en "**route.ts**"-fil i catch-all-ruttmappen och lägg till följande kod.

```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-ruttfilen importerar vi NextAuthJS-biblioteket och ställer in autentiseringsalternativ, leverantörer och konfigurationer. NextAuthJS hanterar analysen av inkommande förfrågningar, identifierar den nödvändiga autentiseringsåtgärden och exekverar lämplig logik enligt de angivna alternativen.

Den medföljande koden ställer in NextAuthJS med Prisma-adaptern för autentisering med en e-postleverantör. Låt oss förklara varje påstående:

1. Importer:

• PrismaAdapter och PrismaClient importeras från @next-auth/prisma-adapter respektive @prisma/client. Dessa används för att integrera NextAuthJS med Prisma.

• NextAuth importeras från next-auth och är huvudbiblioteket för hantering av autentisering i Next.js-applikationer.

• EmailProvider importeras från next-auth/providers/email och används som en leverantör för e-postbaserad autentisering.

2. Prisma Setup:

• En instans av PrismaClient skapas med new PrismaClient(). Detta möjliggör kommunikation med Prisma ORM och den underliggande databasen.

3. Autentiseringsalternativ:

• authOptions är ett objekt som definierar konfigurationen för autentisering i NextAuthJS.

• Egenskapen adapter är inställd på PrismaAdapter(prisma), vilket ansluter NextAuthJS med Prisma med hjälp av PrismaAdapter.

• Arrayen providers innehåller en enda leverantör, EmailProvider. Den är konfigurerad med nödvändig e-postserverinformation och e-postadressen från.

4. NextAuth Handler:

• Funktionen NextAuth anropas med authOptions som argument, vilket skapar en autentiseringshanterare.

• Den resulterande hanteraren tilldelas variabeln handler.

5. Exportera:

• hanterare exporteras som GET och POST för att stödja både HTTP GET- och POST-förfrågningar.

Låt oss nu köra vår server och testa funktionaliteten. Starta först utvecklingsservern genom att köra yarn dev. Öppna sedan din webbläsare och besök localhost:3000 för att se programmet i drift.

För att testa autentiseringsfunktionen, besök localhost:3000/api/auth/signin. Här kommer du att uppleva magin med NextAuthJS. Den medföljande mallen som ingår i NextAuthJS möjliggör en lösenordslös inloggningsprocess. För att prova det, ange en giltig e-postadress.

När du har skickat e-postmeddelandet kommer NextAuthJS att hantera processen bakom kulisserna. Först kommer den att generera och skicka ett e-postmeddelande som innehåller en unik inloggningslänk till den angivna e-postadressen. Denna länk fungerar som en säker autentiseringstoken för användaren. Sedan, när användaren klickar på länken, kommer NextAuthJS att validera token och autentisera användaren.

Denna lösenordslösa inloggningsfunktion förbättrar säkerheten och användarupplevelsen genom att eliminera behovet av lösenord. Användare kan snabbt och säkert komma åt sina konton genom att helt enkelt klicka på länken som mottagits via e-post. Det effektiviserar inloggningsprocessen och minskar risken för lösenordsrelaterade sårbarheter.

När en användare klickar på inloggningsmailen som genereras av NextAuthJS och blir autentiserad, sker flera åtgärder bakom kulisserna för att underlätta en sömlös inloggningsupplevelse.

1. E-postlänkvalidering: När användaren klickar på inloggningslänken validerar NextAuthJS autentiseringstoken som är inbäddad i länken. Denna token säkerställer säkerheten och integriteten för autentiseringsprocessen.

2. Autentiseringsprocess: Efter framgångsrik tokenvalidering identifierar NextAuthJS användaren och slutför autentiseringsprocessen. Den verifierar användarens identitet baserat på den tillhandahållna token och eventuella ytterligare konfigurerade autentiseringsfaktorer, såsom multifaktorautentisering.

3. Sessionsskapande: Efter framgångsrik autentisering skapar NextAuthJS en session för användaren. En session är ett beständigt tillstånd som representerar användarens autentiseringsstatus och ger dem tillgång till skyddade resurser utan att behöva autentisera på nytt för efterföljande förfrågningar.

4. Cookies: NextAuthJS ställer in säkra HTTP-endast cookies i användarens webbläsare för att hantera sessionen. Dessa cookies spelar en avgörande roll för att upprätthålla användarens autentiserade tillstånd över flera förfrågningar. Kakorna inkluderar vanligtvis en sessionscookie och eventuellt en uppdateringstoken-cookie, beroende på autentiseringskonfigurationen.

1. Sessionscookie: Sessionscookien innehåller en sessionsidentifierare (t.ex. en slumpmässigt genererad sträng) som unikt identifierar användarens session. Det hjälper NextAuthJS att associera efterföljande förfrågningar med rätt session och användare.

2. CSRF Token Cookie: NextAuthJS ställer in en CSRF (Cross-Site Request Forgery) token-cookie för att skydda mot CSRF-attacker. CSRF-token är ett unikt värde som genereras av NextAuthJS och lagras i cookien. Den används för att validera och verifiera äktheten av efterföljande förfrågningar från användaren. När användaren skickar formulär eller utför känsliga åtgärder, inkluderas CSRF-token i förfrågningshuvuden eller texten för att säkerställa att begäran härrörde från den autentiserade användarens session och inte från en skadlig källa.

3. Callback URL Cookie: NextAuthJS ställer in en callback URL cookie för att lagra den ursprungliga URL som användaren försökte komma åt innan den omdirigerades till autentiseringsflödet. Denna cookie hjälper NextAuthJS att omdirigera användaren tillbaka till önskad sida efter framgångsrik autentisering. Det säkerställer en smidig användarupplevelse genom att sömlöst återföra användaren till sin avsedda destination istället för en generisk målsida.

Genom att använda säkra HTTP-endast cookies säkerställer NextAuthJS att autentiseringstillståndet förblir säkert och manipulationssäkert. Cookies är krypterade, vilket förhindrar obehörig åtkomst eller modifiering av illvilliga aktörer.

Bra jobbat med att framgångsrikt integrera NextAuthJS med Prisma-adaptern i din Next.js-applikation! Med den lätthet och anpassningsförmåga som NextAuthJS tillhandahåller har du nu ett pålitligt autentiseringssystem.

Kolla in GitHub-förrådet som är länkat nedan för koden som används i den här guiden: https://github.com/codelabsacademy/next-auth-guide.

Men varför stanna här? Om du brinner för webbutveckling och ivrig efter att förbättra dina färdigheter, överväg att ansöka till vår webbutvecklingsbootcamp. Vår bootcamp erbjuder en omfattande inlärningsupplevelse, som utrustar dig med de kunskaper och praktiska färdigheter som krävs för att utmärka dig i webbutvecklingens dynamiska värld.

Genom att gå med i vårt bootcamp får du praktisk erfarenhet av banbrytande teknik, arbeta med verkliga projekt och få personlig vägledning från branschexperter. Oavsett om du är nybörjare eller erfaren utvecklare är vårt program utformat för att ta dina färdigheter i webbutveckling till nästa nivå.

Missa inte detta tillfälle att påskynda din webbutvecklingsresa. Ansök till vår webbutvecklingsbootcamp idag och lås upp din fulla potential inom det spännande området webbutveckling. Låt oss tillsammans bygga fantastiska digitala upplevelser och forma webbens framtid.