@mesob/auth-react 0.0.8 → 0.1.0

package/dist/components/auth/pages/sign-in-page.js

@@ -1,40 +1,75 @@
 "use client";
 
 // src/components/auth/pages/sign-in-page.tsx
-import { useTranslations as useTranslations2 } from "next-intl";
-import { useState as useState3 } from "react";
-
-// src/context/auth-provider.tsx
 import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState
-} from "react";
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "@mesob/ui/components/alert";
+import { toast } from "@mesob/ui/components/sonner";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/lib/translations.ts
+function createTranslator(messages, namespace) {
+  return (key, params) => {
+    const fullKey = namespace ? `${namespace}.${key}` : key;
+    const keys = fullKey.split(".");
+    let value = messages;
+    for (const k of keys) {
+      if (value && typeof value === "object" && value !== null) {
+        value = value[k];
+      } else {
+        return fullKey;
+      }
+    }
+    if (typeof value !== "string") {
+      return fullKey;
+    }
+    if (params) {
+      return value.replace(
+        /\{(\w+)\}/g,
+        (_, param) => String(params[param] ?? `{${param}}`)
+      );
+    }
+    return value;
+  };
+}
+
+// src/provider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { deepmerge } from "deepmerge-ts";
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import { createContext, useContext, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var AuthContext = createContext(null);
-var useAuth = () => {
-  const context = useContext(AuthContext);
+var SessionContext = createContext(null);
+var ApiContext = createContext(null);
+var ConfigContext = createContext(null);
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1e3 * 60 * 5,
+      gcTime: 1e3 * 60 * 10,
+      retry: 1,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function useApi() {
+  const context = useContext(ApiContext);
   if (!context) {
-    throw new Error("useAuth must be used within AuthProvider");
+    throw new Error("useApi must be used within MesobAuthProvider");
   }
   return context;
-};
-
-// src/client.ts
-var AuthError = class extends Error {
-  code;
-  status;
-  details;
-  constructor(message, code, status, details) {
-    super(message);
-    this.name = "AuthError";
-    this.code = code;
-    this.status = status;
-    this.details = details;
+}
+function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within MesobAuthProvider");
   }
-};
+  return context;
+}
 
 // src/constants/auth.error.codes.ts
 var AUTH_ERROR_MAPPING = {
@@ -86,71 +121,67 @@ var AUTH_ERROR_MAPPING = {
 var validCodes = Object.keys(AUTH_ERROR_MAPPING);
 
 // src/utils/handle-error.ts
-var handleError = (err, setError, t) => {
-  if (err instanceof AuthError) {
-    let errorCode = "";
-    if (err.code && validCodes.includes(err.code)) {
-      errorCode = err.code;
-    } else if (err.message) {
-      const messageUpper = err.message.toUpperCase().trim();
-      if (validCodes.includes(messageUpper)) {
-        errorCode = messageUpper;
-      }
-    }
-    if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
-      const mapping = AUTH_ERROR_MAPPING[errorCode];
-      setError({
-        title: mapping.title,
-        description: mapping.description
-      });
-      return;
+function isAuthError(err) {
+  return typeof err === "object" && err !== null && "message" in err && typeof err.message === "string";
+}
+function extractErrorCode(err) {
+  if (err.code && validCodes.includes(err.code)) {
+    return err.code;
+  }
+  if (err.message) {
+    const messageUpper = err.message.toUpperCase().trim();
+    if (validCodes.includes(messageUpper)) {
+      return messageUpper;
     }
+  }
+  return "";
+}
+function handleAuthError(err, setError, t) {
+  const errorCode = extractErrorCode(err);
+  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
+    const mapping = AUTH_ERROR_MAPPING[errorCode];
     setError({
-      title: t("errors.fallback"),
-      // or 'Error'
-      description: err.message || t("errors.fallback")
+      title: mapping.title,
+      description: mapping.description
     });
+    return;
+  }
+  setError({
+    title: t("errors.fallback"),
+    description: err.message || t("errors.fallback")
+  });
+}
+function handleGenericError(err, setError, t) {
+  const message = err instanceof Error ? err.message : t("errors.fallback");
+  setError({
+    title: "Error",
+    description: message
+  });
+}
+var handleError = (err, setError, t) => {
+  if (isAuthError(err)) {
+    handleAuthError(err, setError, t);
   } else {
-    const message = err instanceof Error ? err.message : t("errors.fallback");
-    setError({
-      title: "Error",
-      description: message
-    });
+    handleGenericError(err, setError, t);
   }
 };
 
 // src/components/auth/auth-page-layout.tsx
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle
-} from "@mesob/ui/components/alert";
-import { IconAlertCircle } from "@tabler/icons-react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var AuthPageLayout = ({
   title,
   description,
   children,
-  error,
   footer,
   logoImage
 }) => {
-  const errorContent = error ? (
-    // biome-ignore lint/style/noNestedTernary: <explanation>
-    typeof error === "string" ? { title: "Error", description: error } : error
-  ) : null;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx2("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx2("img", { src: logoImage || "", alt: "Jiret", width: 42, height: 42 }) }),
+    /* @__PURE__ */ jsx2("div", { className: "flex size-8 mb-6 w-full items-center justify-center rounded-md", children: /* @__PURE__ */ jsx2("img", { src: logoImage || "", alt: "Mesob", width: 42, height: 42 }) }),
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
       description && /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
     ] }),
     children,
