@nocios/crudify-ui 1.0.69 → 1.0.71

package/dist/index.mjs

@@ -3,8 +3,7 @@ import { default as default2 } from "@nocios/crudify-browser";
 export * from "@nocios/crudify-browser";
 
 // src/components/CrudifyLogin/index.tsx
-import React2, { useState as useState7, useMemo as useMemo3 } from "react";
-import { Box as Box5, Typography as Typography5 } from "@mui/material";
+import { Box as Box6, Typography as Typography6 } from "@mui/material";
 
 // src/components/CrudifyLogin/context/I18nProvider.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -94,8 +93,290 @@ var useTranslation = () => {
   return context;
 };
 
+// src/components/CrudifyLogin/context/CrudifyProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useState as useState2 } from "react";
+import crudify from "@nocios/crudify-browser";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CrudifyContext = createContext2(void 0);
+var CrudifyProvider = ({ config, children }) => {
+  const [isLoading, setIsLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const [isInitialized, setIsInitialized] = useState2(false);
+  const [initializationKey, setInitializationKey] = useState2("");
+  useEffect2(() => {
+    if (!config.publicApiKey) {
+      setError("No publicApiKey provided");
+      setIsLoading(false);
+      setIsInitialized(false);
+      return;
+    }
+    const currentKey = `${config.publicApiKey}-${config.env}`;
+    if (currentKey === initializationKey && isInitialized) {
+      setIsLoading(false);
+      return;
+    }
+    const initializeCrudify = async () => {
+      setIsLoading(true);
+      setError(null);
+      setIsInitialized(false);
+      try {
+        crudify.config(config.env || "prod");
+        await crudify.init(config.publicApiKey, "none");
+        if (typeof crudify.transaction === "function" && typeof crudify.login === "function") {
+          setIsInitialized(true);
+          setInitializationKey(currentKey);
+        } else {
+          throw new Error("Crudify methods not properly initialized");
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to initialize Crudify";
+        setError(errorMessage);
+        setIsInitialized(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    initializeCrudify();
+  }, [config.publicApiKey, config.env, initializationKey, isInitialized]);
+  const value = {
+    crudify: isInitialized ? crudify : null,
+    isLoading,
+    error,
+    isInitialized
+  };
+  return /* @__PURE__ */ jsx2(CrudifyContext.Provider, { value, children });
+};
+var useCrudify = () => {
+  const context = useContext2(CrudifyContext);
+  if (context === void 0) {
+    throw new Error("useCrudify must be used within a CrudifyProvider");
+  }
+  return context;
+};
+
+// src/components/CrudifyLogin/context/LoginStateProvider.tsx
+import { createContext as createContext3, useContext as useContext3, useReducer, useEffect as useEffect3 } from "react";
+
+// 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/context/LoginStateProvider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var initialState = {
+  currentScreen: "login",
+  searchParams: {},
+  formData: {
+    username: "",
+    password: "",
+    email: "",
+    code: "",
+    newPassword: "",
+    confirmPassword: ""
+  },
+  loading: false,
+  errors: {
+    global: []
+  },
+  emailSent: false,
+  codeAlreadyExists: false,
+  codeValidated: false,
+  fromCodeVerification: false,
+  config: {}
+};
+function loginStateReducer(state, action) {
+  switch (action.type) {
+    case "SET_SCREEN":
+      return {
+        ...state,
+        currentScreen: action.payload.screen,
+        searchParams: action.payload.params || state.searchParams,
+        // Clear form errors when changing screens
+        errors: { global: [] }
+      };
+    case "SET_SEARCH_PARAMS":
+      return {
+        ...state,
+        searchParams: action.payload
+      };
+    case "UPDATE_FORM_DATA":
+      return {
+        ...state,
+        formData: {
+          ...state.formData,
+          ...action.payload
+        },
+        // Clear related errors when updating form data
+        errors: {
+          ...state.errors,
+          ...Object.keys(action.payload).reduce((acc, key) => ({
+            ...acc,
+            [key]: void 0
+          }), {})
+        }
+      };
+    case "SET_LOADING":
+      return {
+        ...state,
+        loading: action.payload
+      };
+    case "SET_ERRORS":
+      return {
+        ...state,
+        errors: {
+          ...state.errors,
+          ...action.payload
+        }
+      };
+    case "CLEAR_ERRORS":
+      return {
+        ...state,
+        errors: { global: [] }
+      };
+    case "SET_EMAIL_SENT":
+      return {
+        ...state,
+        emailSent: action.payload
+      };
+    case "SET_CODE_ALREADY_EXISTS":
+      return {
+        ...state,
+        codeAlreadyExists: action.payload
+      };
+    case "SET_CODE_VALIDATED":
+      return {
+        ...state,
+        codeValidated: action.payload
+      };
+    case "SET_FROM_CODE_VERIFICATION":
+      return {
+        ...state,
+        fromCodeVerification: action.payload
+      };
+    case "RESET_FORM":
+      return {
+        ...state,
+        formData: initialState.formData,
+        errors: { global: [] },
+        loading: false,
+        emailSent: false,
+        codeAlreadyExists: false,
+        codeValidated: false,
+        fromCodeVerification: false
+      };
+    case "INIT_CONFIG":
+      return {
+        ...state,
+        config: action.payload
+      };
+    default:
+      return state;
+  }
+}
+var LoginStateContext = createContext3(void 0);
+var LoginStateProvider = ({
+  children,
+  initialScreen = "login",
+  config: providedConfig,
+  autoReadFromCookies = true
+}) => {
+  const [state, dispatch] = useReducer(loginStateReducer, {
+    ...initialState,
+    currentScreen: initialScreen
+  });
+  useEffect3(() => {
+    const buildFinalConfig = () => {
+      let cookieConfig = {};
+      if (autoReadFromCookies) {
+        try {
+          const encodedLogo = getCookie("logo");
+          if (encodedLogo) {
+            const decodedLogo = decodeURIComponent(encodedLogo);
+            if (decodedLogo.startsWith("http")) {
+              cookieConfig.logo = decodedLogo;
+            }
+          }
+          const colorsCookie = getCookie("colors");
+          if (colorsCookie) {
+            const decodedColorsString = decodeURIComponent(colorsCookie);
+            const parsedColors = JSON.parse(decodedColorsString);
+            cookieConfig.colors = { primaryColor: "#1066BA", ...parsedColors };
+          } else {
+            cookieConfig.colors = { primaryColor: "#1066BA" };
+          }
+        } catch (e) {
+          console.error("Error reading configuration from cookies:", e);
+          cookieConfig.colors = { primaryColor: "#1066BA" };
+        }
+      }
+      return {
+        publicApiKey: providedConfig?.publicApiKey,
+        env: providedConfig?.env,
+        appName: providedConfig?.appName,
+        logo: providedConfig?.logo || cookieConfig.logo,
+        colors: { ...cookieConfig.colors, ...providedConfig?.colors },
+        loginActions: providedConfig?.loginActions
+      };
+    };
+    dispatch({ type: "INIT_CONFIG", payload: buildFinalConfig() });
+  }, [providedConfig, autoReadFromCookies]);
+  useEffect3(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const paramsObject = {};
+    urlParams.forEach((value2, key) => {
+      paramsObject[key] = value2;
+    });
+    if (Object.keys(paramsObject).length > 0) {
+      dispatch({ type: "SET_SEARCH_PARAMS", payload: paramsObject });
+    }
+    if (initialScreen === "checkCode" && paramsObject.email) {
+      dispatch({
+        type: "UPDATE_FORM_DATA",
+        payload: { email: paramsObject.email, code: paramsObject.code || "" }
+      });
+    }
+    if (initialScreen === "resetPassword" && paramsObject.link) {
+      dispatch({ type: "SET_SEARCH_PARAMS", payload: paramsObject });
+    }
+  }, [initialScreen]);
+  const setScreen = (screen2, params) => {
+    dispatch({ type: "SET_SCREEN", payload: { screen: screen2, params } });
+  };
+  const updateFormData = (data) => {
+    dispatch({ type: "UPDATE_FORM_DATA", payload: data });
+  };
+  const setFieldError = (field, error) => {
+    dispatch({ type: "SET_ERRORS", payload: { [field]: error } });
+  };
+  const clearErrors = () => {
+    dispatch({ type: "CLEAR_ERRORS" });
+  };
+  const setLoading = (loading) => {
+    dispatch({ type: "SET_LOADING", payload: loading });
+  };
+  const value = {
+    state,
+    dispatch,
+    setScreen,
+    updateFormData,
+    setFieldError,
+    clearErrors,
+    setLoading
+  };
+  return /* @__PURE__ */ jsx3(LoginStateContext.Provider, { value, children });
+};
+var useLoginState = () => {
+  const context = useContext3(LoginStateContext);
+  if (context === void 0) {
+    throw new Error("useLoginState must be used within a LoginStateProvider");
+  }
+  return context;
+};
+
 // src/components/CrudifyLogin/Forms/LoginForm.tsx
-import { useState as useState2, useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect4, useRef } from "react";
 import { Typography, TextField, Button, Box, CircularProgress, Alert, Link } from "@mui/material";
 
 // src/components/CrudifyLogin/utils/secureStorage.ts
@@ -207,45 +488,302 @@ var SecureStorage = class {
 var secureSessionStorage = new SecureStorage("sessionStorage");
 var secureLocalStorage = new SecureStorage("localStorage");
 
+// src/utils/errorHandler.ts
+var ERROR_CODES = {
+  // Authentication Errors
+  INVALID_CREDENTIALS: "INVALID_CREDENTIALS",
+  UNAUTHORIZED: "UNAUTHORIZED",
+  INVALID_API_KEY: "INVALID_API_KEY",
+  USER_NOT_FOUND: "USER_NOT_FOUND",
+  USER_NOT_ACTIVE: "USER_NOT_ACTIVE",
+  NO_PERMISSION: "NO_PERMISSION",
+  // Data Errors
+  ITEM_NOT_FOUND: "ITEM_NOT_FOUND",
+  NOT_FOUND: "NOT_FOUND",
+  IN_USE: "IN_USE",
+  // Validation Errors
+  FIELD_ERROR: "FIELD_ERROR",
+  BAD_REQUEST: "BAD_REQUEST",
+  INVALID_EMAIL: "INVALID_EMAIL",
+  INVALID_CODE: "INVALID_CODE",
+  // System Errors
+  INTERNAL_SERVER_ERROR: "INTERNAL_SERVER_ERROR",
+  DATABASE_CONNECTION_ERROR: "DATABASE_CONNECTION_ERROR",
+  INVALID_CONFIGURATION: "INVALID_CONFIGURATION",
+  UNKNOWN_OPERATION: "UNKNOWN_OPERATION",
+  // Rate Limiting
+  TOO_MANY_REQUESTS: "TOO_MANY_REQUESTS",
+  // Network Errors
+  NETWORK_ERROR: "NETWORK_ERROR",
+  TIMEOUT_ERROR: "TIMEOUT_ERROR"
+};
+var ERROR_SEVERITY_MAP = {
+  // Authentication - warning (user can fix)
+  [ERROR_CODES.INVALID_CREDENTIALS]: "warning",
+  [ERROR_CODES.UNAUTHORIZED]: "warning",
+  [ERROR_CODES.INVALID_API_KEY]: "error",
+  [ERROR_CODES.USER_NOT_FOUND]: "warning",
+  [ERROR_CODES.USER_NOT_ACTIVE]: "warning",
+  [ERROR_CODES.NO_PERMISSION]: "warning",
+  // Data - info (might be expected)
+  [ERROR_CODES.ITEM_NOT_FOUND]: "info",
+  [ERROR_CODES.NOT_FOUND]: "info",
+  [ERROR_CODES.IN_USE]: "warning",
+  // Validation - warning (user input issue)
+  [ERROR_CODES.FIELD_ERROR]: "warning",
+  [ERROR_CODES.BAD_REQUEST]: "warning",
+  [ERROR_CODES.INVALID_EMAIL]: "warning",
+  [ERROR_CODES.INVALID_CODE]: "warning",
+  // System - error (server issue)
+  [ERROR_CODES.INTERNAL_SERVER_ERROR]: "error",
+  [ERROR_CODES.DATABASE_CONNECTION_ERROR]: "error",
+  [ERROR_CODES.INVALID_CONFIGURATION]: "error",
+  [ERROR_CODES.UNKNOWN_OPERATION]: "error",
+  // Rate limiting - warning with higher duration
+  [ERROR_CODES.TOO_MANY_REQUESTS]: "warning",
+  // Network - error
+  [ERROR_CODES.NETWORK_ERROR]: "error",
+  [ERROR_CODES.TIMEOUT_ERROR]: "error"
+};
+function parseApiError(response) {
+  const errors = [];
+  try {
+    const apiResponse = response;
+    if (apiResponse.data && typeof apiResponse.data === "object") {
+      const responseData = apiResponse.data;
+      if (responseData.response) {
+        const { status, fieldsWarning } = responseData.response;
+        if (fieldsWarning && typeof fieldsWarning === "object") {
+          Object.entries(fieldsWarning).forEach(([field, messages]) => {
+            if (Array.isArray(messages) && messages.length > 0) {
+              errors.push({
+                code: ERROR_CODES.FIELD_ERROR,
+                message: messages[0],
+                severity: "warning",
+                field
+              });
+            }
+          });
+        }
+        if (status && typeof status === "string") {
+          const errorCode = status;
+          if (ERROR_SEVERITY_MAP[errorCode]) {
+            errors.push({
+              code: errorCode,
+              message: getErrorMessage(errorCode),
+              severity: ERROR_SEVERITY_MAP[errorCode]
+            });
+          }
+        }
+      }
+    }
+    if (apiResponse.errors) {
+      if (typeof apiResponse.errors === "string") {
+        errors.push({
+          code: ERROR_CODES.BAD_REQUEST,
+          message: apiResponse.errors,
+          severity: "warning"
+        });
+      } else if (typeof apiResponse.errors === "object") {
+        const errorObj = apiResponse.errors;
+        Object.entries(errorObj).forEach(([field, messages]) => {
+          if (Array.isArray(messages) && messages.length > 0) {
+            if (field === "_error") {
+              messages.forEach((msg) => {
+                const errorCode = typeof msg === "string" && isValidErrorCode(msg) ? msg : ERROR_CODES.BAD_REQUEST;
+                errors.push({
+                  code: errorCode,
+                  message: typeof msg === "string" ? msg : getErrorMessage(errorCode),
+                  severity: ERROR_SEVERITY_MAP[errorCode] || "warning"
+                });
+              });
+            } else if (field === "_graphql") {
+              messages.forEach((msg) => {
+                if (typeof msg === "string") {
+                  const errorCode = isValidErrorCode(msg) ? msg : ERROR_CODES.BAD_REQUEST;
+                  errors.push({
+                    code: errorCode,
+                    message: getErrorMessage(errorCode),
+                    severity: ERROR_SEVERITY_MAP[errorCode] || "warning"
+                  });
+                }
+              });
+            } else {
+              errors.push({
+                code: ERROR_CODES.FIELD_ERROR,
+                message: typeof messages[0] === "string" ? messages[0] : "Validation error",
+                severity: "warning",
+                field
+              });
+            }
+          }
+        });
+      }
+    }
+    if (errors.length === 0 && apiResponse.success === false) {
+      errors.push({
+        code: ERROR_CODES.BAD_REQUEST,
+        message: "Request failed",
+        severity: "warning"
+      });
+    }
+  } catch (error) {
+    errors.push({
+      code: ERROR_CODES.INTERNAL_SERVER_ERROR,
+      message: "Failed to parse error response",
+      severity: "error",
+      details: { originalError: error }
+    });
+  }
+  return errors.length > 0 ? errors : [{
+    code: ERROR_CODES.INTERNAL_SERVER_ERROR,
+    message: "Unknown error occurred",
+    severity: "error"
+  }];
+}
+function parseTransactionError(response) {
+  try {
+    const transactionResponse = response;
+    if (transactionResponse.data && Array.isArray(transactionResponse.data)) {
+      const errors = [];
+      transactionResponse.data.forEach((item, index) => {
+        if (item.response?.status === "TOO_MANY_REQUESTS") {
+          errors.push({
+            code: ERROR_CODES.TOO_MANY_REQUESTS,
+            message: getErrorMessage(ERROR_CODES.TOO_MANY_REQUESTS),
+            severity: "warning",
+            details: { transactionIndex: index }
+          });
+        } else if (!item.response || item.response.status !== "OK") {
+          errors.push({
+            code: ERROR_CODES.BAD_REQUEST,
+            message: "Transaction failed",
+            severity: "warning",
+            details: { transactionIndex: index, response: item.response }
+          });
+        }
+      });
+      return errors;
+    }
+    return parseApiError(response);
+  } catch (error) {
+    return [{
+      code: ERROR_CODES.INTERNAL_SERVER_ERROR,
+      message: "Failed to parse transaction error",
+      severity: "error",
+      details: { originalError: error }
+    }];
+  }
+}
+function isValidErrorCode(code) {
+  return Object.values(ERROR_CODES).includes(code);
+}
+function getErrorMessage(code) {
+  const messages = {
+    [ERROR_CODES.INVALID_CREDENTIALS]: "Invalid email or password",
+    [ERROR_CODES.UNAUTHORIZED]: "You are not authorized to perform this action",
+    [ERROR_CODES.INVALID_API_KEY]: "Invalid API key",
+    [ERROR_CODES.USER_NOT_FOUND]: "User not found",
+    [ERROR_CODES.USER_NOT_ACTIVE]: "User account is not active",
+    [ERROR_CODES.NO_PERMISSION]: "You do not have permission to perform this action",
+    [ERROR_CODES.ITEM_NOT_FOUND]: "Item not found",
+    [ERROR_CODES.NOT_FOUND]: "Resource not found",
+    [ERROR_CODES.IN_USE]: "Resource is currently in use",
+    [ERROR_CODES.FIELD_ERROR]: "Validation error",
+    [ERROR_CODES.BAD_REQUEST]: "Invalid request",
+    [ERROR_CODES.INVALID_EMAIL]: "Please enter a valid email address",
+    [ERROR_CODES.INVALID_CODE]: "Invalid or expired code",
+    [ERROR_CODES.INTERNAL_SERVER_ERROR]: "Internal server error",
+    [ERROR_CODES.DATABASE_CONNECTION_ERROR]: "Database connection error",
+    [ERROR_CODES.INVALID_CONFIGURATION]: "Invalid configuration",
+    [ERROR_CODES.UNKNOWN_OPERATION]: "Unknown operation",
+    [ERROR_CODES.TOO_MANY_REQUESTS]: "Too many requests. Please try again later.",
+    [ERROR_CODES.NETWORK_ERROR]: "Network error. Please check your connection.",
+    [ERROR_CODES.TIMEOUT_ERROR]: "Request timed out. Please try again."
+  };
+  return messages[code] || "An unknown error occurred";
+}
+function parseJavaScriptError(error) {
+  if (error instanceof Error) {
+    if (error.name === "AbortError") {
+      return {
+        code: ERROR_CODES.TIMEOUT_ERROR,
+        message: "Request was cancelled",
+        severity: "info"
+      };
+    }
+    if (error.message.includes("NetworkError") || error.message.includes("Failed to fetch")) {
+      return {
+        code: ERROR_CODES.NETWORK_ERROR,
+        message: getErrorMessage(ERROR_CODES.NETWORK_ERROR),
+        severity: "error"
+      };
+    }
+    return {
+      code: ERROR_CODES.INTERNAL_SERVER_ERROR,
+      message: error.message || "An unexpected error occurred",
+      severity: "error",
+      details: { originalError: error }
+    };
+  }
+  return {
+    code: ERROR_CODES.INTERNAL_SERVER_ERROR,
+    message: "An unknown error occurred",
+    severity: "error",
+    details: { originalError: error }
+  };
+}
+function handleCrudifyError(error) {
+  if (error instanceof Error) {
+    return [parseJavaScriptError(error)];
+  }
+  if (typeof error === "object" && error !== null) {
+    const response = error;
+    if (response.data && Array.isArray(response.data)) {
+      return parseTransactionError(error);
+    }
+    return parseApiError(error);
+  }
+  return [{
+    code: ERROR_CODES.INTERNAL_SERVER_ERROR,
+    message: "An unknown error occurred",
+    severity: "error",
+    details: { originalError: error }
+  }];
+}
+
 // src/components/CrudifyLogin/Forms/LoginForm.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/", searchParams, crudify: crudify3 }) => {
-  const [username, setUsername] = useState2("");
-  const [password, setPassword] = useState2("");
-  const [loading, setLoading] = useState2(false);
-  const [errors, setErrors] = useState2([]);
-  const [helperTextEmail, setHelperTextEmail] = useState2(null);
-  const [helperTextPassword, setHelperTextPassword] = useState2(null);
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var LoginForm = ({ onScreenChange, onExternalNavigate, onLoginSuccess, onError, redirectUrl = "/" }) => {
+  const { crudify: crudify3 } = useCrudify();
+  const { state, updateFormData, setFieldError, clearErrors, setLoading } = useLoginState();
   const { t } = useTranslation();
   const usernameInputRef = useRef(null);
   const getRedirectUrl = () => {
-    if (searchParams) {
-      const redirectParam = searchParams.get("redirect");
-      if (redirectParam) {
-        try {
-          const decodedPath = decodeURIComponent(redirectParam);
-          if (decodedPath.startsWith("/") && !decodedPath.startsWith("//")) {
-            return decodedPath;
-          }
-        } catch (error) {
+    if (state.searchParams.redirect) {
+      try {
+        const decodedPath = decodeURIComponent(state.searchParams.redirect);
+        if (decodedPath.startsWith("/") && !decodedPath.startsWith("//")) {
+          return decodedPath;
         }
+      } catch (error) {
       }
     }
     return redirectUrl || "/";
   };
-  useEffect2(() => {
+  useEffect4(() => {
     const timer = setTimeout(() => {
       if (usernameInputRef.current) usernameInputRef.current.focus();
     }, 100);
     return () => clearTimeout(timer);
   }, []);
-  const getSafeErrorTranslation = (errorCode) => {
+  const translateError = (parsedError) => {
     const possibleKeys = [
-      `errors.auth.${errorCode}`,
-      `errors.data.${errorCode}`,
-      `errors.system.${errorCode}`,
-      `errors.${errorCode}`,
-      `login.${errorCode.toLowerCase()}`
+      `errors.auth.${parsedError.code}`,
+      `errors.data.${parsedError.code}`,
+      `errors.system.${parsedError.code}`,
+      `errors.${parsedError.code}`,
+      `login.${parsedError.code.toLowerCase()}`
     ];
     for (const key of possibleKeys) {
       const translated = t(key);
@@ -253,27 +791,25 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
         return translated;
       }
     }
-    return t("error.unknown");
+    return parsedError.message || t("error.unknown");
   };
   const handleLogin = async () => {
-    if (loading) return;
-    if (!username.trim()) {
-      setHelperTextEmail(t("login.usernameRequired"));
+    if (state.loading) return;
+    if (!state.formData.username.trim()) {
+      setFieldError("username", t("login.usernameRequired"));
       return;
     }
-    if (!password.trim()) {
-      setHelperTextPassword(t("login.passwordRequired"));
+    if (!state.formData.password.trim()) {
+      setFieldError("password", t("login.passwordRequired"));
       return;
     }
-    setErrors([]);
-    setHelperTextEmail(null);
-    setHelperTextPassword(null);
+    clearErrors();
     setLoading(true);
     try {
       if (!crudify3) {
         throw new Error("Crudify not initialized");
       }
-      const response = await crudify3.login(username, password);
+      const response = await crudify3.login(state.formData.username, state.formData.password);
       setLoading(false);
       if (response.success) {
         secureSessionStorage.setToken(response.data.token);
@@ -288,62 +824,31 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
       }
     } catch (error) {
       setLoading(false);
-      console.error("Login error:", error);
-      setErrors([t("error.unknown")]);
+      const parsedErrors = handleCrudifyError(error);
+      const translatedErrors = parsedErrors.map(translateError);
+      setFieldError("global", translatedErrors);
       if (onError) {
-        onError(typeof error === "string" ? error : t("error.unknown"));
+        onError(translatedErrors.join(", "));
       }
     }
   };
   const handleLoginError = (response) => {
-    if (response.data?.response) {
-      const { data: errorMessage, status, fieldsWarning } = response.data.response;
-      if (fieldsWarning) {
-        if (fieldsWarning.username) setHelperTextEmail(fieldsWarning.username[0]);
-        if (fieldsWarning.password) setHelperTextPassword(fieldsWarning.password[0]);
-      } else if (status === "INVALID_CREDENTIALS") {
-        const translatedError = getSafeErrorTranslation(status);
-        setErrors([translatedError]);
-      } else if (status === "TOO_MANY_REQUESTS") {
-        const translatedError = getSafeErrorTranslation(status);
-        setErrors([translatedError]);
-      } else if (status) {
-        setErrors([getSafeErrorTranslation(status)]);
+    const parsedErrors = handleCrudifyError(response);
+    parsedErrors.forEach((error) => {
+      if (error.field) {
+        setFieldError(error.field, translateError(error));
       } else {
-        setErrors([typeof errorMessage === "string" ? errorMessage : t("error.unknown")]);
-      }
-    } else if (response.errors) {
-      const errors2 = response.errors;
-      if (typeof errors2 === "string") {
-        setErrors([errors2]);
-      } else if (typeof errors2 === "object") {
-        const hasUsernameError = errors2.username && errors2.username.length > 0;
-        const hasPasswordError = errors2.password && errors2.password.length > 0;
-        if (hasUsernameError || hasPasswordError) {
-          if (hasUsernameError) setHelperTextEmail(errors2.username[0]);
-          if (hasPasswordError) setHelperTextPassword(errors2.password[0]);
-        } else if (errors2._error && errors2._error.length > 0) {
-          const errorMessage = errors2._error[0];
-          if (typeof errorMessage === "string" && errorMessage.match(/^[A-Z_]+$/)) {
-            const translatedError = getSafeErrorTranslation(errorMessage);
-            setErrors([translatedError]);
-          } else setErrors([errorMessage]);
-        } else if (errors2._graphql && errors2._graphql[0] === "INVALID_CREDENTIALS") {
-          setErrors([getSafeErrorTranslation("INVALID_CREDENTIALS")]);
-        } else {
-          setErrors([t("error.unknown")]);
-        }
+        const currentGlobalErrors = state.errors.global || [];
+        setFieldError("global", [...currentGlobalErrors, translateError(error)]);
       }
-    } else {
-      setErrors([t("error.unknown")]);
-    }
+    });
   };
   const handleSubmit = (e) => {
     e.preventDefault();
     handleLogin();
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !loading) {
+    if (e.key === "Enter" && !state.loading) {
       e.preventDefault();
       handleLogin();
     }
@@ -359,7 +864,7 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
         sx: { width: "100%", display: "flex", flexDirection: "column", gap: 2 },
         children: [
           /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               Typography,
               {
                 variant: "body2",
@@ -369,18 +874,18 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
                 children: t("login.usernameOrEmailLabel")
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               TextField,
               {
                 fullWidth: true,
                 id: "email",
                 name: "email",
                 type: "email",
-                value: username,
-                disabled: loading,
-                onChange: (e) => setUsername(e.target.value),
-                error: !!helperTextEmail,
-                helperText: helperTextEmail,
+                value: state.formData.username,
+                disabled: state.loading,
+                onChange: (e) => updateFormData({ username: e.target.value }),
+                error: !!state.errors.username,
+                helperText: state.errors.username,
                 autoComplete: "email",
                 placeholder: t("login.usernameOrEmailPlaceholder"),
                 inputRef: usernameInputRef,
@@ -389,7 +894,7 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
             )
           ] }),
           /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               Typography,
               {
                 variant: "body2",
@@ -399,52 +904,52 @@ var LoginForm = ({ config, onNavigate, onLoginSuccess, onError, redirectUrl = "/
                 children: t("login.passwordLabel")
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               TextField,
               {
                 fullWidth: true,
                 id: "password",
                 name: "password",
                 type: "password",
-                value: password,
-                disabled: loading,
-                onChange: (e) => setPassword(e.target.value),
-                error: !!helperTextPassword,
-                helperText: helperTextPassword,
+                value: state.formData.password,
+                disabled: state.loading,
+                onChange: (e) => updateFormData({ password: e.target.value }),
+                error: !!state.errors.password,
+                helperText: state.errors.password,
                 autoComplete: "current-password",
                 placeholder: t("login.passwordPlaceholder"),
                 required: true
               }
             )
           ] }),
-          config.loginActions?.includes("forgotPassword") && /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: /* @__PURE__ */ jsx2(
+          state.config.loginActions?.includes("forgotPassword") && /* @__PURE__ */ jsx4(Box, { sx: { display: "flex", justifyContent: "flex-end", alignItems: "center" }, children: /* @__PURE__ */ jsx4(
             Link,
             {
               sx: { cursor: "pointer" },
               onClick: () => {
-                const searchString = searchParams ? `?${searchParams.toString()}` : "";
-                onNavigate?.(`/login/forgotPassword${searchString}`);
+                onScreenChange?.("forgotPassword", state.searchParams);
               },
               variant: "body2",
               color: "secondary",
               children: t("login.forgotPasswordLink")
             }
           ) }),
-          /* @__PURE__ */ jsx2(Button, { disabled: loading, type: "submit", fullWidth: true, variant: "contained", color: "primary", sx: { mt: 1, mb: 2 }, children: loading ? /* @__PURE__ */ jsx2(CircularProgress, { size: 20 }) : t("login.loginButton") })
+          /* @__PURE__ */ jsx4(Button, { disabled: state.loading, type: "submit", fullWidth: true, variant: "contained", color: "primary", sx: { mt: 1, mb: 2 }, children: state.loading ? /* @__PURE__ */ jsx4(CircularProgress, { size: 20 }) : t("login.loginButton") })
         ]
       }
     ),
-    /* @__PURE__ */ jsx2(Box, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx2(Alert, { variant: "filled", sx: { mt: 2 }, severity: "error", children: /* @__PURE__ */ jsx2("div", { children: error }) }, index)) }),
-    config.loginActions?.includes("createUser") && /* @__PURE__ */ jsxs(Typography, { variant: "body2", align: "center", sx: { color: "text.secondary", mt: 3 }, children: [
+    /* @__PURE__ */ jsx4(Box, { children: state.errors.global && state.errors.global.length > 0 && state.errors.global.map((error, index) => /* @__PURE__ */ jsx4(Alert, { variant: "filled", sx: { mt: 2 }, severity: "error", children: /* @__PURE__ */ jsx4("div", { children: error }) }, index)) }),
+    state.config.loginActions?.includes("createUser") && /* @__PURE__ */ jsxs(Typography, { variant: "body2", align: "center", sx: { color: "text.secondary", mt: 3 }, children: [
       t("login.noAccountPrompt"),
       " ",
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx4(
         Link,
         {
           sx: { cursor: "pointer" },
           onClick: () => {
-            const searchString = searchParams ? `?${searchParams.toString()}` : "";
-            onNavigate?.(`/public/users/create${searchString}`);
+            const searchString = Object.keys(state.searchParams).length > 0 ? `?${new URLSearchParams(state.searchParams).toString()}` : "";
+            const signupUrl = `/public/users/create${searchString}`;
+            onExternalNavigate?.(signupUrl);
           },
           fontWeight: "medium",
           color: "secondary",
@@ -459,8 +964,9 @@ var LoginForm_default = LoginForm;
 // src/components/CrudifyLogin/Forms/ForgotPasswordForm.tsx
 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 = ({ onNavigate, onError, crudify: crudify3 }) => {
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var ForgotPasswordForm = ({ onScreenChange, onError }) => {
+  const { crudify: crudify3 } = useCrudify();
   const [email, setEmail] = useState3("");
   const [loading, setLoading] = useState3(false);
   const [errors, setErrors] = useState3([]);
@@ -468,6 +974,22 @@ var ForgotPasswordForm = ({ onNavigate, onError, crudify: crudify3 }) => {
   const [emailSent, setEmailSent] = useState3(false);
   const [codeAlreadyExists, setCodeAlreadyExists] = useState3(false);
   const { t } = useTranslation();
+  const translateError = (parsedError) => {
+    const possibleKeys = [
+      `errors.auth.${parsedError.code}`,
+      `errors.data.${parsedError.code}`,
+      `errors.system.${parsedError.code}`,
+      `errors.${parsedError.code}`,
+      `forgotPassword.${parsedError.code.toLowerCase()}`
+    ];
+    for (const key of possibleKeys) {
+      const translated = t(key);
+      if (translated !== key) {
+        return translated;
+      }
+    }
+    return parsedError.message || t("error.unknown");
+  };
   const validateEmail = (email2) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email2);
@@ -495,80 +1017,57 @@ var ForgotPasswordForm = ({ onNavigate, onError, crudify: crudify3 }) => {
           setEmailSent(true);
         }
       } else {
-        const errorMessages = [];
-        if (response.data?.response?.status === "TOO_MANY_REQUESTS") {
-          errorMessages.push(t("errors.auth.TOO_MANY_REQUESTS"));
-        } else if (response.errors) {
-          if (response.errors._error) {
-            const errors2 = response.errors._error;
-            const translatedErrors = errors2.map((error) => {
-              if (error === "TOO_MANY_REQUESTS") {
-                return t("errors.auth.TOO_MANY_REQUESTS");
-              }
-              return error;
-            });
-            errorMessages.push(...translatedErrors);
-          } else {
-            errorMessages.push(t("error.unknown"));
-          }
-        } else {
-          errorMessages.push(t("error.unknown"));
-        }
-        setErrors(errorMessages);
+        const parsedErrors = handleCrudifyError(response);
+        const translatedErrors = parsedErrors.map(translateError);
+        setErrors(translatedErrors);
       }
     } catch (error) {
-      console.error("Forgot password error:", error);
-      setErrors([t("error.unknown")]);
+      const parsedErrors = handleCrudifyError(error);
+      const translatedErrors = parsedErrors.map(translateError);
+      setErrors(translatedErrors);
       if (onError) {
-        onError(typeof error === "string" ? error : t("error.unknown"));
+        onError(translatedErrors.join(", "));
       }
     } finally {
       setLoading(false);
     }
   };
   const handleBack = () => {
-    onNavigate?.("/login");
+    onScreenChange?.("login");
   };
   const handleGoToCheckCode = () => {
-    console.log("\u{1F680} handleGoToCheckCode called:", { email, emailSent, codeAlreadyExists });
     if (emailSent || codeAlreadyExists) {
-      console.log("\u2705 Navigating from success state");
-      onNavigate?.(`/login/checkCode?email=${encodeURIComponent(email)}`);
+      onScreenChange?.("checkCode", { email });
       return;
     }
     if (!email) {
-      console.log("\u274C Email required");
       setHelperTextEmail(t("forgotPassword.emailRequired"));
       return;
     }
     if (!validateEmail(email)) {
-      console.log("\u274C Invalid email");
       setHelperTextEmail(t("forgotPassword.invalidEmail"));
       return;
     }
-    console.log("\u2705 Navigating with valid email");
-    onNavigate?.(`/login/checkCode?email=${encodeURIComponent(email)}`);
+    onScreenChange?.("checkCode", { email });
   };
   if (emailSent || codeAlreadyExists) {
-    console.log("\u{1F4E7} Rendering SUCCESS state:", { emailSent, codeAlreadyExists });
-    return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsxs2(Box2, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 2, textAlign: "center" }, children: [
+    return /* @__PURE__ */ jsx5(Fragment2, { children: /* @__PURE__ */ jsxs2(Box2, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 2, textAlign: "center" }, children: [
       /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 2 }, children: [
-        /* @__PURE__ */ jsx3(Typography2, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: codeAlreadyExists ? t("forgotPassword.codeAlreadyExistsMessage") : t("forgotPassword.emailSentMessage") }),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { color: codeAlreadyExists ? "success.main" : "grey.600" }, children: codeAlreadyExists ? t("forgotPassword.checkEmailInstructions") : t("forgotPassword.checkEmailInstructions") })
+        /* @__PURE__ */ jsx5(Typography2, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: codeAlreadyExists ? t("forgotPassword.codeAlreadyExistsMessage") : t("forgotPassword.emailSentMessage") }),
+        /* @__PURE__ */ jsx5(Typography2, { variant: "body2", sx: { color: codeAlreadyExists ? "success.main" : "grey.600" }, children: codeAlreadyExists ? t("forgotPassword.checkEmailInstructions") : t("forgotPassword.checkEmailInstructions") })
       ] }),
-      /* @__PURE__ */ jsx3(Button2, { type: "button", onClick: handleGoToCheckCode, fullWidth: true, variant: "contained", color: "primary", sx: { mt: 2, mb: 2 }, children: t("forgotPassword.enterCodeLink") }),
-      /* @__PURE__ */ jsx3(Box2, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx3(Link2, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }) })
+      /* @__PURE__ */ jsx5(Button2, { type: "button", onClick: handleGoToCheckCode, fullWidth: true, variant: "contained", color: "primary", sx: { mt: 2, mb: 2 }, children: t("forgotPassword.enterCodeLink") }),
+      /* @__PURE__ */ jsx5(Box2, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx5(Link2, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }) })
     ] }) });
   }
-  console.log("\u{1F4DD} Rendering FORM state");
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2(Box2, { component: "form", noValidate: true, sx: { width: "100%", display: "flex", flexDirection: "column", gap: 2 }, children: [
       /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 2 }, children: [
-        /* @__PURE__ */ jsx3(Typography2, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: t("forgotPassword.title") }),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { color: "grey.600" }, children: t("forgotPassword.instructions") })
+        /* @__PURE__ */ jsx5(Typography2, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: t("forgotPassword.title") }),
+        /* @__PURE__ */ jsx5(Typography2, { variant: "body2", sx: { color: "grey.600" }, children: t("forgotPassword.instructions") })
       ] }),
       /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 1 }, children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           Typography2,
           {
             variant: "body2",
@@ -578,7 +1077,7 @@ var ForgotPasswordForm = ({ onNavigate, onError, crudify: crudify3 }) => {
             children: t("forgotPassword.emailLabel")
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           TextField2,
           {
             fullWidth: true,
@@ -596,23 +1095,24 @@ var ForgotPasswordForm = ({ onNavigate, onError, crudify: crudify3 }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx3(Button2, { disabled: loading, type: "button", onClick: handleSubmit, fullWidth: true, variant: "contained", color: "primary", sx: { mt: 2, mb: 2 }, children: loading ? /* @__PURE__ */ jsx3(CircularProgress2, { size: 20 }) : t("forgotPassword.sendCodeButton") }),
+      /* @__PURE__ */ jsx5(Button2, { disabled: loading, type: "button", onClick: handleSubmit, fullWidth: true, variant: "contained", color: "primary", sx: { mt: 2, mb: 2 }, children: loading ? /* @__PURE__ */ jsx5(CircularProgress2, { size: 20 }) : t("forgotPassword.sendCodeButton") }),
       /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", justifyContent: "center", alignItems: "center", gap: 2 }, children: [
-        /* @__PURE__ */ jsx3(Link2, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }),
-        /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { color: "grey.400" }, children: "\u2022" }),
-        /* @__PURE__ */ jsx3(Link2, { sx: { cursor: "pointer" }, onClick: handleGoToCheckCode, variant: "body2", color: "secondary", children: t("login.alreadyHaveCodeLink") })
+        /* @__PURE__ */ jsx5(Link2, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }),
+        /* @__PURE__ */ jsx5(Typography2, { variant: "body2", sx: { color: "grey.400" }, children: "\u2022" }),
+        /* @__PURE__ */ jsx5(Link2, { sx: { cursor: "pointer" }, onClick: handleGoToCheckCode, variant: "body2", color: "secondary", children: t("login.alreadyHaveCodeLink") })
       ] })
     ] }),
