最新の Next.js 機能で Firebase 認証を使用する

の紹介 next-firebase-auth-edge おそらく、既存または新しい Next.js アプリケーションに Firebase 認証を追加する方法を探しているときに、この記事を見つけたのでしょう。アプリが成功する可能性を最大限に高める、賢明で偏見のない、将来を見据えた決定を下すことを目指します。next-firebase-auth-edge の作成者として、完全に偏見のない意見を提供することは得意ではないことを認めなければなりませんが、少なくともライブラリを設計する際に採用したアプローチを正当化しようとします。このガイドを読み終える頃には、このアプローチがシンプルで長期的に実行可能であることがおわかりいただけると思います。 始まり 長い紹介は省略します。ライブラリのアイデアは、おそらくあなたと似たような状況からインスピレーションを得たものだとだけ言っておきます。それは、Next.js が のカナリア バージョンをリリースした頃でした。私は、書き換えと内部リダイレクトに大きく依存するアプリに取り組んでいました。そのために、カスタム Node.js サーバー レンダリング Next.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 認証をサポートするライブラリは見つかりませんでした。 Node.js と React で 11 年以上の商用経験を持つソフトウェア エンジニアとして、私はこの難問に取り組む準備をしていました。 なぜでしょうか? あり得ません! そこで、私は始めました。そして答えは明白でした。ミドルウェアは 内で実行されています。Edge 内では と互換性のある Firebase ライブラリは利用できません。 。無力感を覚えました。新しくておしゃれな API を試すために実際に なければならないのは、今回が初めてでしょうか? – 私はすぐに泣き止み、 、 、およびその他のいくつかの JWT 認証ライブラリをリバース エンジニアリングして、Edge Runtime に適合させ始めました。私は、これまでの認証ライブラリで遭遇したすべての問題に対処する機会を捉え、最も軽量で構成が簡単で、将来を見据えた認証ライブラリを作成することを目指しました。 Edge Runtime Runtime 、Web Crypto API 私は絶望しました 待た いいえ。見張っている鍋は決して沸騰しません。 next-firebase-auth firebase-admin 約 2 週間後、 のバージョン が誕生しました。これは堅実な概念実証でしたが、バージョン は使いたくないでしょう。信じてください。 next-firebase-auth-edge 0.0.1 0.0.1 どのようにそれが起こっている 約 、 、 、そして世界中の素晴らしい開発者からの を経て、このライブラリが、私のもう一人の自分が承認してくれる段階に達したことをお知らせできることを嬉しく思います。 2 年後 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認証が有効になり、 で を取得できるようになります。 プロジェクト設定 Web APIキー API キーをコピーして安全に保管してください。次に、次のタブ「 を書き留めておきます。これは後で必要になります。 クラウド メッセージング」を開き、 送信者 ID 最後に、サービス アカウントの認証情報を生成する必要があります。これにより、アプリは Firebase サービスに完全にアクセスできるようになります。 に移動し、 をクリックします。これにより、サービス アカウントの認証情報を含む ファイルがダウンロードされます。このファイルを既知の場所に保存します。 [プロジェクト設定] > [サービス アカウント] [新しい秘密キーを生成] .json アプリを Firebase 認証と統合する準備ができました。 これで完了です。Next.js Next.js アプリをゼロから作成する このガイドでは、 と インストールされていることを前提としています。このチュートリアルで使用されているコマンドは、最新の LTS に対して検証されています。ターミナルで を実行すると、ノードのバージョンを確認できます。また、 などのツールを使用して、Node.js のバージョンをすばやく切り替えることもできます。 Node.js npm が Node.js v20 node -v NVM CLI で Next.js アプリをセットアップする お気に入りのターミナルを開き、プロジェクトフォルダに移動して実行します。 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=... で始まる変数はクライアント側のバンドルで使用できることに注意してください。Firebase を設定するにはこれらが必要になります。 NEXT_PUBLIC_ 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 プロジェクト設定の Web API キー は .firebaseapp.com です NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN your-project-id は .firebaseio.com です NEXT_PUBLIC_FIREBASE_DATABASE_URL your-project-id は、 > ページから取得できます。 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)-Only ヘッダーで応答します。 loginPath GET /api/login Authorization: Bearer ${idToken} カスタム トークンとリフレッシュ トークン Set-Cookie * で利用可能な 関数を使用して取得されます。これについては後で詳しく説明します。 idToken 、Firebase Client SDK getIdToken 同様に、 ミドルウェアに を公開するように指示しますが、追加のヘッダーは必要ありません。呼び出されると、ブラウザから認証 Cookie が削除されます。 logoutPath GET /api/logout は Web API キーです。ミドルウェアはこれを使用してカスタム トークンを更新し、資格情報の有効期限が切れた後に認証 Cookie をリセットします。 apiKey および エンドポイントによって設定および削除される Cookie の名前です。 cookieName /api/login /api/logout 、ユーザー認証情報に署名する秘密鍵のリストです。認証情報は常にリストの最初の鍵で署名されるため、少なくとも 1 つの値を指定する必要があります。複数の鍵を指定して を実行することもできます。 cookieSignatureKeys 鍵のローテーション ヘッダーを生成するときに に渡されるオプションです。詳細については、 README を参照してください。 cookieSerializeOptions Set-Cookie 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, }); ユーザーが認証されていない場合は で解決され、そうでない場合は次の 2 つのプロパティを含むオブジェクトで解決されます。 null は、外部バックエンド サービスへの API リクエストを承認するために使用できる idToken です。これは少し範囲外ですが、ライブラリによって分散サービス アーキテクチャが可能になることは言及する価値があります。 、すべてのプラットフォームのすべての公式 Firebase ライブラリと互換性があり、すぐに使用できます。 token string token 、名前が示すように、 のデコードされたバージョンであり、電子メール アドレス、プロフィール写真、 など、ユーザーを識別するために必要なすべての情報が含まれており、これにより、ロールと権限に基づいてアクセスをさらに制限できるようになります。 decodedToken token カスタム クレーム を取得した後、 の 関数を使用して、認証されたユーザーのみがページにアクセスできるようにします。 tokens next/navigation notFound 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 クライアント 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 firebase/auth createUserWithEmailAndPassword すべてがうまくいけば、ユーザーを ページにリダイレクトします。おそらく今は混乱しているでしょうが、それは当然です。 ページはまだ存在していません。私たちは次に何が起こるかを準備しているだけです。 /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); } } ここで が起こります。 の を使用して、ユーザーの を取得します。 すべての 魔法 firebase/auth signInEmailAndPassword idToken 次に、ミドルウェアによって公開される エンドポイントを呼び出します。このエンドポイントは、ユーザーの資格情報を使用してブラウザの Cookie を更新します。 /api/login 最後に、 を呼び出してユーザーをホームページにリダイレクトします。 router.push("/"); ログインページはおおよそ次のようになります 試してみましょう！ にアクセスし、ランダムなメールアドレスとパスワードを入力してアカウントを作成します。これらの資格情報は ページで使用します。Enter クリックすると、 にリダイレクトされます。 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 ); } お気づきかもしれませんが、これは を少し変更したバージョンです。getTokens と 内でのみ動作しますが、 と クライアント コンテキストで実行する必要があるため、別のクライアント コンポーネントを作成する必要がありました。少し複雑ですが、実際には非常に強力です。後で説明します。 ./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 アプリでリダイレクトを処理するための最良の方法の 1 つです。幸いなことに、 、さまざまなリダイレクト シナリオを処理するための多数のオプションとヘルパー関数をサポートしています。 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 } }); }, 、有効なユーザー資格情報がリクエストに添付されているとき、つまりユーザーが認証されているときに呼び出されます。これは、最初の引数として オブジェクト、2 番目の引数として を使用して呼び出されます。これは で解決される必要があります。 handleValidToken tokens 変更されたリクエスト ヘッダー NextResponse の に簡略化できるオブジェクトを返すヘルパー関数です。 next-firebase-auth-edge redirectToHome 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 }); }, 、 事態が発生したときに呼び出されます。予期されるイベントの 1 つは、ユーザーが別のデバイスから初めてアプリを表示する場合や、資格情報の有効期限が切れた場合です。 handleInvalidToken 予期される 認証されていないユーザーに対して が呼び出されることがわかったので、2番目のルールに進むことができます。認証されていないユーザーが ページ 、 。 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 公開鍵が更新された後、 エラーで が呼び出されることがあります。 INVALID_ARGUMENT handleError これはキーローテーションの一種であり、 います。 想定されて 詳細については、この Github の問題を参照してください。 さあ、これで終わりです。ついに。 Web アプリからログアウトして、 開きます。/login ページにリダイレクトされるはずです。 http://localhost:3000/ /login もう一度ログインして、 を入力し みます。/ ページにリダイレクトされるはずです。 http://localhost:3000/login / シームレスなユーザー エクスペリエンスを提供しただけではありません。next アプリのサーバーでのみ動作し、追加のクライアント側コードを導入しない ライブラリです。結果として得られるバンドルは、まさに です。これが私が完璧と呼ぶものです。 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 これで、 クリックする準備ができました 「デプロイ」を 1、2 分待つと、次のような URL でアプリにアクセスできるようになります: https://next-typescript-minimal-xi.vercel.app/ 完了です。こんなに簡単だとは思わなかったでしょう。 このガイドが気に入ったら、 リポジトリにスターを付けていただけると幸いです。 next-firebase-auth-edge コメント欄でフィードバックをお送りください。よろしくお願いします! 🎉