added hashing password, creating user uuid and password mismatch check

client/src/main.tsx

@@ -3,6 +3,7 @@ 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";
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
     path: "/signup",
     element: <Signup />,
   },
+  {
+    path: "/chat",
+    element: <Chat />,
+  },
   {
     path: "*",
     element: <Lost />,

client/src/pages/Signup.tsx

@@ -2,6 +2,7 @@ import icon from "../../assets/icon.png";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";
+import { useState } from "react";
 
 type Inputs = {
   username: string;
@@ -14,9 +15,23 @@ export default function Signup() {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<Inputs>();
+  } = useForm<Inputs>({
+    mode: "onChange",
+  });
   const navigate = useNavigate();
+
+  const [match, setMatch] = useState(true);
+
   const onSubmit: SubmitHandler<Inputs> = (data) => {
+    if (data.password !== data.sPassword) {
+      setMatch(true);
+      setTimeout(() => {
+        setMatch(false);
+      }, 50);
+
+      return;
+    }
+    setMatch(true);
     axios
       .post("http://localhost:5173/api/auth/signup", data)
       .then(() => {
@@ -34,7 +49,7 @@ export default function Signup() {
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
           <img alt="chat" src={icon} className="mx-auto h-10 w-auto" />
           <h2 className="text-white mt-10 text-center text-2xl font-bold leading-9 tracking-tight">
-            Sign up to your account
+            Create an account
           </h2>
         </div>
 
@@ -104,17 +119,12 @@ export default function Signup() {
                 />
                 {errors?.password?.type === "maxLength" && (
                   <p className="text-red-400 text-sm">
-                    First name cannot exceed 20 characters
+                    Password cannot exceed 128 characters
                   </p>
                 )}
                 {errors?.password?.type === "minLength" && (
                   <p className="text-red-400 text-sm">
-                    Username must be between 4 and 20 characters
-                  </p>
-                )}
-                {errors?.password?.type === "pattern" && (
-                  <p className="text-red-400 text-sm">
-                    Username can only contain letters, numbers and underscores
+                    Password mus be at least 8 characters long
                   </p>
                 )}
               </div>
@@ -150,6 +160,9 @@ export default function Signup() {
                 )}
               </div>
             </div>
+            {!match && (
+              <p className="text-red-400 text-sm">Password don't match</p>
+            )}
             <div>
               <button
                 type="submit"

server/server.js

@@ -6,6 +6,10 @@ const cors = require("cors");
 const server = createServer(app);
 const io = new Server(server);
 const bodyParser = require("body-parser");
+const bcrypt = require("bcrypt");
+const crypto = require("crypto");
+const saltRounds = 10;
+
 require("dotenv").config();
 const PORT = process.env.SERVER_PORT;
 const {
@@ -27,18 +31,27 @@ const corsOptions = {
 app.use("/socket.io", express.static("./node_modules/socket.io/client-dist/"));
 app.use(cors(corsOptions));
 app.use(bodyParser.json());
+
 app.post("/api/auth/signup", async (req, res) => {
   const username = req.body.username;
   const password = req.body.password;
+  const user_id = crypto.randomUUID();
+  const created_at = new Date();
 
+  // Checks if the user already exists in database
   const exist = await checkUserExist(username);
   if (exist) {
     res.status(409).send("User already exist");
     return;
   }
 
-  const token = generateJwtToken(username);
+  // Hash password and insert hash and username to database
+  bcrypt.hash(password, saltRounds, async (err, hash) => {
+    await insertUser(username, hash, user_id, created_at);
+  });
 
+  // Set JWT token to cookies
+  const token = generateJwtToken(username);
   res.cookie("token", token, {
     maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
     httpOnly: true,
@@ -48,6 +61,9 @@ app.post("/api/auth/signup", async (req, res) => {
 });
 
 app.post("/api/auth/login", (req, res) => {
+  const username = req.body.username;
+  const password = req.body.password;
+
   res.status(200).send("Successfully logged In");
 });
 io.on("connection", (socket) => {