feat: Enhance login error reporting with backend pre-validation and update signup to require email verification instead of auto-login.

src/app/login/page.tsx

@@ -18,6 +18,24 @@ export default function LoginPage() {
     setLoading(true);
     setError('');
 
+    try {
+      // First, validate credentials with backend to get proper error messages
+      const validateRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const validateData = await validateRes.json();
+
+      if (!validateRes.ok) {
+        // Show the actual error message from backend
+        setError(validateData.message || 'Invalid email or password');
+        setLoading(false);
+        return;
+      }
+
+      // If validation passed, use NextAuth to create session
       const result = await signIn('credentials', {
         email,
         password,
@@ -27,11 +45,15 @@ export default function LoginPage() {
       setLoading(false);
 
       if (result?.error) {
-      setError('Invalid email or password');
+        setError('Login failed. Please try again.');
       } else {
         router.push('/');
         router.refresh();
       }
+    } catch (err) {
+      setLoading(false);
+      setError('An error occurred. Please try again.');
+    }
   };
 
   const handleSocialLogin = (provider: 'google' | 'facebook' | 'twitter') => {

src/app/signup/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 import Link from 'next/link';
 import { authService, AuthService, RegisterRequest } from '@/services';
@@ -14,7 +13,6 @@ interface ValidationError {
 }
 
 export default function SignUpPage() {
-  const router = useRouter();
   const [userType, setUserType] = useState<UserType>('USER');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -24,6 +22,7 @@ export default function SignUpPage() {
   const [error, setError] = useState('');
   const [fieldErrors, setFieldErrors] = useState<ValidationError[]>([]);
   const [loading, setLoading] = useState(false);
+  const [registrationSuccess, setRegistrationSuccess] = useState(false);
 
   const getFieldError = (fieldName: string): string | null => {
     const fieldError = fieldErrors.find((e) => e.field === fieldName);
@@ -47,19 +46,8 @@ export default function SignUpPage() {
 
       await authService.register(registerData);
 
-      // Auto login after successful registration
-      const result = await signIn('credentials', {
-        email,
-        password,
-        redirect: false,
-      });
-
-      if (result?.error) {
-        router.push('/login');
-      } else {
-        router.push('/');
-        router.refresh();
-      }
+      // Show success message - user must verify email before logging in
+      setRegistrationSuccess(true);
     } catch (err) {
       // Get field errors
       const errors = AuthService.getFieldErrors(err);
@@ -90,6 +78,32 @@ export default function SignUpPage() {
           />
         </div>
 
+        {/* Registration Success Message */}
+        {registrationSuccess ? (
+          <div className="bg-white rounded-[20px] p-8 shadow-sm">
+            <div className="text-center">
+              <div className="mb-6">
+                <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
+              <p className="text-sm text-[#00293d]/70 mb-6">
+                We've sent a verification link to <strong>{email}</strong>. Please check your inbox and click the link to verify your account before logging in.
+              </p>
+              <Link
+                href="/login"
+                className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
+              >
+                Go to Login
+              </Link>
+              <p className="text-xs text-[#00293d]/50 mt-4">
+                Didn't receive the email? Check your spam folder or contact support.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <>
             {/* Sign Up Heading */}
             <div className="text-center mb-6">
               <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Sign Up</h2>
@@ -276,6 +290,8 @@ export default function SignUpPage() {
             <img src="/assets/icons/facebook.svg" alt="Facebook" className="w-6 h-6" />
           </button>
         </div>
+          </>
+        )}
       </div>
     </div>
   );

src/auth.ts

@@ -25,7 +25,6 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
         password: { label: "Password", type: "password" },
       },
       async authorize(credentials) {
-        try {
         const res = await fetch(
           `${process.env.NEXT_PUBLIC_API_URL}/auth/login`,
           {
@@ -51,11 +50,8 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
           };
         }
 
-          return null;
-        } catch (error) {
-          console.error("Auth error:", error);
-          return null;
-        }
+        // Throw the actual error message from the backend
+        throw new Error(data.message || "Invalid email or password");
       },
     }),
   ],