Implementácia prihlásenia bez hesla v projekte Next.js 13 s NextAuth.js a Prisma

Tento článok sa ponorí do krokov potrebných na implementáciu autentifikácie bez hesla v projekte Next.js pomocou knižnice NextAuth.js. Okrem toho budeme používať Prisma ako náš databázový adaptér, aby sme to dosiahli.

Autentifikácia bez hesla je inovatívny prístup, ktorý eliminuje potrebu tradičných kombinácií používateľského mena a hesla. Namiesto toho ponúka bezpečnejšie a užívateľsky príjemnejšie overenie pomocou alternatívnych metód, ako sú magické odkazy na e-maily alebo jednorazové kódy odoslané prostredníctvom SMS.

Next.js je populárny framework React na vytváranie webových aplikácií, známy svojou jednoduchosťou a efektívnosťou. Do nášho projektu môžeme jednoducho začleniť autentifikáciu bez hesla integráciou NextAuth.js, autentifikačnej knižnice navrhnutej výslovne pre Next.js.

Okrem toho sa budeme spoliehať na Prisma ako na náš databázový adaptér. Prisma je nástroj ORM (Object-Relational Mapping), ktorý zjednodušuje interakcie s databázou tým, že poskytuje typovo bezpečný a automaticky generovaný nástroj na tvorbu dotazov. Podporuje viacero databáz vrátane PostgreSQL, MySQL a SQLite, čo z neho robí všestrannú voľbu pre našu implementáciu autentifikácie.

V tejto príručke vám poskytneme podrobné pokyny, ako nastaviť a nakonfigurovať autentifikáciu bez hesla pomocou NextAuth.js v projekte Next.js. Ukážeme tiež, ako integrovať Prisma ako náš databázový adaptér, ktorý umožňuje bezproblémovú komunikáciu medzi našou aplikáciou a databázou.

Teraz preskúmame, ako zlepšiť bezpečnosť a používateľskú skúsenosť našej aplikácie Next.js pomocou autentifikácie bez hesla a možností NextAuth.js a Prisma. Poďme začať.

Čo je prihlásenie bez hesla?

Prihlásenie bez hesla, ako už názov napovedá, je spôsob autentifikácie, ktorý odstraňuje potrebu tradičných kombinácií používateľského mena a hesla. Namiesto toho využíva alternatívne prostriedky na overenie identity používateľa, ako sú e-mailové magické odkazy alebo jednorazové kódy odoslané prostredníctvom SMS. Tento prístup ponúka niekoľko výhod oproti tradičným metódam prihlasovania. Po prvé, eliminuje riziko zraniteľností súvisiacich s heslom, ako sú slabé heslá alebo opätovné použitie hesla. Po druhé, zjednodušuje používateľskú skúsenosť tým, že odstraňuje potrebu pamätať si a zadávať zložité heslá.

Na implementáciu prihlasovania bez hesla pomocou e-mailových magických odkazov alebo jednorazových kódov potrebujeme server SMTP (Simple Mail Transfer Protocol).

Server SMTP je zodpovedný za odosielanie e-mailov cez internet. V rámci autentifikácie bez hesla server posiela magické odkazy alebo jednorazové kódy na registrovanú e-mailovú adresu používateľa. Keď používateľ spustí proces prihlásenia, vygeneruje sa e-mail obsahujúci jedinečný odkaz alebo kód a odošle sa používateľovi. Používateľ potom môže kliknúť na odkaz alebo zadať kód a dokončiť proces overenia. Server SMTP funguje ako prostredník medzi aplikáciou a e-mailovou službou používateľa a zabezpečuje bezpečné a spoľahlivé doručovanie overovacích správ. Využitím servera SMTP môžeme efektívne implementovať prihlásenie bez hesla a poskytnúť našim používateľom bezproblémovú autentifikáciu.

Začnime!

Najprv musíme vygenerovať nový projekt Next.js. Ak to chcete urobiť, použite nasledujúci príkaz:

npx create-next-app@latest

Po vygenerovaní nového projektu Next.js môžete prejsť do novovytvoreného adresára projektu.

Zmenou adresára do projektu budete môcť preskúmať rôzne priečinky a súbory, ktoré tvoria štruktúru projektu Next.js.

