Implementace přihlašování bez hesla v projektu Next.js 13 s NextAuth.js a Prisma

Tento článek se ponoří do kroků potřebných k implementaci ověřování bez hesla v projektu Next.js pomocí knihovny NextAuth.js. Kromě toho budeme používat Prisma jako náš databázový adaptér, abychom toho dosáhli.

Autentizace bez hesla je inovativní přístup, který eliminuje potřebu tradičních kombinací uživatelského jména a hesla. Místo toho nabízí bezpečnější a uživatelsky přívětivější autentizační zkušenost s využitím alternativních metod, jako jsou magické odkazy e-mailu nebo jednorázové kódy zaslané prostřednictvím SMS.

Next.js je populární framework React pro vytváření webových aplikací, známý pro svou jednoduchost a efektivitu. Do našeho projektu můžeme snadno začlenit autentizaci bez hesla integrací NextAuth.js, ověřovací knihovny navržené výslovně pro Next.js.

Navíc se budeme spoléhat na Prisma jako na náš databázový adaptér. Prisma je nástroj ORM (Object-Relational Mapping), který zjednodušuje interakce s databází tím, že poskytuje typově bezpečný a automaticky generovaný tvůrce dotazů. Podporuje více databází, včetně PostgreSQL, MySQL a SQLite, což z něj činí všestrannou volbu pro naši implementaci ověřování.

V této příručce poskytneme podrobné pokyny, jak nastavit a nakonfigurovat ověřování bez hesla pomocí NextAuth.js v projektu Next.js. Také si ukážeme, jak integrovat Prisma jako náš databázový adaptér, umožňující bezproblémovou komunikaci mezi naší aplikací a databází.

Nyní prozkoumáme, jak zlepšit zabezpečení a uživatelskou zkušenost naší aplikace Next.js pomocí ověřování bez hesla a schopností NextAuth.js a Prisma. Pojďme začít.

Co je přihlášení bez hesla?

Přihlášení bez hesla, jak název napovídá, je způsob ověřování, který odstraňuje potřebu tradičních kombinací uživatelského jména a hesla. Místo toho využívá alternativní prostředky k ověření identity uživatele, jako jsou magické odkazy e-mailu nebo jednorázové kódy zaslané prostřednictvím SMS. Tento přístup nabízí několik výhod oproti tradičním metodám přihlašování. Za prvé, eliminuje riziko zranitelností souvisejících s hesly, jako jsou slabá hesla nebo opakované použití hesla. Za druhé, zjednodušuje uživatelskou zkušenost tím, že odstraňuje nutnost pamatovat si a zadávat složitá hesla.

K implementaci přihlašování bez hesla pomocí e-mailových magických odkazů nebo jednorázových kódů potřebujeme server SMTP (Simple Mail Transfer Protocol).

Server SMTP je zodpovědný za odesílání e-mailů přes internet. V rámci autentizace bez hesla server posílá magické odkazy nebo jednorázové kódy na registrovanou e-mailovou adresu uživatele. Když uživatel zahájí proces přihlášení, vygeneruje se e-mail obsahující jedinečný odkaz nebo kód a odešle se uživateli. Uživatel pak může kliknout na odkaz nebo zadat kód a dokončit proces ověřování. Server SMTP funguje jako prostředník mezi aplikací a e-mailovou službou uživatele a zajišťuje bezpečné a spolehlivé doručování ověřovacích zpráv. Využitím serveru SMTP můžeme efektivně implementovat přihlašování bez hesla a poskytovat našim uživatelům bezproblémové ověřování.

Začněme!

Nejprve musíme vygenerovat nový projekt Next.js. Chcete-li to provést, použijte následující příkaz:

npx create-next-app@latest

Jakmile vygenerujete nový projekt Next.js, můžete přejít do nově vytvořeného adresáře projektu.

Změnou adresáře do projektu budete moci prozkoumat různé složky a soubory, které tvoří strukturu projektu Next.js.

