useAuth

app/dashboard/sites/[siteId]/page.tsx

@@ -3,37 +3,21 @@
 import SitePage from "./SitePage";
 import Loading from "@/components/Loading";
 
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import axios from "axios";
-import Cookies from "js-cookie";
 import { useParams } from "next/navigation";
+import useAuth from "@/hooks/useAuth";
 
 export default function Dashboard() {
-  const router = useRouter();
-  const [loading, setLoading] = useState(true);
-  const [username, setUsername] = useState("");
-  const [name, setName] = useState("")
   const { siteId } = useParams();
+  const { loading, username, name, validate } = useAuth();
 
   useEffect(() => {
-    const init = async () => {
+    const runValidation = async () => {
-      const token = Cookies.get("token");
+      await validate();
-      if (!token) {
-        router.push("/");
-      }
-      const response = await axios.post("/api/user/validate", { token });
-      if (response.data.message !== "Valid") {
-        Cookies.remove("token");
-        router.push("/");
-      } else {
-        setUsername(response.data.username);
-        setName(response.data.name);
-        setLoading(false);
-      }
     };
-    init();
+    
-  }, []);
+    runValidation();
+  }, [validate]);
 
   if (loading) {
     return <Loading />;

app/page.tsx

@@ -14,12 +14,11 @@ export default function Login() {
 
   useEffect(() => {
     const init = async () => {
-      const response = await axios.get("/api/user/init");
+      await axios.get("/api/user/init").then(() => {
-      if (response.data.message === "No users found") {
         router.push("/setup");
-      } else {
+      }).catch((error) => {
-        setLoading(false);
+        console.error(error);
-      }
+      });
     };
     init();
 

hooks/useAuth.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+
+const useAuth = () => {
+    const [validated, setValidated] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [username, setUsername] = useState("");
+    const [name, setName] = useState("");
+    const router = useRouter();
+
+    const validate = useCallback(async () => {
+        setLoading(true);
+        try {
+            const token = Cookies.get("token");
+            if (!token) {
+                setLoading(false);
+                setValidated(false);
+                router.push("/");
+                return;
+            }
+            
+            const response = await axios.post("/api/user/validate", { token });
+            
+            if (response.data.message === "Valid") {
+                setValidated(true);
+                setUsername(response.data.username);
+                setName(response.data.name);
+            } else {
+                setValidated(false);
+                Cookies.remove("token");
+                router.push("/");
+            }
+        } catch (error) {
+            console.error("Validation error:", error);
+            setValidated(false);
+            Cookies.remove("token");
+            router.push("/");
+        } finally {
+            setLoading(false);
+        }
+    }, [router]);
+
+    useEffect(() => {
+        validate();
+    }, [validate]);
+
+    return {
+        validated,
+        loading,
+        username,
+        name,
+        validate
+    };
+}
+
+
+export default useAuth;