-    /* @__PURE__ */ jsx3(Box2, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx3(Alert2, { variant: "filled", sx: { mt: 2 }, severity: "error", children: error }, index)) })
+    /* @__PURE__ */ jsx5(Box2, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx5(Alert2, { variant: "filled", sx: { mt: 2 }, severity: "error", children: error }, index)) })
   ] });
 };
 var ForgotPasswordForm_default = ForgotPasswordForm;
 
 // src/components/CrudifyLogin/Forms/ResetPasswordForm.tsx
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect5 } 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 = ({ onNavigate, onError, searchParams, onResetSuccess, crudify: crudify3 }) => {
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var ResetPasswordForm = ({ onScreenChange, onError, searchParams, onResetSuccess }) => {
+  const { crudify: crudify3 } = useCrudify();
   const [newPassword, setNewPassword] = useState4("");
   const [confirmPassword, setConfirmPassword] = useState4("");
   const [loading, setLoading] = useState4(false);
@@ -627,12 +1127,26 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
   const [pendingValidation, setPendingValidation] = useState4(null);
   const [isValidating, setIsValidating] = useState4(false);
   const { t } = useTranslation();
-  useEffect3(() => {
+  const translateError = (parsedError) => {
+    const possibleKeys = [
+      `errors.auth.${parsedError.code}`,
+      `errors.data.${parsedError.code}`,
+      `errors.system.${parsedError.code}`,
+      `errors.${parsedError.code}`,
+      `resetPassword.${parsedError.code.toLowerCase()}`
+    ];
+    for (const key of possibleKeys) {
+      const translated = t(key);
+      if (translated !== key) {
+        return translated;
+      }
+    }
+    return parsedError.message || t("error.unknown");
+  };
+  useEffect5(() => {
     if (!searchParams) {
-      console.log("\u{1F504} No searchParams yet, waiting...");
       return;
     }
-    console.log("\u{1F504} Processing searchParams:", searchParams.toString());
     if (searchParams) {
       const fromCodeVerificationParam = searchParams.get("fromCodeVerification");
       const emailParam = searchParams.get("email");
@@ -651,54 +1165,31 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
           const decodedLink = decodeURIComponent(linkParam);
           const [linkCode, linkEmail] = decodedLink.split("/");
           if (linkCode && linkEmail && linkCode.length === 6) {
-            console.log("\u{1F517} Reset link detected:", { linkCode, linkEmail });
             setCode(linkCode);
             setEmail(linkEmail);
             setFromCodeVerification(false);
-            console.log("\u23F3 Setting pending validation for reset link");
             setPendingValidation({ email: linkEmail, code: linkCode });
             return;
           }
         } catch (error) {
-          console.error("Failed to parse reset link:", error);
         }
       }
       if (emailParam && codeParam) {
         setEmail(emailParam);
         setCode(codeParam);
         setFromCodeVerification(false);
-        console.log("\u23F3 Setting pending validation for direct params");
         setPendingValidation({ email: emailParam, code: codeParam });
         return;
       }
     }
-    console.log("\u274C No valid reset parameters found");
     setErrors([t("resetPassword.invalidCode")]);
     setValidatingCode(false);
-    setTimeout(() => onNavigate?.("/login/forgotPassword"), 3e3);
-  }, [searchParams, crudify3, t, onNavigate]);
-  useEffect3(() => {
-    console.log("\u{1F504} Pending validation useEffect triggered:", {
-      crudify: !!crudify3,
-      pendingValidation,
-      crudifyType: typeof crudify3,
-      crudifyKeys: crudify3 ? Object.keys(crudify3) : null
-    });
+    setTimeout(() => onScreenChange?.("forgotPassword"), 3e3);
+  }, [searchParams, crudify3, t, onScreenChange]);
+  useEffect5(() => {
     if (crudify3 && pendingValidation && !isValidating) {
-      console.log("\u{1F680} Crudify verified ready! Executing pending validation:", pendingValidation);
-      console.log("\u{1F50D} Crudify object details:", {
-        hasTransaction: typeof crudify3.transaction === "function",
-        hasLogin: typeof crudify3.login === "function",
-        crudifyInstance: crudify3
-      });
       setIsValidating(true);
       const validateCode = async (emailToValidate, codeToValidate) => {
-        console.log("\u{1F50D} Validating reset code:", { emailToValidate, codeToValidate });
-        console.log("\u{1F4CB} Pre-validation crudify check:", {
-          crudify: !!crudify3,
-          transaction: typeof crudify3?.transaction,
-          crudifyString: crudify3?.toString?.()
-        });
         try {
           const data = [
             {
@@ -706,62 +1197,27 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
               data: { email: emailToValidate, codePassword: codeToValidate }
             }
           ];
-          console.log("\u{1F4E4} Sending validation request:", data);
-          console.log("\u{1F3AF} About to call crudify.transaction...");
           const response = await crudify3.transaction(data);
-          console.log("\u{1F4E5} Validation response:", response);
-          console.log("\u{1F4E5} Raw response type:", typeof response);
-          console.log("\u{1F4E5} Response keys:", Object.keys(response));
-          if (response.data) {
-            console.log("\u{1F4E5} Response.data type:", typeof response.data);
-            console.log("\u{1F4E5} Response.data content:", response.data);
-          }
           if (response.data && Array.isArray(response.data)) {
-            console.log("\u{1F50D} Checking array response data:", response.data);
             const validationResult = response.data[0];
             if (validationResult && validationResult.response && validationResult.response.status === "OK") {
-              console.log("\u2705 Code validation successful (from array data)");
               setCodeValidated(true);
               return;
             }
           }
           if (response.success) {
-            console.log("\u2705 Code validation successful");
             setCodeValidated(true);
           } else {
-            console.log("\u274C Code validation failed:", response);
-            console.log("\u274C Full error details:", {
-              success: response.success,
-              data: response.data,
-              errors: response.errors,
-              errorCode: response.errorCode,
-              fieldsWarning: response.fieldsWarning
-            });
-            if (response.data?.response?.status === "TOO_MANY_REQUESTS") {
-              setErrors([t("errors.auth.TOO_MANY_REQUESTS")]);
-            } else {
-              let errorMessage = t("resetPassword.invalidCode");
-              if (response.errors?._error) {
-                const error = response.errors._error[0];
-                if (error === "TOO_MANY_REQUESTS") {
-                  errorMessage = t("errors.auth.TOO_MANY_REQUESTS");
-                } else {
-                  const errorMsg = error?.toLowerCase() || "";
-                  if (errorMsg.includes("expired")) {
-                    errorMessage = t("resetPassword.codeExpiredOrInvalid");
-                  } else if (errorMsg.includes("invalid")) {
-                    errorMessage = t("resetPassword.invalidCode");
-                  }
-                }
-              }
-              setErrors([errorMessage]);
-            }
-            setTimeout(() => onNavigate?.("/login/forgotPassword"), 3e3);
+            const parsedErrors = handleCrudifyError(response);
+            const translatedErrors = parsedErrors.map(translateError);
+            setErrors(translatedErrors);
+            setTimeout(() => onScreenChange?.("forgotPassword"), 3e3);
           }
         } catch (error) {
-          console.error("Code validation error:", error);
-          setErrors([t("resetPassword.invalidCode")]);
-          setTimeout(() => onNavigate?.("/login/forgotPassword"), 3e3);
+          const parsedErrors = handleCrudifyError(error);
+          const translatedErrors = parsedErrors.map(translateError);
+          setErrors(translatedErrors);
+          setTimeout(() => onScreenChange?.("forgotPassword"), 3e3);
         } finally {
           setValidatingCode(false);
           setPendingValidation(null);
@@ -770,7 +1226,7 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
       };
       validateCode(pendingValidation.email, pendingValidation.code);
     }
-  }, [crudify3, pendingValidation, t, onNavigate]);
+  }, [crudify3, pendingValidation, t, onScreenChange]);
   const validatePassword = (password) => {
     if (password.length < 8) {
       return t("resetPassword.passwordTooShort");
@@ -816,80 +1272,41 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
           onResetSuccess?.();
         }, 1e3);
       } else {
-        const errorMessages = [];
-        if (response.data?.response?.status === "TOO_MANY_REQUESTS") {
-          errorMessages.push(t("errors.auth.TOO_MANY_REQUESTS"));
-        } else if (response.errors?._transaction) {
-          const transactionErrors = response.errors._transaction;
-          if (Array.isArray(transactionErrors) && transactionErrors.length > 0) {
-            const firstError = transactionErrors[0];
-            let errorMsg = "";
-            if (typeof firstError === "string") {
-              try {
-                const parsed = JSON.parse(firstError);
-                if (parsed?.response?.message) {
-                  errorMsg = parsed.response.message.toLowerCase();
-                }
-              } catch {
-                errorMsg = firstError.toLowerCase();
-              }
-            }
-            if (errorMsg.includes("expired")) {
-              errorMessages.push(t("resetPassword.codeExpiredOrInvalid"));
-            } else if (errorMsg.includes("invalid")) {
-              errorMessages.push(t("resetPassword.invalidCode"));
-            } else {
-              errorMessages.push(t("error.unknown"));
-            }
-          } else {
-            errorMessages.push(t("error.unknown"));
-          }
-        } else if (response.errors?._error) {
-          const error = response.errors._error[0];
-          if (error === "TOO_MANY_REQUESTS") {
-            errorMessages.push(t("errors.auth.TOO_MANY_REQUESTS"));
-          } else {
-            const errorMsg = error?.toLowerCase() || "";
-            if (errorMsg.includes("expired")) {
-              errorMessages.push(t("resetPassword.codeExpiredOrInvalid"));
-            } else if (errorMsg.includes("invalid")) {
-              errorMessages.push(t("resetPassword.invalidCode"));
-            } else {
-              errorMessages.push(error || t("error.unknown"));
-            }
-          }
-        } else {
-          errorMessages.push(t("error.unknown"));
-        }
-        setErrors(errorMessages);
+        const parsedErrors = handleCrudifyError(response);
+        const translatedErrors = parsedErrors.map(translateError);
+        setErrors(translatedErrors);
       }
     } catch (error) {
-      console.error("Reset password error:", error);
-      setErrors([t("error.unknown")]);
+      const parsedErrors = handleCrudifyError(error);
+      const translatedErrors = parsedErrors.map(translateError);
+      setErrors(translatedErrors);
       if (onError) {
-        onError(typeof error === "string" ? error : t("error.unknown"));
+        onError(translatedErrors.join(", "));
       }
     }
     setLoading(false);
   };
   const handleBack = () => {
-    if (fromCodeVerification) onNavigate?.(`/login/checkCode?email=${encodeURIComponent(email)}`);
-    else onNavigate?.("/login/forgotPassword");
+    if (fromCodeVerification) {
+      onScreenChange?.("checkCode", { email });
+    } else {
+      onScreenChange?.("forgotPassword");
+    }
   };
   if (validatingCode) {
-    return /* @__PURE__ */ jsx4(Box3, { sx: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "300px" }, children: /* @__PURE__ */ jsx4(CircularProgress3, {}) });
+    return /* @__PURE__ */ jsx6(Box3, { sx: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "300px" }, children: /* @__PURE__ */ jsx6(CircularProgress3, {}) });
   }
   if (!codeValidated) {
-    return /* @__PURE__ */ jsx4(Box3, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx4(Alert3, { variant: "filled", sx: { mt: 2 }, severity: "error", children: error }, index)) });
+    return /* @__PURE__ */ jsx6(Box3, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx6(Alert3, { variant: "filled", sx: { mt: 2 }, severity: "error", children: error }, index)) });
   }
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3(Box3, { component: "form", noValidate: true, sx: { width: "100%", display: "flex", flexDirection: "column", gap: 2 }, children: [
       /* @__PURE__ */ jsxs3(Box3, { sx: { mb: 2 }, children: [
-        /* @__PURE__ */ jsx4(Typography3, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: t("resetPassword.title") }),
-        /* @__PURE__ */ jsx4(Typography3, { variant: "body2", sx: { color: "grey.600" }, children: t("resetPassword.instructions") })
+        /* @__PURE__ */ jsx6(Typography3, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: t("resetPassword.title") }),
+        /* @__PURE__ */ jsx6(Typography3, { variant: "body2", sx: { color: "grey.600" }, children: t("resetPassword.instructions") })
       ] }),
       /* @__PURE__ */ jsxs3(Box3, { sx: { mb: 1 }, children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           Typography3,
           {
             variant: "body2",
@@ -899,7 +1316,7 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
             children: t("resetPassword.newPasswordLabel")
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           TextField3,
           {
             fullWidth: true,
@@ -918,7 +1335,7 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
         )
       ] }),
       /* @__PURE__ */ jsxs3(Box3, { sx: { mb: 1 }, children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           Typography3,
           {
             variant: "body2",
@@ -928,7 +1345,7 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
             children: t("resetPassword.confirmPasswordLabel")
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           TextField3,
           {
             fullWidth: true,
@@ -946,33 +1363,50 @@ var ResetPasswordForm = ({ onNavigate, onError, searchParams, onResetSuccess, cr
           }
         )
       ] }),
-      /* @__PURE__ */ jsx4(Button3, { disabled: loading, type: "button", onClick: handleSubmit, fullWidth: true, variant: "contained", color: "primary", sx: { mt: 2, mb: 2 }, children: loading ? /* @__PURE__ */ jsx4(CircularProgress3, { size: 20 }) : t("resetPassword.resetPasswordButton") }),
-      /* @__PURE__ */ jsx4(Box3, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx4(Link3, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }) })
+      /* @__PURE__ */ jsx6(Button3, { disabled: loading, type: "button", onClick: handleSubmit, fullWidth: true, variant: "contained", color: "primary", sx: { mt: 2, mb: 2 }, children: loading ? /* @__PURE__ */ jsx6(CircularProgress3, { size: 20 }) : t("resetPassword.resetPasswordButton") }),
+      /* @__PURE__ */ jsx6(Box3, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx6(Link3, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }) })
     ] }),
-    /* @__PURE__ */ jsx4(Box3, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx4(Alert3, { variant: "filled", sx: { mt: 2 }, severity: "error", children: error }, index)) })
+    /* @__PURE__ */ jsx6(Box3, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx6(Alert3, { variant: "filled", sx: { mt: 2 }, severity: "error", children: error }, index)) })
   ] });
 };
 var ResetPasswordForm_default = ResetPasswordForm;
 
 // src/components/CrudifyLogin/Forms/CheckCodeForm.tsx
-import { useState as useState5, useEffect as useEffect4 } from "react";
+import { useState as useState5, useEffect as useEffect6 } 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 = ({ onNavigate, onError, searchParams, crudify: crudify3 }) => {
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var CheckCodeForm = ({ onScreenChange, onError, searchParams }) => {
+  const { crudify: crudify3 } = useCrudify();
   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();
-  useEffect4(() => {
+  const translateError = (parsedError) => {
+    const possibleKeys = [
+      `errors.auth.${parsedError.code}`,
+      `errors.data.${parsedError.code}`,
+      `errors.system.${parsedError.code}`,
+      `errors.${parsedError.code}`,
+      `checkCode.${parsedError.code.toLowerCase()}`
+    ];
+    for (const key of possibleKeys) {
+      const translated = t(key);
+      if (translated !== key) {
+        return translated;
+      }
+    }
+    return parsedError.message || t("error.unknown");
+  };
+  useEffect6(() => {
     const emailParam = searchParams?.get("email");
     if (emailParam) {
       setEmail(emailParam);
     } else {
-      onNavigate?.("/login/forgotPassword");
+      onScreenChange?.("forgotPassword");
     }
-  }, [searchParams, onNavigate]);
+  }, [searchParams, onScreenChange]);
   const handleSubmit = async () => {
     if (loading || !crudify3) return;
     setErrors([]);
@@ -995,41 +1429,25 @@ var CheckCodeForm = ({ onNavigate, onError, searchParams, crudify: crudify3 }) =
       ];
       const response = await crudify3.transaction(data);
       if (response.success) {
-        onNavigate?.(`/login/resetPassword?email=${encodeURIComponent(email)}&code=${encodeURIComponent(code)}&fromCodeVerification=true`);
+        onScreenChange?.("resetPassword", { email, code, fromCodeVerification: "true" });
       } else {
-        const errorMessages = [];
-        if (response.data?.response?.status === "TOO_MANY_REQUESTS") {
-          errorMessages.push(t("errors.auth.TOO_MANY_REQUESTS"));
-        } else if (response.errors) {
-          if (response.errors._error) {
-            const errors2 = response.errors._error;
-            const translatedErrors = errors2.map((error) => {
-              if (error === "TOO_MANY_REQUESTS") {
-                return t("errors.auth.TOO_MANY_REQUESTS");
-              }
-              return error;
-            });
-            errorMessages.push(...translatedErrors);
-          } else {
-            errorMessages.push(t("error.unknown"));
-          }
-        } else {
-          errorMessages.push(t("checkCode.verifyError"));
-        }
-        setErrors(errorMessages);
+        const parsedErrors = handleCrudifyError(response);
+        const translatedErrors = parsedErrors.map(translateError);
+        setErrors(translatedErrors);
         setLoading(false);
       }
     } catch (error) {
-      console.error("Check code error:", error);
-      setErrors([t("error.unknown")]);
+      const parsedErrors = handleCrudifyError(error);
+      const translatedErrors = parsedErrors.map(translateError);
+      setErrors(translatedErrors);
       setLoading(false);
       if (onError) {
-        onError(typeof error === "string" ? error : t("error.unknown"));
+        onError(translatedErrors.join(", "));
       }
     }
   };
   const handleBack = () => {
-    onNavigate?.("/login/forgotPassword");
+    onScreenChange?.("forgotPassword");
   };
   const handleCodeChange = (event) => {
     const value = event.target.value.replace(/\D/g, "").slice(0, 6);
@@ -1038,11 +1456,11 @@ var CheckCodeForm = ({ onNavigate, onError, searchParams, crudify: crudify3 }) =
   return /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsxs4(Box4, { component: "form", noValidate: true, sx: { width: "100%", display: "flex", flexDirection: "column", gap: 2 }, children: [
       /* @__PURE__ */ jsxs4(Box4, { sx: { mb: 2 }, children: [
-        /* @__PURE__ */ jsx5(Typography4, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: t("checkCode.title") }),
-        /* @__PURE__ */ jsx5(Typography4, { variant: "body2", sx: { color: "grey.600" }, children: t("checkCode.instructions") })
+        /* @__PURE__ */ jsx7(Typography4, { variant: "h5", component: "h1", sx: { mb: 1, fontWeight: 600 }, children: t("checkCode.title") }),
+        /* @__PURE__ */ jsx7(Typography4, { variant: "body2", sx: { color: "grey.600" }, children: t("checkCode.instructions") })
       ] }),
       /* @__PURE__ */ jsxs4(Box4, { sx: { mb: 1 }, children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           Typography4,
           {
             variant: "body2",
@@ -1052,7 +1470,7 @@ var CheckCodeForm = ({ onNavigate, onError, searchParams, crudify: crudify3 }) =
             children: t("checkCode.codeLabel")
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           TextField4,
           {
             fullWidth: true,
@@ -1073,7 +1491,7 @@ var CheckCodeForm = ({ onNavigate, onError, searchParams, crudify: crudify3 }) =
           }
         )
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         Button4,
         {
           disabled: loading || code.length !== 6,
@@ -1083,33 +1501,60 @@ var CheckCodeForm = ({ onNavigate, onError, searchParams, crudify: crudify3 }) =
           variant: "contained",
           color: "primary",
           sx: { mt: 2, mb: 2 },
-          children: loading ? /* @__PURE__ */ jsx5(CircularProgress4, { size: 20 }) : t("checkCode.verifyButton")
+          children: loading ? /* @__PURE__ */ jsx7(CircularProgress4, { size: 20 }) : t("checkCode.verifyButton")
         }
       ),
-      /* @__PURE__ */ jsx5(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx5(Link4, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }) })
+      /* @__PURE__ */ jsx7(Box4, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx7(Link4, { sx: { cursor: "pointer" }, onClick: handleBack, variant: "body2", color: "secondary", children: t("common.back") }) })
     ] }),
