Jak zaimplementować uwierzytelnianie w Next.js z Auth0?

„Uwierzytelnianie” to czynność polegająca na sprawdzeniu, czy użytkownik jest tym, za kogo się podaje. Zwykle robimy to, wdrażając system poświadczeń, taki jak użytkownik/hasło, pytania bezpieczeństwa, a nawet rozpoznawanie twarzy.

„Autoryzacja” określa, co użytkownik może (lub nie może) zrobić. Jeśli potrzebujemy obsłużyć uwierzytelnianie i autoryzację w naszej aplikacji internetowej, będziemy potrzebować platformy lub modułu bezpieczeństwa. Możemy rozwijać własną platformę, wdrażać ją i utrzymywać. Możemy też skorzystać z istniejących na rynku platform uwierzytelniania i autoryzacji, które są oferowane jako usługi.

Oceniając, czy lepiej jest dla nas stworzyć własną platformę, czy skorzystać z usługi innej firmy, należy wziąć pod uwagę kilka rzeczy:

• Projektowanie i tworzenie usług uwierzytelniania nie jest naszą podstawową umiejętnością. Są ludzie pracujący specjalnie na tematy związane z bezpieczeństwem, którzy mogą tworzyć lepsze i bezpieczniejsze platformy niż my;
• Możemy zaoszczędzić czas, opierając się na istniejącej platformie uwierzytelniania i wydać go na dodawanie wartości do produktów i usług, na których nam zależy;
• Nie przechowujemy wrażliwych informacji w naszych bazach danych. Oddzielamy go od wszystkich danych związanych z naszymi aplikacjami;
• Narzędzia oferowane przez usługi firm trzecich mają lepszą użyteczność i wydajność, co ułatwia nam administrowanie użytkownikami naszej aplikacji.

Biorąc pod uwagę te czynniki, możemy powiedzieć, że poleganie na platformach uwierzytelniania innych firm może być łatwiejsze, tańsze i nawet bezpieczniejsze niż tworzenie własnego modułu bezpieczeństwa.

W tym artykule zobaczymy, jak zaimplementować uwierzytelnianie i autoryzację w naszych aplikacjach Next.js przy użyciu jednego z istniejących na rynku produktów: Auth0.

Co to jest Auth0?

Umożliwia dodanie zabezpieczeń do aplikacji opracowanych przy użyciu dowolnego języka programowania lub technologii.

„Auth0 to elastyczne rozwiązanie, które umożliwia dodanie usług uwierzytelniania i autoryzacji do aplikacji”.

— Dan Arias, auth0.com

Auth0 ma kilka interesujących funkcji, takich jak:

• Jednokrotne logowanie : po zalogowaniu się do aplikacji, która korzysta z Auth0, nie będziesz musiał ponownie wprowadzać swoich danych uwierzytelniających przy wprowadzaniu innej, która również z niej korzysta. Zostaniesz automatycznie zalogowany do wszystkich z nich;
• Logowanie społecznościowe : Uwierzytelnij się przy użyciu preferowanego profilu w sieci społecznościowej;
• Uwierzytelnianie wieloskładnikowe ;
• Dozwolonych jest wiele protokołów standardowych , takich jak OpenID Connect, JSON Web Token lub OAuth 2.0;
• Narzędzia do raportowania i analizy .

Istnieje bezpłatny plan, którego możesz użyć, aby rozpocząć zabezpieczanie swoich aplikacji internetowych, obejmujący do 7000 aktywnych użytkowników miesięcznie. Zaczniesz płacić, gdy liczba użytkowników wzrośnie.

Kolejną fajną rzeczą w Auth0 jest to, że mamy SDK Next.js dostępny do użycia w naszej aplikacji. Dzięki tej bibliotece, stworzonej specjalnie dla Next.js, możemy łatwo połączyć się z API Auth0.

Auth0 SDK dla Next.js

Jak wspomnieliśmy wcześniej, Auth0 stworzyło (i utrzymuje) SDK skoncentrowany na Next.js, między innymi dostępnymi SDK do łączenia się z API przy użyciu różnych języków programowania. Wystarczy pobrać pakiet NPM, skonfigurować kilka szczegółów dotyczących naszego konta i połączenia Auth0 i gotowe.

Ten pakiet SDK daje nam narzędzia do implementacji uwierzytelniania i autoryzacji za pomocą metod zarówno po stronie klienta, jak i po stronie serwera, przy użyciu tras API na zapleczu i kontekstu reakcji z hakami reakcji na interfejsie.

Zobaczmy jak działają niektóre z nich w przykładowej aplikacji Next.js.

Przykładowa aplikacja Next.js korzystająca z Auth0

