creating ProtectedRoutes.tsx

client/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/forms": "^0.5.9",
+        "@types/js-cookie": "^3.0.6",
         "axios": "^1.7.7",
         "js-cookie": "^3.0.5",
         "react": "^18.3.1",
@@ -1359,6 +1360,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.9",
+    "@types/js-cookie": "^3.0.6",
     "axios": "^1.7.7",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",

client/src/App.tsx

@@ -1,28 +1,44 @@
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import {
+  RouterProvider,
+  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";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Navigate to="/chat" replace />,
+  },
+  {
+    element: <ProtectedRoutes />,
+    children: [
+      {
+        path: "/chat",
+        element: <Chat />,
+      },
+    ],
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/signup",
+    element: <Signup />,
+  },
+  {
+    path: "*",
+    element: <Navigate to="/lost" replace />,
+  },
+]);
 
 function App() {
-  const navigate = useNavigate();
-  const [authorized, setAuthorized] = useState(false);
-  useEffect(() => {
-    axios
-      .get("/api/auth/validate", { withCredentials: true })
-      .then(() => {
-        setAuthorized(true);
-      })
-      .catch(() => {
-        setAuthorized(false);
-      });
-  }, []);
-
-  useEffect(() => {
-    if (authorized) {
-      navigate("/chat");
-    } else {
-      navigate("/login");
-    }
-  });
+  return <RouterProvider router={router} />;
 }
 
 export default App;

client/src/main.tsx

@@ -1,38 +1,10 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
-import Login from "./pages/Login.tsx";
-import Signup from "./pages/Signup.tsx";
-import Chat from "./pages/Chat.tsx";
-import Lost from "./pages/404.tsx";
 import "./index.css";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-  {
-    path: "/login",
-    element: <Login />,
-  },
-  {
-    path: "/signup",
-    element: <Signup />,
-  },
-  {
-    path: "/chat",
-    element: <Chat />,
-  },
-  {
-    path: "*",
-    element: <Lost />,
-  },
-]);
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <App />
   </StrictMode>,
 );

client/src/pages/Chat.tsx

@@ -1,6 +1,6 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import zdjecie from "../../assets/walter.png";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 const messagesArray = [

client/src/pages/authorize.tsx

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,33 @@
+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;

server/server.js

@@ -27,6 +27,7 @@ const { getPassword } = require("./db/db");
 const corsOptions = {
   origin: "http://localhost:5173",
   optionsSuccessStatus: 200,
+  credentials: true,
 };
 
 // Serve socket.io js
@@ -92,7 +93,7 @@ app.post("/api/auth/login", async (req, res) => {
     }
   });
 });
-
+let count = 0;
 app.get("/api/auth/validate", (req, res) => {
   const token = req.cookies.token;
   if (!token) {
@@ -100,6 +101,7 @@ app.get("/api/auth/validate", (req, res) => {
   }
   const username = verifyJwtToken(token);
   if (username) {
+    console.log(count++);
     return res
       .status(200)
       .json({ message: "Authorized", username: username.username });