Использование аутентификации Firebase с новейшими функциями Next.js

Введение в next-firebase-auth-edge Вероятно, вы нашли эту статью, когда искали способы добавить аутентификацию Firebase в существующее или новое приложение Next.js. Вы стремитесь принять разумное, беспристрастное и ориентированное на будущее решение, которое максимизирует шансы на успех вашего приложения. Как создатель next-firebase-auth-edge, я должен признать, что высказывать совершенно беспристрастное мнение — не моя сильная сторона, но, по крайней мере, я попытаюсь обосновать подход, который я использовал при разработке библиотеки. Надеемся, что к концу этого руководства вы найдете этот подход простым и жизнеспособным в долгосрочной перспективе. Как это началось Я избавлю вас от длинных представлений. Скажу только, что идея библиотеки возникла из ситуации, возможно похожей на вашу. Это было время, когда Next.js выпустил канареечную версию . Я работал над приложением, которое в значительной степени полагалось на перезапись и внутренние перенаправления. Для этого мы использовали специальное приложение Next.js серверного рендеринга Node.js. App Router express Мы были очень рады появлению и , но знали, что они не будут совместимы с нашим пользовательским сервером. казалось мощной функцией, которую мы могли бы использовать, чтобы устранить необходимость в специальном сервере Express, решив вместо этого полагаться исключительно на встроенные функции Next.js для динамического перенаправления и перезаписи пользователей на разные страницы. App Router Server Components Промежуточное программное обеспечение В тот раз мы использовали . Нам очень понравилась библиотека, но она распространяла нашу логику аутентификации через файлы , , , , которые считались устаревшими. достаточно скоро. Кроме того, библиотека не была совместима с промежуточным программным обеспечением, что не позволяло нам перезаписывать URL-адреса или перенаправлять пользователей в зависимости от их контекста. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts Итак, я начал поиск, но, к своему удивлению, не нашел библиотеки, поддерживающей аутентификацию Firebase в промежуточном программном обеспечении. – Как инженер-программист с более чем 11-летним коммерческим опытом работы с Node.js и React, я готовился решить эту загадку. Почему это могло быть? Это невозможно! Итак, я начал. И ответ стал очевиден. Промежуточное ПО работает внутри . В нет библиотеки Firebase, совместимой с . . Я чувствовал себя беспомощным. Впервые мне придется , чтобы начать играть с новыми и модными API? - Я быстро перестал рыдать и начал реконструировать , и несколько других библиотек аутентификации JWT, адаптируя их к Edge Runtime. Я воспользовался возможностью решить все проблемы, с которыми я столкнулся при использовании предыдущих библиотек аутентификации, стремясь создать самую легкую, простую в настройке и ориентированную на будущее библиотеку аутентификации. Edge Runtime Edge Runtime API-интерфейсами Web Crypto Я был обречен ждать Неа. Под присмотром горшок никогда не закипает. next-firebase-auth firebase-admin Примерно две недели спустя родилась версия . Это было убедительное доказательство концепции, но вы не захотите использовать версию . Поверьте мне. 0.0.1 next-firebase-auth-edge 0.0.1 Как дела Почти я рад сообщить, что после , и от замечательных разработчиков со всего мира, библиотека достигла стадии, когда другие мои собеседники выражают мне одобрение. два года спустя 372 коммитов 110 решенных проблем множества бесценных отзывов В этом руководстве я буду использовать версию для создания аутентифицированного приложения Next.js с нуля. Мы подробно рассмотрим каждый шаг, начиная с создания нового проекта Firebase и приложения Next.js, а затем интеграции с библиотеками и . В конце этого руководства мы развернем приложение в Vercel, чтобы убедиться, что все работает как локально, так и в готовой к работе среде. 1.4.1 next-firebase-auth-edge next-firebase-auth-edge firebase/auth Настройка Firebase В этой части предполагается, что вы еще не настроили аутентификацию Firebase. Если нет, смело переходите к следующей части. Давайте перейдем к и консоли Firebase создадим проект. После создания проекта давайте включим аутентификацию Firebase. Откройте консоль и выберите и включите метод . Этот метод мы собираемся поддерживать в нашем приложении. «Сборка» > «Аутентификация» > «Метод входа» «Электронная почта и пароль» После того, как вы включили свой первый метод входа, для вашего проекта должна быть включена проверка подлинности Firebase, и вы сможете получить свой в ключ веб-API настройках проекта. Скопируйте ключ API и сохраните его. Теперь давайте откроем следующую вкладку — и запишем . Он нам понадобится позже. Cloud Messaging идентификатор отправителя И последнее, но не менее важное: нам необходимо сгенерировать учетные данные сервисной учетной записи. Это позволит вашему приложению получить полный доступ к вашим сервисам Firebase. Перейдите в и нажмите . Будет загружен файл с учетными данными сервисной учетной записи. Сохраните этот файл в известном месте. «Настройки проекта» > «Учетные записи служб» «Создать новый закрытый ключ» .json Мы готовы интегрировать приложение Next.js с аутентификацией Firebase. Вот и все! Создание приложения Next.js с нуля В этом руководстве предполагается, что у вас установлены и . Команды, используемые в этом руководстве, были проверены на соответствие последней версии LTS . Вы можете проверить версию узла, запустив в терминале. Вы также можете использовать такие инструменты, как для быстрого переключения между версиями Node.js. Node.js npm Node.js v20 node -v NVM, Настройка приложения Next.js с помощью CLI Откройте свой любимый терминал, перейдите в папку своих проектов и запустите npx create-next-app@latest Для простоты давайте использовать конфигурацию по умолчанию. Это означает, что мы будем использовать и 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 Давайте перейдем в корневой каталог проекта и убедимся, что все зависимости установлены. cd my-app npm install Чтобы убедиться, что все работает как положено, давайте запустим сервер разработки Next.js с помощью команды . Когда вы откроете , вы должны увидеть страницу приветствия Next.js, похожую на эту: npm run dev http://localhost:3000 Подготовка переменных среды Прежде чем мы начнем интеграцию с Firebase, нам нужен безопасный способ хранения и чтения нашей конфигурации Firebase. К счастью, Next.js поставляется со встроенной поддержкой . dotenv Откройте свой любимый редактор кода и перейдите в папку проекта. Давайте создадим файл в корневом каталоге проекта и заполним его следующими переменными среды: .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=... Обратите внимание, что переменные с префиксом будут доступны в пакете на стороне клиента. Они понадобятся нам для настройки NEXT_PUBLIC_ Firebase Auth Client SDK. , и можно получить из файла , загруженного после создания учетных данных сервисной учетной записи. NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json — это имя файла cookie, используемого для хранения учетных данных пользователя. AUTH_COOKIE_NAME и — это секреты, с помощью которых мы будем подписывать учетные данные. AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS — это , полученный с общей страницы NEXT_PUBLIC_FIREBASE_API_KEY ключ веб-API настроек проекта. — это .firebaseapp.com. NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN идентификатор вашего проекта — это .firebaseio.com. NEXT_PUBLIC_FIREBASE_DATABASE_URL идентификатор вашего проекта можно получить на странице > NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID «Настройки проекта» «Облачные сообщения». не будет использоваться для локальной разработки, но пригодится, когда мы развернем наше приложение в Vercel. USE_SECURE_COOKIES Интеграция с аутентификацией Firebase Установка и первоначальная конфигурация next-firebase-auth-edge Добавьте библиотеку в зависимости проекта, запустив npm install next-firebase-auth-edge@^1.4.1 Давайте создадим файл для инкапсуляции конфигурации нашего проекта. Это не обязательно, но сделает примеры кода более читабельными. config.ts Не тратьте слишком много времени на размышления об этих ценностях. Мы объясним их более подробно по мере продвижения. 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.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", ], }; Хотите верьте, хотите нет, но мы только что интегрировали сервер нашего приложения с аутентификацией Firebase. Прежде чем мы начнем его использовать, давайте немного объясним конфигурацию: даст указание authMiddleware предоставить конечную точку . Когда эта конечная точка вызывается с заголовком *, она отвечает заголовком только для HTTP(S), содержащим подписанные loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie пользовательские токены и токены обновления. * извлекается с помощью функции доступной в . Подробнее об этом позже. idToken getIdToken Firebase Client SDK Аналогично, инструктирует промежуточное программное обеспечение предоставить , но не требует каких-либо дополнительных заголовков. При вызове он удаляет файлы cookie аутентификации из браузера. logoutPath GET /api/logout — это ключ веб-API. Промежуточное программное обеспечение использует его для обновления пользовательского токена и сброса файлов cookie аутентификации после истечения срока действия учетных данных. apiKey — это имя файла cookie, установленного и удаленного конечными точками и cookieName /api/login /api/logout список секретных ключей, с помощью которых подписываются учетные данные пользователя. Учетные данные всегда подписываются первым ключом в списке, поэтому вам необходимо указать хотя бы одно значение. Вы можете предоставить несколько ключей для выполнения cookieSignatureKeys ротации ключей. — это параметры, передаваемые в при создании заголовка . Дополнительную информацию см. в файле README cookieSerializeOptions cookie Set-Cookie файла cookie. разрешает библиотеке использовать ваши сервисы Firebase. serviceAccount Средство сопоставления инструктирует сервер Next.js запускать промежуточное ПО для , любого другого пути, который не является файлом или вызовом API. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; . Вам может быть интересно, почему мы не включаем промежуточное ПО для всех вызовов /api/* Мы могли бы, но рекомендуется обрабатывать неаутентифицированные вызовы внутри самого обработчика маршрутов API. Это немного выходит за рамки данного урока, но если вам интересно, дайте мне знать, и я подготовлю несколько примеров! Как видите, конфигурация и имеет четко определенную цель. Теперь давайте начнем вызывать наши конечные точки и . минимальна /api/login /api/logout Создание безопасной домашней страницы Чтобы упростить задачу, давайте очистим домашнюю страницу Next.js по умолчанию и заменим ее персонализированным содержимым. Откройте и вставьте это: ./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!

); } Давайте разберем это по частям. Функция предназначена для проверки и извлечения учетных данных пользователя из getTokens файлов cookie. const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Он разрешается с помощью , если пользователь не аутентифицирован или объект, содержащий два свойства: null , который представляет собой idToken, которую можно использовать для авторизации запросов API к внешним серверным службам. Это немного выходит за рамки, но стоит отметить, что библиотека поддерживает архитектуру распределенных сервисов. совместим и готов к использованию со всеми официальными библиотеками Firebase на всех платформах. token string token как следует из названия, представляет собой декодированную версию , которая содержит всю информацию, необходимую для идентификации пользователя, включая адрес электронной почты, изображение профиля и , что дополнительно позволяет нам ограничивать доступ на основе ролей и разрешений. decodedToken token пользовательские утверждения После получения мы используем функцию из чтобы убедиться, что страница доступна только авторизованным пользователям. tokens notFound next/navigation if (!tokens) { notFound(); } Наконец, мы отображаем базовый персонализированный пользовательский контент. Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Давайте запустим это. Если вы закрыли свой сервер разработки, просто запустите . npm run dev Когда вы попытаетесь получить доступ к , вы должны увидеть http://localhost:3000/ 404: эта страница не найдена. Успех! Мы сохранили наши секреты от посторонних глаз! Установка и инициализация Firebase Client SDK firebase Запустите в корневом каталоге проекта. npm install firebase После установки клиентского SDK создайте файл в корневом каталоге проекта и вставьте следующее: firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Это инициализирует Firebase Client SDK и предоставит объект приложения для клиентских компонентов. Создание страницы регистрации Какой смысл иметь суперзащищенную домашнюю страницу, если никто не сможет ее просмотреть? Давайте создадим простую страницу регистрации, чтобы люди могли войти в наше приложение. Давайте создадим новую интересную страницу в ./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

); } Я знаю. Текста много, но потерпите. Мы начинаем с чтобы указать, что страница регистрации будет использовать клиентские API "use client"; 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); } } Здесь мы определяем логику отправки формы. Сначала мы проверяем, равны ли и , в противном случае мы обновляем состояние ошибки. Если значения действительны, мы создаем учетную запись пользователя с помощью из . Если этот шаг не удался (например, электронное письмо было принято), мы сообщаем пользователю, обновляя ошибку. password confirmation createUserWithEmailAndPassword firebase/auth Если все идет хорошо, мы перенаправляем пользователя на страницу . Вероятно, вы сейчас в замешательстве, и вы правы. Страница еще не существует. Мы просто готовимся к тому, что будет дальше. /login /login Когда вы посещаете , страница должна выглядеть примерно так: http://localhost:3000/register Создание страницы входа Теперь, когда пользователи могут зарегистрироваться, позвольте им подтвердить свою личность. Создайте страницу входа в ./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

); } Как видите, она очень похожа на страницу регистрации. Давайте сосредоточимся на самом важном: 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); } } Именно здесь происходит . Мы используем из для получения пользователя. вся магия signInEmailAndPassword firebase/auth idToken Затем мы вызываем конечную точку предоставляемую промежуточным программным обеспечением. Эта конечная точка обновляет файлы cookie нашего браузера с учетными данными пользователя. /api/login Наконец, мы перенаправляем пользователя на домашнюю страницу, вызывая router.push("/"); Страница входа должна выглядеть примерно так Давайте проверим это! Перейдите по , введите случайный адрес электронной почты и пароль, чтобы создать учетную запись. Используйте эти учетные данные на странице . После того, как вы нажмете , вы будете перенаправлены на адресу http://localhost:3000/register http://localhost:3000/login «Ввод» суперзащищенную домашнюю страницу. Наконец-то мы увидели нашу , , домашнюю страницу! Но ждать! Как нам выбраться? собственную личную сверхзащищенную Нам нужно добавить кнопку выхода из системы, чтобы не блокировать себя от мира навсегда (или на 12 дней). Прежде чем мы начнем, нам нужно создать , который сможет выполнить выход из системы с помощью Firebase Client SDK. клиентский компонент Давайте создадим новый файл в ./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 ); } Как вы могли заметить, это слегка измененная версия нашего . Нам пришлось создать отдельный клиентский компонент, потому что работает только внутри и , а и требуют запуска в контексте клиента. Я знаю, что это немного сложно, но на самом деле это довольно мощно. Я объясню позже. ./app/page.tsx getTokens серверных компонентов обработчиков маршрутов API signOut useRouter Давайте сосредоточимся на процессе выхода из системы. const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Сначала мы выходим из Firebase Client SDK. Затем мы вызываем конечную точку предоставляемую промежуточным программным обеспечением. Мы заканчиваем перенаправлением пользователя на страницу . /api/logout /login Давайте обновим домашнюю страницу нашего сервера. Перейдите в и вставьте следующее ./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 ; } Теперь наш компонент сервера отвечает только за получение пользовательских токенов и передачу их клиентскому компоненту . На самом деле это довольно распространенный и полезный шаблон. Home HomePage Давайте проверим это: Вуаля! Теперь мы можем входить и выходить из приложения по своему желанию. Отлично! Или это? Когда неаутентифицированный пользователь пытается войти на домашнюю страницу, открыв мы показываем http://localhost:3000/, 404: эта страница не найдена. Кроме того, прошедшие проверку подлинности пользователи по-прежнему могут получить доступ к страницам и без необходимости выхода из системы. http://localhost:3000/register http://localhost:3000/login Мы можем добиться большего. Кажется, нам нужно добавить логику перенаправления. Давайте определим некоторые правила: Когда аутентифицированный пользователь пытается получить доступ к страницам и , мы должны перенаправить его на /register /login / Когда неаутентифицированный пользователь пытается получить доступ к странице , мы должны перенаправить его на / /login Промежуточное программное обеспечение — один из лучших способов обработки перенаправлений в приложениях Next.js. К счастью, поддерживает ряд опций и вспомогательных функций для обработки широкого спектра сценариев перенаправления. authMiddleware Давайте откроем файл и вставим эту обновленную версию. 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", ], }; Вот и все. Мы реализовали все правила перенаправления. Давайте разберем это. 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 } }); }, вызывается, когда к запросу прилагаются действительные учетные данные пользователя, т.е. пользователь аутентифицирован. Он вызывается с объектом в качестве первого и в качестве второго аргумента. Это должно разрешиться с помощью . handleValidToken tokens модифицированными заголовками запроса NextResponse из — это вспомогательная функция, которая возвращает объект, который можно упростить до redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) Проверяя , мы проверяем, пытается ли аутентифицированный пользователь получить доступ к странице или , и перенаправляем на главную, если это так. 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 }); }, вызывается, когда происходит что-то . Одним из таких ожидаемых событий является то, что пользователь впервые видит ваше приложение с другого устройства или после истечения срока действия учетных данных. handleInvalidToken ожидаемое Зная, что вызывается для неаутентифицированного пользователя, мы можем перейти ко второму правилу: странице handleInvalidToken когда неаутентифицированный пользователь пытается получить доступ к / , мы должны перенаправить его на /login Поскольку других условий не требуется, мы просто возвращаем результат , который можно упростить до . Это также гарантирует, что пользователь не попадет в цикл перенаправления. redirectToLogin NextResponse.redirect(new URL(“/login”)) Наконец, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } В отличие от , вызывается, когда происходит что-то и, возможно, требует расследования. Список возможных ошибок с их описанием вы можете найти в handleInvalidToken handleError неожиданное* документации. В случае ошибки мы фиксируем этот факт и безопасно перенаправляем пользователя на страницу входа. * можно вызвать с ошибкой после обновления открытых ключей Google. handleError INVALID_ARGUMENT Это своего рода ротация ключей, и она . ожидается См. этот выпуск Github для получения дополнительной информации. Вот и все. Окончательно. Давайте выйдем из нашего веб-приложения и откроем . Мы должны быть перенаправлены на страницу . http://localhost:3000/ /login Давайте снова войдем в систему и попробуем ввести . Мы должны быть перенаправлены на страницу. http://localhost:3000/login / Мы не только обеспечили удобство взаимодействия с пользователем. — это библиотека которая работает только на сервере приложения и не вводит дополнительный код на стороне клиента. Полученный пакет действительно . Это то, что я называю совершенством. next-firebase-auth-edge нулевого размера, минимален Наше приложение теперь полностью интегрировано с аутентификацией Firebase как в серверном, так и в клиентском компонентах. Мы готовы раскрыть весь потенциал Next.js! Исходный код приложения можно найти в папке next-firebase-auth-edge/examples/next-typescript-minimal. Эпилог В этом руководстве мы рассмотрели интеграцию нового приложения Next.js с аутентификацией Firebase. Несмотря на свою обширность, в статье опущены некоторые важные части процесса аутентификации, такие как форма сброса пароля или методы входа, отличные от электронной почты и пароля. Если вас заинтересовала библиотека, вы можете просмотреть полноценную . стартовую демонстрационную страницу next-firebase-auth-edge Он включает в себя , , и многое другое. интеграцию с Firestore действия сервера поддержку App-Check Библиотека предоставляет с множеством примеров. специальную страницу документации Если вам понравилась статья, я был бы признателен за добавление репозитория . Ваше здоровье! 🎉 next-firebase-auth-edge Бонус — развертывание приложения в Vercel. Это дополнительное руководство научит вас, как развернуть приложение Next.js в Vercel. Создание git-репозитория Чтобы иметь возможность выполнить развертывание в Vercel, вам необходимо создать репозиторий для вашего нового приложения. Перейдите на и создайте новый репозиторий. https://github.com/ уже инициировал для нас локальный репозиторий git, поэтому вам просто нужно перейти в корневую папку вашего проекта и запустить: 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 Добавление нового проекта Vercel Перейдите на и войдите в свою учетную запись Github. https://vercel.com/ После входа в систему перейдите на страницу обзора Vercel и нажмите «Добавить новый» > «Проект». Нажмите рядом с только что созданным репозиторием Github. Пока не развертывайте. «Импорт» Прежде чем приступить к развертыванию, нам необходимо предоставить конфигурацию проекта. Давайте добавим несколько переменных среды: Не забудьте установить значение , поскольку Vercel по умолчанию использует HTTPS. USE_SECURE_COOKIES true Теперь мы готовы нажать «Развернуть». Подождите минуту или две, и вы сможете получить доступ к своему приложению по URL-адресу, подобному этому: https://next-typescript-minimal-xi.vercel.app/ Сделанный. Могу поспорить, вы не ожидали, что это будет так легко. Если вам понравилось руководство, я был бы признателен за участие в репозитории . next-firebase-auth-edge Вы также можете оставить мне свой отзыв в комментариях. Ваше здоровье! 🎉