Pochopenie štruktúry projektu je nevyhnutné pre efektívny vývoj a organizáciu vašej aplikácie Next.js. Odkazom na oficiálnu dokumentáciu môžete využiť osvedčené postupy a získať prehľad o tom, ako štruktúrovať kód, spravovať statické prostriedky a vytvárať opakovane použiteľné komponenty.

Inštalácia našich závislostí

Ak chcete povoliť autentifikáciu bez hesla v našom projekte Next.js pomocou NextAuth.js, musíme najprv nainštalovať požadované závislosti. Spustite príkaz yarn add next-auth nodemailer, aby ste do nášho projektu pridali NextAuth.js aj nodemailer.

Špeciálne používame nodemailer, pretože je to populárny a všestranný modul na odosielanie e-mailov v Node.js. Poskytuje priamy a spoľahlivý spôsob odosielania magických odkazov alebo jednorazových kódov potrebných na overenie bez hesla prostredníctvom e-mailu.

Ďalej integrujme Prismu ako náš databázový adaptér. Začnite inštaláciou požadovaných balíkov Prisma pomocou príkazu:

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

Tieto balíčky umožnia bezproblémovú komunikáciu medzi našou aplikáciou Next.js a databázou. Okrem toho musíme nainštalovať Prisma ako závislosť pre vývojárov spustením:

yarn add prisma --dev

Tento krok zaisťuje, že máme potrebné nástroje na prácu s Prismou a jej automaticky generovaným tvorcom dotazov pre interakcie s databázou.

Inštaláciou týchto závislostí sme vytvorili základ pre implementáciu autentifikácie bez hesla pomocou NextAuth.js a Prisma v našom projekte Next.js.

Nastavenie Prisma

Ak chcete používať autentifikáciu bez hesla v projekte Next.js, je potrebné nastaviť Prisma a mať prístup k SMTP serveru na odosielanie e-mailov. Tento tutoriál vás prevedie používaním osobného účtu Gmail na odosielanie e-mailov. Pre úspešné nastavenie postupujte podľa nižšie uvedených krokov.

Najprv vytvorte priečinok „prisma“ v koreňovom adresári vášho projektu. Tento priečinok bude obsahovať súbory a konfigurácie súvisiace s Prismou. Potom v priečinku "prisma" vytvorte nový súbor s názvom "schema.prisma". Súbor schémy definuje štruktúru vašej databázy a slúži ako plán pre automaticky generovaný kód Prismy.

Ak ste novým konceptom schémy, nebojte sa! Schéma určuje tabuľky, polia, vzťahy a obmedzenia vašej databázy. Ak chcete vytvoriť schému, môžete si pozrieť oficiálnu dokumentáciu NextAuth.js a skopírovať tam uvedenú vzorovú schému. Táto schéma je východiskovým bodom a možno ju prispôsobiť požiadavkám vašej aplikácie.

Ďalej vytvorte súbor „.env“ v koreňovom adresári vášho projektu. Tento súbor bude uchovávať vaše premenné prostredia vrátane potrebných konfigurácií pre váš server SMTP. Ak chcete vyplniť súbor „.env“, môžete skopírovať príklady konfigurácií uvedených nižšie. Uistite sa, že ste do príslušných polí zadali prihlasovacie údaje účtu Gmail a nastavenia servera SMTP.

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

Nasledovaním týchto krokov budete mať nastavenú Prismu a nakonfigurovaný server SMTP na odosielanie e-mailov pomocou vášho účtu Gmail. Tieto prípravy sú rozhodujúce pre aktiváciu toku autentifikácie bez hesla vo vašom projekte Next.js.

Poznámka

Ak ste pre svoj účet Google povolili dvojfaktorové overenie (2FA), musíte si vytvoriť heslo aplikácie. Heslo aplikácie je odlišné heslo, ktoré umožňuje prístup ku konkrétnym aplikáciám alebo zariadeniam bez toho, aby bolo odhalené vaše primárne heslo účtu Google. Podľa pokynov nižšie vygenerujte heslo aplikácie.

1. Prejdite na stránku nastavení účtu Google na https://myaccount.google.com/.

2. Prejdite na kartu „Zabezpečenie“.

3. Vyhľadajte časť „2FA“, prejdite nadol a vyberte „Heslá aplikácií“.

4. Môže sa zobraziť výzva na opätovné zadanie hesla účtu Google na overenie zabezpečenia.