Pochopení struktury projektu je nezbytné pro efektivní vývoj a organizaci vaší aplikace Next.js. Odkazem na oficiální dokumentaci můžete využít osvědčené postupy a získat informace o tom, jak strukturovat kód, spravovat statická aktiva a vytvářet opakovaně použitelné komponenty.

Instalace našich závislostí

Abychom povolili ověřování bez hesla v našem projektu Next.js pomocí NextAuth.js, musíme nejprve nainstalovat požadované závislosti. Spusťte příkaz yarn add next-auth nodemailer a přidejte do našeho projektu NextAuth.js i nodemailer.

Konkrétně používáme nodemailer, protože je to oblíbený a všestranný modul pro odesílání e-mailů v Node.js. Poskytuje přímý a spolehlivý způsob, jak odeslat magické odkazy nebo jednorázové kódy potřebné pro ověření bez hesla prostřednictvím e-mailu.

Dále integrujeme Prisma jako náš databázový adaptér. Začněte instalací požadovaných balíčků Prisma pomocí příkazu:

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

Tyto balíčky umožní bezproblémovou komunikaci mezi naší aplikací Next.js a databází. Kromě toho také musíme nainstalovat Prisma jako závislost pro vývojáře spuštěním:

yarn add prisma --dev

Tento krok zajišťuje, že máme potřebné nástroje pro práci s Prismou a jejím automaticky generovaným tvůrcem dotazů pro databázové interakce.

Instalací těchto závislostí jsme v našem projektu Next.js nastavili základ pro implementaci autentizace bez hesla pomocí NextAuth.js a Prisma.

Nastavení Prisma

Pro použití ověřování bez hesla v projektu Next.js je nutné nastavit Prisma a mít přístup k SMTP serveru pro odesílání e-mailů. Tento tutoriál vás provede používáním osobního účtu Gmail k odesílání e-mailů. Pro úspěšné nastavení postupujte podle níže uvedených kroků.

Nejprve vytvořte složku „prisma“ v kořenovém adresáři vašeho projektu. Tato složka bude obsahovat soubory a konfigurace související s Prisma. Poté ve složce "prisma" vytvořte nový soubor s názvem "schema.prisma". Soubor schématu definuje strukturu vaší databáze a slouží jako plán pro automaticky generovaný kód Prismy.

Pokud jste s konceptem schématu nováčkem, nebojte se! Schéma určuje tabulky, pole, vztahy a omezení vaší databáze. Chcete-li vytvořit schéma, můžete se podívat na oficiální dokumentaci NextAuth.js a zkopírovat tam uvedené vzorové schéma. Toto schéma je výchozím bodem a lze jej upravit tak, aby vyhovovalo požadavkům vaší aplikace.

Dále vytvořte soubor ".env" v kořenovém adresáři vašeho projektu. Tento soubor bude ukládat vaše proměnné prostředí, včetně nezbytných konfigurací pro váš server SMTP. Chcete-li naplnit soubor ".env", můžete zkopírovat ukázkové konfigurace uvedené níže. Ujistěte se, že jste do příslušných polí zadali přihlašovací údaje k účtu Gmail a nastavení serveru 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

Podle těchto kroků nastavíte Prisma a nakonfigurujete server SMTP pro odesílání e-mailů pomocí vašeho účtu Gmail. Tyto přípravy jsou klíčové pro povolení toku ověřování bez hesla ve vašem projektu Next.js.

Poznámka

Pokud jste pro svůj účet Google povolili dvoufaktorové ověřování (2FA), musíte si vytvořit heslo aplikace. Heslo aplikace je odlišné heslo, které umožňuje přístup ke konkrétním aplikacím nebo zařízením, aniž by bylo odhaleno heslo primárního účtu Google. Chcete-li vygenerovat heslo aplikace, postupujte podle pokynů níže.

1. Přejděte na stránku nastavení účtu Google na adrese https://myaccount.google.com/.

2. Přejděte na kartu „Zabezpečení“.

3. Vyhledejte sekci „2FA“, přejděte dolů a vyberte „Hesla aplikací“.

4. Můžete být vyzváni k opětovnému zadání hesla účtu Google pro ověření zabezpečení.

