@mesob/auth-react 0.1.0 → 0.2.0

package/dist/components/auth/reset-password-form.js

@@ -2,6 +2,11 @@
 
 // src/components/auth/reset-password-form.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "@mesob/ui/components/alert";
 import { Button } from "@mesob/ui/components/button";
 import {
   Field,
@@ -15,12 +20,17 @@ import {
   InputOTPGroup,
   InputOTPSlot
 } from "@mesob/ui/components/input-otp";
+import { Link } from "@mesob/ui/components/link";
 import { Spinner } from "@mesob/ui/components/spinner";
-import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useState as useState2 } from "react";
+import { IconAlertCircle, IconEye, IconEyeOff } from "@tabler/icons-react";
+import { useEffect, useState as useState2 } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { z } from "zod";
 
+// src/hooks/use-translator.ts
+import { useMesob } from "@mesob/ui/components/mesob-context";
+
 // src/lib/translations.ts
 function createTranslator(messages, namespace) {
   return (key, params) => {
@@ -52,7 +62,12 @@ 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 { createContext, useContext, useMemo, useState } from "react";
+
+// src/utils/cookie.ts
+var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+
+// src/provider.tsx
 import { jsx } from "react/jsx-runtime";
 var SessionContext = createContext(null);
 var ApiContext = createContext(null);
@@ -60,13 +75,17 @@ 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("useApi must be used within MesobAuthProvider");
+  }
+  return context;
+}
 function useConfig() {
   const context = useContext(ConfigContext);
   if (!context) {
@@ -77,12 +96,143 @@ function useConfig() {
 
 // src/hooks/use-translator.ts
 function useTranslator(namespace) {
+  const mesob = useMesob();
   const { config } = useConfig();
+  if (mesob?.t) {
+    return (key, params) => mesob.t(namespace ? `${namespace}.${key}` : key, params);
+  }
   return createTranslator(config.messages || {}, namespace);
 }
 
-// src/components/auth/reset-password-form.tsx
+// src/constants/auth.error.codes.ts
+var AUTH_ERROR_MAPPING = {
+  USER_NOT_FOUND: {
+    title: "Account Not Found",
+    description: "We could not find an account with that identifier. Please check your spelling or sign up."
+  },
+  INVALID_PASSWORD: {
+    title: "Invalid Password",
+    description: "The password you entered is incorrect. Please try again."
+  },
+  USER_EXISTS: {
+    title: "Account Already Exists",
+    description: "An account with this identifier already exists. Please sign in instead."
+  },
+  VERIFICATION_EXPIRED: {
+    title: "Verification Expired",
+    description: "The verification code or link has expired. Please request a new one."
+  },
+  VERIFICATION_MISMATCH: {
+    title: "Invalid Code",
+    description: "The verification code you entered is invalid. Please double-check and try again."
+  },
+  VERIFICATION_NOT_FOUND: {
+    title: "Verification Not Found",
+    description: "We could not find a pending verification request. Please restart the process."
+  },
+  TOO_MANY_ATTEMPTS: {
+    title: "Too Many Attempts",
+    description: "You have made too many requests recently. Please wait a moment before trying again."
+  },
+  REQUIRES_VERIFICATION: {
+    title: "Verification Required",
+    description: "You need to verify your account before you can continue. Please check your email or phone."
+  },
+  UNAUTHORIZED: {
+    title: "Unauthorized",
+    description: "You are not authorized to perform this action. Please sign in again."
+  },
+  ACCESS_DENIED: {
+    title: "Access Denied",
+    description: "You do not have permission to access this resource. Please contact support if you believe this is an error."
+  },
+  HAS_NO_PASSWORD: {
+    title: "No Password Set",
+    description: "Your account does not have a password set (e.g. social login). Please sign in with your provider or reset your password."
+  }
+};
+var validCodes = Object.keys(AUTH_ERROR_MAPPING);
+
+// src/utils/handle-error.ts
+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 sanitizeErrorMessage(message) {
+  const lowerMessage = message.toLowerCase();
+  const isDatabaseError = lowerMessage.includes("failed query") || lowerMessage.includes("select") || lowerMessage.includes("insert") || lowerMessage.includes("update") || lowerMessage.includes("delete") || lowerMessage.includes("from") || lowerMessage.includes("where") || lowerMessage.includes("limit") || lowerMessage.includes("params:") || lowerMessage.includes("query") || message.includes('"iam".') || message.includes('"tenants"') || message.includes('"users"') || message.includes('"sessions"') || message.includes('"accounts"') || lowerMessage.includes("relation") || lowerMessage.includes("column") || lowerMessage.includes("syntax error") || lowerMessage.includes("database") || lowerMessage.includes("postgres") || lowerMessage.includes("sql");
+  if (isDatabaseError) {
+    return "An error occurred while processing your request";
+  }
+  return message;
+}
+function handleAuthError(err, setError, t) {
+  const errorCode = extractErrorCode(err);
+  if (errorCode && AUTH_ERROR_MAPPING[errorCode]) {
+    const mapping = AUTH_ERROR_MAPPING[errorCode];
+    setError({
+      title: mapping.title,
+      description: mapping.description
+    });
+    return;
+  }
+  const sanitizedMessage = sanitizeErrorMessage(
+    err.message || t("errors.fallback")
+  );
+  setError({
+    title: t("errors.fallback"),
+    description: sanitizedMessage
+  });
+}
+function handleGenericError(err, setError, t) {
+  const rawMessage = err instanceof Error ? err.message : t("errors.fallback");
+  const sanitizedMessage = sanitizeErrorMessage(rawMessage);
+  setError({
+    title: "Error",
+    description: sanitizedMessage
+  });
+}
+var handleError = (err, setError, t) => {
+  if (isAuthError(err)) {
+    handleAuthError(err, setError, t);
+  } else {
+    handleGenericError(err, setError, t);
+  }
+};
+
+// src/components/auth/auth-layout.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AuthLayout = ({
+  title,
+  description,
+  children,
+  footer,
+  logoImage
+}) => {
+  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: "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,
+    /* @__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 }) })
+  ] });
+};
+
+// src/components/auth/reset-password-form.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var resetPasswordSchema = (t) => z.object({
   code: z.string().length(6, t("errors.codeLength")),
   password: z.string().min(8, t("errors.passwordLength")),
@@ -92,11 +242,26 @@ var resetPasswordSchema = (t) => z.object({
   path: ["confirmPassword"]
 });
 var ResetPasswordForm = ({
-  onSubmit,
-  isLoading = false
+  verificationId,
+  redirectUrl
 }) => {
+  const { hooks, refresh } = useApi();
+  const { config } = useConfig();
   const t = useTranslator("Auth.resetPassword");
+  const common = useTranslator("Common");
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
   const [showPassword, setShowPassword] = useState2(false);
+  const resetPasswordMutation = hooks.useMutation("post", "/password/reset");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const forgotPasswordLink = config.navigation?.links?.forgotPassword || "/auth/forgot-password";
+  const onNavigate = config.navigation?.onNavigate || ((path) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  });
+  const logoImage = config.ui.logoImage;
+  const defaultRedirect = redirectUrl || config.navigation?.defaultRedirectUrl || "/";
   const form = useForm({
     resolver: zodResolver(resetPasswordSchema(t)),
     defaultValues: {
@@ -105,120 +270,203 @@ var ResetPasswordForm = ({
       confirmPassword: ""
     }
   });
+  useEffect(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
+    if (!verificationId) {
+      setError({
+        title: t("errors.fallback"),
+        description: t("errors.missingVerificationId")
+      });
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await resetPasswordMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code,
+          password: values.password
+        }
+      });
+      await refresh();
+      onNavigate(defaultRedirect);
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
   });
-  return /* @__PURE__ */ jsxs("form", { id: "reset-password-form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxs(FieldGroup, { children: [
-      /* @__PURE__ */ jsx2(
-        Controller,
-        {
-          name: "code",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(FieldLabel, { children: t("form.codeLabel") }) }),
-            /* @__PURE__ */ jsx2("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx2(
-              InputOTP,
+  if (!verificationId) {
+    return /* @__PURE__ */ jsx3(
+      AuthLayout,
+      {
+        title: common("invalidLinkTitle"),
+        description: common("invalidLinkDescription"),
+        logoImage,
+        footer: /* @__PURE__ */ jsx3(
+          Link,
+          {
+            href: forgotPasswordLink,
+            className: "text-primary hover:underline",
+            children: t("footer.requestNew")
+          }
+        ),
+        children: /* @__PURE__ */ jsx3("div", {})
+      }
+    );
+  }
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs2(
+    AuthLayout,
+    {
+      title: t("title"),
+      description: t("description"),
+      logoImage,
+      footer: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between w-full gap-2", children: [
+        /* @__PURE__ */ jsx3(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.backToSignIn") }),
+        /* @__PURE__ */ jsx3(
+          Link,
+          {
+            href: forgotPasswordLink,
+            className: "text-primary hover:underline",
+            children: t("footer.changeAccount")
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs2("form", { id: "reset-password-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxs2(FieldGroup, { children: [
+            /* @__PURE__ */ jsx3(
+              Controller,
               {
-                maxLength: 6,
-                value: field.value,
-                onChange: field.onChange,
-                onBlur: field.onBlur,
-                containerClassName: "gap-4",
-                "aria-invalid": fieldState.invalid,
-                children: /* @__PURE__ */ jsxs(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
-                  /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 0 }),
-                  /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 1 }),
-                  /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 2 }),
-                  /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 3 }),
-                  /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 4 }),
-                  /* @__PURE__ */ jsx2(InputOTPSlot, { className: "h-12", index: 5 })
+                name: "code",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx3(FieldLabel, { children: t("form.codeLabel") }) }),
+                  /* @__PURE__ */ jsx3("div", { className: "flex mt-2 justify-center", children: /* @__PURE__ */ jsx3(
+                    InputOTP,
+                    {
+                      maxLength: 6,
+                      value: field.value,
+                      onChange: field.onChange,
+                      onBlur: field.onBlur,
+                      containerClassName: "gap-4",
+                      "aria-invalid": fieldState.invalid,
+                      children: /* @__PURE__ */ jsxs2(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
+                        /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 0 }),
+                        /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 1 }),
+                        /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 2 }),
+                        /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 3 }),
+                        /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 4 }),
+                        /* @__PURE__ */ jsx3(InputOTPSlot, { className: "h-12", index: 5 })
+                      ] })
+                    }
+                  ) }),
+                  fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
                 ] })
               }