5. V rozbaľovacej ponuke „Vybrať aplikáciu“ vyberte „Pošta“ alebo „Iné (vlastný názov)“.

• Ak je k dispozícii možnosť „Pošta“, vyberte ju.

• Ak možnosť „Pošta“ nie je k dispozícii, vyberte možnosť „Iné (vlastný názov)“ a zadajte vlastný názov na identifikáciu.

6. Kliknite na tlačidlo "Generovať" alebo "Generovať heslo".

7. Google vám vygeneruje jedinečné heslo aplikácie. Poznamenajte si toto heslo, pretože ho budeme používať v našej aplikácii na odosielanie e-mailov.

8. Toto vygenerované heslo aplikácie použite v konfigurácii servera SMTP vašej aplikácie Next.js. Nahraďte svoje bežné heslo účtu Gmail týmto heslom aplikácie.

To zaisťuje, že aj keď je povolená funkcia 2FA, vaša aplikácia môže bezpečne odosielať e-maily pomocou vášho účtu Gmail.

PostgreSQL pomocou Supabase

Než budeme môcť pokračovať, musíme sa uistiť, že databáza pre náš projekt funguje správne. Pre túto ukážku odporúčame použiť databázu Supabase PostgreSQL. Ak chcete začať s projektom Supabase a získať adresu URL pripojenia PostgreSQL, postupujte takto:

1. Prejdite na supabase.io a prihláste sa do svojho účtu alebo si vytvorte nový, ak ho nemáte.

2. Po prihlásení budete presmerovaní na ovládací panel Supabase. Kliknutím na „Vytvoriť nový projekt“ spustíte nový projekt.

3. Pomenujte svoj projekt a vyberte región, ktorý je najbližšie k vašej aktuálnej polohe. Heslo si zapamätajte, budete ho potrebovať neskôr.

4. Po vytvorení projektu sa dostanete na panel projektu. Kliknutím na „Databáza“ na ľavom bočnom paneli získate prístup k nastaveniam databázy.

5. V sekcii "Databáza" nájdete adresu URL pripojenia PostgreSQL. Táto adresa URL obsahuje všetky potrebné informácie na pripojenie k databáze vášho projektu Supabase, ako je hostiteľ, port, názov databázy, používateľské meno a heslo. Zobrazí sa vo formáte: postgres://<používateľské meno>:<heslo>@<hostiteľ>:<port>/<databáza>

6. Skopírujte adresu URL pripojenia PostgreSQL a zabezpečte ju. Budete ho potrebovať na vytvorenie spojenia medzi vašou aplikáciou a databázou Supabase.

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

Teraz sa ubezpečme, že vygenerujeme nášho klienta Prisma spustením nasledujúceho príkazu: `npx prisma generation`.