5. V rozevíracím seznamu „Vybrat aplikaci“ vyberte „Pošta“ nebo „Jiné (vlastní název)“.

• Pokud je k dispozici možnost "Pošta", vyberte ji.

• Pokud možnost "Pošta" není k dispozici, vyberte "Jiné (vlastní název)" a zadejte vlastní název pro identifikaci.

6. Klikněte na tlačítko "Generate" nebo "Generate Password".

7. Google vám vygeneruje jedinečné heslo aplikace. Toto heslo si poznamenejte, protože jej budeme používat v naší aplikaci pro odesílání e-mailů.

8. Toto vygenerované heslo aplikace použijte v konfiguraci serveru SMTP vaší aplikace Next.js. Nahraďte své běžné heslo účtu Gmail tímto heslem aplikace.

To zajišťuje, že i když je povoleno 2FA, vaše aplikace může bezpečně odesílat e-maily pomocí vašeho účtu Gmail.

PostgreSQL pomocí Supabase

Než budeme moci pokračovat, musíme se ujistit, že databáze pro náš projekt funguje správně. Pro toto demo doporučujeme použít databázi Supabase PostgreSQL. Chcete-li začít s projektem Supabase a získat adresu URL připojení PostgreSQL, postupujte takto:

1. Přejděte na supabase.io a přihlaste se ke svému účtu nebo si vytvořte nový, pokud jej nemáte.

2. Jakmile se přihlásíte, budete přesměrováni na řídicí panel Supabase. Kliknutím na „Vytvořit nový projekt“ zahájíte nový projekt.

3. Pojmenujte svůj projekt a vyberte region nejblíže vaší aktuální poloze. Heslo si zapamatujte, budete ho potřebovat později.

4. Po vytvoření projektu se dostanete na řídicí panel projektu. Klikněte na "Databáze" na levém postranním panelu pro přístup k nastavení databáze.

5. V sekci "Databáze" najdete URL připojení k PostgreSQL. Tato adresa URL obsahuje všechny potřebné informace pro připojení k databázi vašeho projektu Supabase, jako je hostitel, port, název databáze, uživatelské jméno a heslo. Zobrazí se ve formátu: postgres://<uživatelské jméno>:<heslo>@<hostitel>:<port>/<databáze>

6. Zkopírujte adresu URL připojení PostgreSQL a uchovejte ji v bezpečí. Budete jej potřebovat k navázání spojení mezi vaší aplikací a databází Supabase.

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

Nyní se ujistíme, že vygenerujeme našeho klienta Prisma spuštěním následujícího příkazu: `npx prisma generation`.

