Logowanie bez hasła w NextJs 13

W tym artykule omówimy kroki niezbędne do wdrożenia uwierzytelniania bez hasła w projekcie Next.js przy użyciu biblioteki NextAuth.js. Dodatkowo, aby to osiągnąć, będziemy wykorzystywać Prisma jako nasz adapter bazy danych.

Uwierzytelnianie bez hasła to innowacyjne podejście, które eliminuje potrzebę stosowania tradycyjnych kombinacji nazwy użytkownika i hasła. Zamiast tego oferuje bezpieczniejsze i bardziej przyjazne dla użytkownika uwierzytelnianie, wykorzystując alternatywne metody, takie jak magiczne linki e-mailowe lub jednorazowe kody wysyłane SMS-em.

Next.js to popularny framework React do budowy aplikacji internetowych, znany ze swojej prostoty i wydajności. Możemy łatwo włączyć uwierzytelnianie bez hasła do naszego projektu, integrując NextAuth.js, bibliotekę uwierzytelniania zaprojektowaną specjalnie dla Next.js.

Dodatkowo będziemy polegać na Prisma jako naszym adapterze bazy danych. Prisma to narzędzie ORM (mapowanie obiektowo-relacyjne), które upraszcza interakcje z bazą danych, udostępniając bezpieczny dla typu i automatycznie generowany kreator zapytań. Obsługuje wiele baz danych, w tym PostgreSQL, MySQL i SQLite, co czyni go wszechstronnym wyborem w przypadku naszych implementacji uwierzytelniania.

W całym tym przewodniku przedstawimy instrukcje krok po kroku dotyczące konfigurowania uwierzytelniania bez hasła przy użyciu narzędzia NextAuth.js w projekcie Next.js. Zademonstrujemy także jak zintegrować Prisma jako nasz adapter bazy danych, pozwalający na bezproblemową komunikację pomiędzy naszą aplikacją a bazą danych.

Teraz zbadamy, jak poprawić bezpieczeństwo i wygodę użytkownika naszej aplikacji Next.js, korzystając z uwierzytelniania bez hasła i możliwości NextAuth.js i Prisma. Zaczynajmy.

Co to jest logowanie bez hasła?

Logowanie bez hasła, jak sama nazwa wskazuje, to metoda uwierzytelniania, która eliminuje potrzebę stosowania tradycyjnych kombinacji nazwy użytkownika i hasła. Zamiast tego wykorzystuje alternatywne sposoby weryfikacji tożsamości użytkownika, takie jak magiczne linki e-mailowe lub jednorazowe kody wysyłane SMS-em. Takie podejście ma kilka zalet w porównaniu z tradycyjnymi metodami logowania. Po pierwsze, eliminuje ryzyko wystąpienia luk w zabezpieczeniach związanych z hasłami, takich jak słabe hasła lub ponowne użycie hasła. Po drugie, upraszcza obsługę użytkownika, eliminując potrzebę zapamiętywania i wprowadzania skomplikowanych haseł.

Aby wdrożyć logowanie bez hasła za pomocą magicznych linków e-mailowych lub kodów jednorazowych, potrzebujemy serwera SMTP (Simple Mail Transfer Protocol).

Za wysyłanie wiadomości e-mail przez Internet odpowiada serwer SMTP. W kontekście uwierzytelniania bez hasła serwer wysyła magiczne linki lub jednorazowe kody na zarejestrowany adres e-mail użytkownika. Kiedy użytkownik inicjuje proces logowania, generowany jest i wysyłany do użytkownika e-mail zawierający unikalny link lub kod. Użytkownik może następnie kliknąć łącze lub wprowadzić kod, aby zakończyć proces uwierzytelniania. Serwer SMTP pełni rolę pośrednika pomiędzy aplikacją a usługą poczty elektronicznej użytkownika, zapewniając bezpieczne i niezawodne dostarczanie wiadomości uwierzytelniających. Wykorzystując serwer SMTP, możemy skutecznie wdrożyć logowanie bez hasła i zapewnić naszym użytkownikom bezproblemowe uwierzytelnianie.

Zacznijmy!

Najpierw musimy wygenerować nowy, świeży projekt Next.js. Aby to zrobić, użyj następującego polecenia:

npx create-next-app@latest

Po wygenerowaniu nowego, świeżego projektu Next.js możesz przejść do nowo utworzonego katalogu projektu.

Zmieniając katalog na projekt, będziesz mógł eksplorować różne foldery i pliki tworzące strukturę projektu Next.js.

Zrozumienie struktury projektu jest niezbędne do efektywnego rozwoju i organizacji aplikacji Next.js. Odwołując się do oficjalnej dokumentacji, możesz wykorzystać najlepsze praktyki i uzyskać wgląd w struktury kodu, zarządzać zasobami statycznymi i tworzyć komponenty wielokrotnego użytku.

Instalowanie naszych zależności

Aby włączyć uwierzytelnianie bez hasła w naszym projekcie Next.js przy użyciu NextAuth.js, musimy najpierw zainstalować wymagane zależności. Uruchom polecenie yarn add next-auth nodemailer, aby dodać do naszego projektu zarówno NextAuth.js, jak i nodemailer.

W szczególności używamy nodemailera, ponieważ jest to popularny i wszechstronny moduł do wysyłania wiadomości e-mail w Node.js. Zapewnia prosty i niezawodny sposób wysyłania magicznych linków lub jednorazowych kodów wymaganych do uwierzytelnienia bez hasła za pośrednictwem poczty elektronicznej.

Następnie zintegrujmy Prisma jako nasz adapter bazy danych. Zacznij od zainstalowania wymaganych pakietów Prisma za pomocą polecenia:

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

Pakiety te umożliwią bezproblemową komunikację pomiędzy naszą aplikacją Next.js a bazą danych. Dodatkowo musimy także zainstalować Prisma jako zależność deweloperską, uruchamiając:

yarn add prisma --dev

Ten krok zapewnia, że mamy narzędzia niezbędne do pracy z Prisma i jej automatycznie generowanym narzędziem do tworzenia zapytań na potrzeby interakcji z bazami danych.

Instalując te zależności, kładziemy podwaliny pod wdrożenie uwierzytelniania bez hasła przy użyciu NextAuth.js i Prisma w naszym projekcie Next.js.

Skonfiguruj Prisma

Aby móc korzystać z uwierzytelniania bez hasła w projekcie Next.js, konieczne jest skonfigurowanie Prisma i dostęp do serwera SMTP w celu wysyłania wiadomości e-mail. W tym samouczku dowiesz się, jak używać osobistego konta Gmail do wysyłania e-maili. Aby pomyślnie przeprowadzić konfigurację, wykonaj poniższe czynności.

Najpierw utwórz folder „prisma” w katalogu głównym swojego projektu. W tym folderze będą przechowywane pliki i konfiguracje związane z Prisma. Następnie w folderze „prisma” utwórz nowy plik o nazwie „schema.prisma”. Plik schematu definiuje strukturę Twojej bazy danych i służy jako plan dla automatycznie generowanego kodu Prisma.

Jeśli koncepcja schematu jest dla Ciebie nowicjuszem, nie martw się! Schemat określa tabele, pola, relacje i ograniczenia bazy danych. Aby utworzyć schemat, możesz zapoznać się z oficjalną dokumentacją NextAuth.js i skopiować podany tam przykładowy schemat. Schemat ten stanowi punkt wyjścia i można go dostosować do wymagań aplikacji.

Następnie utwórz plik „.env” w katalogu głównym projektu. W tym pliku będą przechowywane zmienne środowiskowe, w tym niezbędne konfiguracje serwera SMTP. Aby zapełnić plik „.env”, możesz skopiować przykładowe konfiguracje podane poniżej. Pamiętaj o wprowadzeniu danych logowania do konta Gmail i ustawień serwera SMTP w odpowiednich polach.

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

Wykonując te kroki, skonfigurujesz Prisma i serwer SMTP do wysyłania e-maili za pomocą konta Gmail. Te przygotowania mają kluczowe znaczenie dla umożliwienia przepływu uwierzytelniania bez hasła w Twoim projekcie Next.js.

Notatka

Musisz utworzyć hasło do aplikacji, jeśli na swoim koncie Google włączyłeś uwierzytelnianie dwuskładnikowe (2FA). Hasło do aplikacji to odrębne hasło, które zapewnia dostęp do określonych aplikacji lub urządzeń bez ujawniania głównego hasła do konta Google. Postępuj zgodnie z poniższymi instrukcjami, aby wygenerować hasło do aplikacji.

Przejdź do strony ustawień konta Google, odwiedzając https://myaccount.google.com/.
Przejdź do zakładki „Bezpieczeństwo”.
Poszukaj sekcji „2FA”, przewiń w dół i wybierz „Hasła aplikacji”.

Może zostać wyświetlony monit o ponowne wprowadzenie hasła do konta Google w celu weryfikacji bezpieczeństwa.
Z menu rozwijanego „Wybierz aplikację” wybierz „Poczta” lub „Inne (nazwa niestandardowa)”.

