Utilisation de l'authentification Firebase avec les dernières fonctionnalités Next.js

Introduction à next-firebase-auth-edge Vous avez probablement trouvé cet article en cherchant des moyens d'ajouter l'authentification Firebase à votre application Next.js existante ou nouvelle. Votre objectif est de prendre une décision intelligente, impartiale et tournée vers l’avenir qui maximisera les chances de succès de votre application. En tant que créateur de next-firebase-auth-edge, je dois admettre que donner une opinion totalement impartiale n'est pas mon fort, mais au moins j'essaierai de justifier l'approche que j'ai adoptée lors de la conception de la bibliothèque. Espérons qu’à la fin de ce guide, vous trouverez l’approche à la fois simple et viable à long terme. Comment ça a commencé Je vous épargnerai de longues présentations. Permettez-moi simplement de dire que l'idée de la bibliothèque a été inspirée par une situation peut-être similaire à la vôtre. C'était l'époque où Next.js publiait une version canari d' . Je travaillais sur une application qui reposait fortement sur des réécritures et des redirections internes. Pour cela, nous utilisions l'application Next.js de rendu du serveur Node.js personnalisé. App Router express Nous étions vraiment enthousiasmés par et , tout en étant conscients qu'ils ne seraient pas compatibles avec notre serveur personnalisé. semblait être une fonctionnalité puissante que nous pourrions exploiter pour éliminer le besoin d'un serveur Express personnalisé, en choisissant plutôt de s'appuyer uniquement sur les fonctionnalités intégrées de Next.js pour rediriger et réécrire les utilisateurs vers différentes pages de manière dynamique. App Router Server Components Le middleware Cette fois-là, nous utilisions . Nous avons vraiment aimé la bibliothèque, mais elle a étendu notre logique d'authentification à travers les fichiers , , , , qui allaient être considérés comme hérités assez tôt. De plus, la bibliothèque n'était pas compatible avec le middleware, ce qui nous empêchait de réécrire les URL ou de rediriger les utilisateurs en fonction de leur contexte. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts J'ai donc commencé ma recherche, mais à ma grande surprise, je n'ai trouvé aucune bibliothèque prenant en charge l'authentification Firebase dans le middleware. – En tant qu'ingénieur logiciel avec plus de 11 ans d'expérience commerciale dans Node.js et React, je me préparais à résoudre cette énigme. Pourquoi est-ce possible ? C'est impossible! Alors, j'ai commencé. Et la réponse est devenue évidente. Le middleware s’exécute dans . Il n'existe pas de bibliothèque Firebase compatible avec disponibles dans . . Je me sentais impuissant. Est-ce la première fois que je devrai pour pouvoir jouer avec les nouvelles API sophistiquées ? - J'ai rapidement arrêté de sangloter et j'ai commencé à faire de l'ingénierie inverse , et plusieurs autres bibliothèques d'authentification JWT, en les adaptant au Edge Runtime. J'ai saisi l'opportunité de résoudre tous les problèmes que j'avais rencontrés avec les bibliothèques d'authentification précédentes, dans le but de créer la bibliothèque d'authentification la plus légère, la plus simple à configurer et tournée vers l'avenir. Edge Runtime les API Web Crypto Edge Runtime J'étais condamné attendre Non. Tout vient à point à qui sait attendre. next-firebase-auth firebase-admin Environ deux semaines plus tard, la version de était née. C'était une solide preuve de concept, mais vous ne voudriez pas utiliser la version . Fais-moi confiance. 0.0.1 next-firebase-auth-edge 0.0.1 Comment ça va Près de , je suis ravi d'annoncer qu'après , et une de développeurs formidables du monde entier, la bibliothèque a atteint un stade où mes autres nœuds me donnent leur approbation. deux ans plus tard 372 commits 110 problèmes résolus multitude de commentaires inestimables Dans ce guide, j'utiliserai la version pour créer une application Next.js authentifiée à partir de zéro. Nous passerons en revue chaque étape en détail, en commençant par la création d'un nouveau projet Firebase et de l'application Next.js, suivie de l'intégration avec les bibliothèques et . À la fin de ce didacticiel, nous déploierons l'application sur Vercel pour confirmer que tout fonctionne à la fois localement et dans un environnement prêt pour la production. 1.4.1 de next-firebase-auth-edge next-firebase-auth-edge firebase/auth Configuration de Firebase Cette partie suppose que vous n'avez pas encore configuré l'authentification Firebase. N'hésitez pas à passer à la partie suivante si c'est le cas. Passons à et la console Firebase créons un projet Une fois le projet créé, activons l'authentification Firebase. Ouvrez la console et suivez jusqu'à et activez la méthode . C'est la méthode que nous allons prendre en charge dans notre application Créer > Authentification > Méthode de connexion par e-mail et mot de passe Après avoir activé votre première méthode de connexion, l'authentification Firebase doit être activée pour votre projet et vous pouvez récupérer votre dans clé API Web les paramètres du projet. Copiez la clé API et conservez-la en sécurité. Maintenant, ouvrons l'onglet suivant – et notons . Nous en aurons besoin plus tard. Cloud Messaging, l'ID de l'expéditeur Enfin et surtout, nous devons générer les informations d'identification du compte de service. Ceux-ci permettront à votre application d'obtenir un accès complet à vos services Firebase. Accédez à et cliquez sur . Cela téléchargera un fichier avec les informations d'identification du compte de service. Enregistrez ce fichier dans un emplacement connu. Paramètres du projet > Comptes de service Générer une nouvelle clé privée .json Nous sommes prêts à intégrer l'application Next.js avec l'authentification Firebase C'est ça! Créer l'application Next.js à partir de zéro Ce guide suppose que et sont installés. Les commandes utilisées dans ce didacticiel ont été vérifiées par rapport à la dernière version de LTS . Vous pouvez vérifier la version du nœud en exécutant dans le terminal. Vous pouvez également utiliser des outils tels que pour basculer rapidement entre les versions de Node.js. Node.js npm Node.js v20 node -v NVM Configuration de l'application Next.js avec CLI Ouvrez votre terminal préféré, accédez à votre dossier de projets et exécutez npx create-next-app@latest Pour faire simple, utilisons la configuration par défaut. Cela signifie que nous utiliserons et 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 Naviguons vers le répertoire racine du projet et assurons-nous que toutes les dépendances sont installées cd my-app npm install Pour confirmer que tout fonctionne comme prévu, démarrons le serveur de développement Next.js avec la commande . Lorsque vous ouvrez , vous devriez voir la page d'accueil de Next.js, semblable à celle-ci : npm run dev http://localhost:3000 Préparation des variables d'environnement Avant de commencer l'intégration avec Firebase, nous avons besoin d'un moyen sécurisé pour stocker et lire notre configuration Firebase. Heureusement, Next.js est livré avec le support intégré. dotenv Ouvrez votre éditeur de code préféré et accédez au dossier du projet Créons le fichier dans le répertoire racine du projet et remplissons-le avec les variables d'environnement suivantes : .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=... Veuillez noter que les variables préfixées par seront disponibles dans le bundle côté client. Nous en aurons besoin pour configurer NEXT_PUBLIC_ le SDK Firebase Auth Client , et peuvent être récupérés à partir du fichier téléchargé après avoir généré les informations d'identification du compte de service NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json sera le nom du cookie utilisé pour stocker les informations d'identification de l'utilisateur AUTH_COOKIE_NAME et sont des secrets avec lesquels nous allons signer les informations d'identification AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS est récupérée de la page générale NEXT_PUBLIC_FIREBASE_API_KEY la clé API Web des paramètres du projet. est .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN votre identifiant de projet est .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL votre identifiant de projet peut être obtenu à partir de la page > . NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Paramètres du projet Messagerie cloud ne sera pas utilisé pour le développement local, mais sera utile lorsque nous déploierons notre application sur Vercel USE_SECURE_COOKIES Intégration avec l'authentification Firebase Installation de et configuration initiale next-firebase-auth-edge Ajoutez la bibliothèque aux dépendances du projet en exécutant npm install next-firebase-auth-edge@^1.4.1 Créons le fichier pour encapsuler la configuration de notre projet. Ce n'est pas obligatoire, mais cela rendra les exemples de code plus lisibles. config.ts Ne passez pas trop de temps à réfléchir à ces valeurs. Nous les expliquerons plus en détail au fur et à mesure. 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 }; Ajout d'un middleware Créez le fichier à la racine du projet et collez ce qui suit 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", ], }; Croyez-le ou non, mais nous venons d'intégrer le serveur de notre application avec l'authentification Firebase. Avant de l'utiliser réellement, expliquons un peu la configuration : demandera à authMiddleware d'exposer le point de terminaison . Lorsque ce point de terminaison est appelé avec l'en-tête *, il répond avec l'en-tête HTTP(S)-Only contenant signés. loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie des jetons personnalisés et d'actualisation * est récupéré avec la fonction disponible dans . Nous en reparlerons plus tard. idToken getIdToken le SDK client Firebase De même, demande au middleware d'exposer , mais il ne nécessite aucun en-tête supplémentaire. Lorsqu'il est appelé, il supprime les cookies d'authentification du navigateur. logoutPath GET /api/logout est une clé API Web. Le middleware l'utilise pour actualiser le jeton personnalisé et réinitialiser les cookies d'authentification après l'expiration des informations d'identification. apiKey est le nom du cookie défini et supprimé par les points de terminaison et cookieName /api/login /api/logout une liste de clés secrètes avec lesquelles les informations d'identification des utilisateurs sont signées. Les informations d'identification seront toujours signées avec la première clé de la liste, vous devez donc fournir au moins une valeur. Vous pouvez fournir plusieurs clés pour effectuer une cookieSignatureKeys rotation de clé sont des options transmises au lors de la génération de l'en-tête . Voir README pour plus d'informations cookieSerializeOptions cookie Set-Cookie le cookie autorise la bibliothèque à utiliser vos services Firebase. serviceAccount Le matcher demande au serveur Next.js d'exécuter le Middleware sur , et et tout autre chemin qui n'est pas un fichier ou un appel d'API. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; les appels Vous vous demandez peut-être pourquoi nous n'activons pas le middleware pour tous /api/* . Nous pourrions, mais c'est une bonne pratique de gérer les appels non authentifiés dans le gestionnaire de route API lui-même. C'est un peu hors du cadre de ce tutoriel, mais si vous êtes intéressé, faites-le-moi savoir et je vous préparerai quelques exemples ! Comme vous pouvez le constater, la configuration est et avec un objectif clairement défini. Maintenant, commençons à appeler nos points de terminaison et . minimale /api/login /api/logout Création d'une page d'accueil sécurisée Pour rendre les choses aussi simples que possible, effaçons la page d'accueil par défaut de Next.js et remplaçons-la par du contenu personnalisé Ouvrez et collez ceci : ./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!

); } Décomposons cela petit à petit. La fonction est conçue pour valider et extraire les informations d'identification des utilisateurs à partir getTokens des cookies const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Il se résout avec , si l'utilisateur n'est pas authentifié ou un objet contenant deux propriétés : null qui est idToken que vous pouvez utiliser pour autoriser les requêtes API vers des services backend externes. C'est un peu hors de portée, mais il convient de mentionner que la bibliothèque permet une architecture de services distribués. Le est compatible et prêt à être utilisé avec toutes les bibliothèques Firebase officielles sur toutes les plateformes. token string token comme son nom l'indique, est une version décodée du , qui contient toutes les informations nécessaires pour identifier l'utilisateur, y compris l'adresse e-mail, la photo de profil et , ce qui nous permet en outre de restreindre l'accès en fonction des rôles et des autorisations. decodedToken token les revendications personnalisées Après avoir obtenu , nous utilisons la fonction de pour nous assurer que la page n'est accessible qu'aux utilisateurs authentifiés. tokens notFound next/navigation if (!tokens) { notFound(); } Enfin, nous rendons du contenu utilisateur de base et personnalisé Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Allons-y. Si vous avez fermé votre serveur de développement, exécutez simplement . npm run dev Lorsque vous essayez d'accéder à , vous devriez voir http://localhost:3000/ 404 : Cette page est introuvable. Succès! Nous avons gardé nos secrets à l'abri des regards indiscrets ! Installer et initialiser le SDK client Firebase firebase Exécutez dans le répertoire racine du projet npm install firebase Une fois le SDK client installé, créez le fichier dans le répertoire racine du projet et collez ce qui suit firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Cela initialisera le SDK client Firebase et exposera l'objet d'application pour les composants clients. Création d'une page d'inscription Quel est l’intérêt d’avoir une page d’accueil super sécurisée si personne ne peut la consulter ? Créons une page d'inscription simple pour permettre aux gens d'accéder à notre application. Créons une nouvelle page sophistiquée sous ./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

); } Je sais. Cela fait beaucoup de texte, mais soyez indulgents avec moi. Nous commençons par pour indiquer que la page d'inscription utilisera des API côté client "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Ensuite, nous définissons quelques variables et setters pour conserver notre état de formulaire 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); } } Ici, nous définissons notre logique de soumission de formulaire. Tout d'abord, nous validons si et sont égaux, sinon nous mettons à jour l'état d'erreur. Si les valeurs sont valides, nous créons un compte utilisateur avec depuis . Si cette étape échoue (par exemple, l'e-mail est pris), nous informons l'utilisateur en mettant à jour l'erreur. password confirmation createUserWithEmailAndPassword firebase/auth Si tout se passe bien, nous redirigeons l'utilisateur vers la page . Vous êtes probablement confus en ce moment, et vous avez raison de l’être. La page n’existe pas encore. Nous préparons simplement la suite. /login /login Lorsque vous visitez , la page devrait ressembler à peu près à ceci : http://localhost:3000/register Création d'une page de connexion Maintenant que les utilisateurs peuvent s'inscrire, laissez-les prouver leur identité Créez une page de connexion sous ./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

); } Comme vous le voyez, c'est assez similaire à la page d'inscription. Concentrons-nous sur le point crucial : 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); } } C'est là que opère. Nous utilisons depuis pour récupérer de l'utilisateur. toute la magie signInEmailAndPassword firebase/auth idToken Ensuite, nous appelons le point de terminaison exposé par le middleware. Ce point de terminaison met à jour les cookies de notre navigateur avec les informations d'identification de l'utilisateur. /api/login Enfin, nous redirigeons l'utilisateur vers la page d'accueil en appelant router.push("/"); La page de connexion devrait ressembler à ceci Testons-le ! Accédez à , entrez une adresse e-mail et un mot de passe aléatoires pour créer un compte. Utilisez ces informations d'identification sur la page . Après avoir cliqué sur , vous devriez être redirigé vers http://localhost:3000/register http://localhost:3000/login Entrée une page d'accueil super sécurisée Il nous faut enfin voir notre page d'accueil, et ! Mais attendez! Comment on s'en sort ? propre personnelle ultra sécurisée Nous devons ajouter un bouton de déconnexion pour ne pas nous exclure du monde pour toujours (ou 12 jours). Avant de commencer, nous devons créer un qui pourra nous déconnecter à l'aide du SDK client Firebase. composant client Créons un nouveau fichier sous ./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 ); } Comme vous l'avez peut-être remarqué, il s'agit d'une version légèrement modifiée de notre . Nous avons dû créer un composant client distinct, car ne fonctionne qu'à l'intérieur et , tandis que et doivent être exécutés dans un contexte client. Un peu compliqué, je sais, mais c'est en fait assez puissant. Je t'expliquerai plus tard. ./app/page.tsx getTokens des composants serveur des gestionnaires de routes API signOut useRouter Concentrons-nous sur le processus de déconnexion const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Tout d’abord, nous nous déconnectons du SDK client Firebase. Ensuite, nous appelons le point de terminaison exposé par le middleware. Nous terminons en redirigeant l'utilisateur vers la page . /api/logout /login Mettons à jour la page d'accueil de notre serveur. Accédez à et collez ce qui suit ./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 ; } Désormais, notre composant serveur est uniquement responsable de la récupération des jetons utilisateur et de leur transmission au composant client . Il s’agit en fait d’un modèle assez courant et utile. Home HomePage Testons ceci : Voilà ! Nous pouvons désormais nous connecter et nous déconnecter de l'application à notre guise. C'est parfait! Ou est-ce? Lorsqu'un utilisateur non authentifié tente d'accéder à la page d'accueil en ouvrant nous affichons http://localhost:3000/, 404 : Cette page est introuvable. De plus, les utilisateurs authentifiés peuvent toujours accéder aux pages et sans avoir à se déconnecter. http://localhost:3000/register http://localhost:3000/login Nous pouvons faire mieux. Il semble que nous devions ajouter une logique de redirection. Définissons quelques règles : Lorsqu'un utilisateur authentifié tente d'accéder aux pages et , nous devons le rediriger vers /register /login / Lorsqu'un utilisateur non authentifié tente d'accéder à la page , nous devons le rediriger vers / /login Le middleware est l'un des meilleurs moyens de gérer les redirections dans les applications Next.js. Heureusement, prend en charge un certain nombre d'options et de fonctions d'assistance pour gérer un large éventail de scénarios de redirection. authMiddleware Ouvrons le fichier et collons cette version mise à jour 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", ], }; Ça devrait être ça. Nous avons implémenté toutes les règles de redirection. Décomposons cela. 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 } }); }, est appelé lorsque des informations d'identification utilisateur valides sont jointes à la demande, c'est-à-dire. l'utilisateur est authentifié. Il est appelé avec l'objet comme premier et comme deuxième argument. Cela devrait être résolu avec . handleValidToken tokens les en-têtes de requête modifiés NextResponse de est une fonction d'assistance qui renvoie un objet qui peut être simplifié en redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) En vérifiant , nous validons si l'utilisateur authentifié tente d'accéder à la page ou , et redirigeons vers l'accueil si tel est le cas. 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 }); }, est appelé lorsque quelque chose se produit. L'un de ces événements attendus est que l'utilisateur voit votre application pour la première fois, depuis un autre appareil ou après l'expiration des informations d'identification. handleInvalidToken attendu Sachant que est appelé pour un utilisateur non authentifié, nous pouvons procéder avec la deuxième règle : à la page handleInvalidToken lorsqu'un utilisateur non authentifié tente d'accéder / , nous devons le rediriger vers /login Comme il n’y a aucune autre condition à remplir, nous renvoyons simplement le résultat de qui peut être simplifié en . Cela garantit également que l'utilisateur ne tombe pas dans une boucle de redirection. redirectToLogin NextResponse.redirect(new URL(“/login”)) Dernièrement, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } Contrairement à , est appelé lorsque quelque chose se produit et doit éventuellement faire l'objet d'une enquête. Vous pouvez trouver une liste des erreurs possibles avec leur description dans handleInvalidToken handleError d'inattendu* la documentation En cas d'erreur, nous enregistrons ce fait et redirigeons l'utilisateur en toute sécurité vers la page de connexion * peut être appelé avec l'erreur après la mise à jour des clés publiques de Google. handleError INVALID_ARGUMENT Il s'agit d'une forme de rotation des clés et elle est . attendue Voir ce problème Github pour plus d'informations Maintenant, c'est tout. Enfin. Déconnectons-nous de notre application Web et ouvrons . Nous devrions être redirigés vers la page . http://localhost:3000/ /login Reconnectons-nous et essayons de saisir . Nous devrions être redirigés vers la page . http://localhost:3000/login / Non seulement nous avons fourni une expérience utilisateur transparente. est une bibliothèque qui fonctionne uniquement sur le serveur de l'application et n'introduit pas de code supplémentaire côté client. Le bundle qui en résulte est vraiment . C'est ce que j'appelle parfait. next-firebase-auth-edge de taille zéro minime Notre application est désormais entièrement intégrée à l'authentification Firebase dans les composants serveur et client. Nous sommes prêts à libérer tout le potentiel de Next.js ! Le code source de l'application se trouve dans next-firebase-auth-edge/examples/next-typescript-minimal Épilogue Dans ce guide, nous avons intégré la nouvelle application Next.js avec l'authentification Firebase. Bien qu'assez détaillé, l'article a omis certaines parties importantes du flux d'authentification, telles que le formulaire de réinitialisation du mot de passe ou les méthodes de connexion autres que l'e-mail et le mot de passe. Si vous êtes intéressé par la bibliothèque, vous pouvez prévisualiser . la page de démonstration complète de next-firebase-auth-edge starter Il comprend , , et plus encore. l'intégration de Firestore les actions du serveur la prise en charge d'App-Check La bibliothèque fournit une avec des tonnes d'exemples page de documentation dédiée Si vous avez aimé l'article, j'apprécierais de mettre en vedette le référentiel . Acclamations! 🎉 next-firebase-auth-edge Bonus – Déploiement de l'application sur Vercel Ce guide bonus vous apprendra comment déployer votre application Next.js sur Vercel Création du dépôt git Pour pouvoir déployer sur Vercel, vous devrez créer un référentiel pour votre nouvelle application. Rendez-vous sur et créez un nouveau référentiel. https://github.com/ a déjà lancé un dépôt git local pour nous, il vous suffit donc de suivre le dossier racine de votre projet et d'exécuter : 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 Ajout d'un nouveau projet Vercel Allez sur et connectez-vous avec votre compte Github https://vercel.com/ Une fois connecté, accédez à la page Présentation de Vercel et cliquez sur Ajouter un nouveau > Projet. Cliquez sur à côté du référentiel Github que nous venons de créer. Ne déployez pas encore. Importer Avant de déployer, nous devons fournir la configuration du projet. Ajoutons quelques variables d'environnement : N'oubliez pas de définir sur , car Vercel utilise HTTPS par défaut USE_SECURE_COOKIES true Maintenant, nous sommes prêts à cliquer sur Déployer Attendez une minute ou deux et vous devriez pouvoir accéder à votre application avec une URL similaire à celle-ci : https://next-typescript-minimal-xi.vercel.app/ Fait. Je parie que vous ne vous attendiez pas à ce que ce soit aussi simple. Si vous avez aimé le guide, j'apprécierais de mettre en vedette le référentiel . next-firebase-auth-edge Vous pouvez également me faire part de vos retours dans les commentaires. Acclamations! 🎉

Utilisation de l'authentification Firebase avec les dernières fonctionnalités Next.js

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps