@mesob/auth-react 0.0.7 → 0.1.0

package/dist/components/auth/pages/verify-phone-page.js

@@ -1,40 +1,75 @@
 "use client";
 
 // src/components/auth/pages/verify-phone-page.tsx
-import { useTranslations as useTranslations3 } 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 }) })
   ] });
 };
@@ -158,28 +189,25 @@ var AuthPageLayout = ({
 // src/components/auth/verification-form.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button as Button2 } from "@mesob/ui/components/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage
-} from "@mesob/ui/components/form";
+import { Field, FieldError, FieldGroup } from "@mesob/ui/components/field";
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot
 } from "@mesob/ui/components/input-otp";
 import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
-import { useTranslations as useTranslations2 } from "next-intl";
-import { useMemo } from "react";
-import { useForm } from "react-hook-form";
+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/components/auth/countdown.tsx
 import { Button } from "@mesob/ui/components/button";
 import { Spinner } from "@mesob/ui/components/spinner";
-import { useTranslations } from "next-intl";
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Countdown = ({
@@ -187,7 +215,7 @@ var Countdown = ({
   onResend,
   resending = false
 }) => {
-  const t = useTranslations("Common");
+  const t = useTranslator("Common");
   const [seconds, setSeconds] = useState2(initialSeconds);
   const [isResending, setIsResending] = useState2(false);
   useEffect2(() => {
@@ -234,32 +262,32 @@ var Countdown = ({
 
 // src/components/auth/verification-form.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var verificationSchema = (t) => z.object({
+  code: z.string().length(6, t("form.codeLength"))
+});
 var VerificationForm = ({
   onSubmit,
   onResend,
   isLoading = false
 }) => {
-  const t = useTranslations2("Auth.verification");
-  const verificationSchema = useMemo(
-    () => z.object({
-      code: z.string().length(6, t("form.codeLength"))
-    }),
-    [t]
-  );
+  const t = useTranslator("Auth.verification");
   const form = useForm({
-    resolver: zodResolver(verificationSchema),
+    resolver: zodResolver(verificationSchema(t)),
     defaultValues: {
       code: ""
     }
   });
-  return /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs3("form", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx4(
-      FormField,
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await onSubmit(values);
+  });
+  return /* @__PURE__ */ jsxs3("form", { id: "verification-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx4(FieldGroup, { children: /* @__PURE__ */ jsx4(
+      Controller,
       {
-        control: form.control,
         name: "code",
-        render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem, { children: [
-          /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(
+        control: form.control,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3(Field, { "data-invalid": fieldState.invalid, children: [
+          /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(
             InputOTP,
             {
               maxLength: 6,
@@ -269,6 +297,7 @@ var VerificationForm = ({
               onChange: field.onChange,
               onBlur: field.onBlur,
               containerClassName: "gap-4 justify-center mb-2 flex items-center",
+              "aria-invalid": fieldState.invalid,
               children: /* @__PURE__ */ jsxs3(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__ */ jsx4(InputOTPSlot, { className: "h-12", index: 0 }),
                 /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 1 }),
@@ -278,22 +307,18 @@ var VerificationForm = ({
                 /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 5 })
               ] })
             }
-          ) }) }),
-          /* @__PURE__ */ jsx4(FormMessage, {})
+          ) }),
+          fieldState.invalid && /* @__PURE__ */ jsx4(FieldError, { errors: [fieldState.error] })
         ] })
       }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center", children: [
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mt-4", children: [
       /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }),
       /* @__PURE__ */ jsxs3(
         Button2,
         {
-          type: "button",
-          onClick: () => {
-            form.handleSubmit(async (values) => {
-              await onSubmit(values);
-            })();
-          },
+          type: "submit",
+          form: "verification-form",
           disabled: isLoading || form.watch("code").length !== 6,
           children: [
             isLoading && /* @__PURE__ */ jsx4(Spinner2, {}),
@@ -302,28 +327,51 @@ var VerificationForm = ({
         }
       )
     ] })
-  ] }) });
+  ] });
 };
 
 // src/components/auth/pages/verify-phone-page.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var VerifyPhonePage = ({
   verificationId,
   context,
   phone = "",
