【Firebase Authentication】保存してあるユーザー情報の一覧ページと削除・編集機能を作成する方法｜Firebase Admin SDKとは何か？JSONの中身や秘密鍵の使い方を実例で解説

{
  "type": "service_account",
  "project_id": "・・・",
  "private_key_id": "・・・",
  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIE・・・"
  "client_email": "firebase-adminsdk-fbsvciam・・・.gserviceaccount.com",
  "client_id": "・・・",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/cert",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-fbsvc・・・",
  "universe_domain": "googleapis.com"
}

FIREBASE_PROJECT_ID="プロジェクトID（JSON内のproject_id）"
FIREBASE_CLIENT_EMAIL="メールアドレス形式のID（JSON内のclient_email）"
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n..."

import * as admin from "firebase-admin";

if (!admin.apps.length) {
  try {
    admin.initializeApp({
      credential: admin.credential.cert({
        projectId: process.env.FIREBASE_PROJECT_ID,
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
        // 環境変数からの読み込み時、改行文字 (\n) が正しく解釈されるように replace を挟む
        privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
      }),
    });
  } catch (error) {
    console.error("Firebase Admin 初期化エラー:", error);
  }
}

export const adminAuth = admin.auth();

npm install firebase-admin

"use server";

import { adminAuth } from "@/lib/firebase-admin";
import { revalidatePath } from "next/cache";

// ユーザー一覧取得
export async function getUsers() {
  const listUsers = await adminAuth.listUsers();
  return listUsers.users.map((user) => ({
    uid: user.uid,
    email: user.email,
    displayName: user.displayName || "未設定",
    disabled: user.disabled,
    provider: user.providerData[0]?.providerId,
  }));
}

// ユーザーの無効化・有効化
export async function toggleUserStatus(uid: string, currentStatus: boolean) {
  try {
    await adminAuth.updateUser(uid, { disabled: !currentStatus });
    revalidatePath("/admin/user-list");
  } catch (error) {
    console.error("Status update error:", error);
  }
}

// ユーザー削除
export async function deleteUser(uid: string) {
  try {
    await adminAuth.deleteUser(uid);
    revalidatePath("/admin/user-list");
  } catch (error) {
    console.error("Delete user error:", error);
  }
}

// ユーザー情報（displayName）の編集
export async function updateDisplayName(uid: string, formData: FormData) {
  const newName = formData.get("displayName") as string;
  try {
    await adminAuth.updateUser(uid, { displayName: newName });
    revalidatePath("/admin/user-list");
  } catch (error) {
    console.error("Update name error:", error);
  }
}

//更新
export async function refresh() {
  revalidatePath("/admin/user-list");
}

// app/admin/user-list/page.tsx
import { getUsers, toggleUserStatus, deleteUser, updateDisplayName, refresh } from "./actions";
import RefreshButton from "./RefreshButton";

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

  return (
    <div className="p-8 bg-gray-50 min-h-screen">
      <h1 className="text-2xl font-bold mb-6 text-gray-800">ユーザー管理</h1>

      {/* 更新ボタン */}
      <div className="my-[28px]">
        <form action={refresh}>
          <RefreshButton />
        </form>
      </div>
      
      <div className="overflow-hidden bg-white rounded-xl shadow-sm border border-gray-200">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">ユーザー情報 / 名前変更</th>
              <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">状態</th>
              <th className="px-6 py-4 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {users.map((user) => (
              <tr key={user.uid} className={user.disabled ? "bg-gray-50" : ""}>
                {/* ユーザー情報 & 名前編集フォーム */}
                <td className="px-6 py-4">
                  <div className="text-sm text-gray-500 mb-2">{user.email}</div>
                  <form action={updateDisplayName.bind(null, user.uid)} className="flex items-center gap-2">
                    <input
                      name="displayName"
                      defaultValue={user.displayName}
                      className="border border-gray-300 rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 outline-none text-gray-600"
                    />
                    <button type="submit" className="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-2 py-1 rounded transition">
                      更新
                    </button>
                  </form>
                </td>

                {/* 状態ラベル */}
                <td className="px-6 py-4">
                  {user.disabled ? (
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                      停止中
                    </span>
                  ) : (
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      アクティブ
                    </span>
                  )}
                </td>

                {/* 操作ボタン群 */}
                <td className="px-6 py-4 text-right space-x-3">
                  {/* 一時停止/有効化ボタン：色の出し分け */}
                  <form action={async () => { "use server"; await toggleUserStatus(user.uid, user.disabled); }} className="inline">
                    <button 
                      className={`text-sm font-medium px-4 py-1.5 rounded-lg transition ${
                        user.disabled 
                        ? "bg-gray-400 text-white"
                        : "bg-yellow-500 hover:bg-yellow-600 text-white shadow-sm" // 有効なときはイエロー
                      }`}
                    >
                      {user.disabled ? "有効化する" : "一時停止する"}
                    </button>
                  </form>
                  
                  {/* 削除ボタン */}
                  <form action={async () => { "use server"; await deleteUser(user.uid); }} className="inline">
                    <button 
                      className="text-sm font-medium text-red-600 hover:text-red-800 px-2 py-1 transition"
                      // onClickを使いたい場合はここをClient Componentにする必要があります
                    >
                      削除
                    </button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

"use server";

import { adminAuth } from "@/lib/firebase-admin";

// ユーザー一覧取得
export async function getUsers() {
  const listUsers = await adminAuth.listUsers();
  return listUsers.users.map((user) => ({
    uid: user.uid,
    email: user.email,
    displayName: user.displayName || "未設定",
    disabled: user.disabled,
    provider: user.providerData[0]?.providerId,
  }));
}

const listUsers = await adminAuth.listUsers();

return listUsers.users.map((user) => ({・・・})

    uid: user.uid, //Firebase が発行するユーザー固有ID
    email: user.email,　//ログイン用メールアドレス(未設定の場合は undefined)
    displayName: user.displayName || "未設定",　//表示名
    disabled: user.disabled, //trueの場合、ログイン不可
    provider: user.providerData[0]?.providerId, //ログイン方法（password, google.com, github.comなど）

[
  {
    uid: "abc123",
    email: "test@example.com",
    displayName: "山田太郎",
    disabled: false,
    provider: "google.com"
  },
  ...
]

import { revalidatePath } from "next/cache";
revalidatePath("/admin/user-list");

await adminAuth.updateUser(uid, { disabled: !currentStatus });

adminAuth.deleteUser(uid)

// ユーザー情報（displayName）の編集
export async function updateDisplayName(uid: string, formData: FormData) {
  const newName = formData.get("displayName") as string;
  try {
    await adminAuth.updateUser(uid, { displayName: newName });
    revalidatePath("/admin/user-list");
  } catch (error) {
    console.error("Update name error:", error);
  }
}

                  <form action={updateDisplayName.bind(null, user.uid)} className="flex items-center gap-2">
                    <input
                      name="displayName"
                      defaultValue={user.displayName}
                      className="border border-gray-300 rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 outline-none text-gray-600"
                    />
                    <button type="submit" className="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-2 py-1 rounded transition">
                      更新
                    </button>
                  </form>

const newName = formData.get("displayName") as string;

await adminAuth.updateUser(uid, { displayName: newName });