-    /* @__PURE__ */ jsx5(Box4, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx5(Alert4, { sx: { mt: 2 }, severity: "error", children: error }, index)) })
+    /* @__PURE__ */ jsx7(Box4, { children: errors.length > 0 && errors.map((error, index) => /* @__PURE__ */ jsx7(Alert4, { sx: { mt: 2 }, severity: "error", children: error }, index)) })
   ] });
 };
 var CheckCodeForm_default = CheckCodeForm;
 
-// src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
-import { useMemo as useMemo2, useEffect as useEffect5, useState as useState6 } 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/components/CrudifyInitializer.tsx
+import { Box as Box5, CircularProgress as CircularProgress5, Alert as Alert5, Typography as Typography5 } from "@mui/material";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var CrudifyInitializer = ({
+  children,
+  fallback
+}) => {
+  const { isLoading, error, isInitialized } = useCrudify();
+  const { t } = useTranslation();
+  if (isLoading) {
+    return fallback || /* @__PURE__ */ jsxs5(
+      Box5,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "200px",
+          gap: 2
+        },
+        children: [
+          /* @__PURE__ */ jsx8(CircularProgress5, {}),
+          /* @__PURE__ */ jsx8(Typography5, { variant: "body2", color: "text.secondary", children: t("login.initializing") !== "login.initializing" ? t("login.initializing") : "Initializing..." })
+        ]
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx8(Alert5, { severity: "error", sx: { mt: 2 }, children: /* @__PURE__ */ jsxs5(Typography5, { variant: "body2", children: [
+      t("login.initializationError") !== "login.initializationError" ? t("login.initializationError") : "Initialization error",
+      ": ",
+      error
+    ] }) });
+  }
+  if (!isInitialized) {
+    return /* @__PURE__ */ jsx8(Alert5, { severity: "warning", sx: { mt: 2 }, children: /* @__PURE__ */ jsx8(Typography5, { variant: "body2", children: t("login.notInitialized") !== "login.notInitialized" ? t("login.notInitialized") : "System not initialized" }) });
+  }
+  return /* @__PURE__ */ jsx8(Fragment5, { children });
 };
 
 // src/components/CrudifyLogin/hooks/useCrudifyLogin.ts
