password validation on server

client/src/pages/Chat.tsx

@@ -1,8 +1,5 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import zdjecie from "../../assets/walter.png";
-import { useEffect } from "react";
-import axios from "axios";
-import { useNavigate } from "react-router-dom";
 const messagesArray = [
   {
     content: "widomosc jakas",

client/src/pages/Login.tsx

@@ -63,6 +63,7 @@ export default function Login() {
                   name="username"
                   type="username"
                   required
+                  autoFocus
                   autoComplete="username"
                   className="pl-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 />

client/src/pages/Signup.tsx

@@ -82,6 +82,7 @@ export default function Signup() {
                   name="username"
                   type="username"
                   required
+                  autoFocus
                   autoComplete="username"
                   className="pl-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 />
@@ -133,7 +134,7 @@ export default function Signup() {
                 )}
                 {errors?.password?.type === "minLength" && (
                   <p className="text-red-400 text-sm">
-                    Password mus be at least 8 characters long
+                    Password must be at least 8 characters long
                   </p>
                 )}
               </div>
@@ -156,21 +157,10 @@ export default function Signup() {
                   required
                   className="pl-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 />
-                {errors?.sPassword?.type === "maxLength" && (
-                  <p>First name cannot exceed 20 characters</p>
-                )}
-                {errors?.sPassword?.type === "minLength" && (
-                  <p>Username must be between 4 and 20 characters</p>
-                )}
-                {errors?.sPassword?.type === "pattern" && (
-                  <p>
-                    Username can only contain letters, numbers and underscores
-                  </p>
-                )}
               </div>
             </div>
             {!match && (
-              <p className="text-red-400 text-sm">Password don't match</p>
+              <p className="text-red-400 text-sm">Passwords don't match</p>
             )}
             <div>
               <button

server/.env

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

server/auth/jwt.js

@@ -10,16 +10,16 @@ function generateJwtToken(username) {
       { expiresIn: "30d" },
     );
   } catch (e) {
-    console.error("Failed to generate JWT token ", e);
+    console.log("Failed to generate JWT token, ", e);
   }
 }
 
 function verifyJwtToken(token) {
   try {
     const decoded = jwt.verify(token, jwtSecret);
-    return decoded.username;
+    return { username: decoded.username };
   } catch (e) {
-    console.error("Failed to verify JWT token ", e);
+    return { errorMessage: e.message }; // Sending message to client because it's not backend error (in most cases i guess) so
   }
 }
 

server/server.js

@@ -42,7 +42,13 @@ app.post("/api/auth/signup", async (req, res) => {
   const user_id = crypto.randomUUID();
   const created_at = new Date();
 
-  // Checks if the user already exists in database
+  if (!username || username.length < 4 || username.length > 20) {
+    return res.status(400).json({ message: "Invalid username length" });
+  }
+  if (!password || password.length < 8 || password.length > 128) {
+    return res.status(400).json({ message: "Invalid password length" });
+  }
+  // Checks if the user already exists in database (returns result.rows[0].count > 0;)
   const exist = await checkUserExist(username);
   if (exist) {
     res.status(409).json({ message: "User already exist" });
@@ -99,7 +105,7 @@ app.get("/api/auth/validate", (req, res) => {
   if (!token) {
     return res.status(401).json({ message: "Unauthorized" });
   }
-  const username = verifyJwtToken(token);
+  const { username } = verifyJwtToken(token);
   if (username) {
     console.log(count++);
     return res