【Firebase】特定のページへのアクセス制限の設定方法｜管理者のみアクセスできるようにする(カスタムクレイムとは何か？Custom Claims)

import { getAuth } from 'firebase-admin/auth';

//admin カスタマークレイムの付与
export const setAdminRole = async (uid: string) => {
  // 指定したUIDのユーザーに { admin: true } というクレイムを付与
  await getAuth().setCustomUserClaims(uid, { admin: true });
  return { message: "管理者権限を付与しました。再ログイン後に反映されます。" };
};

import * as admin from "firebase-admin";

export const setAdminRole = async (uid: string) => {
  // admin.auth() を通じてアクセスできる
  await admin.auth().setCustomUserClaims(uid, { admin: true });
};

// app/admin/user-list/actions.ts
"use server";

// setAdminRole をインポートする
import { setAdminRole } from "@/lib/firebase-admin";
import { revalidatePath } from "next/cache";

export async function makeMeAdmin(uid: string) {
  try {
    // lib/firebase-admin.ts で定義した共通関数を呼び出す
    await setAdminRole(uid);
    
    console.log(`User ${uid} is now an admin`);
    revalidatePath("/admin/user-list");
    
    return { success: true, message: "管理者権限を付与しました。再ログインしてください。" };
  } catch (error) {
    console.error(error);
    return { success: false, message: "エラーが発生しました。" };
  }
}

"use client";

import { auth } from "@/lib/firebase"; // クライアント用Auth
import { makeMeAdmin } from "@/app/admin/user-list/actions";

export default function AdminSetupPage() {
  const handleAdminUpgrade = async () => {
    // 1. 現在ログインしているユーザーを取得
    const user = auth.currentUser;

    if (!user) {
      alert("ログインしてから実行してください");
      return;
    }

    // 2. Server Actionを実行
    const result = await makeMeAdmin(user.uid);

    if (result.success) {
      alert(result.message);
      alert("実行後はこのボタンを削除してください");
    } else {
      alert("失敗しました: " + result.message);
    }
  };

  return (
    <div className="p-10">
      <h1 className="mb-4">管理者権限付与ツール</h1>
      <button
        onClick={handleAdminUpgrade}
        className="bg-blue-600 text-white px-4 py-2 rounded shadow-md"
      >
        ログイン中の自分を管理者にする
      </button>
    </div>
  );
}

"use client";

import { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "@/lib/firebase"; // 上で作った auth をインポート
import { useRouter } from "next/navigation";

export default function AdminGuard({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ログイン状態を監視
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      try {
        if (!user) {
          router.push("/"); // 未ログインならトップページに飛ばす
          return;
        }

        // カスタムクレイムを確認
        const idTokenResult = await user.getIdTokenResult();
        
        if (idTokenResult.claims.admin) {
          console.log("✅ 管理者確認済み");
          setLoading(false); // 管理者なら表示許可
        } else {
          alert("管理者権限がありません");
          router.push("/"); // 一般ページへ
        }
      } catch (error) {
        console.error("認証チェックエラー:", error);
      }
    });

    return () => unsubscribe();
  }, [router]);

  if (loading) return <p>権限を確認中...</p>;

  return <>{children}</>;
}

import AdminGuard from "./AdminGuard";

export default async function AdminUserListPage() {
  const users = await getUsers();

  return (
    <AdminGuard>
　　　　元々のタグ
    </AdminGuard>
  );
}