Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Uwierzytelnianie jest kluczowym elementem tworzenia aplikacji. Pomaga chronić dane użytkowników i zapobiegać złośliwym działaniom. Mówiąc najprościej, określa wiarygodność tożsamości użytkownika, zapewniając, że tylko autoryzowani użytkownicy mają dostęp do aplikacji i jej zasobów.

Tworzenie niestandardowego systemu uwierzytelniania może być czasochłonnym zadaniem i tutaj przydaje się NextAuth.js. Zapewnia bezpieczną obsługę uwierzytelniania dla aplikacji zbudowanych przy użyciu frameworka Next.js.

Co to jest NextAuth.js?

NextAuth.js to lekka biblioteka typu open source, która zapewnia uwierzytelnianie i autoryzacja obsługa aplikacji Next.js. Pozwala programistom szybko i łatwo skonfigurować uwierzytelnianie i autoryzację ich aplikacji Next.js. Zapewnia takie funkcje, jak uwierzytelnianie z wieloma dostawcami, poczta e-mail i uwierzytelnianie bez hasła.

instagram viewer

Jak działa NextAuth.js w uwierzytelnianiu?

Rozwiązanie do uwierzytelniania NextAuth.js zapewnia interfejs API po stronie klienta, który możesz zintegrować z aplikacją Next.js. Możesz go używać do uwierzytelniania użytkowników za pomocą różnych dostawców logowania, u których utworzyli konta.

Pod maską użytkownicy są przekierowywani na stronę logowania dostawcy. Po pomyślnym uwierzytelnieniu dostawca zwraca dane sesji, które zawierają ładunek użytkownika. Ten ładunek może następnie autoryzować dostęp do aplikacji i jej zasobów.

Aktualizacje nowych funkcji w NextAuth.js (v4)

W grudniu 2022 r. NextAuth.js wydało swoją czwartą wersję. Ta wersja została ulepszona w stosunku do poprzedniej wersji, v3, dzięki nowym aktualizacjom i modyfikacjom. Zmiany skupiają się głównie na usprawnieniu wykorzystania biblioteki w procesie uwierzytelniania.

1. Aktualizacje haka useSession

Możesz użyć haka useSession, aby sprawdzić, czy użytkownik jest zalogowany, czy nie. W tej nowej wersji hook useSession zwraca obiekt, który zapewnia prostszy sposób testowania stanów dzięki dodaniu opcji status. Zobacz poniższy kod:

import { useSession } z„następna autoryzacja/reakcja”
eksportdomyślnyfunkcjonowaćCzęść() {
konst { dane: sesja, status } = useSession()


Jeśli (status "zalegalizowany") { 
powrót<P>Zalogowany jako {session.user.email}P>
 }
powrót<P> Nie zarejestrowany P>
}

2. Kontekst SessionProvider staje się obowiązkowy

Nowa wersja 4 wymaga użycia kontekstu SessionProvider. Oznacza to, że będziesz musiał otoczyć swoją aplikację dostawcą useSession. NextAuth.js zaleca umieszczenie aplikacji w pliku _aplikacja.jsx plik.

Dodatkowo metoda clientMaxAge została zastąpiona metodą refetchInterval. Ułatwi to okresowe pobieranie sesji w tle.

import { Dostawca sesji } z„następna autoryzacja/reakcja”
eksportdomyślnyfunkcjonowaćAplikacja({
 Komponent, pageProps: { sesja, ...pageProps }, 
}) {
powrót ( 
<Dostawca sesjisesja={sesja}Interwał ponownego pobierania={5 * 60}>
<Część {...pageProps} />Dostawca sesji>
 )
}

3. Indywidualne importowanie dostawców

NextAuth.js zapewnia kilka usług dostawców, których możesz użyć do zalogowania użytkownika. Zawierają:

  • Korzystanie z wbudowanych dostawców OAuth (np. GitHub, Google).
  • Korzystanie z dostawcy poczty e-mail.

W tej nowej wersji musisz zaimportować każdego dostawcę osobno.

