feat(auth): Implemented Session Persistence

apps/web/src/features/auth/Login.tsx

@@ -22,6 +22,7 @@ type LocationState = {
   from?: {
     pathname: string;
   };
+  message?: string;
 };
 
 const Login: React.FC = () => {
@@ -29,6 +30,7 @@ const Login: React.FC = () => {
   const [password, setPassword] = useState("");
   const [emailError, setEmailError] = useState("");
   const [passwordError, setPasswordError] = useState("");
+  const [sessionMessage, setSessionMessage] = useState<string | null>(null);
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useDispatch<AppDispatch>();
@@ -87,6 +89,18 @@ const Login: React.FC = () => {
     navigate(from ?? dashboardPath, { replace: true });
   }, [isAuthenticated, user?.userRole, navigate, location.state]);
 
+  // Check for session expiration message from redirect
+  useEffect(() => {
+    const state = location.state as LocationState | null;
+    if (state?.message) {
+      // Auto-clear session message after 5 seconds
+      const timer = setTimeout(() => setSessionMessage(null), 5000);
+      // Use a microtask to avoid cascading renders
+      Promise.resolve().then(() => setSessionMessage(state.message || null));
+      return () => clearTimeout(timer);
+    }
+  }, [location.state]);
+
   // Clear error message when component unmounts
   useEffect(() => {
     return () => {
@@ -169,6 +183,13 @@ const Login: React.FC = () => {
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-6">
+            {sessionMessage && (
+              <div className="flex items-center p-4 text-sm text-blue-700 bg-blue-50 border border-blue-200 rounded-xl transition-all animate-in fade-in slide-in-from-top-2">
+                <AlertCircle className="w-4 h-4 mr-2 shrink-0" />
+                <span>{sessionMessage}</span>
+              </div>
+            )}
+
             {reduxError && (
               <div className="flex items-center p-4 text-sm text-destructive-foreground bg-destructive/70 border border-destructive/20 rounded-xl transition-all animate-in fade-in slide-in-from-top-2">
                 <AlertCircle className="w-4 h-4 mr-2 shrink-0" />