Autentizace je klíčovou součástí vývoje aplikací. Pomáhá chránit uživatelská data a předcházet škodlivým aktivitám. Jednoduše řečeno, určuje důvěryhodnost identity uživatele a zajišťuje, že k aplikaci a jejím zdrojům mají přístup pouze oprávnění uživatelé.
Vytvoření vlastního autentizačního systému může být časově náročný úkol a právě zde se NextAuth.js hodí. Poskytuje zabezpečenou podporu autentizace pro aplikace vytvořené pomocí rámce Next.js.
Co je NextAuth.js?
NextAuth.js je lehká knihovna s otevřeným zdrojovým kódem, která poskytuje autentizace a autorizace podpora aplikací Next.js. Umožňuje vývojářům rychle a snadno nastavit ověřování a autorizaci pro jejich aplikace Next.js. Poskytuje funkce, jako je ověřování u více poskytovatelů, e-mail a ověřování bez hesla.
Jak funguje NextAuth.js při ověřování?
Řešení ověřování NextAuth.js poskytuje rozhraní API na straně klienta, které můžete
integrovat do vaší aplikace Next.js. Můžete jej použít k ověření uživatelů s různými poskytovateli přihlášení, u kterých si vytvořili účty.Pod kapotou jsou uživatelé přesměrováni na přihlašovací stránku poskytovatele. Po úspěšné autentizaci poskytovatel vrátí data relace, která obsahují užitečné zatížení uživatele. Toto užitečné zatížení pak může autorizovat přístup k aplikaci a jejím prostředkům.
Nové aktualizace funkcí v NextAuth.js (v4)
V prosinci 2022 vydala NextAuth.js svou čtvrtou verzi. Tato verze byla vylepšena od své dřívější verze, v3, s novými aktualizacemi a úpravami. Změny se zaměřují především na zlepšení využití knihovny v procesu ověřování.
1. Aktualizace useSession Hook
Pomocí háčku useSession můžete zkontrolovat, zda je uživatel přihlášen nebo ne. V této nové verzi vrací háček useSession objekt, který poskytuje přímočařejší způsob testování stavů díky přidání možnosti status. Viz kód níže:
import { useSession } z"další ověření/reakce"vývoznívýchozífunkceKomponent() {
konst { data: session, status } = useSession()-li (postavení "ověřený") {
vrátit se<p>Jste přihlášeni jako {session.user.email}p>
}
vrátit se<p> Nejste přihlášeni p>
}
2. Kontext SessionProvider se stává povinným
Nová verze čtyři nařizuje použití kontextu SessionProvider. To znamená, že svou aplikaci budete muset zabalit pomocí poskytovatele useSession. NextAuth.js doporučuje zabalit vaši aplikaci do _app.jsx soubor.
Navíc byla metoda clientMaxAge nahrazena refetchInterval. To usnadní pravidelné načítání relace na pozadí.
import { SessionProvider } z"další ověření/reakce"
vývoznívýchozífunkceAplikace({
Komponenta, pageProps: { session, ...pageProps },
}) {
vrátit se (
<Poskytovatel relacezasedání={zasedání}refetchInterval={5 * 60}>
<Komponent {...pageProps} />Poskytovatel relace>
)
}
3. Individuální import poskytovatelů
NextAuth.js poskytuje několik služeb poskytovatele, které můžete použít k přihlášení uživatele. Obsahují:
- Použití vestavěných poskytovatelů OAuth (např. GitHub, Google).
- Pomocí poskytovatele e-mailu.
V této nové verzi je třeba importovat každého poskytovatele samostatně.
import GoogleProvider z"next-auth/providers/google"
import Auth0Provider z"next-auth/providers/auth0";4. Další drobné změny
- Import na straně klienta byl přejmenován na next-auth/react z next-auth/client.
- Změny v argumentech metod zpětného volání:
přihlášení({ uživatel, účet, profil, e-mail, přihlašovací údaje })
session({ session, token, user })
jwt({ token, uživatel, účet, profil, isNewUser })
Začínáme s NextAuth.js v autentizaci
Chcete-li integrovat NextAuth.js do aplikací Next.js, postupujte takto:
- Vytvořte aplikaci Next.js spuštěním tohoto příkazu: npx create-next-app
- Běh npm install next-auth ve vašem terminálu a nainstalujte NextAuth.js do vaší aplikace Next.js.
- Navštivte NextAuth.js oficiální dokumentaci a vyberte preferovaného poskytovatele/y ze seznamu podporovaných. Dále si vytvořte účet ve vývojářské konzoli vámi vybraného poskytovatele/poskytovatelů a zaregistrujte svou aplikaci Next.js.
- Ve vývojářské konzoli vámi vybraného poskytovatele/poskytovatelů zadejte URL domovské trasy a URL přesměrování zpětného volání, uložte změny a zkopírujte soubor ClientID a Tajemství klienta.
- V kořenovém adresáři aplikace Next.js vytvořte soubor .env, který bude obsahovat soubor ID klienta a Tajemství klienta.
- Nakonec v adresáři /pages/api vytvořte novou složku s názvem auth. Ve složce auth vytvořte nový soubor a pojmenujte jej [...nextauth].js. Do vytvořeného souboru přidejte níže uvedený kód. Kód zobrazuje rozhraní API NextAuth.js na straně klienta pomocí poskytovatele Google:
import GoogleProvider z"next-auth/providers/google";
poskytovatelé: [
GoogleProvider({
clientId: proces.env.GOOGLE_CLIENT_ID,
tajný klient: proces.env.GOOGLE_CLIENT_SECRET
})
]
Nyní můžete pokračovat a vytvořit stránku pro ověření přihlášení. Zde je vykreslení DOM pro komponentu přihlášení:
import Reagovat z'reagovat';
import { useSession, signIn, signOut } z"další ověření/reakce"vývoznívýchozífunkceKomponent() {
konst { data: session } = useSession()if (session) {
vrátit se (
<>
<p> Jste přihlášeni jako {session.user.email} p>
<knoflíkpři kliknutí={() => signOut()}>Odhlásit seknoflík>
)
}
vrátit se (
<>
<p> Nejste přihlášeni p>
<knoflíkpři kliknutí={() => signIn()}>Přihlásit seknoflík>
)
}
The useSession Hook přistupuje k objektu aktuální uživatelské relace. Jakmile se uživatel přihlásí a je ověřen Googlem, vrátí se objekt relace s uživatelským datovým obsahem. To umožňuje Next.js vykreslit detaily uživatele na straně klienta aplikace, v tomto případě e-mail.
Vlastní autentizační systémy vs. Řešení připravená k použití, jako je NextAuth.js
Výběr mezi vytvořením vlastního ověřovacího systému a integrací autentizace připravené k použití řešení, jako je NextAuth.js, je důležité zvážit cenu, složitost a zabezpečení každého z nich řešení.
Pokud máte zdroje a odborné znalosti k vývoji vlastního autentizačního systému, může to být pro vás ten nejlepší přístup. Pokud však hledáte hotové řešení, které se snadno implementuje, je bezpečné a nákladově efektivní, pak NextAuth.js může být dobrou volbou. Nakonec bude výběr záviset na vašich potřebách a preferencích.