@nocios/crudify-ui 1.0.60 → 1.0.61

package/dist/index.js

@@ -139,89 +139,8 @@ var useTranslation = () => {
 };
 
 // src/components/CrudifyLogin/Forms/LoginForm.tsx
-var import_react4 = require("react");
-var import_material = require("@mui/material");
-
-// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
 var import_react3 = require("react");
-var import_crudify_browser = __toESM(require("@nocios/crudify-browser"));
-
-// src/components/CrudifyLogin/utils/cookies.ts
-var getCookie = (name) => {
-  const match = document.cookie.match(new RegExp("(^|;)\\s*" + name + "=([^;]+)"));
-  return match ? match[2] : null;
-};
-
-// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
-var useCrudifyLogin = (config, _options = {}) => {
-  const finalConfig = (0, import_react3.useMemo)(() => {
-    const publicApiKey = config.publicApiKey || getCookie("publicApiKey") || null;
-    const rawEnv = config.env || getCookie("environment") || "prod";
-    const env = ["dev", "stg", "prod"].includes(rawEnv) ? rawEnv : "prod";
-    const appName = config.appName || getCookie("appName") || "Crudia";
-    const loginActions = config.loginActions || (() => {
-      try {
-        const cookieValue = getCookie("loginActions");
-        return cookieValue ? cookieValue.split(",").map((action) => action.trim()).filter(Boolean) : [];
-      } catch {
-        return [];
-      }
-    })();
-    return {
-      publicApiKey,
-      env,
-      appName,
-      loginActions
-    };
-  }, [config]);
-  (0, import_react3.useEffect)(() => {
-    console.log("\u{1F527} useCrudifyLogin useEffect triggered:", {
-      publicApiKey: !!finalConfig.publicApiKey,
-      env: finalConfig.env,
-      hasPublicApiKey: !!finalConfig.publicApiKey
-    });
-    if (!finalConfig.publicApiKey) {
-      console.log("\u274C No publicApiKey, skipping crudify initialization");
-      return;
-    }
-    try {
-      console.log("\u2699\uFE0F Configuring crudify with env:", finalConfig.env);
-      import_crudify_browser.default.config(finalConfig.env);
-      console.log("\u{1F680} Initializing crudify with publicApiKey:", finalConfig.publicApiKey.substring(0, 10) + "...");
-      import_crudify_browser.default.init(finalConfig.publicApiKey, "none");
-      console.log("\u2705 Crudify initialization completed");
-      console.log("\u{1F50D} Crudify state after init:", {
-        hasTransaction: typeof import_crudify_browser.default.transaction === "function",
-        hasLogin: typeof import_crudify_browser.default.login === "function",
-        crudifyObject: import_crudify_browser.default
-      });
-    } catch (error) {
-      console.error("\u274C Error initializing crudify:", error);
-    }
-  }, [finalConfig.publicApiKey, finalConfig.env]);
-  const crudifyMethods = (0, import_react3.useMemo)(() => {
-    console.log("\u{1F504} crudifyMethods useMemo triggered:", {
-      publicApiKey: !!finalConfig.publicApiKey,
-      crudifyLogin: typeof import_crudify_browser.default.login,
-      crudifyTransaction: typeof import_crudify_browser.default.transaction
-    });
-    if (!finalConfig.publicApiKey) {
-      console.log("\u274C No publicApiKey, returning null crudifyMethods");
-      return null;
-    }
-    const methods = {
-      login: import_crudify_browser.default.login,
-      transaction: import_crudify_browser.default.transaction
-    };
-    console.log("\u2705 Returning crudifyMethods:", {
-      hasLogin: typeof methods.login === "function",
-      hasTransaction: typeof methods.transaction === "function",
-      methods
-    });
-    return methods;
-  }, [finalConfig.publicApiKey]);
-  return { crudify: crudifyMethods };
-};
+var import_material = require("@mui/material");
 
 // src/components/CrudifyLogin/utils/secureStorage.ts
 var import_crypto_js = __toESM(require("crypto-js"));
@@ -334,19 +253,15 @@ var secureLocalStorage = new SecureStorage("localStorage");
 
 // src/components/CrudifyLogin/Forms/LoginForm.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/", searchParams }) => {