-    errorContent && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx2(IconAlertCircle, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx2(AlertTitle, { children: errorContent.title }),
-      /* @__PURE__ */ jsx2(AlertDescription, { children: errorContent.description })
-    ] }),
     /* @__PURE__ */ jsx2("div", { className: "mt-2 w-full", children: footer && /* @__PURE__ */ jsx2("div", { className: "w-full text-center text-sm text-muted-foreground", children: footer }) })
   ] });
 };
@@ -159,21 +190,24 @@ var AuthPageLayout = ({
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@mesob/ui/components/button";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage
-} from "@mesob/ui/components/form";
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel
+} from "@mesob/ui/components/field";
 import { Input } from "@mesob/ui/components/input";
 import { Spinner } from "@mesob/ui/components/spinner";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useTranslations } from "next-intl";
-import { useMemo, useState as useState2 } from "react";
-import { useForm } from "react-hook-form";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
+// src/hooks/use-translator.ts
+function useTranslator(namespace) {
+  const { config } = useConfig();
+  return createTranslator(config.messages || {}, namespace);
+}
+
 // src/utils/normalize-phone.ts
 function normalizePhone(phone) {
   const cleaned = phone.trim().replace(/\s/g, "");
@@ -194,182 +228,255 @@ function normalizePhone(phone) {
 
 // src/components/auth/sign-in.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var identifierSchema = (t) => z.object({
+  identifier: z.string().trim().min(1, { message: t("errors.requiredField") }).refine(
+    (val) => {
+      const isEmail = z.email().safeParse(val).success;
+      const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
+      const isPhone2 = phoneRegex.test(val);
+      return isEmail || isPhone2;
+    },
+    {
+      message: t("errors.invalidEmailOrPhone")
+    }
+  )
+});
+var passwordSchema = (t) => z.object({
+  password: z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
+});
 var SignIn = ({
   onSubmit,
   isLoading = false,
-  identifier = "",
+  identifier: initialIdentifier = "",
   step = "identifier",
   onBack: _onBack
 }) => {
-  const t = useTranslations("Auth.signIn");
+  const { hooks } = useApi();
+  const t = useTranslator("Auth.signIn");
   const [showPassword, setShowPassword] = useState2(false);
-  const identifierSchema = useMemo(
-    () => z.object({
-      account: z.string().trim().min(1, { message: t("errors.requiredField") }).refine(
-        (val) => {
-          const isEmail = z.string().email().safeParse(val).success;
-          const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
-          const isPhone2 = phoneRegex.test(val);
-          return isEmail || isPhone2;
-        },
-        {
-          message: t("errors.invalidEmailOrPhone")
-        }
-      )
-    }),
-    [t]
-  );
-  const passwordSchema = useMemo(
-    () => z.object({
-      password: z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
-    }),
-    [t]
-  );
+  const [currentIdentifier, setCurrentIdentifier] = useState2(initialIdentifier);
   const identifierForm = useForm({
-    resolver: zodResolver(identifierSchema),
+    resolver: zodResolver(identifierSchema(t)),
     defaultValues: {
-      account: identifier
-    }
+      identifier: initialIdentifier
+    },
+    mode: "onChange"
   });
   const passwordForm = useForm({
-    resolver: zodResolver(passwordSchema),
+    resolver: zodResolver(passwordSchema(t)),
     defaultValues: {
       password: ""
-    }
+    },
+    mode: "onChange"
   });