Jeśli dostępna jest opcja „Poczta”, wybierz ją.
Jeśli opcja „Poczta” nie jest dostępna, wybierz „Inne (nazwa niestandardowa)” i podaj niestandardową nazwę w celu identyfikacji.

Kliknij na przycisk „Generuj” lub „Generuj hasło”.
Google wygeneruje dla Ciebie unikalne hasło do aplikacji. Zanotuj to hasło, ponieważ będziemy go używać w naszej aplikacji do wysyłania e-maili.
Użyj wygenerowanego hasła do aplikacji w konfiguracji serwera SMTP aplikacji Next.js. Zamień swoje zwykłe hasło do konta Gmail na to hasło do aplikacji.

Dzięki temu nawet przy włączonej funkcji 2FA Twoja aplikacja będzie mogła bezpiecznie wysyłać wiadomości e-mail przy użyciu konta Gmail.

PostgreSQL przy użyciu Supabase

Zanim będziemy mogli kontynuować, musimy upewnić się, że baza danych naszego projektu działa poprawnie. W przypadku tej wersji demonstracyjnej zalecamy użycie bazy danych Supabase PostgreSQL. Aby rozpocząć pracę z projektem Supabase i uzyskać adres URL połączenia PostgreSQL, wykonaj następujące kroki:

Przejdź do supabase.io i zaloguj się na swoje konto lub utwórz nowe, jeśli go nie posiadasz.
Po zalogowaniu zostaniesz przekierowany do panelu kontrolnego Supabase. Kliknij „Utwórz nowy projekt”, aby rozpocząć nowy projekt.
Nazwij swój projekt i wybierz region najbliższy Twojej bieżącej lokalizacji. Zapamiętaj swoje hasło, będzie Ci potrzebne później.
Po utworzeniu projektu zostaniesz przeniesiony do panelu projektu. Kliknij „Baza danych” na lewym pasku bocznym, aby uzyskać dostęp do ustawień bazy danych.
W sekcji „Baza danych” znajdziesz adres URL połączenia PostgreSQL. Ten adres URL zawiera wszystkie informacje niezbędne do połączenia z bazą danych projektu Supabase, takie jak host, port, nazwa bazy danych, nazwa użytkownika i hasło. Zostanie wyświetlony w formacie: postgres://<nazwa użytkownika>:<hasło>@<host>:<port>/<baza danych>

Skopiuj adres URL połączenia PostgreSQL i przechowuj go w bezpiecznym miejscu. Będziesz go potrzebować do ustanowienia połączenia między aplikacją a bazą danych Supabase.

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

Teraz upewnijmy się, że wygenerowaliśmy naszego klienta Prisma, uruchamiając następujące polecenie: `npx prisma generate`.

Klient Prisma to klient bazy danych generowany automatycznie na podstawie Twojego schematu. Domyślnie klient Prisma jest generowany w folderze „node_modules/.prisma/client”, ale możesz [w razie potrzeby określić niestandardową lokalizację](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).

Następnie przystąpimy do tworzenia naszej początkowej migracji. Uruchom następującą komendę: `npx prisma migruj dev`. Każdej migracji możesz nadać opisową nazwę.

W Prisma migracja to metoda używana do zarządzania zmianami w schemacie bazy danych w miarę upływu czasu. Pozwala modyfikować strukturę bazy danych bez utraty istniejących danych. Te migracje są kluczowe, ponieważ zapewniają dopasowanie schematu bazy danych do zmieniających się potrzeb aplikacji. Dzięki narzędziu do migracji Prisma możesz wygodnie zmieniać wersje, stosować i przywracać te zmiany, upraszczając pracę zespołową i utrzymując jednolity schemat bazy danych w różnych środowiskach.

Teraz, jeśli sprawdzimy naszą bazę danych, będziemy mogli zobaczyć zmiany z naszej początkowej migracji odzwierciedlone w sekcji bazy danych.

Wykonując początkową migrację, zastosowaliśmy modyfikacje w schemacie naszej bazy danych zgodnie z definicją w skrypcie migracji.

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

### Konfigurowanie NextAuthJS z adapterem Prisma

W aplikacji Next.js NextAuthJS używa trasy catch-all, zwanej także trasą wieloznaczną lub trasą awaryjną, do zarządzania żądaniami uwierzytelnienia. Ta dynamiczna trasa jest definiowana przy użyciu systemu routingu opartego na plikach w Next.js.

Utwórz folder o nazwie „**api**” w katalogu „**app**”. W folderze „**api**” utwórz folder „**auth**”. W folderze „**auth**” utwórz trasę typu catch-all o nazwie „**[...nextauth]**” jako folder. Na koniec utwórz plik „**route.ts**” w folderze catch-all Route i dodaj następujący 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 };

