feat: アカウント取得機能を追加し、許可されたメールアドレスの取得方法を更新

Author: nomhiro

frontend/auth.config.ts

@@ -1,7 +1,21 @@
 import type { NextAuthConfig } from "next-auth";
 import Google from "next-auth/providers/google";
+import { getAllAccounts } from "./src/util/cosmos/account";
 
-const allowedEmails = process.env.ALLOWED_EMAILS?.split(",") || []; // 環境変数から許可されるメールアドレスを取得
+let allowedEmails: string[] = [];
+
+async function fetchAllowedEmails() {
+  try {
+    allowedEmails = await getAllAccounts()
+      .then((accounts) => accounts.map((account) => account.email))
+    console.log("🚀Allowed emails updated:", allowedEmails);
+  } catch (error) {
+    console.error("Error fetching allowed emails:", error);
+  }
+}
+
+// 初期化時に許可されたメールアドレスを取得
+fetchAllowedEmails();
 
 export const authConfig: NextAuthConfig = {
   providers: [Google],

frontend/src/app/api/auth/allowed-emails/route.ts

@@ -1,6 +1,14 @@
 import { NextResponse } from "next/server";
+import { getAllAccounts } from "../../../../util/cosmos/account";
 
 export async function GET() {
-  const allowedEmails = process.env.ALLOWED_EMAILS?.split(",") || [];
-  return NextResponse.json(allowedEmails);
-}
+  try {
+    const accounts = await getAllAccounts();
+    const allowedEmails = accounts.map(account => account.email);
+    console.log("🚀Allowed emails retrieved successfully:", allowedEmails);
+    return NextResponse.json(allowedEmails);
+  } catch (error) {
+    console.error("Error retrieving allowed emails:", error);
+    return NextResponse.json({ error: "Failed to retrieve allowed emails" }, { status: 500 });
+  }
+}

frontend/src/app/layout.tsx

@@ -3,7 +3,7 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { SessionProvider, useSession, signIn } from "next-auth/react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -35,28 +35,14 @@ export default function RootLayout({
 
 function AuthGuard({ children }: { children: React.ReactNode }) {
   const { data: session, status } = useSession();
-  const [allowedEmails, setAllowedEmails] = useState<string[]>([]);
 
-  useEffect(() => {
-    const fetchAllowedEmails = async () => {
-      const response = await fetch("/api/auth/allowed-emails");
-      const emails = await response.json();
-      setAllowedEmails(emails);
-    };
-    fetchAllowedEmails();
-  }, []);
-
-  if (status === "loading" || allowedEmails.length === 0) {
-    return <div>読み込み中...</div>; // ローディング状態
+  if (status === "loading") {
+    return <div>読み込み中...</div>;
   }
 
   if (!session?.user) {
-    return <div>ログインが必要です。</div>; // 未ログインの場合
-  }
-
-  if (!allowedEmails.includes(session.user.email || "")) {
-    return <div>認可されていないアカウントです。</div>; // 許可されていない場合
+    return <div>ログインが必要です。</div>;
   }
 
-  return <>{children}</>; // 許可された場合のみ子要素を表示
+  return <>{children}</>;
 }

frontend/src/models/models.ts

@@ -32,4 +32,10 @@ export interface CategoryItem {
   id: string;
   category: string;  // PartitionKey
   order: number;
+}
+
+// アカウントアイテム
+export interface AccountItem {
+  id: string;
+  email: string; // メールアドレス
 }

frontend/src/util/cosmos/account.ts

@@ -0,0 +1,22 @@
+import { CosmosClient } from "@azure/cosmos";
+import { AccountItem } from "../../models/models";
+
+/**
+ * categoryを全取得する
+ * @returns - カテゴリの配列
+ * */
+export const getAllAccounts = async (): Promise<AccountItem[]> => {
+  return new Promise(async (resolve, reject) => {
+    const cosmosClient = new CosmosClient(process.env.COSMOS_CONNECTION_STRING!);
+    const database = cosmosClient.database(process.env.COSMOS_DATABASE_NAME!);
+    const container = database.container(process.env.COSMOS_ACCOUNT_CONTAINER_NAME!);
+
+    try {
+      const { resources } = await container.items.readAll<AccountItem>().fetchAll();
+      resolve(resources);
+    } catch (error) {
+      console.error("🚀Error retrieving accounts:", error);
+      reject(error);
+    }
+  });
+};