Wróćmy do naszego poprzedniego przykładu platformy wideo i utwórzmy małą aplikację, aby pokazać, jak korzystać z zestawu SDK Auth0 Next.js. Skonfigurujemy Logowanie uniwersalne Auth0. Będziemy mieć kilka adresów URL filmów na YouTube. Zostaną ukryte pod platformą uwierzytelniającą. Tylko zarejestrowani użytkownicy będą mogli zobaczyć listę filmów za pośrednictwem naszej aplikacji internetowej.

Uwaga : ten artykuł koncentruje się na konfiguracji i użyciu Auth0 w Twojej aplikacji Next.js. Nie będziemy wchodzić w szczegóły, takie jak styl CSS czy użycie bazy danych. Jeśli chcesz zobaczyć pełny kod przykładowej aplikacji, możesz przejść do tego repozytorium GitHub.

Utwórz konto Auth0 i skonfiguruj szczegóły aplikacji

Przede wszystkim musimy utworzyć konto Auth0 za pomocą strony Zarejestruj się.

Następnie przejdźmy do pulpitu nawigacyjnego Auth0. Przejdź do aplikacji i utwórz nową aplikację typu [„Zwykłe aplikacje internetowe”].

Przejdźmy teraz do zakładki Ustawienia aplikacji i w sekcji URI aplikacji skonfigurujmy następujące szczegóły i zapisz zmiany:

• Dozwolone adresy URL wywołań zwrotnych: dodaj https://localhost:3000/api/auth/callback
• Dozwolone adresy URL wylogowania : dodaj https://localhost:3000/

W ten sposób konfigurujemy adres URL, pod który chcemy przekierować użytkowników po zalogowaniu się do naszej witryny (Callback), oraz adres URL, pod który przekierowujemy użytkowników po ich wylogowaniu (Wyloguj). Powinniśmy dodać produkcyjne adresy URL, gdy wdrażamy ostateczną wersję naszej aplikacji na serwerze hostingowym.

Pulpit nawigacyjny Auth0 ma wiele konfiguracji i dostosowań, które możemy zastosować do naszych projektów. Możemy zmienić typ uwierzytelniania, którego używamy, stronę logowania/rejestracji, dane, których żądamy dla użytkowników, włączyć/wyłączyć nowe rejestracje, skonfigurować bazy danych użytkowników i tak dalej.

Utwórz aplikację Next.js

Aby stworzyć zupełnie nową aplikację Next.js, użyjemy create-next-app, która konfiguruje wszystko automatycznie za Ciebie. Aby stworzyć projekt, uruchom:

 npx create-next-app [name-of-the-app]

Lub

 yarn create next-app [name-of-the-app]

Aby uruchomić serwer programistyczny lokalnie i zobaczyć właśnie utworzoną witrynę w przeglądarce, przejdź do nowo utworzonego folderu:

 cd [name-of-the-app]

I biegnij:

 npm run dev

Lub

 yarn dev

Zainstaluj i skonfiguruj pakiet SDK Auth0 Next.js

Zainstalujmy Auth0 Next.js SDK w naszej aplikacji:

 npm install @auth0/nextjs-auth0

Lub

 yarn add @auth0/nextjs-auth0

Teraz w naszym pliku env.local (lub w menu zmiennych środowiskowych naszej platformy hostingowej) dodajmy te zmienne:

 AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]" AUTH0_BASE_URL="https://localhost:3000" AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]" AUTH0_CLIENT_ AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]" 

Jeśli potrzebujesz więcej opcji konfiguracyjnych, możesz zajrzeć do dokumentacji.

Utwórz dynamiczną trasę API

Next.js oferuje sposób na tworzenie bezserwerowych interfejsów API: Trasy API. Dzięki tej funkcji możemy stworzyć kod, który będzie wykonywany w każdym żądaniu użytkownika do naszych tras. Możemy zdefiniować stałe trasy, takie jak /api/index.js . Ale możemy również mieć dynamiczne trasy API z parametrami, których możemy użyć w naszym kodzie tras API, takimi jak /api/blog/[postId].js .

Utwórzmy plik /pages/api/auth/[...auth0].js , który będzie dynamiczną trasą API. Wewnątrz pliku zaimportujmy metodę handleAuth z zestawu SDK Auth0 i wyeksportujmy wynik:

 import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth();

Spowoduje to utworzenie i obsługę następujących tras:

• /api/auth/login
  Aby wykonać logowanie lub zarejestruj się przez Auth0.
• /api/auth/logout
  Aby wylogować użytkownika.
• /api/auth/callback
  Aby przekierować użytkownika po pomyślnym zalogowaniu.
• /api/auth/me
  Aby uzyskać informacje o profilu użytkownika.

