fix: validate user existence and password before login

server/app.js

@@ -1,9 +1,15 @@
 import express from "express";
 import cookieParser from "cookie-parser";
 import cors from "cors";
+import userRoutes from "./routers/user.routers.js";
+import {errorHandler} from "./middlewares/errorHandler.js";
+import dotenv from 'dotenv';
+dotenv.config();
 
 const app = express();
+
 app.use(cors({ credentials: true, origin: process.env.CORS_ORIGIN }));
+
 app.use(express.json({ limit: "16kb" }));
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
@@ -14,7 +20,9 @@ app.get("/is-up", (req, res) => {
 });
 
 // All the routes here
-import userRoutes from "./routers/user.routers.js";
 app.use("/api/v1/users", userRoutes);
 
+// Error Handler
+app.use(errorHandler);
+
 export default app;

server/controllers/user.controllers.js

@@ -97,13 +97,13 @@ const loginUser = asyncHandler(async (req, res) => {
   });
 
   if (!user) {
-    throw new ApiError(404, "No user with the current username or email");
+    throw new ApiError(404, "Error : No user with the current username or email");
   }
 
   const isPasswordCorrect = await user.isPasswordCorrect(password);
 
   if (!isPasswordCorrect) {
-    throw new ApiError(401, "Invalid password");
+    throw new ApiError(401, "Error : Invalid password");
   }
   //Generating user access and refresh tokens
   const { accessToken, refreshToken } = await generateAccessAndRefreshToken(

server/middlewares/errorHandler.js

@@ -0,0 +1,13 @@
+import ApiError from '../utils/ApiError.js';
+
+export const errorHandler = (err, req, res, next) => {
+  console.error(err);
+  if (err instanceof ApiError) {
+    return res.status(err.statusCode).json({
+      success: false,
+      message: err.message,
+      errors: err.errors || [],
+    });
+  }
+  res.status(500).json({ success: false, message: "Internal Server Error" });
+};

server/utils/asyncHandler.js

@@ -1,8 +1,8 @@
 // Wrapper function to handle asynchronous route handlers and forward errors to Express
-const asycnHandler = (fn) => {
+const asyncHandler = (fn) => {
   return (req, res, next) => {
     Promise.resolve(fn(req, res, next)).catch((err) => next(err));
   };
 };
 
-export default asycnHandler;
+export default asyncHandler;

src/components/LoginPage.jsx

@@ -9,18 +9,46 @@ export default function SignIn() {
   });
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState("");
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setUserInfo((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-
-    // For now, skip API call and just navigate
-    navigate("/dashboard");
+    setError("");
+
+    try {
+      const response = await fetch("http://localhost:8000/api/v1/users/sign-in", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify(userInfo),
+      });
+
+      if (response.ok) {
+        // Login success
+        navigate("/dashboard");
+      } else {
+        // parse error message
+        let errorMessage = "Login failed";
+        try {
+          const errorData = await response.json();
+          errorMessage = errorData.message || errorMessage;
+        } catch (err) {
+          setError("Network error. Please try again.");
+        }
+        setError(errorMessage);
+      }
+    } catch (err) {
+      setError("Network error. Please try again.");
+    }
   };
+
 
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
@@ -39,9 +67,11 @@ export default function SignIn() {
             </p>
           </div>
 
+          {error && <p className="text-red-600 text-center mb-2">{error}</p>}
+
           <form onSubmit={handleSubmit} className="space-y-6">
             <div className="space-y-2">
-             
+
               <div className="relative">
                 <span className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <Mail className="h-5 w-5 text-gray-400" />
@@ -60,7 +90,7 @@ export default function SignIn() {
             </div>
 
             <div className="space-y-2">
-             
+
               <div className="relative">
                 <span className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <Lock className="h-5 w-5 text-gray-400" />

src/components/SignupPage.jsx

@@ -23,19 +23,42 @@ export default function SignUp() {
     }));
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setError("");
-
-    // Password match check
+
     if (formData.password !== formData.confirmPassword) {
       setError("Passwords do not match");
       return;
     }
-
-    // Directly navigate without authentication
-    navigate("/dashboard");
+
+    try {
+      const response = await fetch("http://localhost:8000/api/v1/users/sign-up", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username: formData.name,
+          email: formData.email,
+          password: formData.password,
+          fullName: formData.name,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        setError(errorData.message || "Registration failed");
+        return;
+      }
+
+      // If registration is successful, navigate to dashboard or login page
+      navigate("/dashboard");
+    } catch (err) {
+      setError("Network error. Please try again.");
+    }
   };
+
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-100">