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

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) {
-      const msg = err instanceof Error ? err.message : 'Something went wrong';
+    } catch (err: unknown) {
+      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">