Merge pull request #64 from mct-joken/feat/auth-check-accounts

feat: `accounts`テーブルに存在するアカウントのみがログインできるようにする

app/hooks/useAuth.ts

@@ -1,18 +1,49 @@
-import { User, getAuth } from "firebase/auth";
+import { Unsubscribe, User, getAuth } from "firebase/auth";
 import { useEffect, useState } from "react";
 
-export const useAuth = (): { ready: boolean; user: User | null } => {
+/**
+ * 現在の認証状態をリッスンして返すフック
+ * @param enableVerification 存在するAccountのログインのみ受け付けるか
+ * @returns \{`ready`: Firebase authの初期化が完了したか, `user`: ログイン中のユーザ \}
+ */
+export const useAuth = (
+  enableVerification: boolean = false
+): { ready: boolean; user: User | null } => {
   const auth = getAuth();
   const [ready, setReady] = useState(false);
   const [user, setUser] = useState<User | null>(null);
 
+  const verifyAuth = async (user: User | null) => {
+    if (user == null) {
+      return;
+    }
+    if (user.email == null) {
+      throw new Error("Authentication rejected");
+    }
+
+    const form = new FormData();
+    form.append("email", user.email);
+    const response = await fetch("/api/v1/account/verify", {
+      method: "POST",
+      body: form,
+    });
+    const data = (await response.json()) as { valid: boolean };
+    if (!data.valid) {
+      throw new Error("Authentication rejected");
+    }
+  };
+
   useEffect(() => {
-    (async () => {
-      await auth.authStateReady();
-      setReady(true);
-    })();
-    return auth.onAuthStateChanged(setUser);
-  }, [auth]);
+    const unsubscribes: Unsubscribe[] = [];
+    auth.authStateReady().then(() => setReady(true));
+    unsubscribes.push(auth.onAuthStateChanged(setUser));
+    if (enableVerification) {
+      unsubscribes.push(auth.beforeAuthStateChanged(verifyAuth));
+    }
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [auth, enableVerification]);
 
   return { ready, user };
 };

app/routes/api.v1.account.verify.ts

@@ -0,0 +1,17 @@
+import { ActionArgs, json } from "@remix-run/cloudflare";
+import { getAccountByEmail } from "~/models/account.server";
+
+export const action = async ({ request, context }: ActionArgs) => {
+  const formData = await request.formData();
+  const email = formData.get("email");
+  if (typeof email !== "string") {
+    return json({}, 400);
+  }
+
+  const account = await getAccountByEmail(context, email);
+  if (account == null) {
+    return json({ valid: false });
+  }
+
+  return json({ valid: true });
+};