-var globalInitPromise = null;
-var isGloballyInitialized = false;
-var lastApiKey = "";
-var lastEnv = "";
+import { useMemo as useMemo2 } from "react";
 var useCrudifyLogin = (config, _options = {}) => {
-  const [isInitialized, setIsInitialized] = useState6(false);
   const finalConfig = useMemo2(() => {
     const publicApiKey = config.publicApiKey || getCookie("publicApiKey") || null;
     const rawEnv = config.env || getCookie("environment") || "prod";
@@ -1130,269 +1575,61 @@ var useCrudifyLogin = (config, _options = {}) => {
       loginActions
     };
   }, [config]);
-  useEffect5(() => {
-    console.log("\u{1F527} useCrudifyLogin useEffect triggered:", {
-      publicApiKey: !!finalConfig.publicApiKey,
-      env: finalConfig.env,
-      hasPublicApiKey: !!finalConfig.publicApiKey,
-      isGloballyInitialized,
-      lastApiKey: lastApiKey ? lastApiKey.substring(0, 10) + "..." : "none",
-      lastEnv
-    });
-    if (!finalConfig.publicApiKey) {
-      console.log("\u274C No publicApiKey, skipping crudify initialization");
-      setIsInitialized(false);
-      return;
-    }
-    const currentApiKey = finalConfig.publicApiKey;
-    const currentEnv = finalConfig.env;
-    if (isGloballyInitialized && lastApiKey === currentApiKey && lastEnv === currentEnv) {
-      console.log("\u2705 Crudify already initialized with same config, reusing");
-      setIsInitialized(true);
-      return;
-    }
-    const initializeCrudify = async () => {
-      if (globalInitPromise) {
-        console.log("\u23F3 Waiting for existing initialization to complete");
-        try {
-          await globalInitPromise;
-          setIsInitialized(isGloballyInitialized);
-          return;
-        } catch (error) {
-          console.error("\u274C Previous initialization failed:", error);
-        }
-      }
-      globalInitPromise = (async () => {
-        try {
-          console.log("\u2699\uFE0F Configuring crudify with env:", currentEnv);
-          crudify.config(currentEnv);
-          console.log("\u{1F680} Initializing crudify with publicApiKey:", currentApiKey.substring(0, 10) + "...");
-          await crudify.init(currentApiKey, "none");
-          console.log("\u{1F9EA} Testing crudify initialization...");
-          await new Promise((resolve) => setTimeout(resolve, 50));
-          if (typeof crudify.transaction === "function" && typeof crudify.login === "function") {
-            console.log("\u2705 Crudify initialization verified and ready");
-            isGloballyInitialized = true;
-            lastApiKey = currentApiKey;
-            lastEnv = currentEnv;
-          } else {
-            console.log("\u274C Crudify methods not properly initialized");
-            isGloballyInitialized = false;
-          }
-          console.log("\u{1F50D} Crudify state after init:", {
-            hasTransaction: typeof crudify.transaction === "function",
-            hasLogin: typeof crudify.login === "function",
-            isGloballyInitialized,
-            crudifyObject: crudify
-          });
-        } catch (error) {
-          console.error("\u274C Error initializing crudify:", error);
-          isGloballyInitialized = false;
-          throw error;
-        }
-      })();
-      try {
-        await globalInitPromise;
-        setIsInitialized(isGloballyInitialized);
-      } catch (error) {
-        setIsInitialized(false);
-      } finally {
-        globalInitPromise = null;
-      }
-    };
-    initializeCrudify();
-  }, [finalConfig.publicApiKey, finalConfig.env]);
-  const crudifyMethods = useMemo2(() => {
-    console.log("\u{1F504} crudifyMethods useMemo triggered:", {
-      publicApiKey: !!finalConfig.publicApiKey,
-      isInitialized,
-      isGloballyInitialized,
-      crudifyLogin: typeof crudify.login,
-      crudifyTransaction: typeof crudify.transaction
-    });
-    if (!finalConfig.publicApiKey || !isInitialized || !isGloballyInitialized) {
-      console.log("\u274C Crudify not ready:", {
-        publicApiKey: !!finalConfig.publicApiKey,
-        isInitialized,
-        isGloballyInitialized
-      });
-      return null;
-    }
-    const methods = {
-      login: async (identifier, password) => {
-        console.log("\u{1F517} Wrapper login called, isGloballyInitialized:", isGloballyInitialized);
-        return await crudify.login(identifier, password);
-      },
-      transaction: async (data, options) => {
-        console.log("\u{1F517} Wrapper transaction called, isGloballyInitialized:", isGloballyInitialized);
-        return await crudify.transaction(data, options);
-      }
-    };
-    console.log("\u2705 Returning ready crudifyMethods:", {
-      hasLogin: typeof methods.login === "function",
-      hasTransaction: typeof methods.transaction === "function",
-      isInitialized,
-      isGloballyInitialized,
-      methods
-    });
-    return methods;
-  }, [finalConfig.publicApiKey, isInitialized, isGloballyInitialized]);
-  return { crudify: crudifyMethods };
+  return { config: finalConfig };
 };
 
 // src/components/CrudifyLogin/index.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var CrudifyLoginInternal = ({
