Verwenden der Firebase-Authentifizierung mit den neuesten Next.js-Funktionen

Einführung in next-firebase-auth-edge Sie haben diesen Artikel wahrscheinlich gefunden, als Sie nach Möglichkeiten gesucht haben, die Firebase-Authentifizierung zu Ihrer bestehenden oder neuen Next.js-Anwendung hinzuzufügen. Ihr Ziel ist es, eine kluge, unvoreingenommene und zukunftsorientierte Entscheidung zu treffen, die die Erfolgschancen Ihrer App maximiert. Als Schöpfer von next-firebase-auth-edge muss ich zugeben, dass es nicht meine Stärke ist, eine völlig unvoreingenommene Meinung abzugeben, aber ich werde zumindest versuchen, den Ansatz zu rechtfertigen, den ich beim Entwurf der Bibliothek gewählt habe. Wir hoffen, dass Sie am Ende dieses Leitfadens feststellen werden, dass der Ansatz sowohl einfach als auch langfristig praktikabel ist. Wie es begann Ich erspare Ihnen lange Einführungen. Lassen Sie mich nur sagen, dass die Idee für die Bibliothek von einer Situation inspiriert wurde, die möglicherweise der Ihren ähnelt. Es war die Zeit, als Next.js eine Canary-Version von veröffentlichte. Ich habe an einer App gearbeitet, die stark auf Umschreibungen und interne Weiterleitungen angewiesen war. Dafür verwendeten wir den benutzerdefinierten Node.js -Server, der die Next.js-App rendert. App Router express Wir waren von und sehr begeistert, waren uns jedoch bewusst, dass sie nicht mit unserem benutzerdefinierten Server kompatibel sein würden. schien eine leistungsstarke Funktion zu sein, die wir nutzen konnten, um die Notwendigkeit eines benutzerdefinierten Express-Servers zu eliminieren und uns stattdessen ausschließlich auf die integrierten Funktionen von Next.js zu verlassen, um Benutzer dynamisch auf verschiedene Seiten umzuleiten und umzuschreiben. den App Router- Serverkomponenten Middleware Dieses Mal verwendeten wir . Die Bibliothek hat uns sehr gut gefallen, aber sie hat unsere Authentifizierungslogik über , , und verbreitet, die als Legacy gelten würden früh genug. Außerdem war die Bibliothek nicht mit der Middleware kompatibel, was uns daran hinderte, URLs neu zu schreiben oder Benutzer basierend auf ihrem Kontext umzuleiten. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts Also begann ich mit der Suche, fand aber zu meiner Überraschung keine Bibliothek, die die Firebase-Authentifizierung innerhalb der Middleware unterstützte. – Als Softwareentwickler mit mehr als 11 Jahren kommerzieller Erfahrung in Node.js und React bereitete ich mich darauf vor, dieses Rätsel anzugehen. Warum könnte das sein? Es ist unmöglich! Also fing ich an. Und die Antwort wurde offensichtlich. Middleware wird in ausgeführt. In ist keine Firebase-Bibliothek verfügbar, die mit kompatibel ist. . Ich fühlte mich hilflos. Ist dies das erste Mal, dass ich tatsächlich muss, um mit den neuen und ausgefallenen APIs spielen zu können? - Ich hörte schnell auf zu schluchzen und begann , und mehrere andere JWT-Authentifizierungsbibliotheken zurückzuentwickeln und sie an die Edge Runtime anzupassen. Ich nutzte die Gelegenheit, um alle Probleme anzugehen, auf die ich bei früheren Authentifizierungsbibliotheken gestoßen war, mit dem Ziel, die leichteste, am einfachsten zu konfigurierende und zukunftsorientierte Authentifizierungsbibliothek zu erstellen. Edge Runtime Edge Runtime Web-Crypto-APIs Ich war dem Untergang geweiht warten Nein. Ein bewachter Topf kocht niemals ueber. , next-firebase-auth firebase-admin Etwa zwei Wochen später wurde Version von geboren. Es war ein solider Proof of Concept, aber Sie würden Version nicht verwenden wollen. Vertrau mir. 0.0.1 next-firebase-auth-edge 0.0.1 Wie es läuft Fast freue ich mich, Ihnen mitteilen zu können, dass die Bibliothek nach , und einer von großartigen Entwicklern aus aller Welt ein Stadium erreicht hat, in dem meine anderen Knoten mir zustimmend zustimmen. zwei Jahre später 372 Commits 110 gelösten Problemen Menge unschätzbarem Feedback In dieser Anleitung werde ich Version verwenden, um eine authentifizierte Next.js-App von Grund auf zu erstellen. Wir werden jeden Schritt im Detail durchgehen, beginnend mit der Erstellung eines neuen Firebase-Projekts und einer Next.js-App, gefolgt von der Integration mit den Bibliotheken und . Am Ende dieses Tutorials werden wir die App auf Vercel bereitstellen, um zu bestätigen, dass alles sowohl lokal als auch in der produktionsbereiten Umgebung funktioniert. 1.4.1 von next-firebase-auth-edge next-firebase-auth-edge firebase/auth Firebase einrichten In diesem Teil wird davon ausgegangen, dass Sie die Firebase-Authentifizierung noch nicht eingerichtet haben. Andernfalls können Sie gerne mit dem nächsten Teil fortfahren. Gehen wir zur und Firebase Console erstellen ein Projekt Nachdem das Projekt erstellt wurde, aktivieren wir die Firebase-Authentifizierung. Öffnen Sie die Konsole, gehen Sie zu und aktivieren Sie . Das ist die Methode, die wir in unserer App unterstützen werden Erstellen > Authentifizierung > Anmeldemethode die E-Mail- und Kennwortmethode Nachdem Sie Ihre erste Anmeldemethode aktiviert haben, sollte die Firebase-Authentifizierung für Ihr Projekt aktiviert sein und Sie können Ihren in abrufen Web-API-Schlüssel den Projekteinstellungen Kopieren Sie den API-Schlüssel und bewahren Sie ihn sicher auf. Öffnen wir nun die nächste Registerkarte – und notieren Sie . Wir werden es später brauchen. Cloud Messaging – die Absender-ID Zu guter Letzt müssen wir Anmeldeinformationen für das Dienstkonto generieren. Dadurch erhält Ihre App vollen Zugriff auf Ihre Firebase-Dienste. Gehen Sie zu und klicken Sie auf . Dadurch wird eine Datei mit den Anmeldeinformationen des Dienstkontos heruntergeladen. Speichern Sie diese Datei an einem bekannten Ort. Projekteinstellungen > Dienstkonten Neuen privaten Schlüssel generieren .json Wir sind bereit, die Next.js-App mit der Firebase-Authentifizierung zu integrieren Das ist es! Erstellen Sie eine Next.js-App von Grund auf In dieser Anleitung wird davon ausgegangen, dass Sie und installiert haben. Die in diesem Tutorial verwendeten Befehle wurden anhand der neuesten LTS überprüft. Sie können die Knotenversion überprüfen, indem Sie im Terminal ausführen. Sie können auch Tools wie verwenden, um schnell zwischen Node.js-Versionen zu wechseln. Node.js npm Node.js v20 node -v NVM Einrichten der Next.js-App mit CLI Öffnen Sie Ihr Lieblingsterminal, navigieren Sie zu Ihrem Projektordner und führen Sie es aus npx create-next-app@latest Um es einfach zu halten, verwenden wir die Standardkonfiguration. Das bedeutet, dass wir und verwenden werden TypeScript tailwind ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No Navigieren wir zum Stammverzeichnis des Projekts und stellen wir sicher, dass alle Abhängigkeiten installiert sind cd my-app npm install Um zu bestätigen, dass alles wie erwartet funktioniert, starten wir den Next.js-Entwicklungsserver mit dem Befehl . Wenn Sie öffnen, sollte die Begrüßungsseite von Next.j angezeigt werden, die etwa so aussieht: npm run dev http://localhost:3000 Umgebungsvariablen vorbereiten Bevor wir mit der Integration in Firebase beginnen, benötigen wir eine sichere Möglichkeit zum Speichern und Lesen unserer Firebase-Konfiguration. Glücklicherweise wird Next.js mit integrierter Unterstützung ausgeliefert. Dotenv- Öffnen Sie Ihren bevorzugten Code-Editor und navigieren Sie zum Projektordner Erstellen wir die Datei im Stammverzeichnis des Projekts und füllen sie mit den folgenden Umgebungsvariablen: .env.local FIREBASE_ADMIN_CLIENT_EMAIL=... FIREBASE_ADMIN_PRIVATE_KEY=... AUTH_COOKIE_NAME=AuthToken AUTH_COOKIE_SIGNATURE_KEY_CURRENT=secret1 AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS=secret2 USE_SECURE_COOKIES=false NEXT_PUBLIC_FIREBASE_PROJECT_ID=... NEXT_PUBLIC_FIREBASE_API_KEY=AIza... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=....firebaseapp.com NEXT_PUBLIC_FIREBASE_DATABASE_URL=....firebaseio.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=... Bitte beachten Sie, dass Variablen mit dem Präfix im clientseitigen Bundle verfügbar sind. Wir benötigen diese, um einzurichten NEXT_PUBLIC_ das Firebase Auth Client SDK , und können aus Datei abgerufen werden, die nach dem Generieren der Anmeldeinformationen für das Dienstkonto heruntergeladen wurde NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json ist der Name des Cookies, das zum Speichern von Benutzeranmeldeinformationen verwendet wird AUTH_COOKIE_NAME und sind Geheimnisse, mit denen wir die Anmeldeinformationen signieren werden AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS ist , der von der allgemeinen Seite abgerufen wird NEXT_PUBLIC_FIREBASE_API_KEY ein Web-API-Schlüssel „Projekteinstellungen“ ist .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN Ihre Projekt-ID ist .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL Ihre Projekt-ID kann auf der Seite > abgerufen werden NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID „Projekteinstellungen“ „Cloud Messaging“ werden nicht für die lokale Entwicklung verwendet, sind aber nützlich, wenn wir unsere App in Vercel bereitstellen USE_SECURE_COOKIES Integration mit Firebase-Authentifizierung Installation von und Erstkonfiguration next-firebase-auth-edge Fügen Sie die Bibliothek zu den Abhängigkeiten des Projekts hinzu, indem Sie ausführen npm install next-firebase-auth-edge@^1.4.1 Lassen Sie uns die Datei erstellen, um unsere Projektkonfiguration zu kapseln. Dies ist nicht erforderlich, erleichtert aber die Lesbarkeit der Codebeispiele. config.ts Verbringen Sie nicht zu viel Zeit damit, über diese Werte nachzudenken. Wir werden sie im weiteren Verlauf detaillierter erläutern. export const serverConfig = { cookieName: process.env.AUTH_COOKIE_NAME!, cookieSignatureKeys: [process.env.AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!], cookieSerializeOptions: { path: "/", httpOnly: true, secure: process.env.USE_SECURE_COOKIES === "true", sameSite: "lax" as const, maxAge: 12 * 60 * 60 * 24, }, serviceAccount: { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!, clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL!, privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, "\n")!, } }; export const clientConfig = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }; Middleware hinzufügen Erstellen Sie die Datei im Stammverzeichnis des Projekts und fügen Sie Folgendes ein middleware.ts import { NextRequest } from "next/server"; import { authMiddleware } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Ob Sie es glauben oder nicht, wir haben gerade den Server unserer App in die Firebase-Authentifizierung integriert. Bevor wir es tatsächlich verwenden, erklären wir die Konfiguration ein wenig: weist authMiddleware an, den Endpunkt verfügbar zu machen. Wenn dieser Endpunkt mit dem Header *“ aufgerufen wird, antwortet er mit dem Header „HTTP(S)-Only , der signierte enthält loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie benutzerdefinierte Token und Aktualisierungstoken * wird mit der Funktion abgerufen, die im verfügbar ist. Mehr dazu später. idToken getIdToken Firebase Client SDK In ähnlicher Weise weist die Middleware an, verfügbar zu machen, erfordert jedoch keine zusätzlichen Header. Beim Aufruf werden Authentifizierungscookies aus dem Browser entfernt. logoutPath GET /api/logout ist ein Web-API-Schlüssel. Middleware verwendet es, um benutzerdefinierte Token zu aktualisieren und Authentifizierungscookies zurückzusetzen, nachdem die Anmeldeinformationen abgelaufen sind. apiKey ist der Name des Cookies, das von den Endpunkten und gesetzt und entfernt wird cookieName /api/login /api/logout ist eine Liste geheimer Schlüssel, mit denen Benutzeranmeldeinformationen signiert werden. Anmeldeinformationen werden immer mit dem ersten Schlüssel in der Liste signiert, daher müssen Sie mindestens einen Wert angeben. Sie können mehrere Schlüssel bereitstellen, um eine durchzuführen cookieSignatureKeys Schlüsselrotation sind Optionen, die beim Generieren Headers an übergeben werden. Weitere Informationen finden Sie in README-Datei cookieSerializeOptions Set-Cookie Cookie der Cookie- autorisiert die Bibliothek, Ihre Firebase-Dienste zu nutzen. serviceAccount Der Matcher weist den Next.js-Server an, Middleware für , , und jeden anderen Pfad auszuführen, bei dem es sich nicht um eine Datei oder einen API-Aufruf handelt. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Sie fragen sich vielleicht, warum wir Middleware nicht für alle /api/* -Aufrufe aktivieren. Das wäre möglich, aber es empfiehlt sich, nicht authentifizierte Aufrufe innerhalb des API-Route-Handlers selbst zu verarbeiten. Dies würde den Rahmen dieses Tutorials etwas sprengen, aber wenn Sie interessiert sind, lassen Sie es mich wissen und ich bereite einige Beispiele vor! Wie Sie sehen, ist die Konfiguration und hat einen klar definierten Zweck. Beginnen wir nun mit dem Aufruf unserer Endpunkte und . minimal /api/login /api/logout Erstellen einer sicheren Homepage Um die Sache so einfach wie möglich zu gestalten, löschen wir die Standard-Startseite von Next.js und ersetzen sie durch einige personalisierte Inhalte Öffnen Sie und fügen Sie Folgendes ein: ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ( Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!

); } Lassen Sie uns das Stück für Stück aufschlüsseln. Funktion dient zum Validieren und Extrahieren von Benutzeranmeldeinformationen aus getTokens Cookies const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Es wird mit aufgelöst, wenn der Benutzer nicht authentifiziert ist, oder ein Objekt mit zwei Eigenschaften: null , bei dem es sich um eine idToken- handelt, mit der Sie API-Anfragen an externe Back-End-Dienste autorisieren können. Dies liegt etwas außerhalb des Rahmens, aber es ist erwähnenswert, dass die Bibliothek eine verteilte Servicearchitektur ermöglicht. Der ist mit allen offiziellen Firebase-Bibliotheken auf allen Plattformen kompatibel und einsatzbereit. token string token ist, wie der Name schon sagt, eine entschlüsselte Version des , die alle zur Identifizierung des Benutzers erforderlichen Informationen enthält, einschließlich E-Mail-Adresse, Profilbild und , was uns außerdem ermöglicht, den Zugriff basierend auf Rollen und Berechtigungen einzuschränken. decodedToken token benutzerdefinierten Ansprüchen Nachdem wir erhalten haben, verwenden wir die Funktion von , um sicherzustellen, dass die Seite nur für authentifizierte Benutzer zugänglich ist tokens „notFound“ next/navigation if (!tokens) { notFound(); } Abschließend rendern wir einige grundlegende, personalisierte Benutzerinhalte Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Lassen wir es laufen. Falls Sie Ihren Entwicklungsserver geschlossen haben, führen Sie einfach aus. npm run dev Wenn Sie versuchen, auf zuzugreifen, sollte http://localhost:3000/ 404 angezeigt werden: Diese Seite konnte nicht gefunden werden. Erfolg! Wir haben unsere Geheimnisse vor neugierigen Blicken geschützt! installieren und Firebase Client SDK initialisieren firebase Führen Sie im Stammverzeichnis des Projekts aus npm install firebase Erstellen Sie nach der Installation des Client-SDK die Datei im Stammverzeichnis des Projekts und fügen Sie Folgendes ein firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Dadurch wird das Firebase Client SDK initialisiert und das App-Objekt für Client-Komponenten verfügbar gemacht Erstellen einer Registrierungsseite Was nützt eine supersichere Homepage, wenn niemand sie sehen kann? Lassen Sie uns eine einfache Registrierungsseite erstellen, um Menschen Zugang zu unserer App zu ermöglichen. Lasst uns eine neue, schicke Seite unter erstellen ./app/register/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; import { useRouter } from "next/navigation"; export default function Register() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } return ( Pray tell, who be this gallant soul seeking entry to mine humble abode? Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> Confirm password setConfirmation(e.target.value)} id="confirm-password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Create an account Already have an account?{" "} Login here

); } Ich weiß. Es ist viel Text, aber haben Sie Geduld. Wir beginnen mit um anzugeben, dass die Registrierungsseite clientseitige APIs verwendet "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Dann definieren wir einige Variablen und Setter, um unseren Formularstatus zu halten const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } Hier definieren wir unsere Formularübermittlungslogik. Zuerst überprüfen wir, ob und gleich sind, andernfalls aktualisieren wir den Fehlerstatus. Wenn die Werte gültig sind, erstellen wir ein Benutzerkonto mit aus . Wenn dieser Schritt fehlschlägt (z. B. weil die E-Mail angenommen wurde), informieren wir den Benutzer, indem wir den Fehler aktualisieren. password confirmation createUserWithEmailAndPassword firebase/auth Wenn alles gut geht, leiten wir den Benutzer zur Seite weiter. Wahrscheinlich sind Sie im Moment verwirrt, und Sie haben Recht. Seite existiert noch nicht. Wir bereiten uns gerade auf das vor, was als nächstes kommt. /login /login Wenn Sie besuchen, sollte die Seite ungefähr so aussehen: http://localhost:3000/register Erstellen einer Anmeldeseite Da sich Benutzer nun registrieren können, können sie ihre Identität nachweisen Erstellen Sie eine Anmeldeseite unter ./app/login/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } return ( Speak thy secret word! Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Enter Don&apos;t have an account?{" "} Register here

); } Wie Sie sehen, ist es der Registrierungsseite ziemlich ähnlich. Konzentrieren wir uns auf das Entscheidende: async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } Hier geschieht . Wir verwenden von um des Benutzers abzurufen. die ganze Magie signInEmailAndPassword firebase/auth idToken Dann rufen wir den von der Middleware bereitgestellten Endpunkt auf. Dieser Endpunkt aktualisiert unsere Browser-Cookies mit Benutzeranmeldeinformationen. /api/login Schließlich leiten wir den Benutzer auf die Startseite um, indem wir aufrufen. router.push("/"); Die Anmeldeseite sollte ungefähr so aussehen Lass es uns testen! Gehen Sie zu und geben Sie eine zufällige E-Mail-Adresse und ein Passwort ein, um ein Konto zu erstellen. Verwenden Sie diese Anmeldeinformationen auf der Seite . Nachdem Sie auf geklickt haben, sollten Sie zur weitergeleitet werden http://localhost:3000/register http://localhost:3000/login die Eingabetaste supersicheren Startseite Endlich müssen wir unsere , , Homepage sehen! Aber warte! Wie kommen wir raus? eigene persönliche extrem sichere Wir müssen eine Abmeldeschaltfläche hinzufügen, um uns nicht für immer (oder 12 Tage) von der Welt auszuschließen. Bevor wir beginnen, müssen wir eine erstellen, die uns mithilfe des Firebase Client SDK abmelden kann. Client-Komponente Erstellen wir eine neue Datei unter ./app/HomePage.tsx "use client"; import { useRouter } from "next/navigation"; import { getAuth, signOut } from "firebase/auth"; import { app } from "../firebase"; interface HomePageProps { email?: string; } export default function HomePage({ email }: HomePageProps) { const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } return ( Super secure home page Only {email} holds the magic key to this kingdom!