-            ) }),
-            fieldState.invalid && /* @__PURE__ */ jsx2(FieldError, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Controller,
-        {
-          name: "password",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx2(FieldLabel, { htmlFor: "reset-password-password", children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx2(
-                Input,
-                {
-                  ...field,
-                  id: "reset-password-password",
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "aria-invalid": fieldState.invalid
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "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__ */ jsx2(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(IconEye, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            fieldState.invalid && /* @__PURE__ */ jsx2(FieldError, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Controller,
-        {
-          name: "confirmPassword",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx2(FieldLabel, { htmlFor: "reset-password-confirmPassword", children: t("form.confirmPasswordLabel") }),
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx2(
-                Input,
-                {
-                  ...field,
-                  id: "reset-password-confirmPassword",
-                  type: showPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "aria-invalid": fieldState.invalid
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "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__ */ jsx2(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(IconEye, { className: "h-4 w-4" })
-                }
-              )
-            ] }),
-            fieldState.invalid && /* @__PURE__ */ jsx2(FieldError, { errors: [fieldState.error] })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "mt-4", children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "submit",
-        form: "reset-password-form",
-        className: "w-full",
-        disabled: isLoading,
-        children: [
-          isLoading && /* @__PURE__ */ jsx2(Spinner, {}),
-          isLoading ? t("form.submitting") : t("form.submit")
-        ]
-      }
-    ) })
-  ] });
+            ),
+            /* @__PURE__ */ jsx3(
+              Controller,
+              {
+                name: "password",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "reset-password-password", children: t("form.passwordLabel") }),
+                  /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx3(
+                      Input,
+                      {
+                        ...field,
+                        id: "reset-password-password",
+                        type: showPassword ? "text" : "password",
+                        placeholder: t("form.passwordPlaceholder"),
+                        "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(
+              Controller,
+              {
+                name: "confirmPassword",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "reset-password-confirmPassword", children: t("form.confirmPasswordLabel") }),
+                  /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx3(
+                      Input,
+                      {
+                        ...field,
+                        id: "reset-password-confirmPassword",
+                        type: showPassword ? "text" : "password",
+                        placeholder: t("form.passwordPlaceholder"),
+                        "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",
+              form: "reset-password-form",
+              className: "w-full",
+              disabled: isLoading || resetPasswordMutation.isPending,
+              children: [
+                isLoading || resetPasswordMutation.isPending && /* @__PURE__ */ jsx3(Spinner, {}),
+                isLoading || resetPasswordMutation.isPending ? t("form.submitting") : t("form.submit")
+              ]
+            }
+          ) })
+        ] }),
+        errorContent && /* @__PURE__ */ jsxs2(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx3(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx3(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx3(AlertDescription, { children: errorContent.description })
+        ] })
+      ]
+    }
+  );
 };
 export {
   ResetPasswordForm