Cookie の path を指定 (#59)

Author: nakaterm

client/src/pages/Home.tsx

@@ -13,6 +13,10 @@ const client = hc<AppType>(API_ENDPOINT);
 export default function HomePage() {
   const [involvedProjects, setInvolvedProjects] = useState<BriefProject[] | null>(null);
   const [loading, setLoading] = useState(true);
+  const [toast, setToast] = useState<{
+    message: string;
+    variant: "success" | "error";
+  } | null>(null);
 
   useEffect(() => {
     const fetchInvolvedProjects = async () => {
@@ -24,10 +28,29 @@ export default function HomePage() {
           const parsedData = data.map((p) => briefProjectReviver(p));
           setInvolvedProjects(parsedData);
         } else {
+          let errorMessage = "イベントの取得に失敗しました。";
+          try {
+            const data = await res.json();
+            if (data && typeof data.message === "string" && data.message.trim()) {
+              errorMessage = data.message.trim();
+            }
+          } catch (_) {
+            // レスポンスがJSONでない場合は無視
+          }
+          setToast({
+            message: errorMessage,
+            variant: "error",
+          });
+          setTimeout(() => setToast(null), 5000);
           setInvolvedProjects(null);
         }
       } catch (error) {
         console.error("Error fetching involved projects:", error);
+        setToast({
+          message: "ネットワークエラーが発生しました。",
+          variant: "error",
+        });
+        setTimeout(() => setToast(null), 5000);
         setInvolvedProjects(null);
       } finally {
         setLoading(false);
@@ -52,6 +75,13 @@ export default function HomePage() {
           <EmptyState />
         </div>
       )}
+      {toast && (
+        <div className="toast toast-top toast-center z-50">
+          <div className={`alert ${toast.variant === "success" ? "alert-success" : "alert-error"}`}>
+            <span>{toast.message}</span>
+          </div>
+        </div>
+      )}
     </>
   );
 }

client/src/pages/Project.tsx

@@ -53,9 +53,29 @@ export default function ProjectPage() {
         const data = await res.json();
         const parsedData = projectReviver(data);
         setProject(parsedData);
+      } else {
+        let errorMessage = "プロジェクトの取得に失敗しました。";
+        try {
+          const data = await res.json();
+          if (data && typeof data.message === "string" && data.message.trim()) {
+            errorMessage = data.message.trim();
+          }
+        } catch (_) {
+          // レスポンスがJSONでない場合は無視
+        }
+        setToast({
+          message: errorMessage,
+          variant: "error",
+        });
+        setTimeout(() => setToast(null), 5000);
       }
     } catch (error) {
       console.error(error);
+      setToast({
+        message: "ネットワークエラーが発生しました。",
+        variant: "error",
+      });
+      setTimeout(() => setToast(null), 5000);
     } finally {
       setProjectLoading(false);
     }

client/src/pages/eventId/Submission.tsx

@@ -59,9 +59,29 @@ export default function SubmissionPage() {
         const data = await res.json();
         const parsedData = projectReviver(data);
         setProject(parsedData);
+      } else {
+        let errorMessage = "プロジェクトの取得に失敗しました。";
+        try {
+          const data = await res.json();
+          if (data && typeof data.message === "string" && data.message.trim()) {
+            errorMessage = data.message.trim();
+          }
+        } catch (_) {
+          // レスポンスがJSONでない場合は無視
+        }
+        setToast({
+          message: errorMessage,
+          variant: "error",
+        });
+        setTimeout(() => setToast(null), 5000);
       }
     } catch (error) {
       console.error("Error fetching project:", error);
+      setToast({
+        message: "ネットワークエラーが発生しました。",
+        variant: "error",
+      });
+      setTimeout(() => setToast(null), 5000);
     } finally {
       setProjectLoading(false);
     }

server/src/main.ts

@@ -44,6 +44,7 @@ serve(
 const isProduction = process.env.NODE_ENV === "prod";
 
 export const cookieOptions = {
+  path: "/",
   domain: process.env.DOMAIN,
   httpOnly: true,
   secure: isProduction,

server/src/middleware/browserId.ts

@@ -38,35 +38,36 @@ export const browserIdMiddleware: MiddlewareHandler = async (c: Context, next) =
     return c.json({ message: "サーバー設定エラー" }, 500);
   }
 
-  let browserId: string | undefined;
-  let needsReissue = false;
-
   // 新形式 （Hono） を試す
-  browserId = (await getSignedCookie(c, cookieSecret, COOKIE_NAME)) || undefined;
-
-  if (!browserId) {
-    const rawCookie = getCookie(c, COOKIE_NAME);
-
-    if (rawCookie?.startsWith("s:")) {
-      const legacy = unsignExpressCookie(rawCookie, cookieSecret);
-      if (legacy) {
-        browserId = legacy;
-        needsReissue = true;
-      }
-    }
+  const browserIdHono = (await getSignedCookie(c, cookieSecret, COOKIE_NAME)) || undefined;
+  if (browserIdHono) {
+    c.set("browserId", browserIdHono);
+    return next();
   }
 
-  if (browserId && needsReissue) {
+  // "browserId" という Cookie が存在しない場合は新規発行
+  const rawCookie = getCookie(c, COOKIE_NAME);
+  if (!rawCookie) {
+    const browserId = crypto.randomUUID();
     await setSignedCookie(c, COOKIE_NAME, browserId, cookieSecret, cookieOptions);
+    c.set("browserId", browserId);
+    return next();
   }
 
-  if (!browserId) {
-    browserId = crypto.randomUUID();
-    await setSignedCookie(c, COOKIE_NAME, browserId, cookieSecret, cookieOptions);
+  // 旧形式（Express）を試す
+  const browserIdExpress = unsignExpressCookie(rawCookie, cookieSecret);
+  if (browserIdExpress) {
+    // 旧形式が有効な場合は新形式で再発行
+    await setSignedCookie(c, COOKIE_NAME, browserIdExpress, cookieSecret, cookieOptions);
+    c.set("browserId", browserIdExpress);
+    return next();
   }
 
-  // コンテキストに保存（後続のハンドラで c.get('browserId') で取得可能）
-  c.set("browserId", browserId);
-
-  await next();
+  // ここまで来たら Cookie が不正
+  return c.json(
+    {
+      message: "ブラウザのCookie設定に問題があります。",
+    },
+    400,
+  );
 };