-  const [username, setUsername] = (0, import_react4.useState)("");
-  const [password, setPassword] = (0, import_react4.useState)("");
-  const [loading, setLoading] = (0, import_react4.useState)(false);
-  const [errors, setErrors] = (0, import_react4.useState)([]);
-  const [helperTextEmail, setHelperTextEmail] = (0, import_react4.useState)(null);
-  const [helperTextPassword, setHelperTextPassword] = (0, import_react4.useState)(null);
+var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/", searchParams, crudify: crudify3 }) => {
+  const [username, setUsername] = (0, import_react3.useState)("");
+  const [password, setPassword] = (0, import_react3.useState)("");
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [errors, setErrors] = (0, import_react3.useState)([]);
+  const [helperTextEmail, setHelperTextEmail] = (0, import_react3.useState)(null);
+  const [helperTextPassword, setHelperTextPassword] = (0, import_react3.useState)(null);
   const { t } = useTranslation();
-  const usernameInputRef = (0, import_react4.useRef)(null);
-  const { crudify: crudifyFromHook } = useCrudifyLogin(config, {
-    showErrorNotifications: false,
-    showSuccessNotifications: false
-  });
+  const usernameInputRef = (0, import_react3.useRef)(null);
   const getRedirectUrl = () => {
     if (searchParams) {
       const redirectParam = searchParams.get("redirect");
@@ -362,7 +277,7 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
     }
     return redirectUrl || "/";
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const timer = setTimeout(() => {
       if (usernameInputRef.current) usernameInputRef.current.focus();
     }, 100);
@@ -399,10 +314,10 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
     setHelperTextPassword(null);
     setLoading(true);
     try {
-      if (!crudifyFromHook) {
+      if (!crudify3) {
         throw new Error("Crudify not initialized");
       }
-      const response = await crudifyFromHook.login(username, password);
+      const response = await crudify3.login(username, password);
       setLoading(false);
       if (response.success) {
         secureSessionStorage.setToken(response.data.token);
@@ -586,18 +501,17 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
 var LoginForm_default = LoginForm;
 
 // src/components/CrudifyLogin/Forms/ForgotPasswordForm.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_material2 = require("@mui/material");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ForgotPasswordForm = ({ config, onNavigate, onError }) => {
-  const [email, setEmail] = (0, import_react5.useState)("");
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [errors, setErrors] = (0, import_react5.useState)([]);
-  const [helperTextEmail, setHelperTextEmail] = (0, import_react5.useState)(null);
-  const [emailSent, setEmailSent] = (0, import_react5.useState)(false);
-  const [codeAlreadyExists, setCodeAlreadyExists] = (0, import_react5.useState)(false);
+var ForgotPasswordForm = ({ config, onNavigate, onError, crudify: crudify3 }) => {
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [errors, setErrors] = (0, import_react4.useState)([]);
+  const [helperTextEmail, setHelperTextEmail] = (0, import_react4.useState)(null);
+  const [emailSent, setEmailSent] = (0, import_react4.useState)(false);
+  const [codeAlreadyExists, setCodeAlreadyExists] = (0, import_react4.useState)(false);
   const { t } = useTranslation();
-  const { crudify: crudify3 } = useCrudifyLogin(config);
   const validateEmail = (email2) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email2);
@@ -739,25 +653,24 @@ var ForgotPasswordForm = ({ config, onNavigate, onError }) => {
 var ForgotPasswordForm_default = ForgotPasswordForm;
 
 // src/components/CrudifyLogin/Forms/ResetPasswordForm.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_material3 = require("@mui/material");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuccess }) => {
-  const [newPassword, setNewPassword] = (0, import_react6.useState)("");
-  const [confirmPassword, setConfirmPassword] = (0, import_react6.useState)("");
-  const [loading, setLoading] = (0, import_react6.useState)(false);
-  const [errors, setErrors] = (0, import_react6.useState)([]);
-  const [helperTextNewPassword, setHelperTextNewPassword] = (0, import_react6.useState)(null);
-  const [helperTextConfirmPassword, setHelperTextConfirmPassword] = (0, import_react6.useState)(null);
-  const [email, setEmail] = (0, import_react6.useState)("");
-  const [code, setCode] = (0, import_react6.useState)("");
-  const [fromCodeVerification, setFromCodeVerification] = (0, import_react6.useState)(false);
-  const [validatingCode, setValidatingCode] = (0, import_react6.useState)(true);
-  const [codeValidated, setCodeValidated] = (0, import_react6.useState)(false);
-  const [pendingValidation, setPendingValidation] = (0, import_react6.useState)(null);
+var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuccess, crudify: crudify3 }) => {
+  const [newPassword, setNewPassword] = (0, import_react5.useState)("");
+  const [confirmPassword, setConfirmPassword] = (0, import_react5.useState)("");
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [errors, setErrors] = (0, import_react5.useState)([]);
+  const [helperTextNewPassword, setHelperTextNewPassword] = (0, import_react5.useState)(null);
+  const [helperTextConfirmPassword, setHelperTextConfirmPassword] = (0, import_react5.useState)(null);
+  const [email, setEmail] = (0, import_react5.useState)("");
+  const [code, setCode] = (0, import_react5.useState)("");
+  const [fromCodeVerification, setFromCodeVerification] = (0, import_react5.useState)(false);
+  const [validatingCode, setValidatingCode] = (0, import_react5.useState)(true);
+  const [codeValidated, setCodeValidated] = (0, import_react5.useState)(false);
+  const [pendingValidation, setPendingValidation] = (0, import_react5.useState)(null);
   const { t } = useTranslation();
-  const { crudify: crudify3 } = useCrudifyLogin(config);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (searchParams) {
       const fromCodeVerificationParam = searchParams.get("fromCodeVerification");
       const emailParam = searchParams.get("email");
@@ -801,7 +714,7 @@ var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuc
     setValidatingCode(false);
     setTimeout(() => onNavigate?.("/login/forgotPassword"), 3e3);
   }, [searchParams, crudify3, t, onNavigate]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     console.log("\u{1F504} Pending validation useEffect triggered:", {
       crudify: !!crudify3,
       pendingValidation,
@@ -1055,18 +968,17 @@ var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuc
 var ResetPasswordForm_default = ResetPasswordForm;
 
 // src/components/CrudifyLogin/Forms/CheckCodeForm.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_material4 = require("@mui/material");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var CheckCodeForm = ({ config, onNavigate, onError, searchParams }) => {
-  const [code, setCode] = (0, import_react7.useState)("");
-  const [loading, setLoading] = (0, import_react7.useState)(false);
-  const [errors, setErrors] = (0, import_react7.useState)([]);
-  const [helperTextCode, setHelperTextCode] = (0, import_react7.useState)(null);
-  const [email, setEmail] = (0, import_react7.useState)("");
+var CheckCodeForm = ({ config, onNavigate, onError, searchParams, crudify: crudify3 }) => {
+  const [code, setCode] = (0, import_react6.useState)("");
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [errors, setErrors] = (0, import_react6.useState)([]);
+  const [helperTextCode, setHelperTextCode] = (0, import_react6.useState)(null);
+  const [email, setEmail] = (0, import_react6.useState)("");
   const { t } = useTranslation();
-  const { crudify: crudify3 } = useCrudifyLogin(config);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const emailParam = searchParams?.get("email");
     if (emailParam) {
       setEmail(emailParam);
@@ -1194,6 +1106,87 @@ var CheckCodeForm = ({ config, onNavigate, onError, searchParams }) => {
 };
 var CheckCodeForm_default = CheckCodeForm;
 
+// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
+var import_react7 = require("react");
+var import_crudify_browser = __toESM(require("@nocios/crudify-browser"));
+
+// src/components/CrudifyLogin/utils/cookies.ts
+var getCookie = (name) => {
+  const match = document.cookie.match(new RegExp("(^|;)\\s*" + name + "=([^;]+)"));
+  return match ? match[2] : null;
+};
+
+// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
+var useCrudifyLogin = (config, _options = {}) => {
+  const finalConfig = (0, import_react7.useMemo)(() => {
+    const publicApiKey = config.publicApiKey || getCookie("publicApiKey") || null;
+    const rawEnv = config.env || getCookie("environment") || "prod";
+    const env = ["dev", "stg", "prod"].includes(rawEnv) ? rawEnv : "prod";
+    const appName = config.appName || getCookie("appName") || "Crudia";
+    const loginActions = config.loginActions || (() => {
+      try {
+        const cookieValue = getCookie("loginActions");
+        return cookieValue ? cookieValue.split(",").map((action) => action.trim()).filter(Boolean) : [];
+      } catch {
+        return [];
+      }
+    })();
+    return {
+      publicApiKey,
+      env,
+      appName,
+      loginActions
+    };
+  }, [config]);
+  (0, import_react7.useEffect)(() => {
+    console.log("\u{1F527} useCrudifyLogin useEffect triggered:", {
+      publicApiKey: !!finalConfig.publicApiKey,
+      env: finalConfig.env,
+      hasPublicApiKey: !!finalConfig.publicApiKey
+    });
+    if (!finalConfig.publicApiKey) {
+      console.log("\u274C No publicApiKey, skipping crudify initialization");
+      return;
+    }
+    try {
+      console.log("\u2699\uFE0F Configuring crudify with env:", finalConfig.env);
+      import_crudify_browser.default.config(finalConfig.env);
+      console.log("\u{1F680} Initializing crudify with publicApiKey:", finalConfig.publicApiKey.substring(0, 10) + "...");
+      import_crudify_browser.default.init(finalConfig.publicApiKey, "none");
+      console.log("\u2705 Crudify initialization completed");
+      console.log("\u{1F50D} Crudify state after init:", {
+        hasTransaction: typeof import_crudify_browser.default.transaction === "function",
+        hasLogin: typeof import_crudify_browser.default.login === "function",
+        crudifyObject: import_crudify_browser.default
+      });
+    } catch (error) {
+      console.error("\u274C Error initializing crudify:", error);
+    }
+  }, [finalConfig.publicApiKey, finalConfig.env]);
+  const crudifyMethods = (0, import_react7.useMemo)(() => {
+    console.log("\u{1F504} crudifyMethods useMemo triggered:", {
+      publicApiKey: !!finalConfig.publicApiKey,
+      crudifyLogin: typeof import_crudify_browser.default.login,
+      crudifyTransaction: typeof import_crudify_browser.default.transaction
+    });
+    if (!finalConfig.publicApiKey) {
+      console.log("\u274C No publicApiKey, returning null crudifyMethods");
+      return null;
+    }
+    const methods = {
+      login: import_crudify_browser.default.login,
+      transaction: import_crudify_browser.default.transaction
+    };
+    console.log("\u2705 Returning crudifyMethods:", {
+      hasLogin: typeof methods.login === "function",
+      hasTransaction: typeof methods.transaction === "function",
+      methods
+    });
+    return methods;
+  }, [finalConfig.publicApiKey]);
+  return { crudify: crudifyMethods };
+};
+
 // src/components/CrudifyLogin/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var CrudifyLoginInternal = ({
@@ -1269,6 +1262,7 @@ var CrudifyLoginInternal = ({
       loginActions: providedConfig?.loginActions
     };
   }, [providedConfig, autoReadFromCookies]);
+  const { crudify: crudify3 } = useCrudifyLogin(finalConfig);
   const handleNavigate = (path) => {
     console.log("\u{1F680} INTERNAL handleNavigate called with:", path);
     const [basePath, queryString] = path.split("?");
@@ -1302,7 +1296,9 @@ var CrudifyLoginInternal = ({
       onNavigate: handleNavigate,
       // Navegación interna
       onError,
-      redirectUrl
+      redirectUrl,
+      crudify: crudify3
+      // Pasar la instancia compartida de crudify
     };
     switch (currentScreen) {
       case "forgotPassword":

package/dist/index.mjs

@@ -95,90 +95,9 @@ var useTranslation = () => {
 };
 
 // src/components/CrudifyLogin/Forms/LoginForm.tsx
-import { useState as useState2, useEffect as useEffect3, useRef } from "react";
+import { useState as useState2, useEffect as useEffect2, useRef } from "react";
 import { Typography, TextField, Button, Box, CircularProgress, Alert, Link } from "@mui/material";
 
-// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
-import { useMemo as useMemo2, useEffect as useEffect2 } from "react";
-import crudify from "@nocios/crudify-browser";
-
-// src/components/CrudifyLogin/utils/cookies.ts
-var getCookie = (name) => {
-  const match = document.cookie.match(new RegExp("(^|;)\\s*" + name + "=([^;]+)"));
-  return match ? match[2] : null;
-};
-
-// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
-var useCrudifyLogin = (config, _options = {}) => {
-  const finalConfig = useMemo2(() => {
-    const publicApiKey = config.publicApiKey || getCookie("publicApiKey") || null;
-    const rawEnv = config.env || getCookie("environment") || "prod";
-    const env = ["dev", "stg", "prod"].includes(rawEnv) ? rawEnv : "prod";
-    const appName = config.appName || getCookie("appName") || "Crudia";
-    const loginActions = config.loginActions || (() => {
-      try {
-        const cookieValue = getCookie("loginActions");
-        return cookieValue ? cookieValue.split(",").map((action) => action.trim()).filter(Boolean) : [];
-      } catch {
-        return [];
-      }
-    })();
-    return {
-      publicApiKey,
-      env,
-      appName,
-      loginActions
-    };
-  }, [config]);
-  useEffect2(() => {
-    console.log("\u{1F527} useCrudifyLogin useEffect triggered:", {
-      publicApiKey: !!finalConfig.publicApiKey,
-      env: finalConfig.env,
-      hasPublicApiKey: !!finalConfig.publicApiKey
-    });
-    if (!finalConfig.publicApiKey) {
-      console.log("\u274C No publicApiKey, skipping crudify initialization");
-      return;
-    }
-    try {
-      console.log("\u2699\uFE0F Configuring crudify with env:", finalConfig.env);
-      crudify.config(finalConfig.env);
-      console.log("\u{1F680} Initializing crudify with publicApiKey:", finalConfig.publicApiKey.substring(0, 10) + "...");
-      crudify.init(finalConfig.publicApiKey, "none");
-      console.log("\u2705 Crudify initialization completed");
-      console.log("\u{1F50D} Crudify state after init:", {
-        hasTransaction: typeof crudify.transaction === "function",
-        hasLogin: typeof crudify.login === "function",
-        crudifyObject: crudify
-      });
-    } catch (error) {
-      console.error("\u274C Error initializing crudify:", error);
-    }
-  }, [finalConfig.publicApiKey, finalConfig.env]);
-  const crudifyMethods = useMemo2(() => {
-    console.log("\u{1F504} crudifyMethods useMemo triggered:", {
-      publicApiKey: !!finalConfig.publicApiKey,
-      crudifyLogin: typeof crudify.login,
-      crudifyTransaction: typeof crudify.transaction
-    });
-    if (!finalConfig.publicApiKey) {
-      console.log("\u274C No publicApiKey, returning null crudifyMethods");
-      return null;
-    }
-    const methods = {
-      login: crudify.login,
-      transaction: crudify.transaction
-    };
-    console.log("\u2705 Returning crudifyMethods:", {
-      hasLogin: typeof methods.login === "function",
-      hasTransaction: typeof methods.transaction === "function",
-      methods
-    });
-    return methods;
-  }, [finalConfig.publicApiKey]);
-  return { crudify: crudifyMethods };
-};
-
 // src/components/CrudifyLogin/utils/secureStorage.ts
 import CryptoJS from "crypto-js";
 var SecureStorage = class {
@@ -290,7 +209,7 @@ var secureLocalStorage = new SecureStorage("localStorage");
 
 // src/components/CrudifyLogin/Forms/LoginForm.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/", searchParams }) => {
+var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/", searchParams, crudify: crudify3 }) => {
   const [username, setUsername] = useState2("");
   const [password, setPassword] = useState2("");
   const [loading, setLoading] = useState2(false);
@@ -299,10 +218,6 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
   const [helperTextPassword, setHelperTextPassword] = useState2(null);
   const { t } = useTranslation();
   const usernameInputRef = useRef(null);
-  const { crudify: crudifyFromHook } = useCrudifyLogin(config, {
-    showErrorNotifications: false,
-    showSuccessNotifications: false
-  });
   const getRedirectUrl = () => {
     if (searchParams) {
       const redirectParam = searchParams.get("redirect");
@@ -318,7 +233,7 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
     }
     return redirectUrl || "/";
   };
-  useEffect3(() => {
+  useEffect2(() => {
     const timer = setTimeout(() => {
       if (usernameInputRef.current) usernameInputRef.current.focus();
     }, 100);
@@ -355,10 +270,10 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
     setHelperTextPassword(null);
     setLoading(true);
     try {
-      if (!crudifyFromHook) {
+      if (!crudify3) {
         throw new Error("Crudify not initialized");
       }
-      const response = await crudifyFromHook.login(username, password);
+      const response = await crudify3.login(username, password);
       setLoading(false);
       if (response.success) {
         secureSessionStorage.setToken(response.data.token);
@@ -545,7 +460,7 @@ var LoginForm_default = LoginForm;
 import { useState as useState3 } from "react";
 import { Typography as Typography2, TextField as TextField2, Button as Button2, Box as Box2, CircularProgress as CircularProgress2, Alert as Alert2, Link as Link2 } from "@mui/material";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ForgotPasswordForm = ({ config, onNavigate, onError }) => {
+var ForgotPasswordForm = ({ config, onNavigate, onError, crudify: crudify3 }) => {
   const [email, setEmail] = useState3("");
   const [loading, setLoading] = useState3(false);
   const [errors, setErrors] = useState3([]);
@@ -553,7 +468,6 @@ var ForgotPasswordForm = ({ config, onNavigate, onError }) => {
   const [emailSent, setEmailSent] = useState3(false);
   const [codeAlreadyExists, setCodeAlreadyExists] = useState3(false);
   const { t } = useTranslation();
-  const { crudify: crudify3 } = useCrudifyLogin(config);
   const validateEmail = (email2) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email2);
@@ -695,10 +609,10 @@ var ForgotPasswordForm = ({ config, onNavigate, onError }) => {
 var ForgotPasswordForm_default = ForgotPasswordForm;
 
 // src/components/CrudifyLogin/Forms/ResetPasswordForm.tsx
-import { useState as useState4, useEffect as useEffect4 } from "react";
+import { useState as useState4, useEffect as useEffect3 } from "react";
 import { Typography as Typography3, TextField as TextField3, Button as Button3, Box as Box3, CircularProgress as CircularProgress3, Alert as Alert3, Link as Link3 } from "@mui/material";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuccess }) => {
+var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuccess, crudify: crudify3 }) => {
   const [newPassword, setNewPassword] = useState4("");
   const [confirmPassword, setConfirmPassword] = useState4("");
   const [loading, setLoading] = useState4(false);
@@ -712,8 +626,7 @@ var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuc
   const [codeValidated, setCodeValidated] = useState4(false);
   const [pendingValidation, setPendingValidation] = useState4(null);
   const { t } = useTranslation();
-  const { crudify: crudify3 } = useCrudifyLogin(config);
-  useEffect4(() => {
+  useEffect3(() => {
     if (searchParams) {
       const fromCodeVerificationParam = searchParams.get("fromCodeVerification");
       const emailParam = searchParams.get("email");
@@ -757,7 +670,7 @@ var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuc
     setValidatingCode(false);
     setTimeout(() => onNavigate?.("/login/forgotPassword"), 3e3);
   }, [searchParams, crudify3, t, onNavigate]);
-  useEffect4(() => {
+  useEffect3(() => {
     console.log("\u{1F504} Pending validation useEffect triggered:", {
       crudify: !!crudify3,
       pendingValidation,
@@ -1011,18 +924,17 @@ var ResetPasswordForm = ({ config, onNavigate, onError, searchParams, onResetSuc
 var ResetPasswordForm_default = ResetPasswordForm;
 
 // src/components/CrudifyLogin/Forms/CheckCodeForm.tsx
-import { useState as useState5, useEffect as useEffect5 } from "react";
+import { useState as useState5, useEffect as useEffect4 } from "react";
 import { Typography as Typography4, TextField as TextField4, Button as Button4, Box as Box4, CircularProgress as CircularProgress4, Alert as Alert4, Link as Link4 } from "@mui/material";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var CheckCodeForm = ({ config, onNavigate, onError, searchParams }) => {
+var CheckCodeForm = ({ config, onNavigate, onError, searchParams, crudify: crudify3 }) => {
   const [code, setCode] = useState5("");
   const [loading, setLoading] = useState5(false);
   const [errors, setErrors] = useState5([]);
   const [helperTextCode, setHelperTextCode] = useState5(null);
   const [email, setEmail] = useState5("");
   const { t } = useTranslation();
-  const { crudify: crudify3 } = useCrudifyLogin(config);
-  useEffect5(() => {
+  useEffect4(() => {
     const emailParam = searchParams?.get("email");
     if (emailParam) {
       setEmail(emailParam);
@@ -1150,6 +1062,87 @@ var CheckCodeForm = ({ config, onNavigate, onError, searchParams }) => {
 };
 var CheckCodeForm_default = CheckCodeForm;
 
+// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
+import { useMemo as useMemo2, useEffect as useEffect5 } from "react";
+import crudify from "@nocios/crudify-browser";
+
+// src/components/CrudifyLogin/utils/cookies.ts
+var getCookie = (name) => {
+  const match = document.cookie.match(new RegExp("(^|;)\\s*" + name + "=([^;]+)"));
+  return match ? match[2] : null;
+};
+
+// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
+var useCrudifyLogin = (config, _options = {}) => {
+  const finalConfig = useMemo2(() => {
+    const publicApiKey = config.publicApiKey || getCookie("publicApiKey") || null;
+    const rawEnv = config.env || getCookie("environment") || "prod";
+    const env = ["dev", "stg", "prod"].includes(rawEnv) ? rawEnv : "prod";
+    const appName = config.appName || getCookie("appName") || "Crudia";
+    const loginActions = config.loginActions || (() => {
+      try {
+        const cookieValue = getCookie("loginActions");
+        return cookieValue ? cookieValue.split(",").map((action) => action.trim()).filter(Boolean) : [];
+      } catch {
+        return [];
+      }
+    })();
+    return {
+      publicApiKey,
+      env,
+      appName,
+      loginActions
+    };
+  }, [config]);
+  useEffect5(() => {
+    console.log("\u{1F527} useCrudifyLogin useEffect triggered:", {
+      publicApiKey: !!finalConfig.publicApiKey,
+      env: finalConfig.env,
+      hasPublicApiKey: !!finalConfig.publicApiKey
+    });
+    if (!finalConfig.publicApiKey) {
+      console.log("\u274C No publicApiKey, skipping crudify initialization");
+      return;
+    }
+    try {
+      console.log("\u2699\uFE0F Configuring crudify with env:", finalConfig.env);
+      crudify.config(finalConfig.env);
+      console.log("\u{1F680} Initializing crudify with publicApiKey:", finalConfig.publicApiKey.substring(0, 10) + "...");
+      crudify.init(finalConfig.publicApiKey, "none");
+      console.log("\u2705 Crudify initialization completed");
+      console.log("\u{1F50D} Crudify state after init:", {
+        hasTransaction: typeof crudify.transaction === "function",
+        hasLogin: typeof crudify.login === "function",
+        crudifyObject: crudify
+      });
+    } catch (error) {
+      console.error("\u274C Error initializing crudify:", error);
+    }
+  }, [finalConfig.publicApiKey, finalConfig.env]);
+  const crudifyMethods = useMemo2(() => {
+    console.log("\u{1F504} crudifyMethods useMemo triggered:", {
+      publicApiKey: !!finalConfig.publicApiKey,
+      crudifyLogin: typeof crudify.login,
+      crudifyTransaction: typeof crudify.transaction
+    });
+    if (!finalConfig.publicApiKey) {
+      console.log("\u274C No publicApiKey, returning null crudifyMethods");
+      return null;
+    }
+    const methods = {
+      login: crudify.login,
+      transaction: crudify.transaction
+    };
+    console.log("\u2705 Returning crudifyMethods:", {
+      hasLogin: typeof methods.login === "function",
+      hasTransaction: typeof methods.transaction === "function",
+      methods
+    });
+    return methods;
+  }, [finalConfig.publicApiKey]);
+  return { crudify: crudifyMethods };
+};
+
 // src/components/CrudifyLogin/index.tsx
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var CrudifyLoginInternal = ({
@@ -1225,6 +1218,7 @@ var CrudifyLoginInternal = ({
       loginActions: providedConfig?.loginActions
     };
   }, [providedConfig, autoReadFromCookies]);
+  const { crudify: crudify3 } = useCrudifyLogin(finalConfig);
   const handleNavigate = (path) => {
     console.log("\u{1F680} INTERNAL handleNavigate called with:", path);
     const [basePath, queryString] = path.split("?");
@@ -1258,7 +1252,9 @@ var CrudifyLoginInternal = ({
       onNavigate: handleNavigate,
       // Navegación interna
       onError,
-      redirectUrl
+      redirectUrl,
+      crudify: crudify3
+      // Pasar la instancia compartida de crudify
     };
     switch (currentScreen) {
       case "forgotPassword":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocios/crudify-ui",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Biblioteca de componentes UI para Crudify",
   "author": "Nocios",
   "license": "MIT",