-  config: providedConfig,
-  onNavigate,
+  onScreenChange,
+  onExternalNavigate,
   onLoginSuccess,
   onError,
-  initialScreen = "login",
-  redirectUrl = "/",
-  autoReadFromCookies = true
+  redirectUrl = "/"
 }) => {
   const { t } = useTranslation();
-  const [currentScreen, setCurrentScreen] = useState7(initialScreen);
-  const [searchParams, setSearchParams] = useState7();
-  console.log("\u{1F504} CrudifyLoginInternal RENDER:", { currentScreen, initialScreen });
-  React2.useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    if (initialScreen === "checkCode") {
-      const email = urlParams.get("email");
-      const code = urlParams.get("code");
-      console.log("\u{1F517} CheckCode link detected:", { email, code });
-      if (email) {
-        setSearchParams(urlParams);
-      }
-    }
-    if (initialScreen === "resetPassword") {
-      const link = urlParams.get("link");
-      console.log("\u{1F517} ResetPassword link detected:", { link });
-      if (link) {
-        setSearchParams(urlParams);
-      }
-    }
-  }, [initialScreen]);
-  const finalConfig = useMemo3(() => {
-    let cookieConfig = {};
-    if (autoReadFromCookies) {
-      try {
-        let logoValue;
-        let appColorsValue = { primaryColor: "#1066BA" };
-        try {
-          const encodedLogo = getCookie("logo");
-          if (encodedLogo) {
-            const decodedLogo = decodeURIComponent(encodedLogo);
-            if (decodedLogo.startsWith("http")) logoValue = decodedLogo;
-          }
-        } catch (e) {
-          console.warn("Could not decode logo from cookie, using default.", e);
-        }
-        try {
-          const colorsCookie = getCookie("colors");
-          if (colorsCookie) {
-            const decodedColorsString = decodeURIComponent(colorsCookie);
-            const parsedColors = JSON.parse(decodedColorsString);
-            appColorsValue = { ...appColorsValue, ...parsedColors };
-          }
-        } catch (e) {
-          console.error("Failed to parse colors from cookie, using defaults.", e);
-        }
-        cookieConfig = {
-          logo: logoValue,
-          colors: appColorsValue
-        };
-      } catch (e) {
-        console.error("Error reading configuration from cookies:", e);
-      }
-    }
-    return {
-      publicApiKey: providedConfig?.publicApiKey,
-      env: providedConfig?.env,
-      appName: providedConfig?.appName,
-      logo: providedConfig?.logo || cookieConfig.logo,
-      colors: { ...cookieConfig.colors, ...providedConfig?.colors },
-      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("?");
-    if (queryString) {
-      setSearchParams(new URLSearchParams(queryString));
-    } else {
-      setSearchParams(void 0);
-    }
-    let newScreen = "login";
-    if (basePath.includes("/forgotPassword")) {
-      newScreen = "forgotPassword";
-    } else if (basePath.includes("/checkCode")) {
-      newScreen = "checkCode";
-    } else if (basePath.includes("/resetPassword")) {
-      newScreen = "resetPassword";
-    } else {
-      newScreen = "login";
-    }
-    console.log("\u{1F3AF} INTERNAL Setting currentScreen from", currentScreen, "to", newScreen);
-    setCurrentScreen(newScreen);
-    console.log("\u{1F512} All navigation handled internally - no external calls");
-  };
-  const notifyExternal = (path, reason) => {
-    console.log(`\u{1F4E2} Notifying external: ${reason} - ${path}`);
-    onNavigate?.(path);
+  const { state, setScreen } = useLoginState();
+  const handleScreenChange = (screen2, params) => {
+    setScreen(screen2, params);
+    onScreenChange?.(screen2, params);
   };
   const renderCurrentForm = () => {
-    console.log("\u{1F3A8} renderCurrentForm for screen:", currentScreen);
     const commonProps = {
-      config: finalConfig,
-      onNavigate: handleNavigate,
-      // Navegación interna
+      onScreenChange: handleScreenChange,
+      onExternalNavigate,
       onError,
-      redirectUrl,
-      crudify: crudify3
-      // Pasar la instancia compartida de crudify
+      redirectUrl
     };
-    switch (currentScreen) {
+    switch (state.currentScreen) {
       case "forgotPassword":
-        console.log("\u{1F4CB} Rendering ForgotPasswordForm");
-        return /* @__PURE__ */ jsx6(ForgotPasswordForm_default, { ...commonProps });
+        return /* @__PURE__ */ jsx9(ForgotPasswordForm_default, { ...commonProps });
       case "checkCode":
-        console.log("\u{1F522} Rendering CheckCodeForm");
-        return /* @__PURE__ */ jsx6(CheckCodeForm_default, { ...commonProps, searchParams });
+        return /* @__PURE__ */ jsx9(CheckCodeForm_default, { ...commonProps });
       case "resetPassword":
-        console.log("\u{1F510} Rendering ResetPasswordForm");
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx9(
           ResetPasswordForm_default,
           {
             ...commonProps,
-            searchParams,
             onResetSuccess: () => {
-              notifyExternal(redirectUrl, "Password reset successful");
+              handleScreenChange("login");
             }
           }
         );
       default:
-        console.log("\u{1F511} Rendering LoginForm");
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx9(
           LoginForm_default,
           {
             ...commonProps,
-            onLoginSuccess: (result) => {
-              if (onLoginSuccess) {
-                onLoginSuccess(result);
-              }
-              notifyExternal(redirectUrl, "Login successful");
-            }
+            onLoginSuccess
           }
         );
     }
   };
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx6(Box5, { sx: { display: "flex", justifyContent: "center", mb: 3 }, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6(CrudifyInitializer, { children: [
+    /* @__PURE__ */ jsx9(Box6, { sx: { display: "flex", justifyContent: "center", mb: 3 }, children: /* @__PURE__ */ jsx9(
       "img",
       {
-        src: finalConfig.logo || "/nocios-default.png",
+        src: state.config.logo || "/nocios-default.png",
         alt: t("login.logoAlt"),
         style: {
           width: "100%",
@@ -1405,17 +1642,17 @@ var CrudifyLoginInternal = ({
         }
       }
     ) }),
-    finalConfig.appName && /* @__PURE__ */ jsx6(
-      Typography5,
+    state.config.appName && /* @__PURE__ */ jsx9(
+      Typography6,
       {
         variant: "h6",
         component: "h1",
         sx: {
           textAlign: "center",
           mb: 2,
-          color: finalConfig.colors?.primaryColor || "#1066BA"
+          color: state.config.colors?.primaryColor || "#1066BA"
         },
-        children: finalConfig.appName
+        children: state.config.appName
       }
     ),
     renderCurrentForm()
@@ -1426,22 +1663,33 @@ var CrudifyLogin = ({
   translationsUrl,
   language = "en",
   config = {},
+  initialScreen = "login",
+  autoReadFromCookies = true,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx6(
+  const { config: finalConfig } = useCrudifyLogin(config);
+  return /* @__PURE__ */ jsx9(
     I18nProvider,
     {
       translations,
       translationsUrl,
       language,
-      children: /* @__PURE__ */ jsx6(CrudifyLoginInternal, { config, ...props })
+      children: /* @__PURE__ */ jsx9(CrudifyProvider, { config: finalConfig, children: /* @__PURE__ */ jsx9(
+        LoginStateProvider,
+        {
+          config,
+          initialScreen,
+          autoReadFromCookies,
+          children: /* @__PURE__ */ jsx9(CrudifyLoginInternal, { config, ...props })
+        }
+      ) })
     }
   );
 };
 var CrudifyLogin_default = CrudifyLogin;
 
 // src/hooks/useUserProfile.ts
-import { useState as useState8, useEffect as useEffect6, useCallback, useRef as useRef2 } from "react";
+import { useState as useState6, useEffect as useEffect7, useCallback, useRef as useRef2 } from "react";
 import crudify2 from "@nocios/crudify-browser";
 
 // src/utils/jwtUtils.ts
@@ -1487,9 +1735,9 @@ var isTokenExpired = (token) => {
 // src/hooks/useUserProfile.ts
 var useUserProfile = (options = {}) => {
   const { autoFetch = true, retryOnError = false, maxRetries = 3 } = options;
-  const [userProfile, setUserProfile] = useState8(null);
-  const [loading, setLoading] = useState8(false);
-  const [error, setError] = useState8(null);
+  const [userProfile, setUserProfile] = useState6(null);
+  const [loading, setLoading] = useState6(false);
+  const [error, setError] = useState6(null);
   const abortControllerRef = useRef2(null);
   const mountedRef = useRef2(true);
   const requestIdRef = useRef2(0);
@@ -1535,11 +1783,11 @@ var useUserProfile = (options = {}) => {
       }
     } catch (err) {
       if (currentRequestId === requestIdRef.current && mountedRef.current) {
-        if (err.name === "AbortError") {
+        const error2 = err;
+        if (error2.name === "AbortError") {
           return;
         }
-        console.error("Error loading user profile:", err);
-        const shouldRetry = retryOnError && retryCountRef.current < maxRetries && (err.message?.includes("Network Error") || err.message?.includes("Failed to fetch"));
+        const shouldRetry = retryOnError && retryCountRef.current < maxRetries && (error2.message?.includes("Network Error") || error2.message?.includes("Failed to fetch"));
         if (shouldRetry) {
           retryCountRef.current++;
           setTimeout(() => {
@@ -1561,12 +1809,12 @@ var useUserProfile = (options = {}) => {
       }
     }
   }, [retryOnError, maxRetries]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (autoFetch) {
       refreshProfile();
     }
   }, [autoFetch, refreshProfile]);
-  useEffect6(() => {
+  useEffect7(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -1586,11 +1834,18 @@ var useUserProfile = (options = {}) => {
 };
 export {
   CrudifyLogin_default as CrudifyLogin,
+  ERROR_CODES,
+  ERROR_SEVERITY_MAP,
   default2 as crudify,
   decodeJwtSafely,
   getCookie,
   getCurrentUserEmail,
+  getErrorMessage,
+  handleCrudifyError,
   isTokenExpired,
+  parseApiError,
+  parseJavaScriptError,
+  parseTransactionError,
   secureLocalStorage,
   secureSessionStorage,
   useCrudifyLogin,