protectedRoutes works?

client/src/App.tsx

@@ -3,12 +3,11 @@ import {
   createBrowserRouter,
   Navigate,
 } from "react-router-dom";
-import ProtectedRoutes from "./utils/ProtectedRoutes.tsx";
 import Chat from "./pages/Chat.tsx";
 import Login from "./pages/Login.tsx";
 import Signup from "./pages/Signup.tsx";
-import Authorize from "./pages/authorize.tsx";
-
+import ProtectedRoutes from "./utils/ProtectedRoutes.tsx";
+import Settings from "./pages/Settings.tsx";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -21,6 +20,10 @@ const router = createBrowserRouter([
         path: "/chat",
         element: <Chat />,
       },
+      {
+        path: "/settings",
+        element: <Settings />,
+      },
     ],
   },
   {
@@ -40,5 +43,4 @@ const router = createBrowserRouter([
 function App() {
   return <RouterProvider router={router} />;
 }
-
 export default App;

client/src/pages/Chat.tsx

@@ -53,17 +53,6 @@ function Chat() {
     reset,
     formState: { errors },
   } = useForm<Input>();
-  const navigate = useNavigate();
-  useEffect(() => {
-    axios
-      .get("/api/auth/validate", { withCredentials: true })
-      .then(() => {
-        console.log("authorized");
-      })
-      .catch(() => {
-        navigate("/login");
-      });
-  }, []);
 
   // Sending message
   const submitMessage: SubmitHandler<Input> = (data) => {

client/src/pages/Login.tsx

@@ -102,7 +102,7 @@ export default function Login() {
             <div className="text-red-400 text-sm">{message}</div>
           </form>
           <p className="text-gray-300 mt-10 text-center text-sm">
-            Dont have account?{" "}
+            Don't have account?{" "}
             <Link
               to="/signup"
               className="text-green-400 leading-6 hover:text-green-600"

client/src/pages/Settings.tsx

@@ -0,0 +1,9 @@
+function Settings() {
+  return (
+    <>
+      <h1>Settings</h1>
+    </>
+  );
+}
+
+export default Settings;

client/src/pages/authorize.tsx

@@ -1,37 +0,0 @@
-import { Navigate } from "react-router-dom";
-import axios from "axios";
-import { useState, useEffect } from "react";
-import Cookie from "js-cookie";
-
-function ProtectedRoutes() {
-  const [authorized, setAuthorized] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    async function validateToken() {
-      const token = Cookie.get("token");
-      if (!token) {
-        setAuthorized(false);
-        return;
-      }
-
-      axios
-        .get("/api/auth/validate", { withCredentials: true })
-        .then(() => setAuthorized(true))
-        .catch(() => setAuthorized(false));
-    }
-
-    validateToken();
-  }, []);
-
-  if (authorized === null) {
-    return <div>Loading...</div>;
-  }
-
-  return authorized ? (
-    <Navigate to="/chat" replace />
-  ) : (
-    <Navigate to="/login" replace />
-  );
-}
-
-export default ProtectedRoutes;

client/src/utils/ProtectedRoutes.tsx

@@ -1,33 +0,0 @@
-import { Navigate, Outlet } from "react-router-dom";
-import axios from "axios";
-import { useState, useEffect } from "react";
-import Cookie from "js-cookie";
-
-function ProtectedRoutes() {
-  const [authorized, setAuthorized] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    async function validateToken() {
-      const token = Cookie.get("token");
-      if (!token) {
-        setAuthorized(false);
-        return;
-      }
-
-      axios
-        .get("/api/auth/validate", { withCredentials: true })
-        .then(() => setAuthorized(true))
-        .catch(() => setAuthorized(false));
-    }
-
-    validateToken();
-  }, []);
-
-  if (authorized === null) {
-    return <div>Loading...</div>;
-  }
-
-  return authorized ? <Outlet /> : <Navigate to="/login" replace />;
-}
-
-export default ProtectedRoutes;

client/src/utils/useAuth.tsx

@@ -0,0 +1,29 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+import Cookies from "js-cookie";
+
+function useAuth() {
+  const [authorized, setAuthorized] = useState<boolean>(false);
+  useEffect(() => {
+    async function validateToken() {
+      const token = Cookies.get("token");
+      if (!token) {
+        setAuthorized(false);
+        return;
+      }
+
+      try {
+        await axios.get("/api/auth/validate", { withCredentials: true });
+        setAuthorized(true); // If validation is successful, user is authorized
+      } catch (error) {
+        setAuthorized(false); // Token validation failed
+      }
+    }
+
+    validateToken();
+  }, []);
+
+  return authorized;
+}
+
+export default useAuth;

server/.env

@@ -1,5 +1,6 @@
 SERVER_PORT=3000
 JWT_SECRET=jklsdfHJKDFJKLDF@
+ORIGIN=http://localhost:5173
 
 PG_USER=postgres
 PG_PASSWORD=haslo

server/server.js

@@ -25,7 +25,7 @@ const { generateJwtToken, verifyJwtToken } = require("./auth/jwt");
 const { getPassword } = require("./db/db");
 
 const corsOptions = {
-  origin: "http://localhost:5173",
+  origin: process.env.ORIGIN,
   optionsSuccessStatus: 200,
   credentials: true,
 };