show user creation error

apps/login/app/(login)/error.tsx

@@ -10,7 +10,7 @@ export default function Error({ error, reset }: any) {
   }, [error]);
 
   return (
-    <Boundary labels={["Home page Error UI"]} color="red">
+    <Boundary labels={["Login Error"]} color="red">
       <div className="space-y-4">
         <div className="text-sm text-red-500 dark:text-red-500">
           <strong className="font-bold">Error:</strong> {error?.message}

apps/login/app/registeruser/route.ts

@@ -6,13 +6,19 @@ export async function POST(request: NextRequest) {
   if (body) {
     const { email, password, firstName, lastName } = body;
 
-    const userId = await addHumanUser(server, {
+    return addHumanUser(server, {
       email: email,
       firstName,
       lastName,
       password: password ? password : undefined,
-    });
+    })
+      .then((userId) => {
         return NextResponse.json({ userId });
+      })
+      .catch((error) => {
+        console.log(error);
+        return NextResponse.json(error, { status: 500 });
+      });
   } else {
     return NextResponse.error();
   }

apps/login/ui/SetPasswordForm.tsx

@@ -14,6 +14,7 @@ import {
 } from "#/utils/validators";
 import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
+import Alert from "./Alert";
 
 type Inputs =
   | {
@@ -40,6 +41,7 @@ export default function SetPasswordForm({
   });
 
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
 
   const router = useRouter();
 
@@ -59,7 +61,8 @@ export default function SetPasswordForm({
     });
     setLoading(false);
     if (!res.ok) {
-      throw new Error("Failed to register user");
+      const error = await res.json();
+      throw new Error(error.details);
     }
     return res.json();
   }
@@ -68,7 +71,6 @@ export default function SetPasswordForm({
     loginName: string,
     password: string
   ) {
-    setLoading(true);
     const res = await fetch("/session", {
       method: "POST",
       headers: {
@@ -80,7 +82,6 @@ export default function SetPasswordForm({
       }),
     });
 
-    setLoading(false);
     if (!res.ok) {
       throw new Error("Failed to set user");
     }
@@ -88,12 +89,20 @@ export default function SetPasswordForm({
   }
 
   function submitAndLink(value: Inputs): Promise<boolean | void> {
-    return submitRegister(value).then((humanResponse: any) => {
+    return submitRegister(value)
-      return createSessionWithLoginNameAndPassword(email, value.password).then(
+      .then((humanResponse: any) => {
-        () => {
+        setError("");
+        return createSessionWithLoginNameAndPassword(
+          email,
+          value.password
+        ).then(() => {
+          setLoading(false);
           return router.push(`/verify?userID=${humanResponse.userId}`);
-        }
+        });
-      );
+      })
+      .catch((errorDetails: Error) => {
+        setLoading(false);
+        setError(errorDetails.message);
       });
   }
 
@@ -102,8 +111,6 @@ export default function SetPasswordForm({
   const watchPassword = watch("password", "");
   const watchConfirmPassword = watch("confirmPassword", "");
 
-  const [tosAndPolicyAccepted, setTosAndPolicyAccepted] = useState(false);
-
   const hasMinLength =
     passwordComplexitySettings &&
     watchPassword?.length >= passwordComplexitySettings.minLength;
@@ -157,6 +164,8 @@ export default function SetPasswordForm({
         />
       )}
 
+      {error && <Alert>{error}</Alert>}
+
       <div className="mt-8 flex w-full flex-row items-center justify-between">
         <Button type="button" variant={ButtonVariants.Secondary}>
           back