@mesob/auth-react 0.1.0 → 0.2.0

package/dist/components/auth/sign-up.js

@@ -2,6 +2,11 @@
 
 // src/components/auth/sign-up.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,
@@ -10,11 +15,16 @@ import {
   FieldLabel
 } from "@mesob/ui/components/field";
 import { Input } from "@mesob/ui/components/input";
-import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useMesob as useMesob2 } from "@mesob/ui/components/mesob-context";
+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) => {
@@ -46,7 +56,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);
@@ -54,13 +69,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) {
@@ -71,12 +90,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/sign-up.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/sign-up.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
 var signUpSchema = (t) => z.object({
   fullName: z.string().min(1, t("errors.fullNameRequired")),
@@ -98,14 +248,28 @@ var signUpSchema = (t) => z.object({
   path: ["confirmPassword"]
 });
 var SignUp = ({
-  onSubmit,
-  isLoading = false,
+  redirectUrl,
   initialIdentifier
-}) => {
+} = {}) => {
+  const { hooks, setAuth } = useApi();
+  const { config } = useConfig();
+  const mesob = useMesob2();
   const t = useTranslator("Auth.signUp");
-  const hasInitialIdentifier = !!initialIdentifier;
+  const Link = mesob?.linkComponent ?? config.navigation?.linkComponent;
+  const [isLoading, setIsLoading] = useState2(false);
+  const [error, setError] = useState2(null);
   const [showPassword, setShowPassword] = useState2(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState2(false);
+  const signUpMutation = hooks.useMutation("post", "/sign-up");
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  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 hasInitialIdentifier = !!initialIdentifier;
   const form = useForm({
     resolver: zodResolver(signUpSchema(t)),
     defaultValues: {
@@ -115,13 +279,58 @@ var SignUp = ({
       confirmPassword: ""
     }
   });
-  useEffect2(() => {
+  useEffect(() => {
     if (initialIdentifier) {
       form.setValue("identifier", initialIdentifier);
     }
   }, [initialIdentifier, form]);
+  useEffect(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = form.handleSubmit(async (values) => {
-    await onSubmit(values);
+    setIsLoading(true);
+    setError(null);
+    try {
+      const identifier = values.identifier;
+      const usingPhone = isPhone(identifier);
+      const res = await signUpMutation.mutateAsync({
+        body: usingPhone ? {
+          phone: identifier,
+          password: values.password,
+          fullName: values.fullName,
+          handle: values.handle
+        } : {
+          email: identifier,
+          password: values.password,
+          fullName: values.fullName,
+          handle: values.handle
+        }
+      });
+      if ("verificationId" in res && res.verificationId) {
+        if (usingPhone) {
+          onNavigate(
+            `/auth/verify-phone?context=sign-up&verificationId=${res.verificationId}&phone=${encodeURIComponent(identifier)}`
+          );
+        } else {
+          onNavigate(
+            `/auth/verify-email?verificationId=${res.verificationId}&email=${encodeURIComponent(identifier)}`
+          );
+        }
+        return;
+      }
+      if ("user" in res && "session" in res) {
+        setAuth(res);
+      }
+      onNavigate(defaultRedirect);
+    } catch (err) {
+      handleError(err, setError, t);
+    } finally {
+      setIsLoading(false);
+    }
   });
   const getIdentifierLabel = () => {
     if (!hasInitialIdentifier) {
@@ -133,133 +342,172 @@ var SignUp = ({
     return t("form.phoneLabel");
   };
   const identifierLabel = getIdentifierLabel();
-  return /* @__PURE__ */ jsxs("form", { id: "sign-up-form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxs(FieldGroup, { children: [
-      /* @__PURE__ */ jsx2(
-        Controller,
-        {
-          name: "fullName",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx2(FieldLabel, { htmlFor: "sign-up-fullName", children: t("form.fullNameLabel") }),
-            /* @__PURE__ */ jsx2(
-              Input,
+  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("p", { children: [
+        t("footer.hasAccount"),
+        " ",
+        Link ? /* @__PURE__ */ jsx3(Link, { href: signInLink, className: "text-primary hover:underline", children: t("footer.signInCta") }) : /* @__PURE__ */ jsx3(
+          "a",
+          {
+            href: signInLink,
+            onClick: (e) => {
+              e.preventDefault();
+              onNavigate(signInLink);
+            },
+            className: "text-primary hover:underline",
+            children: t("footer.signInCta")
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs2("form", { id: "sign-up-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxs2(FieldGroup, { children: [
+            /* @__PURE__ */ jsx3(
+              Controller,
               {
-                ...field,
-                id: "sign-up-fullName",
-                placeholder: t("form.fullNamePlaceholder"),
-                "aria-invalid": fieldState.invalid
+                name: "fullName",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-up-fullName", children: t("form.fullNameLabel") }),
+                  /* @__PURE__ */ jsx3(
+                    Input,
+                    {
+                      ...field,
+                      id: "sign-up-fullName",
+                      placeholder: t("form.fullNamePlaceholder"),
+                      "aria-invalid": fieldState.invalid
+                    }
+                  ),
+                  fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+                ] })
               }
             ),
-            fieldState.invalid && /* @__PURE__ */ jsx2(FieldError, { errors: [fieldState.error] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Controller,
-        {
-          name: "identifier",
-          control: form.control,
-          render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, { "data-invalid": fieldState.invalid, children: [
-            /* @__PURE__ */ jsx2(
-              FieldLabel,
+            /* @__PURE__ */ jsx3(
+              Controller,
               {
-                htmlFor: "sign-up-identifier",
-                className: hasInitialIdentifier ? "block" : void 0,
-                children: identifierLabel
+                name: "identifier",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(
+                    FieldLabel,
+                    {
+                      htmlFor: "sign-up-identifier",
+                      className: hasInitialIdentifier ? "block" : void 0,
+                      children: identifierLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Input,
+                    {
+                      ...field,
+                      id: "sign-up-identifier",
+                      type: field.value.includes("@") ? "email" : "tel",
+                      placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
+                      disabled: hasInitialIdentifier,
+                      "aria-invalid": fieldState.invalid
+                    }
+                  ),
+                  fieldState.invalid && /* @__PURE__ */ jsx3(FieldError, { errors: [fieldState.error] })
+                ] })
               }
             ),
-            /* @__PURE__ */ jsx2(
-              Input,
+            /* @__PURE__ */ jsx3(
+              Controller,
               {
-                ...field,
-                id: "sign-up-identifier",
-                type: field.value.includes("@") ? "email" : "tel",
-                placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
-                disabled: hasInitialIdentifier,
-                "aria-invalid": fieldState.invalid
+                name: "password",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-up-password", children: t("form.passwordLabel") }),
+                  /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx3(
+                      Input,
+                      {
+                        ...field,
+                        id: "sign-up-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] })
+                ] })
               }
             ),
-            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: "sign-up-password", children: t("form.passwordLabel") }),
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx2(
-                Input,
-                {
-                  ...field,
-                  id: "sign-up-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: "sign-up-confirmPassword", children: t("form.confirmPasswordLabel") }),
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx2(
-                Input,
-                {
-                  ...field,
-                  id: "sign-up-confirmPassword",
-                  type: showConfirmPassword ? "text" : "password",
-                  placeholder: t("form.passwordPlaceholder"),
-                  "aria-invalid": fieldState.invalid
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowConfirmPassword(!showConfirmPassword),
-                  className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-                  children: showConfirmPassword ? /* @__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__ */ jsx2(
-      Button,
-      {
-        type: "submit",
-        form: "sign-up-form",
-        className: "w-full",
-        disabled: isLoading,
-        children: isLoading ? t("form.submitting") : t("form.submit")
-      }
-    ) })
-  ] });
+            /* @__PURE__ */ jsx3(
+              Controller,
+              {
+                name: "confirmPassword",
+                control: form.control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsxs2(Field, { "data-invalid": fieldState.invalid, children: [
+                  /* @__PURE__ */ jsx3(FieldLabel, { htmlFor: "sign-up-confirmPassword", children: t("form.confirmPasswordLabel") }),
+                  /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx3(
+                      Input,
+                      {
+                        ...field,
+                        id: "sign-up-confirmPassword",
+                        type: showConfirmPassword ? "text" : "password",
+                        placeholder: t("form.passwordPlaceholder"),
+                        "aria-invalid": fieldState.invalid
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowConfirmPassword(!showConfirmPassword),
+                        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                        children: showConfirmPassword ? /* @__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__ */ jsx3(
+            Button,
+            {
+              type: "submit",
+              form: "sign-up-form",
+              className: "w-full",
+              disabled: isLoading || signUpMutation.isPending,
+              children: isLoading || signUpMutation.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 {
   SignUp