Prisma Client je databázový klient automaticky generovaný na základe vašej schémy. V predvolenom nastavení sa Prisma Client generuje do priečinka `node_modules/.prisma/client`, ale môžete [v prípade potreby zadať vlastné umiestnenie](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Ďalej pristúpime k vytvoreniu našej počiatočnej migrácie. Spustite nasledujúci príkaz: `npx prisma migrate dev`. Každej migrácii môžete dať popisný názov.

V Prisma je migrácia metóda používaná na riadenie úprav vašej databázovej schémy v priebehu času. Umožňuje vám upraviť štruktúru databázy bez straty už existujúcich údajov. Tieto migrácie sú kľúčové, pretože zabezpečujú, aby sa schéma vašej databázy pri zmene zhodovala s potrebami vašej aplikácie. Pomocou migračného nástroja Prisma môžete tieto zmeny pohodlne verzovať, aplikovať a vrátiť späť, čím zjednodušíte tímovú prácu a zachováte jednotnú databázovú schému v rôznych prostrediach.

Teraz, ak skontrolujeme našu databázu, budeme môcť vidieť zmeny z našej počiatočnej migrácie, ktoré sa prejavia v sekcii databázy.

Vykonaním úvodnej migrácie sme aplikovali úpravy na schému našej databázy, ako je definované v skripte migrácie.

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

### Nastavenie NextAuthJS s adaptérom Prisma

V aplikácii Next.js používa NextAuthJS na správu žiadostí o autentifikáciu cestu catch-all, tiež známu ako zástupná alebo záložná cesta. Táto dynamická trasa je definovaná pomocou súborového smerovacieho systému v Next.js.

Vytvorte priečinok s názvom „**api**“ vo svojom adresári „**app**“. V priečinku „**api**“ vytvorte priečinok „**auth**“. V priečinku „**auth**“ vytvorte univerzálnu cestu s názvom „**[...nextauth]**“ ako priečinok. Nakoniec vytvorte súbor "**route.ts**" v priečinku catch-all route a pridajte nasledujúci kód.

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

V súbore catch-all route importujeme knižnicu NextAuthJS a nastavíme možnosti autentifikácie, poskytovateľov a konfigurácie. NextAuthJS spracováva analýzu prichádzajúcich požiadaviek, identifikuje potrebnú autentifikačnú akciu a vykonáva príslušnú logiku podľa špecifikovaných možností.

Poskytnutý kód nastaví NextAuthJS s adaptérom Prisma na autentifikáciu pomocou poskytovateľa e-mailu. Vysvetlime si každý výrok:

1. Dovoz:

• PrismaAdapter a PrismaClient sa importujú z @next-auth/prisma-adapter a @prisma/client. Používajú sa na integráciu NextAuthJS s Prisma.

• NextAuth sa importuje z next-auth a je hlavnou knižnicou na spracovanie autentifikácie v aplikáciách Next.js.

• EmailProvider je importovaný z next-auth/providers/email a používa sa ako poskytovateľ pre autentifikáciu na základe e-mailu.

2. Nastavenie hranola:

• Inštancia PrismaClient sa vytvorí pomocou new PrismaClient(). To umožňuje komunikáciu s Prisma ORM a podkladovou databázou.

3. Možnosti overenia:

• authOptions je objekt, ktorý definuje konfiguráciu pre autentifikáciu v NextAuthJS.

• Vlastnosť adapter je nastavená na PrismaAdapter(prisma), ktorá spája NextAuthJS s Prisma pomocou PrismaAdapter.

• Pole providers obsahuje jedného poskytovateľa, EmailProvider. Je nakonfigurovaný s potrebnými údajmi o e-mailovom serveri a e-mailovou adresou from.

4. Obslužný nástroj NextAuth:

• Funkcia NextAuth sa volá s argumentom authOptions, čím sa vytvorí obsluha autentifikácie.

• Výsledný handler je priradený k premennej handler.

5. Export:

• handler sa exportuje ako GET a POST na podporu požiadaviek HTTP GET aj POST.

Teraz spustíme náš server a otestujeme funkčnosť. Najprv spustite vývojový server spustením yarn dev. Potom otvorte prehliadač a navštívte stránku localhost:3000, aby ste videli aplikáciu v akcii.

Ak chcete otestovať funkčnosť autentifikácie, navštívte stránku localhost:3000/api/auth/signin. Tu zažijete kúzlo NextAuthJS. Poskytnutá šablóna, ktorá je súčasťou NextAuthJS, umožňuje proces prihlásenia bez hesla. Ak to chcete vyskúšať, zadajte platnú e-mailovú adresu.

Po odoslaní e-mailu sa NextAuthJS postará o zákulisný proces. Najprv vygeneruje a odošle e-mail s jedinečným odkazom na prihlásenie na uvedenú e-mailovú adresu. Tento odkaz slúži ako bezpečný autentifikačný token pre používateľa. Potom, keď používateľ klikne na odkaz, NextAuthJS overí token a overí používateľa.

Táto funkcia prihlasovania bez hesla zvyšuje bezpečnosť a používateľskú skúsenosť tým, že eliminuje potrebu hesiel. Používatelia môžu rýchlo a bezpečne pristupovať k svojim účtom jednoduchým kliknutím na odkaz prijatý e-mailom. Zefektívňuje proces prihlasovania a znižuje riziko zraniteľností súvisiacich s heslom.

Keď používateľ klikne na prihlasovací e-mail vygenerovaný NextAuthJS a overí sa, v zákulisí sa uskutoční niekoľko akcií, ktoré uľahčia bezproblémové prihlásenie.

1. Overenie odkazu e-mailom: Keď používateľ klikne na odkaz na prihlásenie, NextAuthJS overí overovací token vložený do odkazu. Tento token zaisťuje bezpečnosť a integritu procesu autentifikácie.

2. Proces overenia: Po úspešnom overení tokenu NextAuthJS identifikuje používateľa a dokončí proces overenia. Overuje identitu používateľa na základe poskytnutého tokenu a akýchkoľvek dodatočných konfigurovaných autentifikačných faktorov, ako je napríklad viacfaktorová autentifikácia.

3. Vytvorenie relácie: Po úspešnej autentifikácii vytvorí NextAuthJS pre používateľa reláciu. Relácia je trvalý stav, ktorý predstavuje stav autentifikácie používateľa a umožňuje mu pristupovať k chráneným zdrojom bez toho, aby sa musel znova overovať pre následné požiadavky.

4. Súbory cookie: NextAuthJS nastavuje v prehliadači používateľa zabezpečené súbory cookie iba s protokolom HTTP na správu relácie. Tieto súbory cookie zohrávajú kľúčovú úlohu pri udržiavaní overeného stavu používateľa pri viacerých požiadavkách. Súbory cookie zvyčajne obsahujú súbor cookie relácie a voliteľne súbor cookie obnovovacieho tokenu, v závislosti od konfigurácie autentifikácie.

1. Súbor cookie relácie: Súbor cookie relácie obsahuje identifikátor relácie (napr. náhodne vygenerovaný reťazec), ktorý jedinečne identifikuje reláciu používateľa. Pomáha NextAuthJS spájať následné požiadavky so správnou reláciou a používateľom.

2. CSRF Token Cookie: NextAuthJS nastavuje súbor cookie tokenu CSRF (Cross-Site Request Forgery) na ochranu pred útokmi CSRF. Token CSRF je jedinečná hodnota vygenerovaná NextAuthJS a uložená v súbore cookie. Používa sa na overenie a overenie pravosti následných požiadaviek používateľa. Keď používateľ odošle formuláre alebo vykoná citlivé akcie, token CSRF je zahrnutý do hlavičiek alebo tela požiadavky, aby sa zabezpečilo, že požiadavka pochádza z relácie overeného používateľa a nie zo škodlivého zdroja.

3. Callback URL Cookie: NextAuthJS nastaví súbor cookie spätného volania URL na uloženie pôvodnej adresy URL, ku ktorej sa používateľ pokúšal dostať pred presmerovaním na overovací postup. Tento súbor cookie pomáha NextAuthJS presmerovať používateľa späť na požadovanú stránku po úspešnej autentifikácii. Zabezpečuje bezproblémovú používateľskú skúsenosť bezproblémovým návratom používateľa na zamýšľaný cieľ namiesto všeobecnej vstupnej stránky.

Používaním zabezpečených súborov cookie iba HTTP NextAuthJS zaisťuje, že stav overenia zostane bezpečný a odolný voči falšovaniu. Súbory cookie sú šifrované, čo bráni neoprávnenému prístupu alebo úprave zo strany škodlivých aktérov.

Skvelá práca pri úspešnej integrácii NextAuthJS s adaptérom Prisma do vašej aplikácie Next.js! S jednoduchosťou a prispôsobivosťou, ktorú poskytuje NextAuthJS, máte teraz spoľahlivý autentifikačný systém.

Kód použitý v tejto príručke nájdete v úložisku GitHub, ktoré je prepojené nižšie: https://github.com/codelabsacademy/next-auth-guide.

Ale prečo sa tu zastaviť? Ak ste nadšení pre vývoj webových aplikácií a túžite zlepšiť svoje zručnosti, zvážte prihlášku na náš bootcamp pre vývoj webových aplikácií. Náš bootcamp ponúka komplexné vzdelávacie skúsenosti, ktoré vás vybavia vedomosťami a praktickými zručnosťami potrebnými na to, aby ste vynikli v dynamickom svete vývoja webu.

Pripojením sa k nášmu bootcampu získate praktické skúsenosti so špičkovými technológiami, budete pracovať na skutočných projektoch a získate personalizované poradenstvo od odborníkov z odvetvia. Či už ste začiatočník alebo skúsený vývojár, náš program je navrhnutý tak, aby posunul vaše zručnosti v oblasti vývoja webu na vyššiu úroveň.

Nepremeškajte túto príležitosť urýchliť svoju cestu vývoja webu. Prihlás sa na náš bootcamp pre vývoj webových aplikácií ešte dnes a odomkni svoj plný potenciál vo vzrušujúcej oblasti vývoja webu. Spoločne vytvorme úžasné digitálne zážitky a formujme budúcnosť webu.