-  onNavigate,
-  linkComponent: Link,
-  links,
-  logoImage,
   redirectUrl
 }) => {
-  const t = useTranslations3("Auth.verification");
-  const common = useTranslations3("Common");
-  const footer = useTranslations3("Auth.forgotPassword.footer");
-  const { client, refresh, setAuth } = useAuth();
+  const { hooks, refresh, setAuth } = useApi();
+  const { config } = useConfig();
+  const t = createTranslator(config.messages || {}, "Auth.verification");
+  const common = createTranslator(config.messages || {}, "Common");
+  const footer = createTranslator(
+    config.messages || {},
+    "Auth.forgotPassword.footer"
+  );
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3(null);
-  const signInLink = links?.signIn || "/auth/sign-in";
+  const verifyPhoneMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/confirm"
+  );
+  const requestPhoneMutation = hooks.useMutation(
+    "post",
+    "/phone/verification/request"
+  );
+  const signInLink = config.navigation?.links?.signIn || "/auth/sign-in";
+  const Link = config.navigation?.linkComponent;
+  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 || "/";
+  useEffect3(() => {
+    if (error) {
+      toast.error(error.title || "Error", {
+        description: error.description
+      });
+    }
+  }, [error]);
   const handleSubmit = async (values) => {
     if (!verificationId) {
       setError({
@@ -335,18 +383,20 @@ var VerifyPhonePage = ({
     setIsLoading(true);
     setError(null);
     try {
-      const res = await client.verifyPhoneOtp({
-        verificationId,
-        code: values.code,
-        context
+      const res = await verifyPhoneMutation.mutateAsync({
+        body: {
+          verificationId,
+          code: values.code,
+          context
+        }
       });
       if (res && "user" in res && "session" in res && res.session) {
         setAuth(res);
-        onNavigate(redirectUrl || "/");
+        onNavigate(defaultRedirect);
         return;
       }
       await refresh();
-      onNavigate(redirectUrl || "/");
+      onNavigate(defaultRedirect);
     } catch (err) {
       handleError(err, setError, t);
     } finally {
@@ -364,7 +414,12 @@ var VerifyPhonePage = ({
         });
         return;
       }
-      const res = await client.requestPhoneOtp({ phone: targetPhone, context });
+      const res = await requestPhoneMutation.mutateAsync({
+        body: {
+          phone: targetPhone,
+          context
+        }
+      });
       if (res && "verificationId" in res && res.verificationId) {
         onNavigate(
           `/auth/verify-phone?context=${context}&verificationId=${res.verificationId}&phone=${targetPhone}`
@@ -401,14 +456,21 @@ var VerifyPhonePage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  let errorContent = null;
+  if (error) {
+    if (typeof error === "string") {
+      errorContent = { title: "Error", description: error };
+    } else {
+      errorContent = error;
+    }
+  }
+  return /* @__PURE__ */ jsxs4(
     AuthPageLayout,
     {
       title: t("phone.title"),
       description: t("phone.description", {
         target: phone || t("phone.missingPhone")
       }),
-      error,
       logoImage,
       footer: Link ? /* @__PURE__ */ jsx5(Link, { href: signInLink, className: "text-primary hover:underline", children: footer("backToSignIn") }) : /* @__PURE__ */ jsx5(
         "a",
@@ -422,16 +484,23 @@ var VerifyPhonePage = ({
           children: footer("backToSignIn")
         }
       ),
-      children: /* @__PURE__ */ jsx5(
-        VerificationForm,
-        {
-          verificationId,
-          onSubmit: handleSubmit,
-          onResend: handleResend,
-          isLoading,
-          error
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx5(
+          VerificationForm,
+          {
+            verificationId,
+            onSubmit: handleSubmit,
+            onResend: handleResend,
+            isLoading: isLoading || verifyPhoneMutation.isPending || requestPhoneMutation.isPending,
+            error
+          }
+        ),
+        errorContent && /* @__PURE__ */ jsxs4(Alert, { variant: "destructive", className: "mt-4", children: [
+          /* @__PURE__ */ jsx5(IconAlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx5(AlertTitle, { children: errorContent.title }),
+          /* @__PURE__ */ jsx5(AlertDescription, { children: errorContent.description })
+        ] })
+      ]
     }
   );
 };