Nowe aktualizacje w NextAuth.js v4: Co musisz wiedzieć
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 obsługę uwierzytelniania i autoryzacji dla 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.
Jak działa NextAuth.js w uwierzytelnianiu?
Rozwiązanie uwierzytelniania NextAuth.js zapewnia interfejs API po stronie klienta, który można 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 hooka 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 } from "next-auth/react"
export default function Component() {
const { data: session, status } = useSession()
if (status === "authenticated") {
return <p>Signed in as {session.user.email}</p>
}
return <p> Not signed in </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 _app.jsx .
Dodatkowo metoda clientMaxAge została zastąpiona metodą refetchInterval. Ułatwi to okresowe pobieranie sesji w tle.
import { SessionProvider } from "next-auth/react"
export default function App({
Component, pageProps: { session,. ..pageProps },
}) {
return (
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} /> </SessionProvider>
)
}
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 GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "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({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, isNewUser })
Pierwsze kroki z NextAuth.js w uwierzytelnianiu
Aby zintegrować NextAuth.js z aplikacjami Next.js, wykonaj poniższe czynności:
- Utwórz aplikację Next.js, uruchamiając to polecenie: npx create-next-app <nazwa aplikacji>
- Uruchom npm install next-auth w swoim terminalu, aby zainstalować NextAuth.js w swojej aplikacji Next.js.
- Odwiedź oficjalną dokumentację NextAuth.js i wybierz preferowanych dostawców z listy obsługiwanych. Następnie utwórz konto w konsoli programisty wybranego dostawcy/ów i zarejestruj swoją aplikację Next.js.
- W konsoli programisty wybranego dostawcy określ adres URL trasy domowej i adres URL przekierowania wywołania zwrotnego , zapisz zmiany i skopiuj ClientID oraz Client Secret .
- W katalogu głównym aplikacji Next.js utwórz plik . env do przechowywania identyfikatora klienta i klucza tajnego klienta .
- Na koniec w katalogu /pages/api utwórz nowy folder o nazwie auth . 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 GoogleProvider from "next-auth/providers/google";
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
})
]
Możesz teraz śmiało zbudować stronę uwierzytelniania logowania. Oto renderowanie DOM dla komponentu logowania:
import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
<p> Signed in as {session.user.email} </p>
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
<p> Not signed in </p>
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Hak useSession uzyskuje dostęp do obiektu bieżącej 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 a rozwiązania gotowe do użycia, takie jak NextAuth.js
Wybierając między budowaniem niestandardowego systemu uwierzytelniania a integracją gotowego do użycia rozwiązania uwierzytelniającego, takiego jak NextAuth.js, należy wziąć pod uwagę koszt, złożoność i bezpieczeństwo każdego rozwiązania.
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 opłacalne, NextAuth.js może być dobrym wyborem do rozważenia. Ostatecznie wybór będzie zależał od Twoich potrzeb i preferencji.
Dodaj komentarz