@rqdhw3n/react-auth-flow 1.0.1 → 1.0.3

package/dist/index.es.js

@@ -0,0 +1,944 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { createContext, useReducer, useCallback, useEffect, useContext, useState } from "react";
+import { Navigate } from "react-router-dom";
+const AuthContext = createContext(
+  void 0
+);
+AuthContext.displayName = "AuthContext";
+function normalizeError(error) {
+  if (isAuthError(error)) {
+    return error;
+  }
+  if (error instanceof Error) {
+    return {
+      code: "ERROR",
+      message: error.message,
+      statusCode: void 0
+    };
+  }
+  if (typeof error === "object" && error !== null && "status" in error && "statusText" in error) {
+    const fetchError = error;
+    return {
+      code: `HTTP_${fetchError.status}`,
+      message: fetchError.statusText || "Request failed",
+      statusCode: fetchError.status
+    };
+  }
+  if (typeof error === "object" && error !== null && "error" in error && typeof error.error === "object") {
+    const apiError = error.error;
+    return {
+      code: apiError.code || "API_ERROR",
+      message: apiError.message || "An error occurred",
+      statusCode: apiError.statusCode || void 0,
+      details: apiError.details
+    };
+  }
+  if (typeof error === "object" && error !== null && "message" in error) {
+    const objError = error;
+    return {
+      code: objError.code || "ERROR",
+      message: typeof objError.message === "string" ? objError.message : "An unknown error occurred"
+    };
+  }
+  if (typeof error === "string") {
+    return {
+      code: "ERROR",
+      message: error
+    };
+  }
+  return {
+    code: "UNKNOWN_ERROR",
+    message: "An unknown error occurred"
+  };
+}
+function isAuthError(error) {
+  return typeof error === "object" && error !== null && "code" in error && "message" in error && typeof error.code === "string" && typeof error.message === "string";
+}
+const DEFAULT_ENDPOINTS = {
+  login: "/auth/login",
+  register: "/auth/register",
+  logout: "/auth/logout",
+  me: "/auth/me",
+  refresh: "/auth/refresh",
+  forgotPassword: "/auth/forgot-password",
+  resetPassword: "/auth/reset-password",
+  verifyEmail: "/auth/verify-email"
+};
+const defaultAdapter = async (url, options) => {
+  const response = await fetch(url, options);
+  return response;
+};
+function createAuthClient(config = {}) {
+  const {
+    baseURL = "",
+    endpoints = {},
+    headers = {},
+    credentials = "include",
+    adapter = defaultAdapter
+  } = config;
+  const finalEndpoints = { ...DEFAULT_ENDPOINTS, ...endpoints };
+  async function request(method, endpoint, data) {
+    const url = `${baseURL}${endpoint}`;
+    const options = {
+      method,
+      credentials,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers
+      }
+    };
+    if (data) {
+      options.body = JSON.stringify(data);
+    }
+    try {
+      const response = await adapter(url, options);
+      if (!response.ok) {
+        let errorData = null;
+        try {
+          errorData = await response.json();
+        } catch {
+          errorData = {
+            error: {
+              message: response.statusText,
+              statusCode: response.status
+            }
+          };
+        }
+        throw errorData;
+      }
+      const contentType = response.headers.get("content-type");
+      if (contentType && contentType.includes("application/json")) {
+        return await response.json();
+      }
+      return {};
+    } catch (error) {
+      throw normalizeError(error);
+    }
+  }
+  return {
+    /**
+     * Login with email and password
+     */
+    async login(email, password, rememberMe) {
+      const response = await request(
+        "POST",
+        finalEndpoints.login,
+        { email, password, rememberMe }
+      );
+      return response;
+    },
+    /**
+     * Register a new account
+     */
+    async register(payload) {
+      const response = await request(
+        "POST",
+        finalEndpoints.register,
+        payload
+      );
+      return response;
+    },
+    /**
+     * Logout the user
+     */
+    async logout() {
+      await request("POST", finalEndpoints.logout);
+    },
+    /**
+     * Get current user
+     */
+    async me() {
+      const response = await request(
+        "GET",
+        finalEndpoints.me
+      );
+      return response;
+    },
+    /**
+     * Refresh the authentication session
+     */
+    async refresh() {
+      const response = await request(
+        "POST",
+        finalEndpoints.refresh
+      );
+      return response;
+    },
+    /**
+     * Request a password reset
+     */
+    async forgotPassword(email) {
+      await request("POST", finalEndpoints.forgotPassword, { email });
+    },
+    /**
+     * Reset password with token
+     */
+    async resetPassword(token, password, confirmPassword) {
+      await request("POST", finalEndpoints.resetPassword, {
+        token,
+        password,
+        confirmPassword
+      });
+    },
+    /**
+     * Verify email with token
+     */
+    async verifyEmail(token, email) {
+      await request("POST", finalEndpoints.verifyEmail, { token, email });
+    },
+    /**
+     * Set custom headers for subsequent requests
+     */
+    setHeaders(newHeaders) {
+      Object.assign(headers, newHeaders);
+    },
+    /**
+     * Get current endpoints configuration
+     */
+    getEndpoints() {
+      return finalEndpoints;
+    }
+  };
+}
+const initialState = {
+  user: null,
+  isAuthenticated: false,
+  isLoading: false,
+  error: null
+};
+function authReducer(state, action) {
+  switch (action.type) {
+    case "SET_LOADING":
+      return { ...state, isLoading: action.payload };
+    case "SET_ERROR":
+      return { ...state, error: action.payload, isLoading: false };
+    case "SET_USER":
+      return {
+        ...state,
+        user: action.payload,
+        isAuthenticated: action.payload !== null,
+        error: null,
+        isLoading: false
+      };
+    case "LOGOUT":
+      return initialState;
+    default:
+      return state;
+  }
+}
+const AuthProvider = ({
+  children,
+  baseURL = "",
+  endpoints = {},
+  onAuthError,
+  autoRefresh = true,
+  refreshInterval = 5 * 60 * 1e3
+  // 5 minutes
+}) => {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+  const clientRef = React.useRef(
+    createAuthClient({
+      baseURL,
+      endpoints,
+      credentials: "include"
+    })
+  );
+  const client = clientRef.current;
+  const handleError = useCallback(
+    (error) => {
+      dispatch({ type: "SET_ERROR", payload: error });
+      onAuthError?.(error);
+    },
+    [onAuthError]
+  );
+  const restoreSession = useCallback(async () => {
+    dispatch({ type: "SET_LOADING", payload: true });
+    try {
+      const response = await client.me();
+      if (response.user) {
+        dispatch({ type: "SET_USER", payload: response.user });
+      } else {
+        dispatch({ type: "LOGOUT" });
+      }
+    } catch (_error) {
+      dispatch({ type: "SET_LOADING", payload: false });
+    }
+  }, [client]);
+  const refreshSession = useCallback(async () => {
+    try {
+      const response = await client.refresh();
+      if (response.user) {
+        dispatch({ type: "SET_USER", payload: response.user });
+      }
+    } catch (error) {
+      const authError = normalizeError(error);
+      handleError(authError);
+    }
+  }, [client, handleError]);
+  const login = useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        const response = await client.login(payload.email, payload.password);
+        if (!response.user) {
+          throw new Error("No user data in response");
+        }
+        dispatch({ type: "SET_USER", payload: response.user });
+        return response.user;
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError]
+  );
+  const register = useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        const response = await client.register(payload);
+        if (!response.user) {
+          throw new Error("No user data in response");
+        }
+        dispatch({ type: "SET_USER", payload: response.user });
+        return response.user;
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError]
+  );
+  const logout = useCallback(async () => {
+    dispatch({ type: "SET_LOADING", payload: true });
+    try {
+      await client.logout();
+    } catch (error) {
+      console.error("Logout error:", error);
+    } finally {
+      dispatch({ type: "LOGOUT" });
+    }
+  }, [client]);
+  const forgotPassword = useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        await client.forgotPassword(payload.email);
+        dispatch({ type: "SET_LOADING", payload: false });
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError]
+  );
+  const resetPassword = useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        await client.resetPassword(
+          payload.token,
+          payload.password,
+          payload.confirmPassword
+        );
+        dispatch({ type: "SET_LOADING", payload: false });
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError]
+  );
+  const verifyEmail = useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        await client.verifyEmail(payload.token, payload.email);
+        dispatch({ type: "SET_LOADING", payload: false });
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError]
+  );
+  const setUser = useCallback((user) => {
+    dispatch({ type: "SET_USER", payload: user });
+  }, []);
+  useEffect(() => {
+    restoreSession();
+  }, [restoreSession]);
+  useEffect(() => {
+    if (!autoRefresh || !state.isAuthenticated) {
+      return;
+    }
+    const interval = setInterval(() => {
+      refreshSession();
+    }, refreshInterval);
+    return () => clearInterval(interval);
+  }, [autoRefresh, state.isAuthenticated, refreshSession, refreshInterval]);
+  const value = {
+    ...state,
+    login,
+    register,
+    logout,
+    forgotPassword,
+    resetPassword,
+    verifyEmail,
+    refreshSession,
+    restoreSession,
+    setUser
+  };
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+};
+function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+const LoginForm = ({
+  className = "",
+  labels = {},
+  placeholders = {},
+  submitButtonText = "Login",
+  onSuccess,
+  onError
+}) => {
+  const { login, isLoading: authLoading, error: authError } = useAuth();
+  const [formError, setFormError] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
+  const isLoading = authLoading;
+  const error = formError || authError?.message;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormError("");
+    if (!email || !password) {
+      setFormError("Email and password are required");
+      return;
+    }
+    try {
+      const user = await login({ email, password, rememberMe });
+      onSuccess?.(user);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Login failed";
+      setFormError(errorMsg);
+      onError?.({
+        code: "LOGIN_ERROR",
+        message: errorMsg
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "auth-form-label", children: labels.email || "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: placeholders.email || "your@email.com",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "password", className: "auth-form-label", children: labels.password || "Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "password",
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          placeholder: placeholders.password || "••••••••",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group auth-form-checkbox", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "rememberMe",
+          type: "checkbox",
+          checked: rememberMe,
+          onChange: (e) => setRememberMe(e.target.checked),
+          disabled: isLoading,
+          className: "auth-form-input"
+        }
+      ),
+      /* @__PURE__ */ jsx("label", { htmlFor: "rememberMe", className: "auth-form-label", children: labels.rememberMe || "Remember me" })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "auth-form-button auth-form-button-primary",
+        children: isLoading ? "Loading..." : submitButtonText
+      }
+    )
+  ] });
+};
+LoginForm.displayName = "LoginForm";
+const RegisterForm = ({
+  className = "",
+  labels = {},
+  placeholders = {},
+  submitButtonText = "Register",
+  onSuccess,
+  onError
+}) => {
+  const { register, isLoading: authLoading, error: authError } = useAuth();
+  const [formError, setFormError] = useState("");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const isLoading = authLoading;
+  const error = formError || authError?.message;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormError("");
+    if (!name || !email || !password || !confirmPassword) {
+      setFormError("All fields are required");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setFormError("Passwords do not match");
+      return;
+    }
+    if (password.length < 8) {
+      setFormError("Password must be at least 8 characters");
+      return;
+    }
+    try {
+      const user = await register({
+        name,
+        email,
+        password,
+        confirmPassword
+      });
+      onSuccess?.(user);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Registration failed";
+      setFormError(errorMsg);
+      onError?.({
+        code: "REGISTER_ERROR",
+        message: errorMsg
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "name", className: "auth-form-label", children: labels.name || "Full Name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "name",
+          type: "text",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: placeholders.name || "John Doe",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "auth-form-label", children: labels.email || "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: placeholders.email || "your@email.com",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "password", className: "auth-form-label", children: labels.password || "Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "password",
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          placeholder: placeholders.password || "••••••••",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", className: "auth-form-label", children: labels.confirmPassword || "Confirm Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          placeholder: placeholders.confirmPassword || "••••••••",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "auth-form-button auth-form-button-primary",
+        children: isLoading ? "Loading..." : submitButtonText
+      }
+    )
+  ] });
+};
+RegisterForm.displayName = "RegisterForm";
+const ForgotPasswordForm = ({
+  className = "",
+  labels = {},
+  placeholders = {},
+  submitButtonText = "Send Reset Link",
+  onSuccess,
+  onError
+}) => {
+  const {
+    forgotPassword,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
+  const [formError, setFormError] = useState("");
+  const [email, setEmail] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const isLoading = authLoading;
+  const error = formError || authError?.message;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormError("");
+    setSuccessMessage("");
+    if (!email) {
+      setFormError("Email is required");
+      return;
+    }
+    try {
+      await forgotPassword({ email });
+      setSuccessMessage("Password reset link has been sent to your email");
+      setEmail("");
+      onSuccess?.();
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Request failed";
+      setFormError(errorMsg);
+      onError?.({
+        code: "FORGOT_PASSWORD_ERROR",
+        message: errorMsg
+      });
+    }
+  };
+  if (successMessage) {
+    return /* @__PURE__ */ jsx("div", { className: `auth-form-success ${className}`, children: /* @__PURE__ */ jsx("p", { className: "auth-form-success-message", children: successMessage }) });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "auth-form-label", children: labels.email || "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: placeholders.email || "your@email.com",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "auth-form-button auth-form-button-primary",
+        children: isLoading ? "Loading..." : submitButtonText
+      }
+    )
+  ] });
+};
+ForgotPasswordForm.displayName = "ForgotPasswordForm";
+const ResetPasswordForm = ({
+  token,
+  className = "",
+  labels = {},
+  placeholders = {},
+  submitButtonText = "Reset Password",
+  onSuccess,
+  onError
+}) => {
+  const {
+    resetPassword,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
+  const [formError, setFormError] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const isLoading = authLoading;
+  const error = formError || authError?.message;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormError("");
+    setSuccessMessage("");
+    if (!password || !confirmPassword) {
+      setFormError("Both password fields are required");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setFormError("Passwords do not match");
+      return;
+    }
+    if (password.length < 8) {
+      setFormError("Password must be at least 8 characters");
+      return;
+    }
+    try {
+      await resetPassword({ token, password, confirmPassword });
+      setSuccessMessage("Password has been reset successfully");
+      setPassword("");
+      setConfirmPassword("");
+      onSuccess?.();
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Reset failed";
+      setFormError(errorMsg);
+      onError?.({
+        code: "RESET_PASSWORD_ERROR",
+        message: errorMsg
+      });
+    }
+  };
+  if (successMessage) {
+    return /* @__PURE__ */ jsx("div", { className: `auth-form-success ${className}`, children: /* @__PURE__ */ jsx("p", { className: "auth-form-success-message", children: successMessage }) });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "password", className: "auth-form-label", children: labels.password || "New Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "password",
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          placeholder: placeholders.password || "••••••••",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", className: "auth-form-label", children: labels.confirmPassword || "Confirm Password" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "confirmPassword",
+          type: "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          placeholder: placeholders.confirmPassword || "••••••••",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "auth-form-button auth-form-button-primary",
+        children: isLoading ? "Loading..." : submitButtonText
+      }
+    )
+  ] });
+};
+ResetPasswordForm.displayName = "ResetPasswordForm";
+const VerifyEmailForm = ({
+  token: initialToken,
+  email: initialEmail,
+  className = "",
+  labels = {},
+  placeholders = {},
+  submitButtonText = "Verify Email",
+  onSuccess,
+  onError
+}) => {
+  const {
+    verifyEmail,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
+  const [formError, setFormError] = useState("");
+  const [email, setEmail] = useState(initialEmail || "");
+  const [token, setToken] = useState(initialToken || "");
+  const [successMessage, setSuccessMessage] = useState("");
+  const isLoading = authLoading;
+  const error = formError || authError?.message;
+  useEffect(() => {
+    if (token && email && !successMessage && !error) {
+      handleSubmit({ preventDefault: () => {
+      } });
+    }
+  }, [token, email]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormError("");
+    setSuccessMessage("");
+    if (!token) {
+      setFormError("Verification token is required");
+      return;
+    }
+    if (!email) {
+      setFormError("Email is required");
+      return;
+    }
+    try {
+      await verifyEmail({ token, email });
+      setSuccessMessage("Email has been verified successfully");
+      onSuccess?.();
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Verification failed";
+      setFormError(errorMsg);
+      onError?.({
+        code: "VERIFY_EMAIL_ERROR",
+        message: errorMsg
+      });
+    }
+  };
+  if (successMessage) {
+    return /* @__PURE__ */ jsx("div", { className: `auth-form-success ${className}`, children: /* @__PURE__ */ jsx("p", { className: "auth-form-success-message", children: successMessage }) });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "auth-form-label", children: labels.email || "Email" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "email",
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: placeholders.email || "your@email.com",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "token", className: "auth-form-label", children: labels.token || "Verification Code" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "token",
+          type: "text",
+          value: token,
+          onChange: (e) => setToken(e.target.value),
+          placeholder: placeholders.token || "Enter verification code",
+          disabled: isLoading,
+          className: "auth-form-input",
+          required: true
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "auth-form-button auth-form-button-primary",
+        children: isLoading ? "Loading..." : submitButtonText
+      }
+    )
+  ] });
+};
+VerifyEmailForm.displayName = "VerifyEmailForm";
+const ProtectedRoute = ({
+  children,
+  redirectTo = "/login",
+  fallback,
+  roles,
+  permissions
+}) => {
+  const { isAuthenticated, isLoading, user } = useAuth();
+  if (isLoading) {
+    return fallback || /* @__PURE__ */ jsx("div", { className: "auth-loading", children: "Loading..." });
+  }
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, replace: true });
+  }
+  if (roles && roles.length > 0) {
+    const hasRole = user?.roles?.some((role) => roles.includes(role));
+    if (!hasRole) {
+      return /* @__PURE__ */ jsx("div", { className: "auth-forbidden", children: /* @__PURE__ */ jsx("p", { children: "You do not have permission to access this page." }) });
+    }
+  }
+  if (permissions && permissions.length > 0) {
+    const hasPermission = user?.permissions?.some(
+      (permission) => permissions.includes(permission)
+    );
+    if (!hasPermission) {
+      return /* @__PURE__ */ jsx("div", { className: "auth-forbidden", children: /* @__PURE__ */ jsx("p", { children: "You do not have permission to access this page." }) });
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+ProtectedRoute.displayName = "ProtectedRoute";
+export {
+  AuthContext,
+  AuthProvider,
+  ForgotPasswordForm,
+  LoginForm,
+  ProtectedRoute,
+  RegisterForm,
+  ResetPasswordForm,
+  VerifyEmailForm,
+  createAuthClient,
+  normalizeError,
+  useAuth
+};
+//# sourceMappingURL=index.es.js.map