restricted access to pages

client/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/forms": "^0.5.9",
         "axios": "^1.7.7",
+        "js-cookie": "^3.0.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
@@ -2906,6 +2907,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

client/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/forms": "^0.5.9",
     "axios": "^1.7.7",
+    "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",

client/src/App.tsx

@@ -1,9 +1,28 @@
-import Login from "./pages/Login.tsx";
-import Chat from "./pages/Chat.tsx";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 function App() {
-  const loggedIn = true;
-  return <>{loggedIn ? <Chat /> : <Login />}</>;
+  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");
+    }
+  });
 }
 
 export default App;

client/src/pages/Chat.tsx

@@ -1,5 +1,8 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import zdjecie from "../../assets/walter.png";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
 const messagesArray = [
   {
     content: "widomosc jakas",
@@ -50,6 +53,17 @@ 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

@@ -20,7 +20,9 @@ export default function Login() {
   const navigate = useNavigate();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     axios
-      .post("http://localhost:5173/api/auth/login", data)
+      .post("http://localhost:5173/api/auth/login", data, {
+        withCredentials: true,
+      })
       .then(() => {
         navigate("/chat");
       })

client/src/pages/Signup.tsx

@@ -34,7 +34,9 @@ export default function Signup() {
     }
     setMatch(true);
     axios
-      .post("http://localhost:5173/api/auth/signup", data)
+      .post("http://localhost:5173/api/auth/signup", data, {
+        withCredentials: true,
+      })
       .then(() => {
         navigate("/chat");
         console.log("Signed up");

server/auth/jwt.js

@@ -4,7 +4,7 @@ const jwtSecret = process.env.JWT_SECRET;
 function generateJwtToken(username) {
   try {
     return jwt.sign(
-      { username },
+      { username: username },
       jwtSecret,
       { algorithm: "HS256" },
       { expiresIn: "30d" },

server/db/db.js

@@ -101,7 +101,6 @@ async function getPassword(username) {
   `;
   try {
     const result = await client.query(query, [username]);
-    console.log(result.rows[0].password);
     return result.rows[0].password;
   } catch (e) {
     console.error("Failed to get user password ", e);

server/server.js

@@ -21,7 +21,7 @@ const {
   checkUserExist,
   changePassword,
 } = require("./db/db.js");
-const { generateJwtToken } = require("./auth/jwt");
+const { generateJwtToken, verifyJwtToken } = require("./auth/jwt");
 const { getPassword } = require("./db/db");
 
 const corsOptions = {
@@ -58,10 +58,9 @@ app.post("/api/auth/signup", async (req, res) => {
   });
 
   // Set JWT token to cookies
-  const token = generateJwtToken(username);
+  const token = generateJwtToken(username, user_id);
   res.cookie("token", token, {
     maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
-    httpOnly: true,
   });
 
   res.status(200).json({ message: "Successfully signed up" });
@@ -83,13 +82,30 @@ app.post("/api/auth/login", async (req, res) => {
       return result;
     }
     if (result) {
-      res.status(200).json({ message: "Successfully logged In" });
+      const token = generateJwtToken(username); //TODO add username_id
+      res.cookie("token", token, {
+        maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
+      });
+      return res.status(200).json({ message: "Successfully logged In" });
     } else {
       res.status(401).json({ message: "Invalid password" });
     }
   });
 });
 
+app.get("/api/auth/validate", (req, res) => {
+  const token = req.cookies.token;
+  if (!token) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  const username = verifyJwtToken(token);
+  if (username) {
+    return res
+      .status(200)
+      .json({ message: "Authorized", username: username.username });
+  }
+  res.status(401).json({ message: "Unauthorized" });
+});
 io.on("connection", (socket) => {
   console.log(`User: ${socket.id} just connected`);
 });