@thetechfossil/auth2 1.2.1

package/dist/index.components.js

@@ -0,0 +1,1757 @@
+'use strict';
+
+var react = require('react');
+var axios = require('axios');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var axios__default = /*#__PURE__*/_interopDefault(axios);
+
+// src/react/components/LoginForm.tsx
+var HttpClient = class {
+  constructor(baseUrl, defaultHeaders = {}) {
+    this.csrfToken = null;
+    this.axiosInstance = axios__default.default.create({
+      baseURL: baseUrl.replace(/\/$/, ""),
+      headers: {
+        "Content-Type": "application/json",
+        ...defaultHeaders
+      },
+      withCredentials: true,
+      // Include cookies for CSRF
+      timeout: 3e4
+      // 30 second timeout
+    });
+    this.axiosInstance.interceptors.request.use(
+      (config) => {
+        if (this.csrfToken && ["post", "put", "delete", "patch"].includes(config.method?.toLowerCase() || "")) {
+          config.headers["x-csrf-token"] = this.csrfToken;
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      async (error) => {
+        const originalRequest = error.config;
+        if (error.response?.status === 403 && !originalRequest._retry) {
+          originalRequest._retry = true;
+          try {
+            await this.refreshCsrfToken();
+            if (originalRequest.headers) {
+              originalRequest.headers["x-csrf-token"] = this.csrfToken;
+            }
+            return this.axiosInstance(originalRequest);
+          } catch (refreshError) {
+            return Promise.reject(refreshError);
+          }
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+  async get(endpoint, headers) {
+    const response = await this.axiosInstance.get(endpoint, { headers });
+    return response.data;
+  }
+  async post(endpoint, data, headers) {
+    const response = await this.axiosInstance.post(endpoint, data, { headers });
+    return response.data;
+  }
+  async put(endpoint, data, headers) {
+    const response = await this.axiosInstance.put(endpoint, data, { headers });
+    return response.data;
+  }
+  async delete(endpoint, headers) {
+    const response = await this.axiosInstance.delete(endpoint, { headers });
+    return response.data;
+  }
+  setAuthToken(token) {
+    this.axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+  }
+  removeAuthToken() {
+    delete this.axiosInstance.defaults.headers.common["Authorization"];
+  }
+  setCsrfToken(token) {
+    this.csrfToken = token;
+  }
+  getCsrfToken() {
+    return this.csrfToken;
+  }
+  removeCsrfToken() {
+    this.csrfToken = null;
+  }
+  async refreshCsrfToken() {
+    try {
+      const response = await this.axiosInstance.get("/api/v1/auth/csrf-token");
+      this.csrfToken = response.data.csrfToken;
+    } catch (error) {
+      console.error("Failed to refresh CSRF token:", error);
+      throw error;
+    }
+  }
+};
+
+// src/core/auth-service.ts
+var AuthService = class {
+  constructor(config) {
+    this.token = null;
+    this.config = {
+      localStorageKey: "auth_token",
+      csrfEnabled: true,
+      ...config
+    };
+    this.httpClient = new HttpClient(this.config.baseUrl);
+    this.loadTokenFromStorage();
+    if (this.config.csrfEnabled && typeof window !== "undefined") {
+      this.refreshCsrfToken();
+    }
+  }
+  loadTokenFromStorage() {
+    if (typeof window !== "undefined" && this.config.localStorageKey) {
+      try {
+        const token = localStorage.getItem(this.config.localStorageKey);
+        if (token) {
+          this.token = token;
+          this.httpClient.setAuthToken(token);
+        }
+      } catch (error) {
+        console.warn("Failed to load token from storage:", error);
+      }
+    }
+  }
+  saveTokenToStorage(token) {
+    if (typeof window !== "undefined" && this.config.localStorageKey) {
+      try {
+        localStorage.setItem(this.config.localStorageKey, token);
+      } catch (error) {
+        console.warn("Failed to save token to storage:", error);
+      }
+    }
+  }
+  removeTokenFromStorage() {
+    if (typeof window !== "undefined" && this.config.localStorageKey) {
+      try {
+        localStorage.removeItem(this.config.localStorageKey);
+      } catch (error) {
+        console.warn("Failed to remove token from storage:", error);
+      }
+    }
+  }
+  isAuthenticated() {
+    return !!this.token;
+  }
+  getToken() {
+    return this.token;
+  }
+  getCurrentUser() {
+    if (!this.token)
+      return null;
+    try {
+      const payload = JSON.parse(atob(this.token.split(".")[1]));
+      return payload.user || null;
+    } catch (error) {
+      console.error("Failed to parse user from token:", error);
+      return null;
+    }
+  }
+  // CSRF Token Management
+  async refreshCsrfToken() {
+    if (!this.config.csrfEnabled)
+      return;
+    try {
+      const response = await this.httpClient.get("/api/v1/auth/csrf-token");
+      if (response.csrfToken) {
+        this.httpClient.setCsrfToken(response.csrfToken);
+      }
+    } catch (error) {
+      console.error("Failed to get CSRF token:", error);
+    }
+  }
+  getCsrfToken() {
+    return this.httpClient.getCsrfToken();
+  }
+  // OAuth Methods
+  loginWithOAuth(provider) {
+    if (typeof window === "undefined") {
+      throw new Error("OAuth login is only available in browser environments");
+    }
+    const oauthUrl = `${this.config.baseUrl}/api/v1/auth/oauth/${provider}`;
+    window.location.href = oauthUrl;
+  }
+  linkOAuthProvider(provider) {
+    if (typeof window === "undefined") {
+      throw new Error("OAuth linking is only available in browser environments");
+    }
+    if (!this.token) {
+      throw new Error("Must be authenticated to link OAuth provider");
+    }
+    const linkUrl = `${this.config.baseUrl}/api/v1/auth/oauth/${provider}/link`;
+    window.location.href = linkUrl;
+  }
+  async unlinkOAuthProvider(provider) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.delete(
+      `/api/v1/auth/oauth/${provider}/unlink`
+    );
+    return response;
+  }
+  // Standard Auth Methods
+  async login(data) {
+    const response = await this.httpClient.post("/api/v1/auth/login", data);
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+      return response;
+    }
+    if (response.success && response.message === "OTP sent to your email.") {
+      return response;
+    }
+    if (response.success && response.message === "OTP verified successfully." && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+      return response;
+    }
+    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);
+    if (response.success && response.message === "Registration data saved. Verification email sent. Please check your inbox.") {
+      return response;
+    }
+    throw new Error(response.message || "Registration failed");
+  }
+  async verify(data) {
+    const response = await this.httpClient.post("/api/v1/auth/verify", data);
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+    }
+    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);
+    }
+    return response;
+  }
+  async logout() {
+    this.token = null;
+    this.httpClient.removeAuthToken();
+    this.httpClient.removeCsrfToken();
+    this.removeTokenFromStorage();
+  }
+  async getProfile() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.get("/api/v1/user/me");
+    return response.user;
+  }
+  async updateProfile(data) {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.post("/api/v1/user/update/user", data);
+    if (response.success && response.token) {
+      this.token = response.token;
+      this.httpClient.setAuthToken(response.token);
+      this.saveTokenToStorage(response.token);
+    }
+    return response;
+  }
+  async getAllUsers() {
+    if (!this.token) {
+      throw new Error("Not authenticated");
+    }
+    const response = await this.httpClient.get("/api/v1/user/all");
+    return response.users;
+  }
+  async getUserById(id) {
+    const response = await this.httpClient.get(`/api/v1/user/${id}`);
+    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;
+  }
+  async resetPassword(token, password) {
+    const response = await this.httpClient.post("/api/v1/auth/reset-password", { token, password });
+    return response;
+  }
+};
+
+// src/react/use-auth.ts
+var useAuth = (config) => {
+  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) {
+      const currentUser = authService.getCurrentUser();
+      setUser(currentUser);
+    } else {
+      setUser(null);
+    }
+    setLoading(false);
+  }, [authService]);
+  react.useEffect(() => {
+    checkAuthStatus();
+  }, [checkAuthStatus]);
+  const register = react.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.register(registerData);
+      return response;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const login = react.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 = react.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 = react.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 = react.useCallback(async () => {
+    setLoading(true);
+    try {
+      await authService.logout();
+      setUser(null);
+      setIsAuthenticated(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const updateProfile = react.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 = react.useCallback(async () => {
+    setLoading(true);
+    try {
+      const userData = await authService.getProfile();
+      setUser(userData);
+      return userData;
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const getAllUsers = react.useCallback(async () => {
+    setLoading(true);
+    try {
+      return await authService.getAllUsers();
+    } finally {
+      setLoading(false);
+    }
+  }, [authService]);
+  const getUserById = react.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] = react.useState("");
+  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 } = useAuth({
+    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);
+  };
+  return /* @__PURE__ */ jsxRuntime.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"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: {
+    display: "flex",
+    flexDirection: "column"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600
+    }, children: usePassword ? "Login with Password" : "Login with OTP" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#f8d7da",
+      color: "#721c24",
+      border: "1px solid #f5c6cb",
+      borderRadius: "8px",
+      fontSize: "14px",
+      fontWeight: 500
+    }, children: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Email:" }),
+      /* @__PURE__ */ jsxRuntime.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",
+            color: "#111827",
+            transition: "all 0.2s ease",
+            backgroundColor: "#ffffff"
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    usePassword && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px",
+      position: "relative"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "login-password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#555",
+        fontSize: "14px"
+      }, children: "Password:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "login-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",
+            color: "#333",
+            transition: "all 0.2s ease",
+            backgroundColor: "#fafafa"
+          },
+          placeholder: "Enter your password"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: togglePasswordVisibility,
+          disabled: isLoading,
+          style: {
+            position: "absolute",
+            right: "12px",
+            top: "38px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#666",
+            fontSize: "14px"
+          },
+          children: showPassword ? "Hide" : "Show"
+        }
+      )
+    ] }),
+    usePassword && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      marginBottom: "16px",
+      marginTop: "8px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: "remember-me",
+          checked: rememberMe,
+          onChange: (e) => setRememberMe(e.target.checked),
+          disabled: isLoading,
+          style: {
+            marginRight: "8px",
+            cursor: "pointer",
+            width: "16px",
+            height: "16px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: "remember-me",
+          style: {
+            fontSize: "14px",
+            color: "#666",
+            cursor: "pointer",
+            userSelect: "none"
+          },
+          children: "Remember me"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          marginTop: "8px"
+        },
+        children: isLoading ? usePassword ? "Logging in..." : "Sending OTP..." : usePassword ? "Login" : "Send OTP"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      textAlign: "center",
+      marginTop: "20px",
+      paddingTop: "20px",
+      borderTop: "1px solid #eee"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleAuthMethod,
+        disabled: isLoading,
+        style: {
+          background: "none",
+          border: "none",
+          color: "#007bff",
+          textDecoration: "none",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600,
+          padding: "0",
+          transition: "color 0.2s ease"
+        },
+        children: usePassword ? "Login with OTP instead" : "Login with password instead"
+      }
+    ) }),
+    showOAuthButtons && oauthProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginTop: "20px",
+      paddingTop: "20px",
+      borderTop: "1px solid #eee"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        position: "relative",
+        marginBottom: "16px"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          top: "50%",
+          left: 0,
+          right: 0,
+          height: "1px",
+          backgroundColor: "#eee"
+        } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "relative",
+          textAlign: "center"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+          backgroundColor: "#ffffff",
+          padding: "0 12px",
+          color: "#666",
+          fontSize: "14px"
+        }, children: "Or continue with" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        display: "grid",
+        gridTemplateColumns: oauthProviders.length === 1 ? "1fr" : "repeat(2, 1fr)",
+        gap: "12px"
+      }, children: [
+        oauthProviders.includes("google") && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: `${config?.baseUrl || "http://localhost:7000"}/api/v1/auth/oauth/google`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              padding: "10px 16px",
+              backgroundColor: "#ffffff",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              color: "#333",
+              textDecoration: "none",
+              fontSize: "14px",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f8f8f8";
+              e.currentTarget.style.borderColor = "#007bff";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "#ffffff";
+              e.currentTarget.style.borderColor = "#ddd";
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "18px", height: "18px" }, viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#4285F4",
+                    d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#34A853",
+                    d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#FBBC05",
+                    d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#EA4335",
+                    d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  }
+                )
+              ] }),
+              "Google"
+            ]
+          }
+        ),
+        oauthProviders.includes("github") && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: `${config?.baseUrl || "http://localhost:7000"}/api/v1/auth/oauth/github`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              padding: "10px 16px",
+              backgroundColor: "#24292e",
+              border: "1px solid #24292e",
+              borderRadius: "8px",
+              color: "#ffffff",
+              textDecoration: "none",
+              fontSize: "14px",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#1b1f23";
+              e.currentTarget.style.borderColor = "#1b1f23";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "#24292e";
+              e.currentTarget.style.borderColor = "#24292e";
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { width: "18px", height: "18px" }, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }),
+              "GitHub"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    showRegisterLink && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      textAlign: "center",
+      marginTop: "20px",
+      paddingTop: "20px",
+      borderTop: "1px solid #eee"
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+      color: "#666",
+      fontSize: "14px"
+    }, children: [
+      "Don't have an account?",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRegisterClick,
+          disabled: isLoading,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#007bff",
+            textDecoration: "none",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: 600,
+            padding: "0",
+            transition: "color 0.2s ease"
+          },
+          children: "Register"
+        }
+      )
+    ] }) })
+  ] }) });
+};
+var RegisterForm = ({
+  onRegisterSuccess,
+  onLoginClick,
+  showLoginLink = true,
+  authConfig,
+  oauthProviders = ["google", "github"],
+  showOAuthButtons = true
+}) => {
+  const [name, setName] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  react.useState(false);
+  react.useState(false);
+  const getPasswordStrength = (pwd) => {
+    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" };
+    return { strength: "strong", score, label: "Strong" };
+  };
+  getPasswordStrength(password);
+  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 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 long");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const registerData = {
+        name,
+        email,
+        password,
+        frontendBaseUrl: typeof window !== "undefined" ? process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || window.location.origin : void 0
+      };
+      const response = await register(registerData);
+      if (response.success) {
+        onRegisterSuccess?.();
+      } else {
+        setError(response.message || "Registration failed");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.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"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: {
+    display: "flex",
+    flexDirection: "column"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600
+    }, children: "Register" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#f8d7da",
+      color: "#721c24",
+      border: "1px solid #f5c6cb",
+      borderRadius: "8px",
+      fontSize: "14px",
+      fontWeight: 500
+    }, children: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "Name:" }),
+      /* @__PURE__ */ jsxRuntime.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",
+            color: "#111827",
+            transition: "all 0.2s ease",
+            backgroundColor: "#ffffff"
+          },
+          placeholder: "Enter your name"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "register-email", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#555",
+        fontSize: "14px"
+      }, children: "Email:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "register-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",
+            color: "#333",
+            transition: "all 0.2s ease",
+            backgroundColor: "#fafafa"
+          },
+          placeholder: "Enter your email"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#555",
+        fontSize: "14px"
+      }, children: "Password:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "password",
+          type: "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",
+            color: "#333",
+            transition: "all 0.2s ease",
+            backgroundColor: "#fafafa"
+          },
+          placeholder: "Enter your password",
+          minLength: 6
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirm-password", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#555",
+        fontSize: "14px"
+      }, children: "Confirm Password:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "confirm-password",
+          type: "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",
+            color: "#333",
+            transition: "all 0.2s ease",
+            backgroundColor: "#fafafa"
+          },
+          placeholder: "Confirm your password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        style: {
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          marginTop: "8px"
+        },
+        children: isLoading ? "Registering..." : "Register"
+      }
+    ),
+    showOAuthButtons && oauthProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginTop: "20px",
+      paddingTop: "20px",
+      borderTop: "1px solid #eee"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        position: "relative",
+        marginBottom: "16px"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "absolute",
+          top: "50%",
+          left: 0,
+          right: 0,
+          height: "1px",
+          backgroundColor: "#eee"
+        } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          position: "relative",
+          textAlign: "center"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+          backgroundColor: "#ffffff",
+          padding: "0 12px",
+          color: "#666",
+          fontSize: "14px"
+        }, children: "Or continue with" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        display: "grid",
+        gridTemplateColumns: oauthProviders.length === 1 ? "1fr" : "repeat(2, 1fr)",
+        gap: "12px"
+      }, children: [
+        oauthProviders.includes("google") && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: `${config.baseUrl}/api/v1/auth/oauth/google`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              padding: "10px 16px",
+              backgroundColor: "#ffffff",
+              border: "1px solid #ddd",
+              borderRadius: "8px",
+              color: "#333",
+              textDecoration: "none",
+              fontSize: "14px",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f8f8f8";
+              e.currentTarget.style.borderColor = "#007bff";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "#ffffff";
+              e.currentTarget.style.borderColor = "#ddd";
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { style: { width: "18px", height: "18px" }, viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#4285F4",
+                    d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#34A853",
+                    d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#FBBC05",
+                    d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fill: "#EA4335",
+                    d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  }
+                )
+              ] }),
+              "Google"
+            ]
+          }
+        ),
+        oauthProviders.includes("github") && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: `${config.baseUrl}/api/v1/auth/oauth/github`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              padding: "10px 16px",
+              backgroundColor: "#24292e",
+              border: "1px solid #24292e",
+              borderRadius: "8px",
+              color: "#ffffff",
+              textDecoration: "none",
+              fontSize: "14px",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#1b1f23";
+              e.currentTarget.style.borderColor = "#1b1f23";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "#24292e";
+              e.currentTarget.style.borderColor = "#24292e";
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { width: "18px", height: "18px" }, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }),
+              "GitHub"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    showLoginLink && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      textAlign: "center",
+      marginTop: "20px",
+      paddingTop: "20px",
+      borderTop: "1px solid #eee"
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+      color: "#666",
+      fontSize: "14px"
+    }, children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onLoginClick,
+          disabled: isLoading,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#007bff",
+            textDecoration: "none",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: 600,
+            padding: "0",
+            transition: "color 0.2s ease"
+          },
+          children: "Login"
+        }
+      )
+    ] }) })
+  ] }) });
+};
+var OtpForm = ({
+  email,
+  onVerifySuccess,
+  onBackToLogin
+}) => {
+  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 } = useAuth({
+    baseUrl: typeof window !== "undefined" ? window.location.origin : "http://localhost:7000"
+  });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    if (!/^\d{6}$/.test(otp)) {
+      setError("Please enter a valid 6-digit OTP");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const response = await verify({ email, otp });
+      if (response.success) {
+        onVerifySuccess?.();
+      } else {
+        setError(response.message || "Verification failed");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleOtpChange = (e) => {
+    const value = e.target.value;
+    if (/^\d{0,6}$/.test(value)) {
+      setOtp(value);
+    }
+  };
+  const handleResendOtp = async () => {
+    if (resendCooldown > 0 || resendLoading)
+      return;
+    setResendLoading(true);
+    setError(null);
+    try {
+      const response = await login({ email });
+      if (response.success) {
+        setResendCooldown(60);
+        const interval = setInterval(() => {
+          setResendCooldown((prev) => {
+            if (prev <= 1) {
+              clearInterval(interval);
+              return 0;
+            }
+            return prev - 1;
+          });
+        }, 1e3);
+      } else {
+        setError(response.message || "Failed to resend OTP");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to resend OTP");
+    } finally {
+      setResendLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.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"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: {
+    display: "flex",
+    flexDirection: "column"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#1f2937",
+      fontSize: "24px",
+      fontWeight: 600
+    }, children: "Verify OTP" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+      textAlign: "center",
+      marginBottom: "24px",
+      color: "#4b5563",
+      fontSize: "14px"
+    }, children: [
+      "Enter the 6-digit code sent to ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#111827" }, children: email })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "12px 16px",
+      marginBottom: "20px",
+      backgroundColor: "#f8d7da",
+      color: "#721c24",
+      border: "1px solid #f5c6cb",
+      borderRadius: "8px",
+      fontSize: "14px",
+      fontWeight: 500
+    }, children: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginBottom: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "otp", style: {
+        display: "block",
+        marginBottom: "8px",
+        fontWeight: 500,
+        color: "#374151",
+        fontSize: "14px"
+      }, children: "OTP Code:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "otp",
+          type: "text",
+          value: otp,
+          onChange: handleOtpChange,
+          required: true,
+          disabled: isLoading,
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            fontSize: "20px",
+            boxSizing: "border-box",
+            color: "#111827",
+            transition: "all 0.2s ease",
+            backgroundColor: "#ffffff",
+            textAlign: "center",
+            letterSpacing: "5px"
+          },
+          maxLength: 6,
+          placeholder: "123456",
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading || otp.length !== 6,
+        style: {
+          padding: "14px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "16px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          marginTop: "8px"
+        },
+        children: isLoading ? "Verifying..." : "Verify OTP"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      textAlign: "center",
+      marginTop: "20px",
+      paddingTop: "20px",
+      borderTop: "1px solid #eee"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleResendOtp,
+          disabled: isLoading || resendLoading || resendCooldown > 0,
+          style: {
+            background: "none",
+            border: "none",
+            color: resendCooldown > 0 ? "#999" : "#007bff",
+            textDecoration: "none",
+            cursor: resendCooldown > 0 ? "not-allowed" : "pointer",
+            fontSize: "14px",
+            fontWeight: 600,
+            padding: "0",
+            marginBottom: "12px",
+            transition: "color 0.2s ease",
+            display: "block",
+            width: "100%"
+          },
+          children: resendLoading ? "Sending..." : resendCooldown > 0 ? `Resend OTP in ${resendCooldown}s` : "Resend OTP"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBackToLogin,
+          disabled: isLoading,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#007bff",
+            textDecoration: "none",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: 600,
+            padding: "0",
+            transition: "color 0.2s ease"
+          },
+          children: "Back to Login"
+        }
+      )
+    ] })
+  ] }) });
+};
+var AuthFlow = ({
+  onAuthComplete,
+  initialStep = "login",
+  showTitle = true
+}) => {
+  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) {
+      setStep("otp");
+      setMessage(null);
+    } else {
+      setMessage(null);
+      onAuthComplete?.();
+    }
+  };
+  const handleRegisterSuccess = () => {
+    setMessage("Registration successful! Please check your email for verification.");
+    setTimeout(() => {
+      setStep("login");
+      setMessage(null);
+    }, 3e3);
+  };
+  const handleVerifySuccess = () => {
+    setMessage(null);
+    onAuthComplete?.();
+  };
+  const handleBackToLogin = () => {
+    setStep("login");
+    setMessage(null);
+  };
+  const renderCurrentStep = () => {
+    switch (step) {
+      case "login":
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showTitle && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+            textAlign: "center",
+            marginBottom: "24px",
+            color: "#333",
+            fontSize: "32px",
+            fontWeight: 700
+          }, children: "Welcome Back" }),
+          message && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            padding: "12px 16px",
+            marginBottom: "20px",
+            backgroundColor: "#d4edda",
+            color: "#155724",
+            border: "1px solid #c3e6cb",
+            borderRadius: "8px",
+            fontSize: "14px",
+            fontWeight: 500
+          }, children: message }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LoginForm,
+            {
+              onLoginSuccess: handleLoginSuccess,
+              onRegisterClick: () => setStep("register"),
+              showRegisterLink: true
+            }
+          )
+        ] });
+      case "register":
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showTitle && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+            textAlign: "center",
+            marginBottom: "24px",
+            color: "#333",
+            fontSize: "32px",
+            fontWeight: 700
+          }, children: "Create Account" }),
+          message && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            padding: "12px 16px",
+            marginBottom: "20px",
+            backgroundColor: "#d4edda",
+            color: "#155724",
+            border: "1px solid #c3e6cb",
+            borderRadius: "8px",
+            fontSize: "14px",
+            fontWeight: 500
+          }, children: message }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RegisterForm,
+            {
+              onRegisterSuccess: handleRegisterSuccess,
+              onLoginClick: () => setStep("login"),
+              showLoginLink: true
+            }
+          )
+        ] });
+      case "otp":
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showTitle && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+            textAlign: "center",
+            marginBottom: "24px",
+            color: "#333",
+            fontSize: "32px",
+            fontWeight: 700
+          }, children: "Verify Your Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OtpForm,
+            {
+              email,
+              onVerifySuccess: handleVerifySuccess,
+              onBackToLogin: handleBackToLogin
+            }
+          )
+        ] });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showTitle && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+            textAlign: "center",
+            marginBottom: "24px",
+            color: "#333",
+            fontSize: "32px",
+            fontWeight: 700
+          }, children: "Welcome Back" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LoginForm,
+            {
+              onLoginSuccess: handleLoginSuccess,
+              onRegisterClick: () => setStep("register"),
+              showRegisterLink: true
+            }
+          )
+        ] });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    minHeight: "300px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, children: renderCurrentStep() });
+};
+var EmailVerificationPage = ({
+  token,
+  onVerificationSuccess,
+  onVerificationError,
+  baseUrl
+}) => {
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [message, setMessage] = react.useState("");
+  const [isSuccess, setIsSuccess] = react.useState(false);
+  const { verifyEmailToken } = useAuth({
+    baseUrl: baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:7000")
+  });
+  react.useEffect(() => {
+    const verifyEmail = async () => {
+      if (!token) {
+        setIsLoading(false);
+        setMessage("Invalid verification token");
+        setIsSuccess(false);
+        onVerificationError?.("Invalid verification token");
+        return;
+      }
+      try {
+        const response = await verifyEmailToken(token);
+        if (response.success) {
+          setIsLoading(false);
+          setMessage(response.message || "Email verified successfully!");
+          setIsSuccess(true);
+          onVerificationSuccess?.();
+        } else {
+          setIsLoading(false);
+          setMessage(response.message || "Email verification failed");
+          setIsSuccess(false);
+          onVerificationError?.(response.message || "Email verification failed");
+        }
+      } catch (err) {
+        setIsLoading(false);
+        const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
+        setMessage(errorMessage);
+        setIsSuccess(false);
+        onVerificationError?.(errorMessage);
+      }
+    };
+    verifyEmail();
+  }, [token, verifyEmailToken, onVerificationSuccess, onVerificationError]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      maxWidth: "500px",
+      margin: "0 auto",
+      padding: "30px",
+      borderRadius: "12px",
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+      backgroundColor: "#ffffff",
+      textAlign: "center",
+      border: "1px solid #eaeaea"
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "20px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "black" }, children: "Verifying your email..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        border: "4px solid #f3f3f3",
+        borderTop: "4px solid #007bff",
+        borderRadius: "50%",
+        width: "40px",
+        height: "40px",
+        animation: "spin 2s linear infinite",
+        margin: "20px auto"
+      } })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    maxWidth: "500px",
+    margin: "0 auto",
+    padding: "30px",
+    borderRadius: "12px",
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    backgroundColor: "#ffffff",
+    textAlign: "center",
+    border: "1px solid #eaeaea"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    padding: "20px"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "black" }, children: "Email Verification" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      padding: "16px 20px",
+      margin: "24px 0",
+      borderRadius: "8px",
+      fontSize: "15px",
+      fontWeight: 500,
+      backgroundColor: isSuccess ? "#d4edda" : "#f8d7da",
+      color: isSuccess ? "#155724" : "#721c24",
+      border: isSuccess ? "1px solid #c3e6cb" : "1px solid #f5c6cb"
+    }, children: message }),
+    isSuccess && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginTop: "24px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "black" }, children: "Your email has been successfully verified!" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => window.location.href = "/login",
+          style: {
+            padding: "12px 24px",
+            backgroundColor: "#007bff",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "16px",
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.2s ease"
+          },
+          children: "Go to Login"
+        }
+      )
+    ] })
+  ] }) });
+};
+
+exports.AuthFlow = AuthFlow;
+exports.EmailVerificationPage = EmailVerificationPage;
+exports.LoginForm = LoginForm;
+exports.OtpForm = OtpForm;
+exports.RegisterForm = RegisterForm;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.components.js.map