Prisma Client je databázový klient automaticky generovaný na základě vašeho schématu. Ve výchozím nastavení je Prisma Client generován do složky `node_modules/.prisma/client`, ale můžete [v případě potřeby zadat vlastní umístění](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Dále přistoupíme k vytvoření naší počáteční migrace. Spusťte následující příkaz: `npx prisma migrate dev`. Každé migraci můžete dát popisný název.

V Prisma je migrace metoda používaná ke správě úprav vašeho databázového schématu v průběhu času. Umožňuje vám upravit strukturu databáze bez ztráty již existujících dat. Tyto migrace jsou zásadní, protože zajišťují, že schéma databáze odpovídá potřebám vaší aplikace, když se mění. Pomocí nástroje pro migraci společnosti Prisma můžete tyto změny pohodlně verzovat, aplikovat a vrátit zpět, čímž zjednodušíte týmovou práci a zachováte jednotné schéma databáze v různých prostředích.

Nyní, když zkontrolujeme naši databázi, budeme moci vidět změny z naší počáteční migrace, které se projeví v sekci databáze.

Provedením počáteční migrace jsme aplikovali úpravy našeho databázového schématu, jak je definováno ve skriptu migrace.

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

### Nastavení NextAuthJS s Prisma Adapter

V aplikaci Next.js používá NextAuthJS ke správě požadavků na autentizaci univerzální cestu, známou také jako zástupná nebo záložní trasa. Tato dynamická trasa je definována pomocí souborového směrovacího systému v Next.js.

Vytvořte složku s názvem „**api**“ v adresáři „**app**“. Ve složce "**api**" vytvořte složku "**auth**". Uvnitř složky "**auth**" vytvořte univerzální cestu nazvanou "**[...nextauth]**" jako složku. Nakonec vytvořte soubor "**route.ts**" ve složce catch-all route a přidejte následující 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 souboru catch-all route importujeme knihovnu NextAuthJS a nastavujeme možnosti ověřování, poskytovatele a konfigurace. NextAuthJS zpracovává analýzu příchozích požadavků, identifikuje nezbytnou autentizační akci a provádí příslušnou logiku podle zadaných možností.

Poskytnutý kód nastaví NextAuthJS s adaptérem Prisma pro ověřování pomocí poskytovatele e-mailu. Vysvětleme každé tvrzení:

1. Dovoz:

• PrismaAdapter a PrismaClient jsou importovány z @next-auth/prisma-adapter a @prisma/client, v daném pořadí. Ty se používají k integraci NextAuthJS s Prisma.

• NextAuth je importován z next-auth a je hlavní knihovnou pro zpracování ověřování v aplikacích Next.js.

• EmailProvider je importován z next-auth/providers/email a používá se jako poskytovatel pro ověřování na základě e-mailu.

2. Nastavení hranolu:

• Instance PrismaClient je vytvořena pomocí nové PrismaClient(). To umožňuje komunikaci s Prisma ORM a podkladovou databází.

3. Možnosti ověření:

• authOptions je objekt, který definuje konfiguraci pro ověřování v NextAuthJS.

• Vlastnost adapter je nastavena na PrismaAdapter(prisma), která spojuje NextAuthJS s Prisma pomocí PrismaAdapter.

• Pole providers obsahuje jednoho poskytovatele, EmailProvider. Je nakonfigurován s nezbytnými detaily e-mailového serveru a e-mailovou adresou from.

4. Obslužný program NextAuth:

• Funkce NextAuth je volána s argumentem authOptions, čímž je vytvořena autentizační obsluha.

• Výsledný handler je přiřazen k proměnné handler.

5. Export:

• handler je exportován jako GET a POST pro podporu požadavků HTTP GET i POST.

Nyní spustíme náš server a otestujeme funkčnost. Nejprve spusťte vývojový server spuštěním yarn dev. Dále otevřete prohlížeč a navštivte localhost:3000, abyste viděli aplikaci v akci.

Chcete-li otestovat funkci ověřování, navštivte localhost:3000/api/auth/signin. Zde zažijete kouzlo NextAuthJS. Poskytnutá šablona, ​​která je součástí NextAuthJS, umožňuje proces přihlašování bez hesla. Chcete-li to vyzkoušet, zadejte platnou e-mailovou adresu.

Jakmile e-mail odešlete, NextAuthJS se postará o zákulisní proces. Nejprve vygeneruje a odešle e-mail obsahující jedinečný odkaz pro přihlášení na zadanou e-mailovou adresu. Tento odkaz slouží jako bezpečný ověřovací token pro uživatele. Poté, když uživatel klikne na odkaz, NextAuthJS ověří token a ověří uživatele.

Tato funkce přihlašování bez hesla zvyšuje bezpečnost a uživatelskou zkušenost tím, že eliminuje potřebu hesel. Uživatelé mohou rychle a bezpečně přistupovat ke svým účtům pouhým kliknutím na odkaz přijatý e-mailem. Zefektivňuje proces přihlašování a snižuje riziko zranitelnosti související s heslem.

Když uživatel klikne na přihlašovací e-mail vygenerovaný NextAuthJS a ověří se, v zákulisí proběhne několik akcí, které usnadní bezproblémové přihlášení.

1. Ověření odkazu e-mailem: Když uživatel klikne na odkaz pro přihlášení, NextAuthJS ověří ověřovací token vložený do odkazu. Tento token zajišťuje bezpečnost a integritu procesu ověřování.

2. Proces ověřování: Po úspěšném ověření tokenu NextAuthJS identifikuje uživatele a dokončí proces ověření. Ověřuje identitu uživatele na základě poskytnutého tokenu a jakýchkoli dalších konfigurovaných autentizačních faktorů, jako je vícefaktorové ověřování.

3. Vytvoření relace: Po úspěšném ověření vytvoří NextAuthJS pro uživatele relaci. Relace je trvalý stav, který představuje stav autentizace uživatele a umožňuje mu přístup k chráněným zdrojům, aniž by se museli znovu ověřovat pro následné požadavky.

4. Soubory cookie: NextAuthJS nastavuje v prohlížeči uživatele zabezpečené soubory cookie pouze s protokolem HTTP za účelem správy relace. Tyto soubory cookie hrají klíčovou roli při udržování stavu autentizace uživatele v rámci více požadavků. Soubory cookie obvykle zahrnují soubor cookie relace a volitelně soubor cookie obnovovacího tokenu, v závislosti na konfiguraci ověřování.

1. Soubor cookie relace: Soubor cookie relace obsahuje identifikátor relace (např. náhodně vygenerovaný řetězec), který jednoznačně identifikuje relaci uživatele. Pomáhá NextAuthJS přidružit následné požadavky ke správné relaci a uživateli.

2. CSRF Token Cookie: NextAuthJS nastavuje soubor cookie tokenu CSRF (Cross-Site Request Forgery) na ochranu před útoky CSRF. Token CSRF je jedinečná hodnota generovaná NextAuthJS a uložená v cookie. Používá se k ověření a ověření pravosti následných požadavků uživatele. Když uživatel odešle formuláře nebo provede citlivé akce, je token CSRF zahrnut do záhlaví nebo těla požadavku, aby bylo zajištěno, že požadavek pochází z relace ověřeného uživatele a ne ze škodlivého zdroje.

3. Callback URL Cookie: NextAuthJS nastavuje soubor cookie zpětného volání URL k uložení původní adresy URL, ke které se uživatel pokoušel dostat, než byl přesměrován na tok ověřování. Tento soubor cookie pomáhá NextAuthJS přesměrovat uživatele po úspěšné autentizaci zpět na požadovanou stránku. Zajišťuje bezproblémový uživatelský zážitek tím, že uživatele bezproblémově vrací na zamýšlené místo určení namísto obecné vstupní stránky.

Použitím zabezpečených souborů cookie pouze HTTP zajišťuje NextAuthJS, že stav autentizace zůstane bezpečný a odolný proti neoprávněné manipulaci. Soubory cookie jsou šifrovány, což zabraňuje neoprávněnému přístupu nebo úpravám ze strany škodlivých činitelů.

Skvělá práce při úspěšné integraci NextAuthJS s adaptérem Prisma do vaší aplikace Next.js! Díky jednoduchosti a přizpůsobivosti poskytované NextAuthJS máte nyní spolehlivý autentizační systém.

Kód použitý v této příručce naleznete v úložišti GitHub, které je propojeno níže: https://github.com/codelabsacademy/next-auth-guide.

Ale proč se zastavit tady? Pokud jste nadšení pro vývoj webových aplikací a toužíte vylepšit své dovednosti, zvažte přihlášení na náš bootcamp pro vývoj webových aplikací. Náš bootcamp nabízí komplexní vzdělávací zkušenost, která vás vybaví znalostmi a praktickými dovednostmi nezbytnými k tomu, abyste vynikli v dynamickém světě vývoje webu.

Vstupem do našeho bootcampu získáte praktické zkušenosti se špičkovými technologiemi, budete pracovat na skutečných projektech a získáte personalizované poradenství od odborníků z oboru. Ať už jste začátečník nebo zkušený vývojář, náš program je navržen tak, aby posunul vaše dovednosti v oblasti vývoje webu na další úroveň.

Nenechte si ujít tuto příležitost urychlit svou cestu vývoje webu. Přihlaste se na náš bootcamp pro vývoj webových aplikací ještě dnes a odemkněte svůj plný potenciál ve vzrušující oblasti vývoje webu. Pojďme společně budovat úžasné digitální zážitky a utvářet budoucnost webu.