import Dostawca Google z„next-auth/providers/google”
import Dostawca autoryzacji 0 z"next-auth/providers/auth0";

4. Inne drobne zmiany

  • Nazwa importu po stronie klienta została zmieniona na next-auth/react from next-auth/client.
  • Zmiany w argumentach metod wywołania zwrotnego: 
    signIn({użytkownik, konto, profil, adres e-mail, poświadczenia})
    sesja ({ sesja, token, użytkownik })
    jwt({ token, użytkownik, konto, profil, isNewUser })

Pierwsze kroki z NextAuth.js w uwierzytelnianiu

Aby zintegrować NextAuth.js z aplikacjami Next.js, wykonaj poniższe czynności:

  1. Utwórz aplikację Next.js, uruchamiając to polecenie: npx utwórz-następną-aplikację
  2. Uruchomić npm zainstaluj następną autoryzację w swoim terminalu, aby zainstalować NextAuth.js w swojej aplikacji Next.js.
  3. Odwiedzić NextAuth.js oficjalnej dokumentacji i wybierz preferowanego dostawcę z listy obsługiwanych dostawców. Następnie utwórz konto w konsoli programisty wybranego dostawcy/ów i zarejestruj swoją aplikację Next.js.
  4. W konsoli programisty wybranego dostawcy określ URL trasy do domu i URL przekierowania wywołania zwrotnego, zapisz zmiany i skopiuj plik Identyfikator klienta I Sekret klienta.
  5. W katalogu głównym aplikacji Next.js utwórz plik .env do przechowywania Identyfikator klienta I Sekret klienta.
  6. Na koniec w katalogu /pages/api utwórz nowy folder o nazwie autoryzacja. W folderze auth utwórz nowy plik i nadaj mu nazwę [...nextauth].js. W utworzonym pliku dodaj poniższy kod. Kod pokazuje interfejs API po stronie klienta NextAuth.js przy użyciu dostawcy Google: 
import Dostawca Google z„next-auth/providers/google”;
dostawcy: [
 Dostawca Google({
Identyfikator klienta: proces.env.GOOGLE_CLIENT_ID,
Sekret klienta: proces.env.GOOGLE_CLIENT_SECRET
 })
]

Możesz teraz śmiało zbudować stronę uwierzytelniania logowania. Oto renderowanie DOM dla komponentu logowania:

import Reagować z'reagować';
import { useSession, zaloguj się, wyloguj } z„następna autoryzacja/reakcja”
eksportdomyślnyfunkcjonowaćCzęść() {
konst { dane: sesja } = useSession()


 jeśli (sesja) {
powrót (
<>
<P> Zalogowany jako {session.user.email} P>
<przyciskna kliknięcie={() => signOut()}>Wyloguj sięprzycisk>

 )
 }
powrót (
<>
<P> Nie zarejestrowany P>
<przyciskna kliknięcie={() => signIn()}>Zaloguj sięprzycisk>

 )
}

The useSesja Hook uzyskuje dostęp do bieżącego obiektu sesji użytkownika. Gdy użytkownik zaloguje się i zostanie uwierzytelniony przez Google, zwracany jest obiekt sesji z ładunkiem użytkownika. Dzięki temu Next.js może renderować dane użytkownika po stronie klienta aplikacji, w tym przypadku wiadomości e-mail.

Niestandardowe systemy uwierzytelniania vs. Gotowe do użycia rozwiązania, takie jak NextAuth.js

Wybór między budowaniem niestandardowego systemu uwierzytelniania a integracją gotowego do użycia uwierzytelniania rozwiązania, takiego jak NextAuth.js, należy wziąć pod uwagę koszt, złożoność i bezpieczeństwo każdego z nich rozwiązanie.

Jeśli masz zasoby i wiedzę, aby opracować niestandardowy system uwierzytelniania, może to być dla Ciebie najlepsze podejście. Jeśli jednak szukasz gotowego rozwiązania, które jest łatwe do wdrożenia, bezpieczne i ekonomiczne, NextAuth.js może być dobrym wyborem do rozważenia. Ostatecznie wybór będzie zależał od Twoich potrzeb i preferencji.