-  const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {
+  const signInMutation = hooks.useMutation("post", "/sign-in");
+  useEffect2(() => {
+    if (initialIdentifier) {
+      identifierForm.setValue("identifier", initialIdentifier);
+      setCurrentIdentifier(initialIdentifier);
+    }
+  }, [initialIdentifier, identifierForm]);
+  const handleIdentifierSubmit = async (values) => {
     const phoneRegex = /^(\+2519|2519|09)\d{8}$/;
-    const normalizedAccount = phoneRegex.test(values.account) ? normalizePhone(values.account) : values.account;
-    await onSubmit({ account: normalizedAccount, password: "" }, "identifier");
-  });
-  const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {
+    const normalizedIdentifier = phoneRegex.test(values.identifier) ? normalizePhone(values.identifier) : values.identifier;
+    setCurrentIdentifier(normalizedIdentifier);
+    identifierForm.setValue("identifier", normalizedIdentifier);
     await onSubmit(
-      { account: identifier, password: values.password },
-      "password"
+      { identifier: normalizedIdentifier, password: "" },
+      "identifier"
     );
-  });
-  if (step === "password") {
-    return /* @__PURE__ */ jsx3(Form, { ...passwordForm, children: /* @__PURE__ */ jsxs2("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
-        /* @__PURE__ */ jsx3("p", { className: "font-bold", children: identifier })
-      ] }),
-      /* @__PURE__ */ jsx3(
-        FormField,
+  };
+  const handlePasswordSubmit = async (values) => {
+    try {
+      await signInMutation.mutateAsync({
+        body: {
+          identifier: currentIdentifier || identifierForm.getValues("identifier"),
+          password: values.password
+        }
+      });
+      await onSubmit(
+        {
+          identifier: currentIdentifier || identifierForm.getValues("identifier"),
+          password: values.password
+        },
+        "password"
+      );
+    } catch {
+      await onSubmit(
         {
-          control: passwordForm.control,
-          name: "password",
-          render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-            /* @__PURE__ */ jsx3(FormLabel, { children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+          identifier: currentIdentifier || identifierForm.getValues("identifier"),
+          password: values.password
+        },
+        "password"
+      );
+    }
+  };
+  const isPasswordStep = step === "password";
+  const isSubmitting = isLoading || signInMutation.isPending;
+  if (isPasswordStep) {
+    return /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        id: "sign-in-password-form",
+        onSubmit: passwordForm.handleSubmit(handlePasswordSubmit),
+        children: [
+          /* @__PURE__ */ jsxs2(FieldGroup, { children: [
+            /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
+              /* @__PURE__ */ jsx3("p", { className: "font-bold", children: currentIdentifier || identifierForm.getValues("identifier") })
+            ] }),
+            /* @__PURE__ */ jsx3(
+              Controller,
+              {
+                name: "password",
+                control: passwordForm.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-in-password", children: t("form.passwordLabel") }),
+                  /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx3(
+                      Input,
+                      {
+                        ...field,
+                        id: "sign-in-password",
+                        type: showPassword ? "text" : "password",
+                        placeholder: t("form.passwordPlaceholder"),
+                        autoComplete: "current-password",
+                        "aria-invalid": fieldState.invalid
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowPassword(!showPassword),
+                        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                        children: showPassword ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }),
+                  fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "mt-4", children: /* @__PURE__ */ jsxs2(Button, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
+            isSubmitting && /* @__PURE__ */ jsx3(Spinner, {}),
+            isSubmitting ? t("form.submitting") : t("form.submit")
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      id: "sign-in-identifier-form",
+      onSubmit: identifierForm.handleSubmit(handleIdentifierSubmit),
+      children: [
+        /* @__PURE__ */ jsx3(FieldGroup, { children: /* @__PURE__ */ jsx3(
+          Controller,
+          {
+            name: "identifier",
+            control: identifierForm.control,
+            render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+              /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-in-identifier", children: t("form.accountLabel") }),
               /* @__PURE__ */ jsx3(
                 Input,
                 {
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  autoComplete: "current-password",
-                  ...field
+                  ...field,
+                  id: "sign-in-identifier",
+                  type: "text",
+                  placeholder: t("form.accountPlaceholder"),
+                  autoComplete: "username",
+                  "aria-invalid": fieldState.invalid
                 }
               ),
-              /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowPassword(!showPassword),
-                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showPassword ? /* @__PURE__ */ jsx3(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(IconEye, { className: "h-4 w-4" })
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx3(FormMessage, {})
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx3(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx3(Form, { ...identifierForm, children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleIdentifierSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx3(
-      FormField,
-      {
-        control: identifierForm.control,
-        name: "account",
-        render: ({ field }) => /* @__PURE__ */ jsxs2(FormItem, { children: [
-          /* @__PURE__ */ jsx3(FormLabel, { children: t("form.accountLabel") }),
-          /* @__PURE__ */ jsx3(FormControl, { children: /* @__PURE__ */ jsx3(
-            Input,
-            {
-              type: "text",
-              placeholder: t("form.accountPlaceholder"),
-              ...field
-            }
-          ) }),
-          /* @__PURE__ */ jsx3(FormMessage, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs2(Button, { type: "submit", className: "w-full", disabled: isLoading, children: [
-      isLoading && /* @__PURE__ */ jsx3(Spinner, {}),
-      isLoading ? t("form.submitting") : t("form.continue")
-    ] })
-  ] }) });
+              fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-4", children: /* @__PURE__ */ jsxs2(Button, { type: "submit", className: "w-full", disabled: isSubmitting, children: [
+          isSubmitting && /* @__PURE__ */ jsx3(Spinner, {}),
+          isSubmitting ? t("form.submitting") : t("form.continue")
+        ] }) })
+      ]
+    }
+  );
 };
 
 // src/components/auth/pages/sign-in-page.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
-var SignInPage = ({
-  redirectUrl,
-  onNavigate,
-  linkComponent: Link,
-  links,
-  logoImage
-}) => {
-  const t = useTranslations2("Auth.signIn");
-  const { client, setAuth } = useAuth();
+var SignInPage = ({ redirectUrl } = {}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.signIn");
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3(null);
   const [step, setStep] = useState3("identifier");
   const [identifier, setIdentifier] = useState3("");
-  const defaultRedirect = redirectUrl || "/dashboard";
-  const forgotPasswordLink = links?.forgotPassword || "/auth/forgot-password";
-  const signUpLink = links?.signUp || "/auth/sign-up";
+  const checkUserMutation = hooks.useMutation("post", "/check-user");
+  const signInMutation = hooks.useMutation("post", "/sign-in");
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/dashboard";
+  const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
+  const signUpLink = config.navigation?.links?.signUp || "/auth/sign-up";
+  const Link = config.navigation?.linkComponent;
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  useEffect3(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
+  const handleIdentifierStep = async (identifierValue) => {
+    const checkResult = await checkUserMutation.mutateAsync({
+      body: {
+        identifier: identifierValue
+      }
+    });
+    if (checkResult.exists) {
+      setIdentifier(identifierValue);
+      setStep("password");
+      return;
+    }
+    const email = isPhone(identifierValue) ? "" : identifierValue;
+    if (email) {
+      onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
+    } else {
+      onNavigate(`${signUpLink}?phone=${encodeURIComponent(identifierValue)}`);
+    }
+  };
+  const handlePasswordStep = async (passwordValue) => {
+    const res = await signInMutation.mutateAsync({
+      body: {
+        identifier,
+        password: passwordValue
+      }
+    });
+    if ("verificationId" in res && res.verificationId) {
+      const verifyPath = isPhone(identifier) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(identifier)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
+      onNavigate(verifyPath);
+      return;
+    }
+    if ("user" in res && "session" in res) {
+      setAuth(res);
+    }
+    onNavigate(defaultRedirect);
+  };
   const handleSubmit = async (values, currentStep) => {
     setIsLoading(true);
     setError(null);
     try {
       if (currentStep === "identifier") {
-        const checkResult = await client.checkUser({
-          identifier: values.account
-        });
-        if (checkResult.exists) {
-          setIdentifier(values.account);
-          setStep("password");
-        } else {
-          const email = isPhone(values.account) ? "" : values.account;
-          if (email) {
-            onNavigate(`${signUpLink}?email=${encodeURIComponent(email)}`);
-          } else {
-            onNavigate(
-              `${signUpLink}?phone=${encodeURIComponent(values.account)}`
-            );
-          }
-          return;
-        }
+        await handleIdentifierStep(values.identifier);
       } else {
-        const res = await client.signInWithPassword({
-          identifier,
-          password: values.password
-        });
-        if ("verificationId" in res && res.verificationId) {
-          const verifyPath = isPhone(identifier) ? `/auth/verify-phone?context=sign-in&verificationId=${res.verificationId}&identifier=${encodeURIComponent(identifier)}` : `/auth/verify-email?verificationId=${res.verificationId}`;
-          onNavigate(verifyPath);
-          return;
-        }
-        if ("user" in res && "session" in res) {
-          setAuth(res);
-        }
-        onNavigate(defaultRedirect);
+        await handlePasswordStep(values.password || "");
       }
     } catch (err) {
       handleError(err, setError, t);
@@ -377,18 +484,26 @@ var SignInPage = ({
       setIsLoading(false);
     }
   };
+  const isSubmitting = isLoading || checkUserMutation.isPending || signInMutation.isPending;
   const handleBack = () => {
     setStep("identifier");
     setIdentifier("");
     setError(null);
   };
   const isStepPassword = step === "password";
-  return /* @__PURE__ */ jsx4("div", { className: "space-y-4", children: /* @__PURE__ */ jsx4(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsx4("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs3(
     AuthPageLayout,
     {
       title: t("title"),
       description: isStepPassword ? void 0 : t("description"),
-      error,
       logoImage,
       footer: /* @__PURE__ */ jsxs3(
         "div",
@@ -425,15 +540,22 @@ var SignInPage = ({
           ]
         }
       ),
-      children: /* @__PURE__ */ jsx4(
-        SignIn,
-        {
-          onSubmit: handleSubmit,
-          isLoading,
-          identifier,
-          step
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx4(
+          SignIn,
+          {
+            onSubmit: handleSubmit,
+            isLoading: isSubmitting,
+            identifier,
+            step
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs3(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx4(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx4(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx4(AlertDescription, { children: errorContent.description })
+        ] })
+      ]
     }
   ) });
 };