@thetechfossil/auth2 1.2.1 → 1.2.3

package/dist/index.mjs

@@ -1,5 +1,6 @@
+"use client";
 import axios from 'axios';
-import { useState, useCallback, useEffect } from 'react';
+import { createContext, useState, useCallback, useEffect, useContext, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
@@ -10,6 +11,7 @@ var __export = (target, all) => {
 var HttpClient = class {
   constructor(baseUrl, defaultHeaders = {}) {
     this.csrfToken = null;
+    this.frontendBaseUrl = null;
     this.axiosInstance = axios.create({
       baseURL: baseUrl.replace(/\/$/, ""),
       headers: {
@@ -26,6 +28,9 @@ var HttpClient = class {
         if (this.csrfToken && ["post", "put", "delete", "patch"].includes(config.method?.toLowerCase() || "")) {
           config.headers["x-csrf-token"] = this.csrfToken;
         }
+        if (this.frontendBaseUrl) {
+          config.headers["X-Frontend-URL"] = this.frontendBaseUrl;
+        }
         return config;
       },
       (error) => Promise.reject(error)
@@ -81,6 +86,15 @@ var HttpClient = class {
   removeCsrfToken() {
     this.csrfToken = null;
   }
+  setFrontendBaseUrl(url) {
+    this.frontendBaseUrl = url;
+  }
+  getFrontendBaseUrl() {
+    return this.frontendBaseUrl;
+  }
+  removeFrontendBaseUrl() {
+    this.frontendBaseUrl = null;
+  }
   async refreshCsrfToken() {
     try {
       const response = await this.axiosInstance.get("/api/v1/auth/csrf-token");
@@ -103,6 +117,12 @@ var AuthService = class {
     };
     this.httpClient = new HttpClient(this.config.baseUrl);
     this.loadTokenFromStorage();
+    if (typeof window !== "undefined") {
+      const frontendBaseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
+      if (frontendBaseUrl) {
+        this.httpClient.setFrontendBaseUrl(frontendBaseUrl);
+      }
+    }
     if (this.config.csrfEnabled && typeof window !== "undefined") {
       this.refreshCsrfToken();
     }
@@ -219,11 +239,7 @@ var AuthService = class {
     throw new Error(response.message || "Login failed");
   }
   async register(data) {
-    const registerData = { ...data };
-    if (!registerData.frontendBaseUrl && typeof window !== "undefined") {
-      registerData.frontendBaseUrl = process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
-    }
-    const response = await this.httpClient.post("/api/v1/auth/register", registerData);
+    const response = await this.httpClient.post("/api/v1/auth/register", data);
     if (response.success && response.message === "Registration data saved. Verification email sent. Please check your inbox.") {
       return response;
     }
@@ -239,15 +255,33 @@ var AuthService = class {
     return response;
   }
   async verifyEmailToken(token) {
-    const response = await this.httpClient.get(`/api/v1/auth/verify-email?token=${token}`);
-    if (response.success && response.token) {
-      this.token = response.token;
-      this.httpClient.setAuthToken(response.token);
-      this.saveTokenToStorage(response.token);
+    try {
+      const response = await this.httpClient.get(`/api/v1/auth/verify-email?token=${token}`);
+      if (response.success && response.token) {
+        this.token = response.token;
+        this.httpClient.setAuthToken(response.token);
+        this.saveTokenToStorage(response.token);
+      }
+      return response;
+    } catch (error) {
+      if (error.response?.data) {
+        return {
+          success: false,
+          message: error.response.data.message || "Email verification failed"
+        };
+      }
+      return {
+        success: false,
+        message: error.message || "Network error occurred"
+      };
     }
-    return response;
   }
   async logout() {
+    try {
+      await this.httpClient.post("/api/v1/auth/logout", {});
+    } catch (error) {
+      console.warn("Failed to call logout endpoint:", error);
+    }
     this.token = null;
     this.httpClient.removeAuthToken();
     this.httpClient.removeCsrfToken();
@@ -284,9 +318,6 @@ var AuthService = class {
     return response.user;
   }
   async forgotPassword(email) {
-    if (typeof window !== "undefined") {
-      process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
-    }
     const response = await this.httpClient.post("/api/v1/auth/forgot-password", { email });
     return response;
   }
@@ -294,70 +325,208 @@ var AuthService = class {
     const response = await this.httpClient.post("/api/v1/auth/reset-password", { token, password });
     return response;
   }
+  async changePassword(oldPassword, newPassword) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/change-password", {
+      oldPassword,
+      newPassword
+    });
+    return response;
+  }
+  async updateAvatar(avatar) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/update/avatar", { avatar });
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+    }
+    return response;
+  }
+  async requestEmailChange(newEmail) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/request-email-change", {
+      newEmail
+    });
+    return response;
+  }
+  async verifyEmailChange(token) {
+    const response = await this.httpClient.get(`/api/v1/user/verify-email-change?token=${token}`);
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+    }
+    return response;
+  }
+  // 2FA / MFA Methods
+  async generate2FA() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(
+      "/api/v1/mfa/generate",
+      {}
+    );
+    return response;
+  }
+  async enable2FA(token) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/mfa/enable", { token });
+    return response;
+  }
+  async disable2FA(token) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/mfa/disable", { token });
+    return response;
+  }
+  async validate2FA(token) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/mfa/validate", { token });
+    return response;
+  }
+  // Session Management Methods
+  async getSessions() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.get("/api/v1/sessions");
+    return response;
+  }
+  async revokeSession(sessionId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.delete(`/api/v1/sessions/${sessionId}`);
+    return response;
+  }
+  async revokeAllSessions() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.delete("/api/v1/sessions/revoke/all");
+    this.token = null;
+    this.httpClient.removeAuthToken();
+    this.removeTokenFromStorage();
+    return response;
+  }
+  // Admin Methods
+  async getAuditLogs(filters) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.get(
+      "/api/v1/admin/audit-logs",
+      filters
+    );
+    return response;
+  }
+  async adminVerifyUser(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/verify-user/${userId}`, {});
+    return response;
+  }
+  async adminForcePasswordReset(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/force-password-reset/${userId}`, {});
+    return response;
+  }
+  async adminSuspendUser(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/suspend-user/${userId}`, {});
+    return response;
+  }
+  async adminActivateUser(userId) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post(`/api/v1/admin/activate-user/${userId}`, {});
+    return response;
+  }
 };
-
-// src/react/index.ts
-var react_exports = {};
-__export(react_exports, {
-  AuthFlow: () => AuthFlow,
-  EmailVerificationPage: () => EmailVerificationPage,
-  LoginForm: () => LoginForm,
-  OtpForm: () => OtpForm,
-  RegisterForm: () => RegisterForm,
-  useAuth: () => useAuth
-});
-var useAuth = (config) => {
-  const [authService] = useState(() => new AuthService(config));
+var AuthContext = 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"),
+    localStorageKey: config?.localStorageKey || "auth_token",
+    csrfEnabled: config?.csrfEnabled !== void 0 ? config.csrfEnabled : true
+  };
+  const [authService] = useState(() => new AuthService(authConfig));
   const [user, setUser] = useState(null);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const checkAuthStatus = useCallback(() => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const checkAuthStatus = useCallback(async () => {
     const authenticated = authService.isAuthenticated();
-    setIsAuthenticated(authenticated);
     if (authenticated) {
-      const currentUser = authService.getCurrentUser();
-      setUser(currentUser);
+      try {
+        const currentUser = authService.getCurrentUser();
+        setUser(currentUser);
+      } catch (error) {
+        console.error("Failed to get current user:", error);
+        setUser(null);
+      }
     } else {
       setUser(null);
     }
-    setLoading(false);
+    setIsLoaded(true);
   }, [authService]);
   useEffect(() => {
     checkAuthStatus();
   }, [checkAuthStatus]);
-  const register = useCallback(async (data) => {
+  const signIn = useCallback(async (data) => {
     setLoading(true);
     try {
-      const registerData = { ...data };
-      if (!registerData.frontendBaseUrl && typeof window !== "undefined") {
-        registerData.frontendBaseUrl = process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
+      const response = await authService.login(data);
+      if (response.success && response.user) {
+        setUser(response.user);
       }
-      const response = await authService.register(registerData);
       return response;
     } finally {
       setLoading(false);
     }
   }, [authService]);
-  const login = useCallback(async (data) => {
+  const signUp = useCallback(async (data) => {
     setLoading(true);
     try {
-      const response = await authService.login(data);
-      if (response.success && response.user) {
-        setUser(response.user);
-        setIsAuthenticated(true);
-      }
+      const response = await authService.register(data);
       return response;
     } finally {
       setLoading(false);
     }
   }, [authService]);
+  const signOut = useCallback(async () => {
+    setLoading(true);
+    try {
+      await authService.logout();
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
   const verify = useCallback(async (data) => {
     setLoading(true);
     try {
       const response = await authService.verify(data);
       if (response.success && response.user) {
         setUser(response.user);
-        setIsAuthenticated(true);
       }
       return response;
     } finally {
@@ -370,23 +539,12 @@ var useAuth = (config) => {
       const response = await authService.verifyEmailToken(token);
       if (response.success && response.user) {
         setUser(response.user);
-        setIsAuthenticated(true);
       }
       return response;
     } finally {
       setLoading(false);
     }
   }, [authService]);
-  const logout = useCallback(async () => {
-    setLoading(true);
-    try {
-      await authService.logout();
-      setUser(null);
-      setIsAuthenticated(false);
-    } finally {
-      setLoading(false);
-    }
-  }, [authService]);
   const updateProfile = useCallback(async (data) => {
     setLoading(true);
     try {
@@ -409,90 +567,356 @@ var useAuth = (config) => {
       setLoading(false);
     }
   }, [authService]);
-  const getAllUsers = useCallback(async () => {
+  const signInWithOAuth = useCallback((provider) => {
+    authService.loginWithOAuth(provider);
+  }, [authService]);
+  const linkOAuthProvider = useCallback((provider) => {
+    authService.linkOAuthProvider(provider);
+  }, [authService]);
+  const unlinkOAuthProvider = useCallback(async (provider) => {
     setLoading(true);
     try {
-      return await authService.getAllUsers();
+      return await authService.unlinkOAuthProvider(provider);
     } finally {
       setLoading(false);
     }
   }, [authService]);
-  const getUserById = useCallback(async (id) => {
+  const forgotPassword = useCallback(async (email) => {
     setLoading(true);
     try {
-      return await authService.getUserById(id);
+      return await authService.forgotPassword(email);
     } finally {
       setLoading(false);
     }
   }, [authService]);
-  return {
-    user,
-    isAuthenticated,
-    loading,
-    register,
-    login,
-    verify,
-    verifyEmailToken,
-    logout,
-    updateProfile,
-    getProfile,
-    getAllUsers,
-    getUserById
-  };
-};
-var LoginForm = ({
-  onSuccess,
-  onLoginSuccess,
-  onRegisterClick,
-  showRegisterLink = true,
-  config,
-  oauthProviders = ["google", "github"],
-  showOAuthButtons = true
-}) => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [usePassword, setUsePassword] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [rememberMe, setRememberMe] = useState(false);
-  const { login } = useAuth({
-    baseUrl: config?.baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
-  });
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError(null);
+  const resetPassword = useCallback(async (token, password) => {
+    setLoading(true);
     try {
-      let response;
-      if (usePassword) {
-        response = await login({ email, password });
-      } else {
-        response = await login({ email });
-      }
-      if (response.success) {
-        onSuccess?.(response);
-        if (onLoginSuccess) {
-          if (response.message === "OTP sent to your email.") {
-            onLoginSuccess(email, true);
-          } else if (response.token) {
-            onLoginSuccess(email, false);
-          } else {
-            onLoginSuccess(email, true);
-          }
-        }
-      } else {
-        setError(response.message || "Login failed");
+      return await authService.resetPassword(token, password);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const changePassword = useCallback(async (oldPassword, newPassword) => {
+    setLoading(true);
+    try {
+      return await authService.changePassword(oldPassword, newPassword);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const updateAvatar = useCallback(async (avatar) => {
+    setLoading(true);
+    try {
+      const response = await authService.updateAvatar(avatar);
+      if (response.success && response.user) {
+        setUser(response.user);
       }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "An unknown error occurred");
+      return response;
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
-  };
-  const toggleAuthMethod = () => {
-    setUsePassword(!usePassword);
-    setError(null);
+  }, [authService]);
+  const requestEmailChange = useCallback(async (newEmail) => {
+    setLoading(true);
+    try {
+      return await authService.requestEmailChange(newEmail);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const verifyEmailChange = useCallback(async (token) => {
+    setLoading(true);
+    try {
+      const response = await authService.verifyEmailChange(token);
+      if (response.success && response.user) {
+        setUser(response.user);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const generate2FA = useCallback(async () => {
+    setLoading(true);
+    try {
+      return await authService.generate2FA();
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const enable2FA = useCallback(async (token) => {
+    setLoading(true);
+    try {
+      return await authService.enable2FA(token);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const disable2FA = useCallback(async (token) => {
+    setLoading(true);
+    try {
+      return await authService.disable2FA(token);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const validate2FA = useCallback(async (token) => {
+    setLoading(true);
+    try {
+      return await authService.validate2FA(token);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const getSessions = useCallback(async () => {
+    setLoading(true);
+    try {
+      return await authService.getSessions();
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const revokeSession = useCallback(async (sessionId) => {
+    setLoading(true);
+    try {
+      return await authService.revokeSession(sessionId);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const revokeAllSessions = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await authService.revokeAllSessions();
+      setUser(null);
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const value = {
+    user,
+    isLoaded,
+    isSignedIn: !!user,
+    loading,
+    signIn,
+    signUp,
+    signOut,
+    verify,
+    verifyEmailToken,
+    updateProfile,
+    getProfile,
+    signInWithOAuth,
+    linkOAuthProvider,
+    unlinkOAuthProvider,
+    forgotPassword,
+    resetPassword,
+    changePassword,
+    updateAvatar,
+    requestEmailChange,
+    verifyEmailChange,
+    generate2FA,
+    enable2FA,
+    disable2FA,
+    validate2FA,
+    getSessions,
+    revokeSession,
+    revokeAllSessions,
+    authService
+  };
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+};
+var useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
+var useAuth2 = (config) => {
+  const [authService] = useState(() => new AuthService(config));
+  const [user, setUser] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const checkAuthStatus = useCallback(() => {
+    const authenticated = authService.isAuthenticated();
+    setIsAuthenticated(authenticated);
+    if (authenticated) {
+      const currentUser = authService.getCurrentUser();
+      setUser(currentUser);
+    } else {
+      setUser(null);
+    }
+    setLoading(false);
+  }, [authService]);
+  useEffect(() => {
+    checkAuthStatus();
+  }, [checkAuthStatus]);
+  const register = useCallback(async (data) => {
+    setLoading(true);
+    try {
+      const response = await authService.register(data);
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const login = useCallback(async (data) => {
+    setLoading(true);
+    try {
+      const response = await authService.login(data);
+      if (response.success && response.user) {
+        setUser(response.user);
+        setIsAuthenticated(true);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const verify = useCallback(async (data) => {
+    setLoading(true);
+    try {
+      const response = await authService.verify(data);
+      if (response.success && response.user) {
+        setUser(response.user);
+        setIsAuthenticated(true);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const verifyEmailToken = useCallback(async (token) => {
+    setLoading(true);
+    try {
+      const response = await authService.verifyEmailToken(token);
+      if (response.success && response.user) {
+        setUser(response.user);
+        setIsAuthenticated(true);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const logout = useCallback(async () => {
+    setLoading(true);
+    try {
+      await authService.logout();
+      setUser(null);
+      setIsAuthenticated(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const updateProfile = useCallback(async (data) => {
+    setLoading(true);
+    try {
+      const response = await authService.updateProfile(data);
+      if (response.success && response.user) {
+        setUser(response.user);
+      }
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const getProfile = useCallback(async () => {
+    setLoading(true);
+    try {
+      const userData = await authService.getProfile();
+      setUser(userData);
+      return userData;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const getAllUsers = useCallback(async () => {
+    setLoading(true);
+    try {
+      return await authService.getAllUsers();
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const getUserById = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      return await authService.getUserById(id);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  return {
+    user,
+    isAuthenticated,
+    loading,
+    register,
+    login,
+    verify,
+    verifyEmailToken,
+    logout,
+    updateProfile,
+    getProfile,
+    getAllUsers,
+    getUserById
+  };
+};
+var LoginForm = ({
+  onSuccess,
+  onLoginSuccess,
+  onRegisterClick,
+  showRegisterLink = true,
+  config,
+  oauthProviders = ["google", "github"],
+  showOAuthButtons = true
+}) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [usePassword, setUsePassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [rememberMe, setRememberMe] = useState(false);
+  const { login } = useAuth2({
+    baseUrl: config?.baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
+  });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      let response;
+      if (usePassword) {
+        response = await login({ email, password });
+      } else {
+        response = await login({ email });
+      }
+      if (response.success) {
+        onSuccess?.(response);
+        if (onLoginSuccess) {
+          if (response.message === "OTP sent to your email.") {
+            onLoginSuccess(email, true);
+          } else if (response.token) {
+            onLoginSuccess(email, false);
+          } else {
+            onLoginSuccess(email, true);
+          }
+        }
+      } else {
+        setError(response.message || "Login failed");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const toggleAuthMethod = () => {
+    setUsePassword(!usePassword);
+    setError(null);
   };
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
@@ -900,7 +1324,7 @@ var RegisterForm = ({
   const config = authConfig || {
     baseUrl: typeof window !== "undefined" ? process.env.NEXT_PUBLIC_AUTH_API_URL || window.location.origin : "http://localhost:7000"
   };
-  const { register } = useAuth(config);
+  const { register } = useAuth2(config);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -1295,7 +1719,7 @@ var OtpForm = ({
   const [error, setError] = useState(null);
   const [resendCooldown, setResendCooldown] = useState(0);
   const [resendLoading, setResendLoading] = useState(false);
-  const { verify, login } = useAuth({
+  const { verify, login } = useAuth2({
     baseUrl: typeof window !== "undefined" ? window.location.origin : "http://localhost:7000"
   });
   const handleSubmit = async (e) => {
@@ -1646,7 +2070,7 @@ var EmailVerificationPage = ({
   const [isLoading, setIsLoading] = useState(true);
   const [message, setMessage] = useState("");
   const [isSuccess, setIsSuccess] = useState(false);
-  const { verifyEmailToken } = useAuth({
+  const { verifyEmailToken } = useAuth2({
     baseUrl: baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
   });
   useEffect(() => {
@@ -1754,6 +2178,1825 @@ var EmailVerificationPage = ({
     ] })
   ] }) });
 };
+var SignIn = ({ redirectUrl, appearance }) => {
+  const { signIn, isSignedIn, loading: authLoading } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [otp, setOtp] = useState("");
+  const [usePassword, setUsePassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [needsOtp, setNeedsOtp] = useState(false);
+  const [success, setSuccess] = useState(null);
+  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 : "");
+      window.location.href = `${baseUrl}${redirect}`;
+    }
+  }, [isSignedIn, redirectUrl]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      if (needsOtp) {
+        const response = await signIn({ email, otp });
+        if (response.success) {
+          setSuccess("Login successful!");
+        } else {
+          setError(response.message || "OTP verification failed");
+        }
+      } else if (usePassword) {
+        const response = await signIn({ email, password });
+        if (response.success) {
+          setSuccess("Login successful!");
+        } else {
+          setError(response.message || "Login failed");
+        }
+      } else {
+        const response = await signIn({ email });
+        if (response.success && response.message === "OTP sent to your email.") {
+          setNeedsOtp(true);
+          setSuccess("OTP sent to your email. Please check your inbox.");
+        } else {
+          setError(response.message || "Failed to send OTP");
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const toggleAuthMethod = () => {
+    setUsePassword(!usePassword);
+    setNeedsOtp(false);
+    setError(null);
+    setSuccess(null);
+    setOtp("");
+  };
+  if (authLoading) {
+    return /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
+  }
+  return /* @__PURE__ */ jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: needsOtp ? "Enter OTP" : usePassword ? "Sign in with password" : "Sign in" }),
+    error && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    !needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    usePassword && !needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "password",
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your password"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      )
+    ] }),
+    needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "otp", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "One-Time Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "otp",
+          type: "text",
+          value: otp,
+          onChange: (e) => setOtp(e.target.value),
+          required: true,
+          disabled: isLoading,
+          maxLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            letterSpacing: "0.5em",
+            textAlign: "center",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "000000"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Please wait..." : needsOtp ? "Verify OTP" : usePassword ? "Sign in" : "Continue with email"
+      }
+    ),
+    !needsOtp && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleAuthMethod,
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: usePassword ? "Use email code instead" : "Use password instead"
+      }
+    ) }),
+    needsOtp && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setNeedsOtp(false);
+          setOtp("");
+          setError(null);
+          setSuccess(null);
+        },
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: "Back to sign in"
+      }
+    ) })
+  ] }) });
+};
+var SignUp = ({ redirectUrl, appearance }) => {
+  const { signUp, isSignedIn } = useAuth();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  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 : "");
+      window.location.href = `${baseUrl}${redirect}`;
+    }
+  }, [isSignedIn, redirectUrl]);
+  const getPasswordStrength = (pwd) => {
+    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" };
+    return { strength: "strong", color: "#4f4" };
+  };
+  const passwordStrength = getPasswordStrength(password);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await signUp({ name, email, password });
+      if (response.success) {
+        setSuccess("Registration successful! Please check your email to verify your account.");
+      } else {
+        setError(response.message || "Registration failed");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Create your account" }),
+    error && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "name", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Full name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "name",
+          type: "text",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your full name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "password",
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          minLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Create a password"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      ),
+      password && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          height: "4px",
+          backgroundColor: "#eee",
+          borderRadius: "2px",
+          overflow: "hidden"
+        }, children: /* @__PURE__ */ jsx("div", { style: {
+          height: "100%",
+          width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
+          backgroundColor: passwordStrength.color,
+          transition: "all 0.3s ease"
+        } }) }),
+        /* @__PURE__ */ jsxs("p", { style: {
+          fontSize: "12px",
+          color: passwordStrength.color,
+          marginTop: "4px",
+          textTransform: "capitalize"
+        }, children: [
+          passwordStrength.strength,
+          " password"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Confirm password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: showPassword ? "text" : "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Confirm your password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Creating account..." : "Sign up"
+      }
+    )
+  ] }) });
+};
+var SignOut = ({ redirectUrl }) => {
+  const { signOut } = useAuth();
+  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 || "/";
+      const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+      window.location.href = `${baseUrl}${redirect}`;
+    };
+    performSignOut();
+  }, [signOut, redirectUrl]);
+  return /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsx("div", { children: "Signing out..." }) });
+};
+var UserButton = ({ showName = false, appearance }) => {
+  const { user, signOut } = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  if (!user)
+    return null;
+  const getInitials = (name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+  const handleSignOut = async () => {
+    await signOut();
+    const redirect = process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
+    const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+    window.location.href = `${baseUrl}${redirect}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: "6px",
+          backgroundColor: "transparent",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          transition: "background-color 0.2s",
+          ...appearance?.elements?.userButtonTrigger
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f5f5f5";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: {
+            width: "36px",
+            height: "36px",
+            borderRadius: "50%",
+            backgroundColor: "#007bff",
+            color: "white",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "14px",
+            fontWeight: 600
+          }, children: getInitials(user.name) }),
+          showName && /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#333" }, children: user.name })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { style: {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      marginTop: "8px",
+      width: "240px",
+      backgroundColor: "white",
+      borderRadius: "12px",
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+      border: "1px solid #eaeaea",
+      zIndex: 1e3,
+      ...appearance?.elements?.userButtonPopoverCard
+    }, children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        padding: "16px",
+        borderBottom: "1px solid #eee"
+      }, children: /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px"
+      }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          width: "48px",
+          height: "48px",
+          borderRadius: "50%",
+          backgroundColor: "#007bff",
+          color: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "18px",
+          fontWeight: 600
+        }, children: getInitials(user.name) }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: {
+            fontSize: "14px",
+            fontWeight: 600,
+            color: "#333",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: user.name }),
+          /* @__PURE__ */ jsx("div", { style: {
+            fontSize: "12px",
+            color: "#666",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: user.email })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSignOut,
+          style: {
+            width: "100%",
+            padding: "10px 16px",
+            backgroundColor: "transparent",
+            border: "none",
+            borderRadius: "8px",
+            textAlign: "left",
+            cursor: "pointer",
+            fontSize: "14px",
+            color: "#333",
+            fontWeight: 500,
+            transition: "background-color 0.2s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#f5f5f5";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          children: "Sign out"
+        }
+      ) })
+    ] })
+  ] });
+};
+var ProtectedRoute = ({
+  children,
+  fallback,
+  redirectTo
+}) => {
+  const { isSignedIn, isLoaded } = useAuth();
+  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 : "");
+      window.location.href = `${baseUrl}${loginPath}`;
+    }
+  }, [isSignedIn, isLoaded, redirectTo]);
+  if (!isLoaded) {
+    return fallback || /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "100vh"
+    }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
+  }
+  if (!isSignedIn) {
+    return fallback || null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var PublicRoute = ({
+  children,
+  redirectTo
+}) => {
+  const { isSignedIn, isLoaded } = useAuth();
+  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 : "");
+      window.location.href = `${baseUrl}${dashboardPath}`;
+    }
+  }, [isSignedIn, isLoaded, redirectTo]);
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "100vh"
+    }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
+  }
+  if (isSignedIn) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var VerifyEmail = ({ token, onSuccess, onError }) => {
+  const { verifyEmailToken } = useAuth();
+  const [status, setStatus] = useState("loading");
+  const [message, setMessage] = useState("");
+  useEffect(() => {
+    const verify = async () => {
+      const verifyToken = token || (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") : null);
+      if (!verifyToken) {
+        setStatus("error");
+        setMessage("No verification token provided");
+        onError?.("No verification token provided");
+        return;
+      }
+      try {
+        const response = await verifyEmailToken(verifyToken);
+        if (response.success) {
+          setStatus("success");
+          setMessage("Email verified successfully! Redirecting...");
+          onSuccess?.();
+          setTimeout(() => {
+            const redirect = process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_VERIFY || process.env.REACT_APP_AUTH_REDIRECT_AFTER_VERIFY || "/dashboard";
+            const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
+            window.location.href = `${baseUrl}${redirect}`;
+          }, 2e3);
+        } else {
+          setStatus("error");
+          setMessage(response.message || "Verification failed");
+          onError?.(response.message || "Verification failed");
+        }
+      } catch (err) {
+        setStatus("error");
+        const errorMsg = err instanceof Error ? err.message : "An error occurred";
+        setMessage(errorMsg);
+        onError?.(errorMsg);
+      }
+    };
+    verify();
+  }, [token, verifyEmailToken, onSuccess, onError]);
+  return /* @__PURE__ */ jsxs("div", { style: {
+    maxWidth: "400px",
+    margin: "40px auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    textAlign: "center"
+  }, children: [
+    status === "loading" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        width: "48px",
+        height: "48px",
+        margin: "0 auto 20px",
+        border: "4px solid #f3f3f3",
+        borderTop: "4px solid #007bff",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite"
+      } }),
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          ` }),
+      /* @__PURE__ */ jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Verifying your email..." }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666" }, children: "Please wait while we verify your email address." })
+    ] }),
+    status === "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        width: "64px",
+        height: "64px",
+        margin: "0 auto 20px",
+        backgroundColor: "#4caf50",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+      /* @__PURE__ */ jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Email Verified!" }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666" }, children: message })
+    ] }),
+    status === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        width: "64px",
+        height: "64px",
+        margin: "0 auto 20px",
+        backgroundColor: "#f44336",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) }),
+      /* @__PURE__ */ jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Verification Failed" }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: message }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            const loginPath = 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 : "");
+            window.location.href = `${baseUrl}${loginPath}`;
+          },
+          style: {
+            padding: "10px 20px",
+            backgroundColor: "#007bff",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "14px",
+            fontWeight: 600,
+            cursor: "pointer"
+          },
+          children: "Go to Login"
+        }
+      )
+    ] })
+  ] });
+};
+var ForgotPassword = ({ appearance }) => {
+  const { forgotPassword } = useAuth();
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await forgotPassword(email);
+      if (response.success) {
+        setSuccess("Password reset link sent! Please check your email.");
+        setEmail("");
+      } else {
+        setError(response.message || "Failed to send reset link");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "12px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Forgot password?" }),
+    /* @__PURE__ */ jsx("p", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#666",
+      fontSize: "14px"
+    }, children: "Enter your email address and we'll send you a link to reset your password." }),
+    error && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          marginBottom: "16px",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Sending..." : "Send reset link"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const loginPath = 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 : "");
+          window.location.href = `${baseUrl}${loginPath}`;
+        },
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: "Back to sign in"
+      }
+    ) })
+  ] }) });
+};
+var ResetPassword = ({ token, appearance }) => {
+  const { resetPassword } = useAuth();
+  const [resetToken, setResetToken] = useState(token || "");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  useEffect(() => {
+    if (!resetToken && typeof window !== "undefined") {
+      const urlToken = new URLSearchParams(window.location.search).get("token");
+      if (urlToken) {
+        setResetToken(urlToken);
+      }
+    }
+  }, [resetToken]);
+  const getPasswordStrength = (pwd) => {
+    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" };
+    return { strength: "strong", color: "#4f4" };
+  };
+  const passwordStrength = getPasswordStrength(password);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      setIsLoading(false);
+      return;
+    }
+    if (!resetToken) {
+      setError("Invalid reset token");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await resetPassword(resetToken, password);
+      if (response.success) {
+        setSuccess(true);
+        setTimeout(() => {
+          const loginPath = 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 : "");
+          window.location.href = `${baseUrl}${loginPath}`;
+        }, 2e3);
+      } else {
+        setError(response.message || "Failed to reset password");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (success) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      maxWidth: "400px",
+      margin: "40px auto",
+      padding: "30px",
+      borderRadius: "12px",
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+      backgroundColor: "#ffffff",
+      border: "1px solid #eaeaea",
+      textAlign: "center"
+    }, children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        width: "64px",
+        height: "64px",
+        margin: "0 auto 20px",
+        backgroundColor: "#4caf50",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+      /* @__PURE__ */ jsx("h2", { style: {
+        fontSize: "20px",
+        fontWeight: 600,
+        color: "#333",
+        marginBottom: "12px"
+      }, children: "Password Reset Successful!" }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666" }, children: "Your password has been reset. Redirecting to login..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "12px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Reset your password" }),
+    /* @__PURE__ */ jsx("p", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#666",
+      fontSize: "14px"
+    }, children: "Enter your new password below." }),
+    error && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "New password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "password",
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          minLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter new password"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      ),
+      password && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          height: "4px",
+          backgroundColor: "#eee",
+          borderRadius: "2px",
+          overflow: "hidden"
+        }, children: /* @__PURE__ */ jsx("div", { style: {
+          height: "100%",
+          width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
+          backgroundColor: passwordStrength.color,
+          transition: "all 0.3s ease"
+        } }) }),
+        /* @__PURE__ */ jsxs("p", { style: {
+          fontSize: "12px",
+          color: passwordStrength.color,
+          marginTop: "4px",
+          textTransform: "capitalize"
+        }, children: [
+          passwordStrength.strength,
+          " password"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Confirm password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: showPassword ? "text" : "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Confirm new password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Resetting..." : "Reset password"
+      }
+    )
+  ] }) });
+};
+var ChangePassword = ({ onSuccess, appearance }) => {
+  const { changePassword } = useAuth();
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPasswords, setShowPasswords] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const getPasswordStrength = (pwd) => {
+    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" };
+    return { strength: "strong", color: "#4f4" };
+  };
+  const passwordStrength = getPasswordStrength(newPassword);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(false);
+    if (newPassword !== confirmPassword) {
+      setError("New passwords do not match");
+      setIsLoading(false);
+      return;
+    }
+    if (newPassword.length < 6) {
+      setError("New password must be at least 6 characters");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await changePassword(oldPassword, newPassword);
+      if (response.success) {
+        setSuccess(true);
+        setOldPassword("");
+        setNewPassword("");
+        setConfirmPassword("");
+        onSuccess?.();
+      } else {
+        setError(response.message || "Failed to change password");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    maxWidth: "400px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    border: "1px solid #eaeaea",
+    ...appearance?.elements?.card
+  }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600,
+      ...appearance?.elements?.headerTitle
+    }, children: "Change Password" }),
+    error && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: "Password changed successfully!" }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "oldPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Current password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "oldPassword",
+          type: showPasswords ? "text" : "password",
+          value: oldPassword,
+          onChange: (e) => setOldPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter current password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "newPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "New password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "newPassword",
+          type: showPasswords ? "text" : "password",
+          value: newPassword,
+          onChange: (e) => setNewPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          minLength: 6,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Enter new password"
+        }
+      ),
+      newPassword && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          height: "4px",
+          backgroundColor: "#eee",
+          borderRadius: "2px",
+          overflow: "hidden"
+        }, children: /* @__PURE__ */ jsx("div", { style: {
+          height: "100%",
+          width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
+          backgroundColor: passwordStrength.color,
+          transition: "all 0.3s ease"
+        } }) }),
+        /* @__PURE__ */ jsxs("p", { style: {
+          fontSize: "12px",
+          color: passwordStrength.color,
+          marginTop: "4px",
+          textTransform: "capitalize"
+        }, children: [
+          passwordStrength.strength,
+          " password"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Confirm new password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: showPasswords ? "text" : "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "16px",
+            boxSizing: "border-box",
+            ...appearance?.elements?.formFieldInput
+          },
+          placeholder: "Confirm new password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "20px" }, children: /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: showPasswords,
+          onChange: (e) => setShowPasswords(e.target.checked),
+          style: { marginRight: "8px" }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", color: "#666" }, children: "Show passwords" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          width: "100%",
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          ...appearance?.elements?.formButtonPrimary
+        },
+        children: isLoading ? "Changing password..." : "Change password"
+      }
+    )
+  ] }) });
+};
+var UserProfile = ({
+  showAvatar = true,
+  showEmailChange = true,
+  showPasswordChange = true
+}) => {
+  const { user, updateProfile, updateAvatar, requestEmailChange } = useAuth();
+  const [name, setName] = useState(user?.name || "");
+  const [avatar, setAvatar] = useState("");
+  const [newEmail, setNewEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const handleUpdateName = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await updateProfile({ name });
+      if (response.success) {
+        setSuccess("Name updated successfully!");
+      } else {
+        setError(response.message || "Failed to update name");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleUpdateAvatar = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await updateAvatar(avatar);
+      if (response.success) {
+        setSuccess("Avatar updated successfully!");
+        setAvatar("");
+      } else {
+        setError(response.message || "Failed to update avatar");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleRequestEmailChange = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const response = await requestEmailChange(newEmail);
+      if (response.success) {
+        setSuccess("Verification email sent! Please check your inbox.");
+        setNewEmail("");
+      } else {
+        setError(response.message || "Failed to request email change");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (!user)
+    return null;
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" }, children: [
+    /* @__PURE__ */ jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600 }, children: "Profile Settings" }),
+    error && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#fee",
+      color: "#c33",
+      border: "1px solid #fcc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: error }),
+    success && /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#efe",
+      color: "#3c3",
+      border: "1px solid #cfc",
+      borderRadius: "8px",
+      fontSize: "14px"
+    }, children: success }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      padding: "20px",
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Name" }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateName, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            required: true,
+            disabled: isLoading,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              fontSize: "16px",
+              boxSizing: "border-box",
+              marginBottom: "12px"
+            },
+            placeholder: "Your name"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            style: {
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Update Name"
+          }
+        )
+      ] })
+    ] }),
+    showAvatar && /* @__PURE__ */ jsxs("div", { style: {
+      padding: "20px",
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Avatar" }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateAvatar, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "url",
+            value: avatar,
+            onChange: (e) => setAvatar(e.target.value),
+            required: true,
+            disabled: isLoading,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              fontSize: "16px",
+              boxSizing: "border-box",
+              marginBottom: "12px"
+            },
+            placeholder: "Avatar URL"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            style: {
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Update Avatar"
+          }
+        )
+      ] })
+    ] }),
+    showEmailChange && /* @__PURE__ */ jsxs("div", { style: {
+      padding: "20px",
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Change Email" }),
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: "14px", color: "#666", marginBottom: "12px" }, children: [
+        "Current email: ",
+        /* @__PURE__ */ jsx("strong", { children: user.email })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleRequestEmailChange, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            value: newEmail,
+            onChange: (e) => setNewEmail(e.target.value),
+            required: true,
+            disabled: isLoading,
+            style: {
+              width: "100%",
+              padding: "12px 16px",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              fontSize: "16px",
+              boxSizing: "border-box",
+              marginBottom: "12px"
+            },
+            placeholder: "New email address"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading,
+            style: {
+              padding: "10px 20px",
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Request Email Change"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  AuthFlow: () => AuthFlow,
+  AuthProvider: () => AuthProvider,
+  ChangePassword: () => ChangePassword,
+  EmailVerificationPage: () => EmailVerificationPage,
+  ForgotPassword: () => ForgotPassword,
+  LoginForm: () => LoginForm,
+  OtpForm: () => OtpForm,
+  ProtectedRoute: () => ProtectedRoute,
+  PublicRoute: () => PublicRoute,
+  RegisterForm: () => RegisterForm,
+  ResetPassword: () => ResetPassword,
+  SignIn: () => SignIn,
+  SignOut: () => SignOut,
+  SignUp: () => SignUp,
+  UserButton: () => UserButton,
+  UserProfile: () => UserProfile,
+  VerifyEmail: () => VerifyEmail,
+  useAuth: () => useAuth,
+  useAuthLegacy: () => useAuth2
+});
 
 // src/node/index.ts
 var node_exports = {};
@@ -1769,11 +4012,11 @@ var AuthClient = class extends AuthService {
   // Override methods that require browser-specific features
   // For Node.js, token persistence must be handled manually
   async register(data) {
-    const registerData = { ...data };
-    if (!registerData.frontendBaseUrl) {
-      registerData.frontendBaseUrl = process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL;
+    const frontendBaseUrl = process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL;
+    if (frontendBaseUrl) {
+      this["httpClient"].setFrontendBaseUrl(frontendBaseUrl);
     }
-    const response = await this["httpClient"].post("/api/v1/auth/register", registerData);
+    const response = await this["httpClient"].post("/api/v1/auth/register", data);
     if (response.success && response.message === "Registration data saved. Verification email sent. Please check your inbox.") {
       return response;
     }
@@ -1839,6 +4082,6 @@ var AuthClient = class extends AuthService {
   }
 };
 
-export { AuthService, HttpClient, node_exports as node, react_exports as react };
+export { AuthFlow, AuthProvider, AuthService, ChangePassword, EmailVerificationPage, ForgotPassword, HttpClient, LoginForm, OtpForm, ProtectedRoute, PublicRoute, RegisterForm, ResetPassword, SignIn, SignOut, SignUp, UserButton, UserProfile, VerifyEmail, node_exports as node, react_exports as react, useAuth };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map