I to byłaby część naszej aplikacji po stronie serwera. Jeśli chcemy zalogować się do naszej aplikacji lub założyć nowe konto, powinniśmy odwiedzić https://localhost:3000/api/auth/login . Powinniśmy dodać link do tej trasy w naszej aplikacji. To samo dotyczy wylogowania się z naszej strony: Dodaj link do https://localhost:3000/api/auth/logout .

Dodaj składnik UserProvider

Do obsługi stanu uwierzytelniania użytkowników na interfejsie naszej aplikacji internetowej możemy użyć komponentu UserProvider React, dostępnego w Auth0 Next.js SDK. komponent używa wewnętrznie kontekstu React.

Jeśli chcesz uzyskać dostęp do stanu uwierzytelniania użytkownika na składniku, należy go owinąć składnikiem UserProvider .

 <UserProvider> <Component {...props} /> </UserProvider>

Jeśli chcemy mieć dostęp do wszystkich stron w naszej aplikacji, powinniśmy dodać komponent do pliku pages/_app.js . pages/_app.js zastępuje komponent React App . Jest to funkcja, którą Next.js udostępnia w celu dostosowania naszej aplikacji. Więcej na ten temat przeczytasz tutaj.

 import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0'; export default function App({ Component, pageProps }) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); }

Mamy hak useUser , który uzyskuje dostęp do stanu uwierzytelniania ujawnionego przez UserProvider . Możemy go wykorzystać np. do stworzenia czegoś w rodzaju strony powitalnej. Zmieńmy kod pages/index.js :

 import { useUser } from "@auth0/nextjs-auth0"; export default () => { const { user, error, isLoading } = useUser(); if (isLoading) return <div>Loading...</div>; if (error) return <div>{error.message}</div>; if (user) { return ( <div> <h2>{user.name}</h2> <p>{user.email}</p> <a href="/api/auth/logout">Logout</a> </div> ); } return <a href="/api/auth/login">Login</a>; };

Obiekt user zawiera informacje związane z tożsamością użytkownika. Jeżeli osoba odwiedzająca stronę nie jest zalogowana (nie mamy dostępnego obiektu user ), wyświetlimy link do strony logowania. Jeśli użytkownik jest już uwierzytelniony, wyświetlimy na stronie właściwości user.email user.name łącze Wyloguj.

Utwórzmy plik videos.js z listą trzech adresów URL filmów w YouTube, które będą widoczne tylko dla zarejestrowanych osób. Aby umożliwić oglądanie tej strony tylko zalogowanym użytkownikom, użyjemy metody withPageAuthRequired z pakietu SDK.

 import { withPageAuthRequired } from "@auth0/nextjs-auth0"; export default () => { return ( <div> <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a> <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a> <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a> </div> ); }; export const getServerSideProps = withPageAuthRequired();

Weź pod uwagę, że nasza aplikacja internetowa umożliwia każdej osobie założenie konta za pomocą platformy Auth0. Użytkownik może również ponownie użyć istniejącego konta Auth0, ponieważ wdrażamy logowanie uniwersalne.

Możemy stworzyć własną stronę rejestracji, aby poprosić o więcej informacji o użytkowniku lub dodać informacje o płatnościach, aby rozliczać go co miesiąc za naszą usługę. Możemy również wykorzystać metody ujawnione w SDK do obsługi autoryzacji w sposób automatyczny.

Wniosek

W tym artykule zobaczyliśmy, jak zabezpieczyć nasze aplikacje Next.js za pomocą Auth0, platformy uwierzytelniania i autoryzacji. Oceniamy korzyści płynące z korzystania z usług strony trzeciej do uwierzytelniania naszych aplikacji internetowych w porównaniu z tworzeniem własnej platformy bezpieczeństwa. Stworzyliśmy przykładową aplikację Next.js i zabezpieczyliśmy ją za pomocą darmowego planu Auth0 oraz zestawu SDK Auth0 Next.js.

Jeśli chcesz wdrożyć przykładową aplikację Auth0 w Vercel, możesz to zrobić tutaj.

Dalsze czytanie i zasoby

• Auth0 Next.js SDK Repozytorium GitHub, Auth0, GitHub
• „Ostateczny przewodnik po uwierzytelnianiu Next.js za pomocą Auth0”, Sandrino Di Mattia, blog Auth0
  W naszej przykładowej aplikacji użyliśmy renderowania po stronie serwera, z trasami API i podejściem bezserwerowym. Jeśli używasz Next.js dla witryny statycznej lub niestandardowego serwera do hostowania aplikacji, w tym artykule znajdziesz szczegółowe informacje na temat implementacji uwierzytelniania.
• „Nowa funkcja logowania uniwersalnego”, Logowanie uniwersalne Auth0, Dokumenty Auth0
• „Scentralizowane logowanie uniwersalne a logowanie wbudowane”, Auth0 Universal Login, Auth0 Docs