feat(auth): add server error alerts to authentication pages commit

libs/auth/src/lib/pages/ForgotPasswordPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import {
+  Alert,
   Anchor,
   Button,
   Center,
@@ -35,6 +36,7 @@ export function ForgotPasswordPage() {
   const { appName } = useAuthConfig();
   const [forgotTrigger, { isLoading }] = useApiMutation();
   const [sentTo, setSentTo] = useState<string | null>(null);
+  const [serverError, setServerError] = useState<string | null>(null);
 
   const {
     register,
@@ -56,8 +58,11 @@ export function ForgotPasswordPage() {
   const onSubmit = async (values: FormValues) => {
     try {
       await sendResetLink(values.email);
-    } catch (err) {
+    } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Something went wrong';
+      const msg =
+        (err as { data?: { message?: string } })?.data?.message ??
+        (err instanceof Error ? err.message : 'Something went wrong');
+      setServerError(msg);
       notify.error(msg);
     }
   };
@@ -67,8 +72,11 @@ export function ForgotPasswordPage() {
     try {
       await sendResetLink(sentTo);
       notify.success('Reset link sent again');
-    } catch (err) {
+    } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Something went wrong';
+      const msg =
+        (err as { data?: { message?: string } })?.data?.message ??
+        (err instanceof Error ? err.message : 'Something went wrong');
+      setServerError(msg);
       notify.error(msg);
     }
   };
@@ -160,6 +168,12 @@ export function ForgotPasswordPage() {
           </Text>
         </div>
 
+        {serverError && (
+          <Alert variant="light" color="red" withCloseButton onClose={() => setServerError(null)}>
+            {serverError}
+          </Alert>
+        )}
+
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack gap="md">
             <TextInput

libs/auth/src/lib/pages/LoginPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import {
+  Alert,
   Anchor,
   Button,
   Checkbox,
@@ -44,6 +45,7 @@ export function LoginPage() {
     useAuthConfig();
   const [isLoading, setIsLoading] = useState(false);
   const [rememberMe, setRememberMe] = useState(true);
+  const [serverError, setServerError] = useState<string | null>(null);
   const [loginTrigger] = useApiMutation<LoginPayload>();
   const [meTrigger] = useApiMutation<AuthUser>();
   const [profileCheckTrigger] = useApiMutation<{ id: string }>();
@@ -101,8 +103,12 @@ export function LoginPage() {
       }
 
       navigate(loginRedirectPath);
-    } catch {
+    } catch (err: unknown) {
-      notify.error('Invalid email or password');
+      const msg =
+        (err as { data?: { message?: string } })?.data?.message ??
+        (err instanceof Error ? err.message : 'Something went wrong');
+      setServerError(msg);
+      notify.error(msg);
     } finally {
       setIsLoading(false);
     }
@@ -120,6 +126,12 @@ export function LoginPage() {
           </Text>
         </div>
 
+        {serverError && (
+          <Alert variant="light" color="red" withCloseButton onClose={() => setServerError(null)}>
+            {serverError}
+          </Alert>
+        )}
+
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack gap="md">
             <TextInput

libs/auth/src/lib/pages/SignupPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import {
+  Alert,
   Anchor,
   Button,
   Checkbox,
@@ -67,6 +68,7 @@ export function SignupPage() {
   const dispatch = useDispatch();
   const { appName, loginRedirectPath } = useAuthConfig();
   const [agreed, setAgreed] = useState(false);
+  const [serverError, setServerError] = useState<string | null>(null);
   const [signupTrigger, { isLoading: loading }] = useApiMutation<{
     token: string;
     refreshToken: string;
@@ -123,8 +125,11 @@ export function SignupPage() {
           },
         });
       }
-    } catch (err) {
+    } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : 'Something went wrong';
+      const msg =
+        (err as { data?: { message?: string } })?.data?.message ??
+        (err instanceof Error ? err.message : 'Something went wrong');
+      setServerError(msg);
       notify.error(msg);
     }
   };
@@ -144,6 +149,12 @@ export function SignupPage() {
           </Text>
         </div>
 
+        {serverError && (
+          <Alert variant="light" color="red" withCloseButton onClose={() => setServerError(null)}>
+            {serverError}
+          </Alert>
+        )}
+
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack gap="md">
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">