@thetechfossil/auth2 1.2.14 → 1.2.16

package/dist/index.js

@@ -3,21 +3,20 @@
 
 var axios = require('axios');
 var upfiles = require('@thetechfossil/upfiles');
-var React3 = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var axios__default = /*#__PURE__*/_interopDefault(axios);
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw new Error('Dynamic require of "' + x + '" is not supported');
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
 });
 var __export = (target, all) => {
   for (var name in all)
@@ -75,6 +74,11 @@ var HttpClient = class {
             return Promise.reject(refreshError);
           }
         }
+        if (error.response && error.response.data && error.response.data.message) {
+          const customError = new Error(error.response.data.message);
+          customError.response = error.response;
+          return Promise.reject(customError);
+        }
         return Promise.reject(error);
       }
     );
@@ -194,8 +198,7 @@ var AuthService = class {
     return this.token;
   }
   getCurrentUser() {
-    if (!this.token)
-      return null;
+    if (!this.token) return null;
     try {
       const payload = JSON.parse(atob(this.token.split(".")[1]));
       return payload.user || null;
@@ -206,8 +209,7 @@ var AuthService = class {
   }
   // CSRF Token Management
   async refreshCsrfToken() {
-    if (!this.config.csrfEnabled)
-      return;
+    if (!this.config.csrfEnabled) return;
     try {
       const response = await this.httpClient.get("/api/v1/auth/csrf-token");
       if (response.csrfToken) {
@@ -513,11 +515,11 @@ var AuthService = class {
     return response;
   }
 };
-var ThemeContext = React3.createContext({ theme: "light", mounted: false });
+var ThemeContext = React__default.default.createContext({ theme: "light", mounted: false });
 function AuthThemeProvider({ children }) {
-  const [theme, setTheme] = React3.useState("light");
-  const [mounted, setMounted] = React3.useState(false);
-  React3.useEffect(() => {
+  const [theme, setTheme] = React.useState("light");
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
     const detectTheme = () => {
       const htmlElement = document.documentElement;
       const bodyElement = document.body;
@@ -562,9 +564,9 @@ function AuthThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, mounted }, children });
 }
 function useAuthTheme() {
-  return React3.useContext(ThemeContext);
+  return React.useContext(ThemeContext);
 }
-var AuthContext = React3.createContext(void 0);
+var AuthContext = React.createContext(void 0);
 var AuthProvider = ({ children, config }) => {
   const authConfig = {
     baseUrl: config?.baseUrl || (typeof window !== "undefined" ? process.env.NEXT_PUBLIC_AUTH_API_URL || process.env.REACT_APP_AUTH_API_URL || "http://localhost:7000" : "http://localhost:7000"),
@@ -572,29 +574,35 @@ var AuthProvider = ({ children, config }) => {
     csrfEnabled: config?.csrfEnabled !== void 0 ? config.csrfEnabled : true,
     upfilesConfig: config?.upfilesConfig
   };
-  const [authService] = React3.useState(() => new AuthService(authConfig));
-  const [user, setUser] = React3.useState(null);
-  const [isLoaded, setIsLoaded] = React3.useState(false);
-  const [loading, setLoading] = React3.useState(false);
-  const checkAuthStatus = React3.useCallback(async () => {
+  const [authService] = React.useState(() => new AuthService(authConfig));
+  const [user, setUser] = React.useState(null);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const checkAuthStatus = React.useCallback(async () => {
     const authenticated = authService.isAuthenticated();
     if (authenticated) {
       try {
-        const currentUser = authService.getCurrentUser();
-        setUser(currentUser);
+        const freshUser = await authService.getProfile();
+        setUser(freshUser);
       } catch (error) {
-        console.error("Failed to get current user:", error);
-        setUser(null);
+        console.error("Failed to fetch fresh user profile, falling back to token:", error);
+        try {
+          const currentUser = authService.getCurrentUser();
+          setUser(currentUser);
+        } catch (fallbackError) {
+          console.error("Failed to get current user from token:", fallbackError);
+          setUser(null);
+        }
       }
     } else {
       setUser(null);
     }
     setIsLoaded(true);
   }, [authService]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     checkAuthStatus();
   }, [checkAuthStatus]);
-  const signIn = React3.useCallback(async (data) => {
+  const signIn = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.login(data);
@@ -606,7 +614,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const signUp = React3.useCallback(async (data) => {
+  const signUp = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.register(data);
@@ -615,7 +623,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const signOut = React3.useCallback(async () => {
+  const signOut = React.useCallback(async () => {
     setLoading(true);
     try {
       await authService.logout();
@@ -624,7 +632,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const verify = React3.useCallback(async (data) => {
+  const verify = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.verify(data);
@@ -636,7 +644,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const verifyEmailToken = React3.useCallback(async (token) => {
+  const verifyEmailToken = React.useCallback(async (token) => {
     setLoading(true);
     try {
       const response = await authService.verifyEmailToken(token);
@@ -648,7 +656,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const updateProfile = React3.useCallback(async (data) => {
+  const updateProfile = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.updateProfile(data);
@@ -660,7 +668,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const getProfile = React3.useCallback(async () => {
+  const getProfile = React.useCallback(async () => {
     setLoading(true);
     try {
       const userData = await authService.getProfile();
@@ -670,13 +678,13 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const signInWithOAuth = React3.useCallback((provider) => {
+  const signInWithOAuth = React.useCallback((provider) => {
     authService.loginWithOAuth(provider);
   }, [authService]);
-  const linkOAuthProvider = React3.useCallback((provider) => {
+  const linkOAuthProvider = React.useCallback((provider) => {
     authService.linkOAuthProvider(provider);
   }, [authService]);
-  const unlinkOAuthProvider = React3.useCallback(async (provider) => {
+  const unlinkOAuthProvider = React.useCallback(async (provider) => {
     setLoading(true);
     try {
       return await authService.unlinkOAuthProvider(provider);
@@ -684,7 +692,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const forgotPassword = React3.useCallback(async (email) => {
+  const forgotPassword = React.useCallback(async (email) => {
     setLoading(true);
     try {
       return await authService.forgotPassword(email);
@@ -692,7 +700,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const resetPassword = React3.useCallback(async (token, password) => {
+  const resetPassword = React.useCallback(async (token, password) => {
     setLoading(true);
     try {
       return await authService.resetPassword(token, password);
@@ -700,7 +708,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const changePassword = React3.useCallback(async (oldPassword, newPassword) => {
+  const changePassword = React.useCallback(async (oldPassword, newPassword) => {
     setLoading(true);
     try {
       return await authService.changePassword(oldPassword, newPassword);
@@ -708,7 +716,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const updateAvatar = React3.useCallback(async (avatar) => {
+  const updateAvatar = React.useCallback(async (avatar) => {
     setLoading(true);
     try {
       const response = await authService.updateAvatar(avatar);
@@ -720,7 +728,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const uploadAndUpdateAvatar = React3.useCallback(async (file) => {
+  const uploadAndUpdateAvatar = React.useCallback(async (file) => {
     setLoading(true);
     try {
       const response = await authService.uploadAndUpdateAvatar(file);
@@ -732,7 +740,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const requestEmailChange = React3.useCallback(async (newEmail) => {
+  const requestEmailChange = React.useCallback(async (newEmail) => {
     setLoading(true);
     try {
       return await authService.requestEmailChange(newEmail);
@@ -740,7 +748,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const verifyEmailChange = React3.useCallback(async (token) => {
+  const verifyEmailChange = React.useCallback(async (token) => {
     setLoading(true);
     try {
       const response = await authService.verifyEmailChange(token);
@@ -752,7 +760,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const generate2FA = React3.useCallback(async () => {
+  const generate2FA = React.useCallback(async () => {
     setLoading(true);
     try {
       return await authService.generate2FA();
@@ -760,7 +768,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const enable2FA = React3.useCallback(async (token) => {
+  const enable2FA = React.useCallback(async (token) => {
     setLoading(true);
     try {
       return await authService.enable2FA(token);
@@ -768,7 +776,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const disable2FA = React3.useCallback(async (token) => {
+  const disable2FA = React.useCallback(async (token) => {
     setLoading(true);
     try {
       return await authService.disable2FA(token);
@@ -776,7 +784,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const validate2FA = React3.useCallback(async (token) => {
+  const validate2FA = React.useCallback(async (token) => {
     setLoading(true);
     try {
       return await authService.validate2FA(token);
@@ -784,7 +792,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const getSessions = React3.useCallback(async () => {
+  const getSessions = React.useCallback(async () => {
     setLoading(true);
     try {
       return await authService.getSessions();
@@ -792,7 +800,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const revokeSession = React3.useCallback(async (sessionId) => {
+  const revokeSession = React.useCallback(async (sessionId) => {
     setLoading(true);
     try {
       return await authService.revokeSession(sessionId);
@@ -800,7 +808,7 @@ var AuthProvider = ({ children, config }) => {
       setLoading(false);
     }
   }, [authService]);
-  const revokeAllSessions = React3.useCallback(async () => {
+  const revokeAllSessions = React.useCallback(async () => {
     setLoading(true);
     try {
       const response = await authService.revokeAllSessions();
@@ -844,18 +852,18 @@ var AuthProvider = ({ children, config }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(AuthThemeProvider, { children }) });
 };
 var useAuth = () => {
-  const context = React3.useContext(AuthContext);
+  const context = React.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
 var useAuth2 = (config) => {
-  const [authService] = React3.useState(() => new AuthService(config));
-  const [user, setUser] = React3.useState(null);
-  const [isAuthenticated, setIsAuthenticated] = React3.useState(false);
-  const [loading, setLoading] = React3.useState(true);
-  const checkAuthStatus = React3.useCallback(() => {
+  const [authService] = React.useState(() => new AuthService(config));
+  const [user, setUser] = React.useState(null);
+  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
+  const checkAuthStatus = React.useCallback(() => {
     const authenticated = authService.isAuthenticated();
     setIsAuthenticated(authenticated);
     if (authenticated) {
@@ -866,10 +874,10 @@ var useAuth2 = (config) => {
     }
     setLoading(false);
   }, [authService]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     checkAuthStatus();
   }, [checkAuthStatus]);
-  const register = React3.useCallback(async (data) => {
+  const register = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.register(data);
@@ -878,7 +886,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const login = React3.useCallback(async (data) => {
+  const login = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.login(data);
@@ -891,7 +899,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const verify = React3.useCallback(async (data) => {
+  const verify = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.verify(data);
@@ -904,7 +912,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const verifyEmailToken = React3.useCallback(async (token) => {
+  const verifyEmailToken = React.useCallback(async (token) => {
     setLoading(true);
     try {
       const response = await authService.verifyEmailToken(token);
@@ -917,7 +925,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const logout = React3.useCallback(async () => {
+  const logout = React.useCallback(async () => {
     setLoading(true);
     try {
       await authService.logout();
@@ -927,7 +935,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const updateProfile = React3.useCallback(async (data) => {
+  const updateProfile = React.useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.updateProfile(data);
@@ -939,7 +947,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getProfile = React3.useCallback(async () => {
+  const getProfile = React.useCallback(async () => {
     setLoading(true);
     try {
       const userData = await authService.getProfile();
@@ -949,7 +957,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getAllUsers = React3.useCallback(async () => {
+  const getAllUsers = React.useCallback(async () => {
     setLoading(true);
     try {
       return await authService.getAllUsers();
@@ -957,7 +965,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getUserById = React3.useCallback(async (id) => {
+  const getUserById = React.useCallback(async (id) => {
     setLoading(true);
     try {
       return await authService.getUserById(id);
@@ -965,7 +973,7 @@ var useAuth2 = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const uploadAndUpdateAvatar = React3.useCallback(async (file) => {
+  const uploadAndUpdateAvatar = React.useCallback(async (file) => {
     setLoading(true);
     try {
       const response = await authService.uploadAndUpdateAvatar(file);
@@ -1043,7 +1051,7 @@ try {
 } catch (error) {
   console.warn("react-phone-number-input not available, using fallback");
 }
-var CustomPhoneInput = React3__default.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CustomPhoneInput = React__default.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
     ...props,
@@ -1062,8 +1070,8 @@ var PhoneInput = ({
   style = {}
 }) => {
   const colors = useThemeColors();
-  const [defaultCountry, setDefaultCountry] = React3.useState("US");
-  const styleContent = React3.useMemo(() => `
+  const [defaultCountry, setDefaultCountry] = React.useState("US");
+  const styleContent = React.useMemo(() => `
     .PhoneInput {
       display: flex;
       align-items: center;
@@ -1175,7 +1183,7 @@ var PhoneInput = ({
       opacity: 0.6;
     }
   `, [colors]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const detectCountry = async () => {
       try {
         const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -1232,7 +1240,7 @@ var PhoneInput = ({
     };
     detectCountry();
   }, []);
-  const handleChange = React3.useMemo(() => (val) => {
+  const handleChange = React.useMemo(() => (val) => {
     onChange(val || "");
   }, [onChange]);
   if (!PhoneInputWithCountry) {
@@ -1296,15 +1304,15 @@ var LoginForm = ({
   showOAuthButtons = true
 }) => {
   const colors = useThemeColors();
-  const [email, setEmail] = React3.useState("");
-  const [phoneNumber, setPhoneNumber] = React3.useState("");
-  const [usePhone, setUsePhone] = React3.useState(false);
-  const [password, setPassword] = React3.useState("");
-  const [usePassword, setUsePassword] = React3.useState(false);
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [rememberMe, setRememberMe] = React3.useState(false);
+  const [email, setEmail] = React.useState("");
+  const [phoneNumber, setPhoneNumber] = React.useState("");
+  const [usePhone, setUsePhone] = React.useState(false);
+  const [password, setPassword] = React.useState("");
+  const [usePassword, setUsePassword] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [rememberMe, setRememberMe] = React.useState(false);
   const { login } = useAuth2({
     baseUrl: config?.baseUrl || "http://localhost:7000"
   });
@@ -1758,33 +1766,25 @@ var RegisterForm = ({
   invitationToken
 }) => {
   const colors = useThemeColors();
-  const [name, setName] = React3.useState("");
-  const [email, setEmail] = React3.useState("");
-  const [phoneNumber, setPhoneNumber] = React3.useState("");
-  const [password, setPassword] = React3.useState("");
-  const [confirmPassword, setConfirmPassword] = React3.useState("");
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  React3.useState(false);
-  React3.useState(false);
+  const [name, setName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [phoneNumber, setPhoneNumber] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = React.useState(false);
   const getPasswordStrength = (pwd) => {
-    if (!pwd)
-      return { strength: "weak", score: 0, label: "" };
+    if (!pwd) return { strength: "weak", score: 0, label: "" };
     let score = 0;
-    if (pwd.length >= 6)
-      score++;
-    if (pwd.length >= 8)
-      score++;
-    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
-      score++;
-    if (/\d/.test(pwd))
-      score++;
-    if (/[^a-zA-Z\d]/.test(pwd))
-      score++;
-    if (score <= 2)
-      return { strength: "weak", score, label: "Weak" };
-    if (score <= 3)
-      return { strength: "medium", score, label: "Medium" };
+    if (pwd.length >= 6) score++;
+    if (pwd.length >= 8) score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++;
+    if (/\d/.test(pwd)) score++;
+    if (/[^a-zA-Z\d]/.test(pwd)) score++;
+    if (score <= 2) return { strength: "weak", score, label: "Weak" };
+    if (score <= 3) return { strength: "medium", score, label: "Medium" };
     return { strength: "strong", score, label: "Strong" };
   };
   getPasswordStrength(password);
@@ -1836,10 +1836,8 @@ var RegisterForm = ({
           password,
           frontendBaseUrl: typeof window !== "undefined" ? process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || window.location.origin : void 0
         };
-        if (email)
-          registerData.email = email;
-        if (phoneNumber)
-          registerData.phoneNumber = phoneNumber;
+        if (email) registerData.email = email;
+        if (phoneNumber) registerData.phoneNumber = phoneNumber;
         const response = await register(registerData);
         if (response.success) {
           onRegisterSuccess?.();
@@ -2232,11 +2230,11 @@ var OtpForm = ({
   baseUrl
 }) => {
   const colors = useThemeColors();
-  const [otp, setOtp] = React3.useState("");
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [resendCooldown, setResendCooldown] = React3.useState(0);
-  const [resendLoading, setResendLoading] = React3.useState(false);
+  const [otp, setOtp] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [resendCooldown, setResendCooldown] = React.useState(0);
+  const [resendLoading, setResendLoading] = React.useState(false);
   const { verify, login } = useAuth2({
     baseUrl: baseUrl || process.env.NEXT_PUBLIC_AUTH_API_URL || "http://localhost:7000"
   });
@@ -2269,8 +2267,7 @@ var OtpForm = ({
     }
   };
   const handleResendOtp = async () => {
-    if (resendCooldown > 0 || resendLoading)
-      return;
+    if (resendCooldown > 0 || resendLoading) return;
     setResendLoading(true);
     setError(null);
     try {
@@ -2448,9 +2445,9 @@ var AuthFlow = ({
   initialStep = "login",
   showTitle = true
 }) => {
-  const [step, setStep] = React3.useState(initialStep);
-  const [email, setEmail] = React3.useState("");
-  const [message, setMessage] = React3.useState(null);
+  const [step, setStep] = React.useState(initialStep);
+  const [email, setEmail] = React.useState("");
+  const [message, setMessage] = React.useState(null);
   const handleLoginSuccess = (email2, needsOtpVerification) => {
     setEmail(email2);
     if (needsOtpVerification) {
@@ -2585,13 +2582,13 @@ var EmailVerificationPage = ({
   onVerificationError,
   baseUrl
 }) => {
-  const [isLoading, setIsLoading] = React3.useState(true);
-  const [message, setMessage] = React3.useState("");
-  const [isSuccess, setIsSuccess] = React3.useState(false);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [message, setMessage] = React.useState("");
+  const [isSuccess, setIsSuccess] = React.useState(false);
   const { verifyEmailToken } = useAuth2({
     baseUrl: baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
   });
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const verifyEmail = async () => {
       if (!token) {
         setIsLoading(false);
@@ -2696,7 +2693,7 @@ var EmailVerificationPage = ({
     ] })
   ] }) });
 };
-var ThemeWrapper = React3.forwardRef(
+var ThemeWrapper = React.forwardRef(
   ({ children, className = "", style }, ref) => {
     const { theme, mounted } = useAuthTheme();
     if (!mounted) {
@@ -2709,18 +2706,18 @@ ThemeWrapper.displayName = "ThemeWrapper";
 var SignIn = ({ redirectUrl, appearance }) => {
   const { signIn, isSignedIn, loading: authLoading } = useAuth();
   const colors = useThemeColors();
-  const [email, setEmail] = React3.useState("");
-  const [phoneNumber, setPhoneNumber] = React3.useState("");
-  const [password, setPassword] = React3.useState("");
-  const [otp, setOtp] = React3.useState("");
-  const [usePassword, setUsePassword] = React3.useState(false);
-  const [usePhone, setUsePhone] = React3.useState(false);
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [needsOtp, setNeedsOtp] = React3.useState(false);
-  const [success, setSuccess] = React3.useState(null);
-  React3.useEffect(() => {
+  const [email, setEmail] = React.useState("");
+  const [phoneNumber, setPhoneNumber] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [otp, setOtp] = React.useState("");
+  const [usePassword, setUsePassword] = React.useState(false);
+  const [usePhone, setUsePhone] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [needsOtp, setNeedsOtp] = React.useState(false);
+  const [success, setSuccess] = React.useState(null);
+  React.useEffect(() => {
     if (isSignedIn && redirectUrl) {
       const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -3111,16 +3108,16 @@ var SignIn = ({ redirectUrl, appearance }) => {
 var SignUp = ({ redirectUrl, appearance }) => {
   const { signUp, isSignedIn } = useAuth();
   const colors = useThemeColors();
-  const [name, setName] = React3.useState("");
-  const [email, setEmail] = React3.useState("");
-  const [phoneNumber, setPhoneNumber] = React3.useState("");
-  const [password, setPassword] = React3.useState("");
-  const [confirmPassword, setConfirmPassword] = React3.useState("");
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [success, setSuccess] = React3.useState(null);
-  React3.useEffect(() => {
+  const [name, setName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [phoneNumber, setPhoneNumber] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(null);
+  React.useEffect(() => {
     if (isSignedIn && redirectUrl) {
       const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_REGISTER || process.env.REACT_APP_AUTH_REDIRECT_AFTER_REGISTER || "/dashboard";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -3128,23 +3125,15 @@ var SignUp = ({ redirectUrl, appearance }) => {
     }
   }, [isSignedIn, redirectUrl]);
   const getPasswordStrength = (pwd, colors2) => {
-    if (!pwd)
-      return { strength: "weak", color: colors2.borderSecondary };
+    if (!pwd) return { strength: "weak", color: colors2.borderSecondary };
     let score = 0;
-    if (pwd.length >= 6)
-      score++;
-    if (pwd.length >= 8)
-      score++;
-    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
-      score++;
-    if (/\d/.test(pwd))
-      score++;
-    if (/[^a-zA-Z\d]/.test(pwd))
-      score++;
-    if (score <= 2)
-      return { strength: "weak", color: colors2.errorText };
-    if (score <= 3)
-      return { strength: "medium", color: colors2.warningText || "#fa4" };
+    if (pwd.length >= 6) score++;
+    if (pwd.length >= 8) score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++;
+    if (/\d/.test(pwd)) score++;
+    if (/[^a-zA-Z\d]/.test(pwd)) score++;
+    if (score <= 2) return { strength: "weak", color: colors2.errorText };
+    if (score <= 3) return { strength: "medium", color: colors2.warningText || "#fa4" };
     return { strength: "strong", color: colors2.successText };
   };
   const passwordStrength = getPasswordStrength(password, colors);
@@ -3165,10 +3154,8 @@ var SignUp = ({ redirectUrl, appearance }) => {
     }
     try {
       const signUpData = { name, password };
-      if (email)
-        signUpData.email = email;
-      if (phoneNumber)
-        signUpData.phoneNumber = phoneNumber;
+      if (email) signUpData.email = email;
+      if (phoneNumber) signUpData.phoneNumber = phoneNumber;
       const response = await signUp(signUpData);
       if (response.success) {
         setSuccess("Registration successful! Please check your email to verify your account.");
@@ -3484,7 +3471,7 @@ var SignUp = ({ redirectUrl, appearance }) => {
 };
 var SignOut = ({ redirectUrl }) => {
   const { signOut } = useAuth();
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const performSignOut = async () => {
       await signOut();
       const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
@@ -3498,9 +3485,9 @@ var SignOut = ({ redirectUrl }) => {
 var UserButton = ({ showName = false, appearance }) => {
   const { user, signOut } = useAuth();
   const colors = useThemeColors();
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const dropdownRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const dropdownRef = React.useRef(null);
+  React.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -3509,8 +3496,7 @@ var UserButton = ({ showName = false, appearance }) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  if (!user)
-    return null;
+  if (!user) return null;
   const getInitials = (name) => {
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
   };
@@ -3544,7 +3530,19 @@ var UserButton = ({ showName = false, appearance }) => {
           e.currentTarget.style.backgroundColor = "transparent";
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          user.avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: user.avatar,
+              alt: user.name,
+              style: {
+                width: "36px",
+                height: "36px",
+                borderRadius: "50%",
+                objectFit: "cover"
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
             width: "36px",
             height: "36px",
             borderRadius: "50%",
@@ -3581,7 +3579,19 @@ var UserButton = ({ showName = false, appearance }) => {
         alignItems: "center",
         gap: "12px"
       }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        user.avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: user.avatar,
+            alt: user.name,
+            style: {
+              width: "48px",
+              height: "48px",
+              borderRadius: "50%",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           width: "48px",
           height: "48px",
           borderRadius: "50%",
@@ -3646,7 +3656,7 @@ var ProtectedRoute = ({
   redirectTo
 }) => {
   const { isSignedIn, isLoaded } = useAuth();
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (isLoaded && !isSignedIn) {
       const loginPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -3671,7 +3681,7 @@ var PublicRoute = ({
   redirectTo
 }) => {
   const { isSignedIn, isLoaded } = useAuth();
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (isLoaded && isSignedIn) {
       const dashboardPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
       const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
@@ -3693,9 +3703,9 @@ var PublicRoute = ({
 };
 var VerifyEmail = ({ token, onSuccess, onError }) => {
   const { verifyEmailToken } = useAuth();
-  const [status, setStatus] = React3.useState("loading");
-  const [message, setMessage] = React3.useState("");
-  React3.useEffect(() => {
+  const [status, setStatus] = React.useState("loading");
+  const [message, setMessage] = React.useState("");
+  React.useEffect(() => {
     const verify = async () => {
       const verifyToken = token || (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") : null);
       if (!verifyToken) {
@@ -3829,10 +3839,10 @@ var VerifyEmail = ({ token, onSuccess, onError }) => {
 };
 var ForgotPassword = ({ appearance }) => {
   const { forgotPassword } = useAuth();
-  const [email, setEmail] = React3.useState("");
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [success, setSuccess] = React3.useState(null);
+  const [email, setEmail] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(null);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -3971,14 +3981,14 @@ var ForgotPassword = ({ appearance }) => {
 };
 var ResetPassword = ({ token, appearance }) => {
   const { resetPassword } = useAuth();
-  const [resetToken, setResetToken] = React3.useState(token || "");
-  const [password, setPassword] = React3.useState("");
-  const [confirmPassword, setConfirmPassword] = React3.useState("");
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [success, setSuccess] = React3.useState(false);
-  React3.useEffect(() => {
+  const [resetToken, setResetToken] = React.useState(token || "");
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(false);
+  React.useEffect(() => {
     if (!resetToken && typeof window !== "undefined") {
       const urlToken = new URLSearchParams(window.location.search).get("token");
       if (urlToken) {
@@ -3987,23 +3997,15 @@ var ResetPassword = ({ token, appearance }) => {
     }
   }, [resetToken]);
   const getPasswordStrength = (pwd) => {
-    if (!pwd)
-      return { strength: "weak", color: "#ddd" };
+    if (!pwd) return { strength: "weak", color: "#ddd" };
     let score = 0;
-    if (pwd.length >= 6)
-      score++;
-    if (pwd.length >= 8)
-      score++;
-    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
-      score++;
-    if (/\d/.test(pwd))
-      score++;
-    if (/[^a-zA-Z\d]/.test(pwd))
-      score++;
-    if (score <= 2)
-      return { strength: "weak", color: "#f44" };
-    if (score <= 3)
-      return { strength: "medium", color: "#fa4" };
+    if (pwd.length >= 6) score++;
+    if (pwd.length >= 8) score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++;
+    if (/\d/.test(pwd)) score++;
+    if (/[^a-zA-Z\d]/.test(pwd)) score++;
+    if (score <= 2) return { strength: "weak", color: "#f44" };
+    if (score <= 3) return { strength: "medium", color: "#fa4" };
     return { strength: "strong", color: "#4f4" };
   };
   const passwordStrength = getPasswordStrength(password);
@@ -4233,31 +4235,23 @@ var ResetPassword = ({ token, appearance }) => {
 };
 var ChangePassword = ({ onSuccess, appearance }) => {
   const { changePassword } = useAuth();
-  const [oldPassword, setOldPassword] = React3.useState("");
-  const [newPassword, setNewPassword] = React3.useState("");
-  const [confirmPassword, setConfirmPassword] = React3.useState("");
-  const [showPasswords, setShowPasswords] = React3.useState(false);
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [success, setSuccess] = React3.useState(false);
+  const [oldPassword, setOldPassword] = React.useState("");
+  const [newPassword, setNewPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [showPasswords, setShowPasswords] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(false);
   const getPasswordStrength = (pwd) => {
-    if (!pwd)
-      return { strength: "weak", color: "#ddd" };
+    if (!pwd) return { strength: "weak", color: "#ddd" };
     let score = 0;
-    if (pwd.length >= 6)
-      score++;
-    if (pwd.length >= 8)
-      score++;
-    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
-      score++;
-    if (/\d/.test(pwd))
-      score++;
-    if (/[^a-zA-Z\d]/.test(pwd))
-      score++;
-    if (score <= 2)
-      return { strength: "weak", color: "#f44" };
-    if (score <= 3)
-      return { strength: "medium", color: "#fa4" };
+    if (pwd.length >= 6) score++;
+    if (pwd.length >= 8) score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++;
+    if (/\d/.test(pwd)) score++;
+    if (/[^a-zA-Z\d]/.test(pwd)) score++;
+    if (score <= 2) return { strength: "weak", color: "#f44" };
+    if (score <= 3) return { strength: "medium", color: "#fa4" };
     return { strength: "strong", color: "#4f4" };
   };
   const passwordStrength = getPasswordStrength(newPassword);
@@ -4488,31 +4482,21 @@ var AvatarUploader = ({
   buttonText = "Upload Avatar"
 }) => {
   const { uploadAndUpdateAvatar } = useAuth();
-  const [open, setOpen] = React3.useState(false);
-  const [uploading, setUploading] = React3.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [uploading, setUploading] = React.useState(false);
   const handleSelect = async (image) => {
     setUploading(true);
     try {
-      const proxyUrl = `${upfilesConfig.baseUrl}/api/download?fileKey=${encodeURIComponent(image.key)}`;
-      const response = await fetch(proxyUrl, {
-        headers: upfilesConfig.apiKey ? {
-          [upfilesConfig.apiKeyHeader || "authorization"]: upfilesConfig.apiKey.startsWith("upk_") ? `Bearer ${upfilesConfig.apiKey}` : upfilesConfig.apiKey
-        } : {}
-      });
-      if (!response.ok) {
-        throw new Error("Failed to fetch image");
-      }
-      const blob = await response.blob();
-      const file = new File([blob], image.originalName, { type: image.contentType });
-      const result = await uploadAndUpdateAvatar(file);
-      if (result.success && result.user?.avatar) {
-        onUploadComplete?.(result.user.avatar);
+      const { updateProfile } = useAuth();
+      const response = await updateProfile({ avatar: image.url });
+      if (response.success && response.user?.avatar) {
+        onUploadComplete?.(response.user.avatar);
         setOpen(false);
       } else {
-        throw new Error(result.message || "Failed to update avatar");
+        throw new Error(response.message || "Failed to update avatar");
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error("Upload failed");
+      const err = error instanceof Error ? error : new Error("Failed to update avatar");
       onError?.(err);
     } finally {
       setUploading(false);
@@ -4563,12 +4547,12 @@ var UserProfile = ({
 }) => {
   const { user, updateProfile, requestEmailChange } = useAuth();
   const colors = useThemeColors();
-  const [name, setName] = React3.useState(user?.name || "");
-  const [phoneNumber, setPhoneNumber] = React3.useState(user?.phoneNumber || "");
-  const [newEmail, setNewEmail] = React3.useState("");
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [success, setSuccess] = React3.useState(null);
+  const [name, setName] = React.useState(user?.name || "");
+  const [phoneNumber, setPhoneNumber] = React.useState(user?.phoneNumber || "");
+  const [newEmail, setNewEmail] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [success, setSuccess] = React.useState(null);
   const handleUpdateProfile = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -4625,8 +4609,7 @@ var UserProfile = ({
       setIsLoading(false);
     }
   };
-  if (!user)
-    return null;
+  if (!user) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "700px", margin: "0 auto", padding: "20px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600, color: colors.textPrimary }, children: "Profile Settings" }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
@@ -4860,12 +4843,18 @@ var AvatarManager = ({
   gridClassName,
   maxFileSize = 5 * 1024 * 1024,
   // 5MB default
+  maxFiles = 10,
   mode = "full",
   showDelete = false,
+  autoRecordToDb = true,
+  fetchThumbnails = true,
+  projectId,
+  deleteUrl,
+  onDelete,
   upfilesConfig
 }) => {
   const { updateProfile } = useAuth();
-  const [updating, setUpdating] = React3.useState(false);
+  const [updating, setUpdating] = React.useState(false);
   const handleSelect = async (image) => {
     setUpdating(true);
     try {
@@ -4893,18 +4882,25 @@ var AvatarManager = ({
         apiKey: upfilesConfig.apiKey,
         apiKeyHeader: upfilesConfig.apiKeyHeader || "authorization",
         presignUrl: upfilesConfig.presignUrl,
-        presignPath: upfilesConfig.presignPath
+        presignPath: upfilesConfig.presignPath,
+        headers: upfilesConfig.headers,
+        withCredentials: upfilesConfig.withCredentials
       },
-      folderPath: upfilesConfig.folderPath || "avatars/",
+      projectId,
+      folderPath: upfilesConfig.folderPath || "/",
       title,
       description,
       className,
       gridClassName,
       onSelect: handleSelect,
+      onDelete,
+      deleteUrl,
+      autoRecordToDb,
+      fetchThumbnails,
       maxFileSize,
+      maxFiles,
       mode,
-      showDelete,
-      fetchThumbnails: true
+      showDelete
     }
   );
 };
@@ -5022,23 +5018,23 @@ var AuthClient = class extends AuthService {
   }
 };
 
-Object.defineProperty(exports, 'ConnectProjectDialog', {
+Object.defineProperty(exports, "ConnectProjectDialog", {
   enumerable: true,
   get: function () { return upfiles.ConnectProjectDialog; }
 });
-Object.defineProperty(exports, 'ImageManager', {
+Object.defineProperty(exports, "ImageManager", {
   enumerable: true,
   get: function () { return upfiles.ImageManager; }
 });
-Object.defineProperty(exports, 'ProjectFilesWidget', {
+Object.defineProperty(exports, "ProjectFilesWidget", {
   enumerable: true,
   get: function () { return upfiles.ProjectFilesWidget; }
 });
-Object.defineProperty(exports, 'UpfilesClient', {
+Object.defineProperty(exports, "UpfilesClient", {
   enumerable: true,
   get: function () { return upfiles.UpfilesClient; }
 });
-Object.defineProperty(exports, 'Uploader', {
+Object.defineProperty(exports, "Uploader", {
   enumerable: true,
   get: function () { return upfiles.Uploader; }
 });
@@ -5066,5 +5062,5 @@ exports.VerifyEmail = VerifyEmail;
 exports.node = node_exports;
 exports.react = react_exports;
 exports.useAuth = useAuth;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map