Logout ); } Wie Sie vielleicht bemerkt haben, handelt es sich hierbei um eine leicht modifizierte Version unserer . Wir mussten eine separate Client-Komponente erstellen, da nur innerhalb und funktioniert, während und im Client-Kontext ausgeführt werden müssen. Ein bisschen kompliziert, ich weiß, aber es ist tatsächlich ziemlich mächtig. Ich erkläre es später. ./app/page.tsx getTokens von Serverkomponenten API-Routenhandlern signOut useRouter Konzentrieren wir uns auf den Abmeldevorgang const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Zuerst melden wir uns vom Firebase Client SDK ab. Dann rufen wir den von der Middleware bereitgestellten Endpunkt auf. Zum Abschluss leiten wir den Benutzer zur Seite weiter. /api/logout /login Lassen Sie uns unsere Server-Homepage aktualisieren. Gehen Sie zu und fügen Sie Folgendes ein ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; import HomePage from "./HomePage"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ; } Jetzt ist unsere Server-Komponente nur für das Abrufen von Benutzer-Tokens und deren Weitergabe an Client-Komponente verantwortlich. Dies ist tatsächlich ein ziemlich häufiges und nützliches Muster. Home HomePage Lass uns das testen: Voila! Wir können uns nun nach Belieben bei der Anwendung an- und abmelden. Das ist großartig! Oder ist es? Wenn ein nicht authentifizierter Benutzer versucht, die Startseite durch Öffnen aufzurufen, wird von http://localhost:3000/ 404 angezeigt: Diese Seite konnte nicht gefunden werden. Außerdem können authentifizierte Benutzer weiterhin auf die Seiten und zugreifen, ohne sich abmelden zu müssen. http://localhost:3000/register http://localhost:3000/login Wir können es besser machen. Es scheint, dass wir eine Umleitungslogik hinzufügen müssen. Lassen Sie uns einige Regeln definieren: Wenn ein authentifizierter Benutzer versucht, auf die Seiten und zuzugreifen, sollten wir ihn zu umleiten. /register /login / Wenn ein nicht authentifizierter Benutzer versucht, auf die Seite zuzugreifen, sollten wir ihn zu umleiten / /login Middleware ist eine der besten Möglichkeiten, Weiterleitungen in Next.js-Apps zu verarbeiten. Glücklicherweise unterstützt eine Reihe von Optionen und Hilfsfunktionen, um eine Vielzahl von Umleitungsszenarien zu bewältigen. authMiddleware Öffnen wir die Datei und fügen diese aktualisierte Version ein middleware.ts import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; const PUBLIC_PATHS = ['/register', '/login']; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Das sollte es sein. Wir haben alle Weiterleitungsregeln implementiert. Lassen Sie uns das aufschlüsseln. const PUBLIC_PATHS = ['/register', '/login']; handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, wird aufgerufen, wenn gültige Benutzeranmeldeinformationen an die Anforderung angehängt sind, d. h. Der Benutzer ist authentifiziert. Es wird mit als erstem und als zweitem Argument aufgerufen. Es sollte mit aufgelöst werden. handleValidToken tokens den geänderten Anforderungsheadern NextResponse von ist eine Hilfsfunktion, die ein Objekt zurückgibt, das zu vereinfacht werden kann. redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) Durch Überprüfen von überprüfen wir, ob der authentifizierte Benutzer versucht, auf die Seite oder zuzugreifen, und leiten in diesem Fall zur Startseite weiter. PUBLIC_PATHS.includes(request.nextUrl.pathname) /login /register handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, wird aufgerufen, wenn etwas passiert. Eines dieser erwarteten Ereignisse ist, dass der Benutzer Ihre App zum ersten Mal sieht, von einem anderen Gerät aus oder nachdem die Anmeldeinformationen abgelaufen sind. handleInvalidToken Erwartetes Da wir wissen, dass für nicht authentifizierte Benutzer aufgerufen wird, können wir mit der zweiten Regel fortfahren: Wenn nicht authentifizierte Benutzer versuchen, auf die Seite , sollten wir sie zu handleInvalidToken / zuzugreifen /login umleiten Da keine andere Bedingung erfüllt werden muss, geben wir einfach das Ergebnis von zurück, das zu vereinfacht werden kann. Es stellt außerdem sicher, dass der Benutzer nicht in eine Umleitungsschleife gerät. redirectToLogin NextResponse.redirect(new URL(“/login”)) Zuletzt, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } Im Gegensatz zu wird aufgerufen, wenn etwas passiert und möglicherweise untersucht werden muss. Eine Liste möglicher Fehler mit Beschreibung finden Sie in handleInvalidToken handleError Unerwartetes* der Dokumentation Im Fehlerfall protokollieren wir dies und leiten den Benutzer sicher zur Anmeldeseite weiter * kann mit dem Fehler aufgerufen werden, nachdem die öffentlichen Schlüssel von Google aktualisiert wurden. handleError INVALID_ARGUMENT Dies ist eine Form der Schlüsselrotation und wird . erwartet Weitere Informationen finden Sie in dieser Github-Ausgabe Nun, das ist es. Endlich. Melden wir uns von unserer Web-App ab und öffnen Sie . Wir sollten zur Seite weitergeleitet werden. http://localhost:3000/ /login Melden wir uns erneut an und versuchen, einzugeben. Wir sollten zur Seite weitergeleitet werden. http://localhost:3000/login / Wir haben nicht nur für ein nahtloses Benutzererlebnis gesorgt. ist eine Bibliothek , die nur auf dem Server der App funktioniert und keinen zusätzlichen clientseitigen Code einführt. Das resultierende Paket ist wirklich . Das nenne ich perfekt. next-firebase-auth-edge mit Null-Bundle-Größe minimal Unsere App ist jetzt sowohl in den Server- als auch in den Clientkomponenten vollständig in die Firebase-Authentifizierung integriert. Wir sind bereit, das volle Potenzial von Next.js auszuschöpfen! Den Quellcode der App finden Sie unter next-firebase-auth-edge/examples/next-typescript-minimal Epilog In diesem Leitfaden haben wir die Integration der neuen Next.js-App mit der Firebase-Authentifizierung beschrieben. Obwohl der Artikel recht umfangreich ist, wurden einige wichtige Teile des Authentifizierungsablaufs weggelassen, etwa das Formular zum Zurücksetzen des Passworts oder andere Anmeldemethoden als E-Mail und Passwort. Wenn Sie an der Bibliothek interessiert sind, können Sie sich eine Vorschau der vollständigen ansehen. Next-Firebase-Auth-Edge-Starter-Demoseite Es bietet , , und mehr Firestore-Integration Serveraktionen App-Check-Unterstützung Die Bibliothek bietet eine mit unzähligen Beispielen eigene Dokumentationsseite Wenn Ihnen der Artikel gefallen hat, würde ich mich freuen, wenn Sie das Repository erwähnen. Prost! 🎉 Next-Firebase-Auth-Edge- Bonus – Bereitstellung der App auf Vercel In diesem Bonusleitfaden erfahren Sie, wie Sie Ihre Next.js-App in Vercel bereitstellen Git-Repository erstellen Um die Bereitstellung auf Vercel durchführen zu können, müssen Sie ein Repository für Ihre neue App erstellen. Gehen Sie zu und erstellen Sie ein neues Repository. https://github.com/ hat bereits ein lokales Git-Repository für uns initiiert, Sie müssen also nur zum Stammordner Ihres Projekts gehen und Folgendes ausführen: create-next-app git add --all git commit -m "first commit" git branch -M main git remote add origin git@github.com:path-to-your-new-github-repository.git git push -u origin main Neues Vercel-Projekt hinzufügen Gehen Sie zu und melden Sie sich mit Ihrem Github-Konto an https://vercel.com/ Nachdem Sie sich angemeldet haben, gehen Sie zur Übersichtsseite von Vercel und klicken Sie auf Neu hinzufügen > Projekt Klicken Sie neben dem Github-Repository, das wir gerade erstellt haben, . Noch nicht bereitstellen. auf Importieren Vor der Bereitstellung müssen wir die Projektkonfiguration bereitstellen. Fügen wir einige Umgebungsvariablen hinzu: Denken Sie daran, auf zu setzen, da Vercel standardmäßig HTTPS verwendet USE_SECURE_COOKIES true Jetzt können wir auf klicken „Bereitstellen“ Warten Sie ein oder zwei Minuten und Sie sollten mit einer URL wie dieser auf Ihre App zugreifen können: https://next-typescript-minimal-xi.vercel.app/ Erledigt. Ich wette, Sie haben nicht damit gerechnet, dass es so einfach sein würde. Wenn Ihnen der Leitfaden gefallen hat, würde ich mich freuen, wenn Sie das Repository erwähnen. Next-Firebase-Auth-Edge- Gerne können Sie mir auch Ihr Feedback in den Kommentaren mitteilen. Prost! 🎉