W pliku trasy catch-all importujemy bibliotekę NextAuthJS i konfigurujemy opcje uwierzytelniania, dostawców i konfiguracje. NextAuthJS obsługuje analizę przychodzących żądań, identyfikuje niezbędną akcję uwierzytelniającą i realizuje odpowiednią logikę zgodnie z określonymi opcjami.

Dostarczony kod konfiguruje NextAuthJS z adapterem Prisma w celu uwierzytelniania przy użyciu dostawcy poczty e-mail. Wyjaśnijmy każde stwierdzenie:

Import:

PrismaAdapter i PrismaClient są importowane odpowiednio z @next-auth/prisma-adapter i @prisma/client. Służą one do integracji NextAuthJS z Prisma.
NextAuth jest importowany z next-auth i jest główną biblioteką do obsługi uwierzytelniania w aplikacjach Next.js.
EmailProvider jest importowany z next-auth/providers/email i jest używany jako dostawca uwierzytelniania opartego na e-mailach.

Konfiguracja Prismy:

Instancja PrismaClient jest tworzona przy użyciu new PrismaClient(). Umożliwia to komunikację z Prisma ORM i podstawową bazą danych.

Opcje uwierzytelniania:

authOptions to obiekt określający konfigurację uwierzytelniania w NextAuthJS.
Właściwość adapter jest ustawiona na PrismaAdapter(prisma), która łączy NextAuthJS z Prisma za pomocą PrismaAdapter.
Tablica providers zawiera pojedynczego dostawcę, EmailProvider. Jest skonfigurowany z niezbędnymi danymi serwera e-mail i adresem e-mail from.

Następny moduł obsługi uwierzytelniania:

Funkcja NextAuth jest wywoływana z authOptions jako argumentem, tworząc procedurę uwierzytelniania.
Wynikowy program obsługi jest przypisywany do zmiennej handler.

Eksport:

handler jest eksportowany jako GET i POST w celu obsługi żądań HTTP GET i POST.

Teraz uruchommy nasz serwer i przetestujmy jego funkcjonalność. Najpierw uruchom serwer programistyczny, uruchamiając yarn dev. Następnie otwórz przeglądarkę i odwiedź „localhost:3000”, aby zobaczyć aplikację w działaniu.

Aby przetestować funkcjonalność uwierzytelniania, odwiedź localhost:3000/api/auth/signin. Tutaj doświadczysz magii NextAuthJS. Dostarczony szablon dołączony do NextAuthJS umożliwia proces logowania bez hasła. Aby wypróbować, wprowadź prawidłowy adres e-mail.

Po przesłaniu wiadomości e-mail NextAuthJS zajmie się procesem za kulisami. Najpierw wygeneruje i wyśle wiadomość e-mail zawierającą unikalny link do logowania na podany adres e-mail. Link ten służy jako bezpieczny token uwierzytelniający użytkownika. Następnie, gdy użytkownik kliknie łącze, NextAuthJS zweryfikuje token i uwierzytelni użytkownika.

Ta funkcja logowania bez hasła zwiększa bezpieczeństwo i wygodę użytkownika, eliminując potrzebę stosowania haseł. Użytkownicy mogą szybko i bezpiecznie uzyskać dostęp do swoich kont, klikając link otrzymany pocztą elektroniczną. Usprawnia proces logowania i zmniejsza ryzyko wystąpienia luk w zabezpieczeniach związanych z hasłami.

Gdy użytkownik kliknie wiadomość e-mail logowania wygenerowaną przez NextAuthJS i zostanie uwierzytelniony, za kulisami odbywa się kilka działań, które ułatwiają bezproblemowe logowanie.

1. Weryfikacja łącza e-mail: Gdy użytkownik kliknie łącze logowania, NextAuthJS sprawdza token uwierzytelniający osadzony w łączu. Token ten zapewnia bezpieczeństwo i integralność procesu uwierzytelniania.

2. Proces uwierzytelniania: Po pomyślnej weryfikacji tokena NextAuthJS identyfikuje użytkownika i kończy proces uwierzytelniania. Weryfikuje tożsamość użytkownika na podstawie przekazanego tokena i skonfigurowanych dodatkowych czynników uwierzytelniających, takich jak uwierzytelnianie wieloskładnikowe.

3. Tworzenie sesji: Po pomyślnym uwierzytelnieniu NextAuthJS tworzy sesję dla użytkownika. Sesja to trwały stan, który reprezentuje stan uwierzytelnienia użytkownika i umożliwia mu dostęp do chronionych zasobów bez konieczności ponownego uwierzytelniania w przypadku kolejnych żądań.

