'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { signIn } from 'next-auth/react';
import Link from 'next/link';
import { resetLogoutState } from '@/services/api';
export default function LoginPage() {
const router = useRouter();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const [userType, setUserType] = useState<'USER' | 'ADMIN'>('USER');
// Clear logout flags on mount so API calls aren't blocked after redirect from logout
useEffect(() => {
localStorage.removeItem('isLoggingOut');
resetLogoutState();
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
// Clear logout flags now that user is actively logging in
localStorage.removeItem('isLoggingOut');
resetLogoutState();
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;
}
// Check if 2FA is required (response is wrapped in { success, data })
if (validateData.data?.requiresTwoFactor) {
// Redirect to 2FA verification page with tempToken
const params = new URLSearchParams({
token: validateData.data.tempToken,
email: email,
});
router.push(`/login/verify-2fa?${params.toString()}`);
return;
}
// Save tokens to localStorage BEFORE signIn to prevent race condition
// (dashboard components may call API before TokenSync has synced from session)
if (validateData.data?.accessToken) {
localStorage.setItem('accessToken', validateData.data.accessToken);
localStorage.setItem('refreshToken', validateData.data.refreshToken);
}
// If validation passed, use NextAuth to create session
const result = await signIn('credentials', {
email,
password,
redirect: false,
});
setLoading(false);
if (result?.error) {
// Login failed - clear the tokens we just saved
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
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') => {
signIn(provider, { callbackUrl: '/' });
};
return (
<>
{/* Login Heading */}
Login
Login or create an account to enjoy FREE consultation on all property inquiries.
{/* User Type Toggle */}
{/* Login Form */}
{/* Divider */}
{/* Social Login Icons */}
{/* Apple */}
{/* Google */}
{/* X (Twitter) */}
{/* Facebook */}
Don't Have An Account ?
Sign Up
);
}