hotfix: 認証情報をReact hooksを用いて実装

client/src/App.jsx

@@ -1,74 +1,23 @@
 import "./App.css";
-import { useState, useEffect } from "react";
-import { BrowserRouter, Route, Routes, Link, Navigate } from "react-router-dom";
+import { BrowserRouter, Route, Routes, Link } from "react-router-dom";
 import Dashboard from "./Dashboard";
 import Signin from "./signin/Signin";
 import Register from "./register/Register";
 import Signup from "./signup/Signup";
 
-// 認証状態を管理
-function useAuth() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  useEffect(() => {
-    const checkAuth = () => {
-      const cookies = document.cookie.split(";").map((cookie) => cookie.trim());
-      const authenticated = cookies.some((cookie) =>
-        cookie.startsWith("token="),
-      );
-      setIsAuthenticated(authenticated);
-    };
-
-    checkAuth();
-
-    // クッキーの変更を監視
-    const interval = setInterval(checkAuth, 3000); // 1秒ごとにチェック
-    return () => clearInterval(interval);
-  }, []);
-
-  return isAuthenticated;
-}
-
 function App() {
-  const isAuthenticated = useAuth();
-
   return (
     <div className="App">
       <BrowserRouter>
-        <nav>
-          <Link to="/signup">Signup</Link> | <Link to="/signin">Signin</Link> |{" "}
-          <Link to="/dashboard">Dashboard</Link> |{" "}
-          <Link to="/register">Register</Link>
-        </nav>
+        <Link to="/signup">Signup</Link> | <Link to="/signin">Signin</Link> |{" "}
+        <Link to="/dashboard">Dashboard</Link> |{" "}
+        <Link to="/Register">Register</Link>
         <Routes>
-          <Route
-            path="/"
-            element={
-              isAuthenticated ? (
-                <Dashboard />
-              ) : (
-                <Navigate to="/signin" replace />
-              )
-            }
-          />
-          <Route
-            path="/dashboard"
-            element={
-              isAuthenticated ? (
-                <Dashboard />
-              ) : (
-                <Navigate to="/signin" replace />
-              )
-            }
-          />
-          <Route
-            path="/register"
-            element={
-              isAuthenticated ? <Register /> : <Navigate to="/signin" replace />
-            }
-          />
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/signin" element={<Signin />} />
           <Route path="/signup" element={<Signup />} />
+          <Route path="/register" element={<Register />} />
           <Route path="*" element={<h1>Not Found Page</h1>} />
         </Routes>
       </BrowserRouter>

client/src/Dashboard.jsx

@@ -1,24 +1,20 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "./hooks/useAuth";
 
 function Dashboard() {
   const navigate = useNavigate();
+  const { isAuthenticated, isLoading } = useAuth();
 
   useEffect(() => {
-    fetch("http://localhost:8000/api/signin/check", {
-      method: "GET",
-      credentials: "include",
-    })
-      .then((response) => {
-        if (!response.ok) {
-          navigate("/signin");
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-        navigate("/signin");
-      });
-  }, [navigate]);
+    if (!isLoading && !isAuthenticated) {
+      navigate("/signin");
+    }
+  }, [isLoading, isAuthenticated, navigate]);
+
+  if (isLoading || !isAuthenticated) {
+    return null;
+  }
 
   return (
     <div>

client/src/hooks/useAuth.jsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+
+export const useAuth = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const response = await fetch("http://localhost:8000/api/signin/check", {
+          method: "GET",
+          credentials: "include",
+        });
+        if (response.ok) {
+          setIsAuthenticated(true);
+        } else {
+          setIsAuthenticated(false);
+        }
+      } catch (error) {
+        console.error(error);
+        setIsAuthenticated(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    checkAuth();
+  }, []);
+
+  return { isAuthenticated, isLoading };
+};

client/src/main.jsx

@@ -1,10 +1,5 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
 
-createRoot(document.getElementById("root")).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+createRoot(document.getElementById("root")).render(<App />);

client/src/register/Register.jsx

@@ -1,6 +1,7 @@
-import "./register.css";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+import "./register.css";
 
 function Register() {
   // 状態管理
@@ -24,23 +25,18 @@ function Register() {
     whiskey: 0,
   });
 
+  const { isAuthenticated, isLoading } = useAuth();
   const navigate = useNavigate();
 
   useEffect(() => {
-    fetch("http://localhost:8000/api/signin/check", {
-      method: "GET",
-      credentials: "include",
-    })
-      .then((response) => {
-        if (!response.ok) {
-          navigate("/signin");
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-        navigate("/signin");
-      });
-  }, [navigate]);
+    if (!isLoading && !isAuthenticated) {
+      navigate("/signin");
+    }
+  }, [isLoading, isAuthenticated, navigate]);
+
+  if (isLoading || !isAuthenticated) {
+    return null;
+  }
 
   // 今日の日付を取得してフォーマットする関数
   const getTodayDate = () => {