4. Pliki cookie: NextAuthJS ustawia w przeglądarce użytkownika bezpieczne pliki cookie tylko HTTP w celu zarządzania sesją. Te pliki cookie odgrywają kluczową rolę w utrzymaniu stanu uwierzytelnienia użytkownika w przypadku wielu żądań. Pliki cookie zazwyczaj obejmują plik cookie sesji i opcjonalnie plik cookie tokena odświeżającego, w zależności od konfiguracji uwierzytelniania.

Plik cookie sesji: Plik cookie sesji zawiera identyfikator sesji (np. losowo wygenerowany ciąg znaków), który jednoznacznie identyfikuje sesję użytkownika. Pomaga NextAuthJS powiązać kolejne żądania z właściwą sesją i użytkownikiem.
Token cookie CSRF: NextAuthJS ustawia plik cookie tokena CSRF (Cross-Site Request Forgery), aby chronić przed atakami CSRF. Token CSRF to unikalna wartość generowana przez NextAuthJS i przechowywana w pliku cookie. Służy do walidacji i weryfikacji autentyczności kolejnych żądań składanych przez użytkownika. Gdy użytkownik przesyła formularze lub wykonuje poufne działania, token CSRF jest dołączany do nagłówków lub treści żądania, aby mieć pewność, że żądanie pochodzi z sesji uwierzytelnionego użytkownika, a nie ze złośliwego źródła.
Plik cookie adresu URL wywołania zwrotnego: NextAuthJS ustawia plik cookie adresu URL wywołania zwrotnego w celu przechowywania oryginalnego adresu URL, do którego użytkownik próbował uzyskać dostęp przed przekierowaniem do procesu uwierzytelniania. Ten plik cookie pomaga NextAuthJS przekierować użytkownika z powrotem na żądaną stronę po pomyślnym uwierzytelnieniu. Zapewnia płynną obsługę użytkownika, płynnie odsyłając go do zamierzonego miejsca docelowego zamiast do ogólnej strony docelowej.

Używając bezpiecznych plików cookie tylko HTTP, NextAuthJS zapewnia, że stan uwierzytelnienia pozostaje bezpieczny i odporny na manipulacje. Pliki cookies są szyfrowane, co uniemożliwia nieuprawniony dostęp lub modyfikację przez złośliwe podmioty.

Świetna robota przy pomyślnej integracji NextAuthJS z adapterem Prisma z aplikacją Next.js! Dzięki łatwości i możliwościom adaptacji, jakie zapewnia NextAuthJS, masz teraz niezawodny system uwierzytelniania.

Sprawdź repozytorium GitHub, do którego link znajduje się poniżej, aby znaleźć kod używany w tym przewodniku: https://github.com/codelabsacademy/next-auth-guide.

Ale po co się tu zatrzymywać? Jeśli pasjonujesz się tworzeniem stron internetowych i chcesz podnosić swoje umiejętności, rozważ zgłoszenie się na nasz bootcamp poświęcony tworzeniu stron internetowych. Nasz bootcamp oferuje kompleksowe doświadczenie edukacyjne, wyposażając Cię w wiedzę i praktyczne umiejętności niezbędne do osiągnięcia doskonałości w dynamicznym świecie tworzenia stron internetowych.

Dołączając do naszego bootcampu, zdobędziesz praktyczne doświadczenie z najnowocześniejszymi technologiami, będziesz pracować nad projektami w świecie rzeczywistym i otrzymasz spersonalizowane wskazówki od ekspertów branżowych. Niezależnie od tego, czy jesteś początkującym, czy doświadczonym programistą, nasz program ma na celu przeniesienie Twoich umiejętności tworzenia stron internetowych na wyższy poziom.

Nie przegap tej okazji, aby przyspieszyć swoją podróż w zakresie tworzenia stron internetowych. Aplikuj już dziś na nasz bootcamp poświęcony tworzeniu stron internetowych i odblokuj swój pełny potencjał w ekscytującej dziedzinie tworzenia stron internetowych. Razem twórzmy niesamowite cyfrowe doświadczenia i kształtujmy przyszłość sieci.

Implementacja logowania bez hasła w projekcie Next.js 13 za pomocą NextAuth.js i Prisma

Co to jest logowanie bez hasła?

Zacznijmy!

Instalowanie naszych zależności

Skonfiguruj Prisma

PostgreSQL przy użyciu Supabase

Usługi związane z karierą

Pozostańmy w kontakcie