@rqdhw3n/react-auth-flow 1.0.5 → 1.0.6

package/dist/index.es.js

@@ -1,14 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useReducer, useCallback, useEffect, useContext, useState } from "react";
+import { createContext, useReducer, useMemo, useCallback, useEffect, useContext, useState, useRef, useId } from "react";
 import { Navigate } from "react-router-dom";
-const authStyles = ".rq-auth-container,\n.rq-auth-container * {\n  box-sizing: border-box;\n}\n\n.rq-auth-container {\n  --rq-auth-primary: #2563eb;\n  --rq-auth-primary-hover: #1d4ed8;\n  --rq-auth-primary-soft: rgba(37, 99, 235, 0.16);\n  --rq-auth-border: #dbe4f0;\n  --rq-auth-border-strong: #c7d4e5;\n  --rq-auth-text: #0f172a;\n  --rq-auth-muted: #64748b;\n  --rq-auth-surface: #ffffff;\n  --rq-auth-surface-alt: #f8fbff;\n  --rq-auth-disabled: #eef2f7;\n  --rq-auth-error: #b91c1c;\n  --rq-auth-error-border: #fecaca;\n  --rq-auth-error-bg: #fef2f2;\n  --rq-auth-success: #047857;\n  --rq-auth-success-border: #a7f3d0;\n  --rq-auth-success-bg: #ecfdf5;\n  width: min(100%, 28rem);\n  margin: 0 auto;\n  padding: clamp(1.25rem, 3vw, 2rem);\n  border: 1px solid var(--rq-auth-border);\n  border-radius: 1.5rem;\n  background:\n    radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 34%),\n    linear-gradient(180deg, var(--rq-auth-surface) 0%, var(--rq-auth-surface-alt) 100%);\n  box-shadow:\n    0 24px 48px rgba(15, 23, 42, 0.08),\n    0 8px 20px rgba(15, 23, 42, 0.05);\n  color: var(--rq-auth-text);\n}\n\n.rq-auth-header {\n  margin-bottom: 1.5rem;\n}\n\n.rq-auth-title {\n  margin: 0;\n  font-size: clamp(1.625rem, 4vw, 2rem);\n  font-weight: 700;\n  line-height: 1.15;\n  letter-spacing: -0.02em;\n  color: var(--rq-auth-text);\n}\n\n.rq-auth-subtitle {\n  margin: 0.5rem 0 0;\n  font-size: 0.95rem;\n  line-height: 1.6;\n  color: var(--rq-auth-muted);\n}\n\n.rq-auth-form {\n  display: grid;\n  gap: 1rem;\n}\n\n.rq-auth-field {\n  display: grid;\n  gap: 0.5rem;\n}\n\n.rq-auth-label {\n  font-size: 0.94rem;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--rq-auth-text);\n}\n\n.rq-auth-input {\n  width: 100%;\n  min-width: 0;\n  padding: 0.9rem 1rem;\n  border: 1px solid var(--rq-auth-border);\n  border-radius: 0.95rem;\n  background: rgba(255, 255, 255, 0.92);\n  color: var(--rq-auth-text);\n  font: inherit;\n  line-height: 1.5;\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease,\n    transform 0.2s ease;\n  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n}\n\n.rq-auth-input::placeholder {\n  color: #94a3b8;\n}\n\n.rq-auth-input:hover {\n  border-color: var(--rq-auth-border-strong);\n}\n\n.rq-auth-input:focus {\n  border-color: var(--rq-auth-primary);\n  box-shadow:\n    0 0 0 4px var(--rq-auth-primary-soft),\n    inset 0 1px 2px rgba(15, 23, 42, 0.03);\n}\n\n.rq-auth-input:disabled {\n  cursor: not-allowed;\n  background: var(--rq-auth-disabled);\n  color: #94a3b8;\n}\n\n.rq-auth-checkbox {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  font-size: 0.94rem;\n  line-height: 1.5;\n  color: var(--rq-auth-muted);\n}\n\n.rq-auth-checkbox-input {\n  width: 1.05rem;\n  height: 1.05rem;\n  margin: 0.2rem 0 0;\n  border-radius: 0.35rem;\n  accent-color: var(--rq-auth-primary);\n  flex: 0 0 auto;\n}\n\n.rq-auth-checkbox-input:disabled {\n  cursor: not-allowed;\n}\n\n.rq-auth-checkbox-label {\n  color: var(--rq-auth-muted);\n}\n\n.rq-auth-button {\n  width: 100%;\n  border: 0;\n  border-radius: 0.95rem;\n  padding: 0.95rem 1.15rem;\n  background: linear-gradient(180deg, #3b82f6 0%, var(--rq-auth-primary) 100%);\n  color: #ffffff;\n  font: inherit;\n  font-size: 0.98rem;\n  font-weight: 600;\n  line-height: 1.2;\n  cursor: pointer;\n  transition:\n    background 0.2s ease,\n    box-shadow 0.2s ease,\n    transform 0.2s ease,\n    opacity 0.2s ease;\n  box-shadow:\n    0 14px 28px rgba(37, 99, 235, 0.22),\n    inset 0 1px 0 rgba(255, 255, 255, 0.18);\n}\n\n.rq-auth-button:hover:not(:disabled) {\n  background: linear-gradient(180deg, #2563eb 0%, var(--rq-auth-primary-hover) 100%);\n  transform: translateY(-1px);\n}\n\n.rq-auth-button:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--rq-auth-primary-soft),\n    0 14px 28px rgba(37, 99, 235, 0.22);\n}\n\n.rq-auth-button:disabled {\n  cursor: not-allowed;\n  opacity: 0.68;\n  transform: none;\n  box-shadow: none;\n}\n\n.rq-auth-button-content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n}\n\n.rq-auth-button-spinner {\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid rgba(255, 255, 255, 0.4);\n  border-top-color: #ffffff;\n  border-radius: 999px;\n  animation: rq-auth-spin 0.75s linear infinite;\n}\n\n.rq-auth-error,\n.rq-auth-success,\n.auth-loading,\n.auth-forbidden {\n  padding: 0.95rem 1rem;\n  border-radius: 1rem;\n  border: 1px solid transparent;\n  font-size: 0.94rem;\n  line-height: 1.55;\n}\n\n.rq-auth-error {\n  border-color: var(--rq-auth-error-border);\n  background: var(--rq-auth-error-bg);\n  color: var(--rq-auth-error);\n}\n\n.rq-auth-success {\n  border-color: var(--rq-auth-success-border);\n  background: var(--rq-auth-success-bg);\n  color: var(--rq-auth-success);\n}\n\n.auth-loading {\n  border-color: var(--rq-auth-border);\n  background: var(--rq-auth-surface-alt);\n  color: var(--rq-auth-muted);\n}\n\n.auth-forbidden {\n  border-color: var(--rq-auth-error-border);\n  background: var(--rq-auth-error-bg);\n  color: var(--rq-auth-error);\n}\n\n@keyframes rq-auth-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (max-width: 640px) {\n  .rq-auth-container {\n    width: 100%;\n    padding: 1.125rem;\n    border-radius: 1.25rem;\n  }\n\n  .rq-auth-form {\n    gap: 0.9rem;\n  }\n\n  .rq-auth-input,\n  .rq-auth-button {\n    padding-inline: 0.95rem;\n  }\n}\n";
-const STYLE_ELEMENT_ID = "rq-auth-flow-styles";
-if (typeof document !== "undefined" && !document.getElementById(STYLE_ELEMENT_ID)) {
-  const styleElement = document.createElement("style");
-  styleElement.id = STYLE_ELEMENT_ID;
-  styleElement.textContent = authStyles;
-  document.head.appendChild(styleElement);
-}
 const AuthContext = createContext(
   void 0
 );
@@ -70,150 +62,304 @@ const DEFAULT_ENDPOINTS = {
   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;
+  verifyEmail: "/auth/verify-email",
+  twoFactorVerify: "/auth/2fa/verify"
 };
+async function parseResponse(response) {
+  if (!response.ok) {
+    let errorData = null;
+    try {
+      errorData = await response.json();
+    } catch {
+      errorData = {
+        error: {
+          message: response.statusText || "Request failed",
+          statusCode: response.status
+        }
+      };
+    }
+    throw errorData;
+  }
+  if (response.status === 204) {
+    return {};
+  }
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("application/json")) {
+    return response.json();
+  }
+  const text = await response.text();
+  return text ? { message: text } : {};
+}
+function isResponseLike(value) {
+  return typeof value === "object" && value !== null && "ok" in value && "status" in value && "headers" in value;
+}
+function createDefaultRequestAdapter(config) {
+  const { baseURL, credentials, headers } = config;
+  return async ({ endpoint, method, data, headers: requestHeaders }) => {
+    const response = await fetch(`${baseURL}${endpoint}`, {
+      method,
+      credentials,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+        ...requestHeaders
+      },
+      body: data === void 0 ? void 0 : JSON.stringify(data)
+    });
+    return parseResponse(response);
+  };
+}
+function createLegacyAdapter(config) {
+  const { adapter, baseURL, credentials, headers } = config;
+  return async ({ endpoint, method, data, headers: requestHeaders }) => {
+    const response = await adapter(`${baseURL}${endpoint}`, {
+      method,
+      credentials,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+        ...requestHeaders
+      },
+      body: data === void 0 ? void 0 : JSON.stringify(data)
+    });
+    return parseResponse(response);
+  };
+}
 function createAuthClient(config = {}) {
   const {
-    baseURL = "",
+    baseURL,
+    baseUrl,
     endpoints = {},
-    headers = {},
+    headers: initialHeaders = {},
     credentials = "include",
-    adapter = defaultAdapter
+    requestAdapter,
+    adapter
   } = config;
-  const finalEndpoints = { ...DEFAULT_ENDPOINTS, ...endpoints };
+  const resolvedBaseURL = baseURL ?? baseUrl ?? "";
+  const finalEndpoints = {
+    ...DEFAULT_ENDPOINTS,
+    ...endpoints
+  };
+  const headers = { ...initialHeaders };
+  const resolvedAdapter = requestAdapter ?? (adapter ? createLegacyAdapter({
+    adapter,
+    baseURL: resolvedBaseURL,
+    credentials,
+    headers
+  }) : createDefaultRequestAdapter({
+    baseURL: resolvedBaseURL,
+    credentials,
+    headers
+  }));
   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();
+      const result = await resolvedAdapter({
+        endpoint,
+        method,
+        data,
+        headers
+      });
+      if (isResponseLike(result)) {
+        return await parseResponse(result);
       }
-      return {};
+      return result ?? {};
     } 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;
+      return request("POST", finalEndpoints.login, {
+        email,
+        password,
+        rememberMe
+      });
     },
-    /**
-     * Register a new account
-     */
     async register(payload) {
-      const response = await request(
-        "POST",
-        finalEndpoints.register,
-        payload
-      );
-      return response;
+      return request("POST", finalEndpoints.register, payload);
     },
-    /**
-     * Logout the user
-     */
     async logout() {
       await request("POST", finalEndpoints.logout);
     },
-    /**
-     * Get current user
-     */
     async me() {
-      const response = await request(
-        "GET",
-        finalEndpoints.me
-      );
-      return response;
+      return request("GET", finalEndpoints.me);
     },
-    /**
-     * Refresh the authentication session
-     */
     async refresh() {
-      const response = await request(
-        "POST",
-        finalEndpoints.refresh
-      );
-      return response;
+      return request("POST", finalEndpoints.refresh);
     },
-    /**
-     * Request a password reset
-     */
     async forgotPassword(email) {
-      await request("POST", finalEndpoints.forgotPassword, { email });
+      return request("POST", finalEndpoints.forgotPassword, {
+        email
+      });
     },
-    /**
-     * Reset password with token
-     */
     async resetPassword(token, password, confirmPassword) {
-      await request("POST", finalEndpoints.resetPassword, {
+      return request("POST", finalEndpoints.resetPassword, {
         token,
         password,
         confirmPassword
       });
     },
-    /**
-     * Verify email with token
-     */
     async verifyEmail(token, email) {
-      await request("POST", finalEndpoints.verifyEmail, { token, email });
+      return request("POST", finalEndpoints.verifyEmail, {
+        token,
+        email
+      });
+    },
+    async verifyTwoFactor(code) {
+      return request("POST", finalEndpoints.twoFactorVerify, {
+        code
+      });
     },
-    /**
-     * Set custom headers for subsequent requests
-     */
     setHeaders(newHeaders) {
       Object.assign(headers, newHeaders);
     },
-    /**
-     * Get current endpoints configuration
-     */
     getEndpoints() {
       return finalEndpoints;
     }
   };
 }
+const DEFAULT_STORAGE_KEY = "rq-auth-flow-user";
+const DEFAULT_OTP_LENGTH = 6;
+let memoryUser = null;
+function getStorage() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function readStoredUser(storageKey) {
+  const storage = getStorage();
+  if (!storage) {
+    return memoryUser;
+  }
+  const rawValue = storage.getItem(storageKey);
+  if (!rawValue) {
+    return null;
+  }
+  try {
+    return JSON.parse(rawValue);
+  } catch {
+    storage.removeItem(storageKey);
+    return null;
+  }
+}
+function writeStoredUser(storageKey, user) {
+  const storage = getStorage();
+  memoryUser = user;
+  if (!storage) {
+    return;
+  }
+  if (user === null) {
+    storage.removeItem(storageKey);
+    return;
+  }
+  storage.setItem(storageKey, JSON.stringify(user));
+}
+function createAdminUser(email, mockUser) {
+  return {
+    id: 1,
+    name: "Admin Test",
+    email,
+    roles: ["admin"],
+    permissions: ["users.manage", "billing.edit"],
+    ...mockUser
+  };
+}
+function createRegisteredUser(name, email, mockUser) {
+  return {
+    id: 2,
+    name: name || "New User",
+    email,
+    roles: ["user"],
+    permissions: ["users.create"],
+    ...mockUser
+  };
+}
+function toSuccessResponse(message, user) {
+  return user ? { success: true, message, user } : { success: true, message };
+}
+function createMockAuthAdapter(options = {}) {
+  const {
+    endpoints = {},
+    mockStorageKey = DEFAULT_STORAGE_KEY,
+    mockUser
+  } = options;
+  const resolvedEndpoints = {
+    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",
+    twoFactorVerify: "/auth/2fa/verify",
+    ...endpoints
+  };
+  return async ({ endpoint, data }) => {
+    if (endpoint === resolvedEndpoints.login) {
+      const payload = data ?? {};
+      const user = createAdminUser(payload.email ?? "admin@example.com", mockUser);
+      writeStoredUser(mockStorageKey, user);
+      return toSuccessResponse("Mock login successful.", user);
+    }
+    if (endpoint === resolvedEndpoints.register) {
+      const payload = data ?? {};
+      const user = createRegisteredUser(
+        payload.name,
+        payload.email ?? "user@example.com",
+        mockUser
+      );
+      writeStoredUser(mockStorageKey, user);
+      return toSuccessResponse("Mock registration successful.", user);
+    }
+    if (endpoint === resolvedEndpoints.logout) {
+      writeStoredUser(mockStorageKey, null);
+      return toSuccessResponse("Mock logout successful.");
+    }
+    if (endpoint === resolvedEndpoints.me || endpoint === resolvedEndpoints.refresh) {
+      const user = readStoredUser(mockStorageKey);
+      return user ? { success: true, user } : { success: true, user: null };
+    }
+    if (endpoint === resolvedEndpoints.forgotPassword) {
+      return toSuccessResponse("Mock password reset request accepted.");
+    }
+    if (endpoint === resolvedEndpoints.resetPassword) {
+      return toSuccessResponse("Mock password reset successful.");
+    }
+    if (endpoint === resolvedEndpoints.verifyEmail) {
+      return toSuccessResponse("Mock email verification successful.");
+    }
+    if (endpoint === resolvedEndpoints.twoFactorVerify) {
+      const payload = data ?? {};
+      const code = payload.code?.trim() ?? "";
+      if (code.length !== DEFAULT_OTP_LENGTH) {
+        throw {
+          code: "INVALID_2FA_CODE",
+          message: `Mock 2FA code must be exactly ${DEFAULT_OTP_LENGTH} characters.`
+        };
+      }
+      return toSuccessResponse("Mock 2FA verification successful.");
+    }
+    return toSuccessResponse("Mock request successful.");
+  };
+}
 const initialState = {
   user: null,
   isAuthenticated: false,
   isLoading: false,
   error: null
 };
+const defaultTheme = {
+  primaryColor: "#2563eb",
+  primaryHoverColor: "#1d4ed8",
+  radius: "14px",
+  fontFamily: "inherit"
+};
 function authReducer(state, action) {
   switch (action.type) {
     case "SET_LOADING":
@@ -229,29 +375,63 @@ function authReducer(state, action) {
         isLoading: false
       };
     case "LOGOUT":
-      return initialState;
+      return { ...initialState };
     default:
       return state;
   }
 }
+function toAuthError(error) {
+  if (!error) {
+    return null;
+  }
+  return typeof error === "string" ? {
+    code: "AUTH_ERROR",
+    message: error
+  } : error;
+}
 const AuthProvider = ({
   children,
-  baseURL = "",
+  baseURL,
+  baseUrl,
   endpoints = {},
+  headers = {},
+  credentials = "include",
   onAuthError,
   autoRefresh = true,
-  refreshInterval = 5 * 60 * 1e3
-  // 5 minutes
+  autoRestore = true,
+  refreshInterval = 5 * 60 * 1e3,
+  requestAdapter,
+  theme,
+  mock = false,
+  mockStorageKey = "rq-auth-flow-user",
+  mockUser
 }) => {
   const [state, dispatch] = useReducer(authReducer, initialState);
-  const clientRef = React.useRef(
-    createAuthClient({
-      baseURL,
+  const resolvedTheme = { ...defaultTheme, ...theme };
+  const resolvedBaseURL = baseURL ?? baseUrl ?? "";
+  const client = useMemo(() => {
+    const resolvedRequestAdapter = mock ? createMockAuthAdapter({
       endpoints,
-      credentials: "include"
-    })
-  );
-  const client = clientRef.current;
+      mockStorageKey,
+      mockUser
+    }) : requestAdapter;
+    return createAuthClient({
+      baseURL: resolvedBaseURL,
+      endpoints,
+      headers,
+      credentials,
+      requestAdapter: resolvedRequestAdapter
+    });
+  }, [
+    credentials,
+    endpoints,
+    headers,
+    mock,
+    mockStorageKey,
+    mockUser,
+    requestAdapter,
+    resolvedBaseURL
+  ]);
   const handleError = useCallback(
     (error) => {
       dispatch({ type: "SET_ERROR", payload: error });
@@ -259,35 +439,65 @@ const AuthProvider = ({
     },
     [onAuthError]
   );
+  const clearError = useCallback(() => {
+    dispatch({ type: "SET_ERROR", payload: null });
+  }, []);
+  const setError = useCallback(
+    (error) => {
+      const nextError = toAuthError(error);
+      dispatch({ type: "SET_ERROR", payload: nextError });
+      if (nextError) {
+        onAuthError?.(nextError);
+      }
+    },
+    [onAuthError]
+  );
+  const setUser = useCallback((user) => {
+    dispatch({ type: "SET_USER", payload: user });
+  }, []);
+  const resolveAction = useCallback((response) => {
+    if (response?.user) {
+      dispatch({ type: "SET_USER", payload: response.user });
+      return response.user;
+    }
+    dispatch({ type: "SET_ERROR", payload: null });
+    return null;
+  }, []);
   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" });
+        return response.user;
       }
-    } catch (_error) {
-      dispatch({ type: "SET_LOADING", payload: false });
+      dispatch({ type: "LOGOUT" });
+      return null;
+    } catch {
+      dispatch({ type: "LOGOUT" });
+      return null;
     }
   }, [client]);
   const refreshSession = useCallback(async () => {
+    dispatch({ type: "SET_LOADING", payload: true });
     try {
       const response = await client.refresh();
-      if (response.user) {
-        dispatch({ type: "SET_USER", payload: response.user });
-      }
+      return resolveAction(response);
     } catch (error) {
       const authError = normalizeError(error);
       handleError(authError);
+      return null;
     }
-  }, [client, handleError]);
+  }, [client, handleError, resolveAction]);
   const login = useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        const response = await client.login(payload.email, payload.password);
+        const response = await client.login(
+          payload.email,
+          payload.password,
+          payload.rememberMe
+        );
         if (!response.user) {
           throw new Error("No user data in response");
         }
@@ -323,8 +533,7 @@ const AuthProvider = ({
     dispatch({ type: "SET_LOADING", payload: true });
     try {
       await client.logout();
-    } catch (error) {
-      console.error("Logout error:", error);
+    } catch {
     } finally {
       dispatch({ type: "LOGOUT" });
     }
@@ -333,76 +542,158 @@ const AuthProvider = ({
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        await client.forgotPassword(payload.email);
-        dispatch({ type: "SET_LOADING", payload: false });
+        const response = await client.forgotPassword(payload.email);
+        resolveAction(response);
+        return response;
       } catch (error) {
         const authError = normalizeError(error);
         handleError(authError);
         throw authError;
       }
     },
-    [client, handleError]
+    [client, handleError, resolveAction]
   );
   const resetPassword = useCallback(
     async (payload) => {
       dispatch({ type: "SET_LOADING", payload: true });
       try {
-        await client.resetPassword(
+        const response = await client.resetPassword(
           payload.token,
           payload.password,
           payload.confirmPassword
         );
-        dispatch({ type: "SET_LOADING", payload: false });
+        resolveAction(response);
+        return response;
       } catch (error) {
         const authError = normalizeError(error);
         handleError(authError);
         throw authError;
       }
     },
-    [client, handleError]
+    [client, handleError, resolveAction]
   );
   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 });
+        const response = await client.verifyEmail(payload.token, payload.email);
+        resolveAction(response);
+        return response;
       } catch (error) {
         const authError = normalizeError(error);
         handleError(authError);
         throw authError;
       }
     },
-    [client, handleError]
+    [client, handleError, resolveAction]
+  );
+  const verifyTwoFactor = useCallback(
+    async (payload) => {
+      dispatch({ type: "SET_LOADING", payload: true });
+      try {
+        const response = await client.verifyTwoFactor(payload.code);
+        resolveAction(response);
+        return response;
+      } catch (error) {
+        const authError = normalizeError(error);
+        handleError(authError);
+        throw authError;
+      }
+    },
+    [client, handleError, resolveAction]
+  );
+  const hasRole = useCallback(
+    (role) => state.user?.roles?.includes(role) ?? false,
+    [state.user]
+  );
+  const hasAnyRole = useCallback(
+    (roles) => roles.some((role) => state.user?.roles?.includes(role)),
+    [state.user]
+  );
+  const hasPermission = useCallback(
+    (permission) => state.user?.permissions?.includes(permission) ?? false,
+    [state.user]
+  );
+  const hasAnyPermission = useCallback(
+    (permissions) => permissions.some(
+      (permission) => state.user?.permissions?.includes(permission)
+    ),
+    [state.user]
+  );
+  const hasAllPermissions = useCallback(
+    (permissions) => permissions.every(
+      (permission) => state.user?.permissions?.includes(permission)
+    ),
+    [state.user]
   );
-  const setUser = useCallback((user) => {
-    dispatch({ type: "SET_USER", payload: user });
-  }, []);
   useEffect(() => {
-    restoreSession();
-  }, [restoreSession]);
+    if (!autoRestore) {
+      return;
+    }
+    void restoreSession();
+  }, [autoRestore, restoreSession]);
   useEffect(() => {
     if (!autoRefresh || !state.isAuthenticated) {
       return;
     }
-    const interval = setInterval(() => {
-      refreshSession();
+    const intervalId = window.setInterval(() => {
+      void 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 });
+    return () => window.clearInterval(intervalId);
+  }, [autoRefresh, refreshInterval, refreshSession, state.isAuthenticated]);
+  const themeStyle = useMemo(
+    () => ({
+      "--rq-auth-primary": resolvedTheme.primaryColor,
+      "--rq-auth-primary-hover": resolvedTheme.primaryHoverColor,
+      "--rq-auth-radius": resolvedTheme.radius,
+      "--rq-auth-font-family": resolvedTheme.fontFamily,
+      fontFamily: resolvedTheme.fontFamily
+    }),
+    [resolvedTheme.fontFamily, resolvedTheme.primaryColor, resolvedTheme.primaryHoverColor, resolvedTheme.radius]
+  );
+  const value = useMemo(
+    () => ({
+      ...state,
+      login,
+      register,
+      logout,
+      forgotPassword,
+      resetPassword,
+      verifyEmail,
+      verifyTwoFactor,
+      refreshSession,
+      restoreSession,
+      clearError,
+      setError,
+      setUser,
+      hasRole,
+      hasAnyRole,
+      hasPermission,
+      hasAnyPermission,
+      hasAllPermissions
+    }),
+    [
+      clearError,
+      forgotPassword,
+      hasAllPermissions,
+      hasAnyPermission,
+      hasAnyRole,
+      hasPermission,
+      hasRole,
+      login,
+      logout,
+      refreshSession,
+      register,
+      resetPassword,
+      restoreSession,
+      setError,
+      setUser,
+      state,
+      verifyEmail,
+      verifyTwoFactor
+    ]
+  );
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "rq-auth-theme", style: themeStyle, children }) });
 };
 function useAuth() {
   const context = useContext(AuthContext);
@@ -416,6 +707,10 @@ function cn(...classes) {
 }
 const AUTH_FORM_CLASSES = {
   container: "rq-auth-container",
+  card: "rq-auth-card",
+  shell: "rq-auth-shell",
+  brand: "rq-auth-brand",
+  footer: "rq-auth-footer",
   header: "rq-auth-header",
   form: "rq-auth-form",
   field: "rq-auth-field",
@@ -430,8 +725,33 @@ const AUTH_FORM_CLASSES = {
   subtitle: "rq-auth-subtitle",
   checkbox: "rq-auth-checkbox",
   checkboxInput: "rq-auth-checkbox-input",
-  checkboxLabel: "rq-auth-checkbox-label"
+  checkboxLabel: "rq-auth-checkbox-label",
+  otpGroup: "rq-auth-otp-group",
+  otpInput: "rq-auth-otp-input",
+  socialButton: "rq-auth-social-button",
+  socialIcon: "rq-auth-social-icon",
+  socialLabel: "rq-auth-social-label"
 };
+const AuthLayout = ({
+  children,
+  title,
+  subtitle,
+  className,
+  cardClassName,
+  brand,
+  footer
+}) => {
+  return /* @__PURE__ */ jsx("section", { className: cn(AUTH_FORM_CLASSES.shell, className), children: /* @__PURE__ */ jsxs("div", { className: cn(AUTH_FORM_CLASSES.card, cardClassName), children: [
+    brand ? /* @__PURE__ */ jsx("div", { className: AUTH_FORM_CLASSES.brand, children: brand }) : null,
+    (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      title ? /* @__PURE__ */ jsx("h1", { className: AUTH_FORM_CLASSES.title, children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx("p", { className: AUTH_FORM_CLASSES.subtitle, children: subtitle }) : null
+    ] }),
+    children,
+    footer ? /* @__PURE__ */ jsx("div", { className: AUTH_FORM_CLASSES.footer, children: footer }) : null
+  ] }) });
+};
+AuthLayout.displayName = "AuthLayout";
 const LoginForm = ({
   className,
   formClassName,
@@ -452,7 +772,12 @@ const LoginForm = ({
   onSuccess,
   onError
 }) => {
-  const { login, isLoading: authLoading, error: authError } = useAuth();
+  const {
+    login,
+    clearError,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
   const [formError, setFormError] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -461,6 +786,7 @@ const LoginForm = ({
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     if (!email || !password) {
       setFormError("Email and password are required");
@@ -585,7 +911,12 @@ const RegisterForm = ({
   onSuccess,
   onError
 }) => {
-  const { register, isLoading: authLoading, error: authError } = useAuth();
+  const {
+    register,
+    clearError,
+    isLoading: authLoading,
+    error: authError
+  } = useAuth();
   const [formError, setFormError] = useState("");
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
@@ -595,6 +926,7 @@ const RegisterForm = ({
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     if (!name || !email || !password || !confirmPassword) {
       setFormError("All fields are required");
@@ -762,6 +1094,7 @@ const ForgotPasswordForm = ({
 }) => {
   const {
     forgotPassword,
+    clearError,
     isLoading: authLoading,
     error: authError
   } = useAuth();
@@ -772,6 +1105,7 @@ const ForgotPasswordForm = ({
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     setSuccessMessage("");
     if (!email) {
@@ -874,6 +1208,7 @@ const ResetPasswordForm = ({
 }) => {
   const {
     resetPassword,
+    clearError,
     isLoading: authLoading,
     error: authError
   } = useAuth();
@@ -885,6 +1220,7 @@ const ResetPasswordForm = ({
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     setSuccessMessage("");
     if (!password || !confirmPassword) {
@@ -1028,6 +1364,7 @@ const VerifyEmailForm = ({
 }) => {
   const {
     verifyEmail,
+    clearError,
     isLoading: authLoading,
     error: authError
   } = useAuth();
@@ -1039,6 +1376,7 @@ const VerifyEmailForm = ({
   const error = formError || authError?.message;
   const handleSubmit = async (e) => {
     e.preventDefault();
+    clearError();
     setFormError("");
     setSuccessMessage("");
     if (!token) {
@@ -1143,45 +1481,276 @@ const VerifyEmailForm = ({
   ] });
 };
 VerifyEmailForm.displayName = "VerifyEmailForm";
+function toDigits(value, length) {
+  return Array.from({ length }, (_, index) => value[index] ?? "");
+}
+const OtpInput = ({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  disabled = false,
+  className,
+  inputClassName
+}) => {
+  const [internalValue, setInternalValue] = useState("");
+  const inputRefs = useRef([]);
+  const baseId = useId();
+  const currentValue = value ?? internalValue;
+  const digits = useMemo(
+    () => toDigits(currentValue.slice(0, length), length),
+    [currentValue, length]
+  );
+  const commitValue = (nextDigits) => {
+    const nextValue = nextDigits.join("").slice(0, length);
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+    if (nextDigits.every(Boolean) && nextValue.length === length) {
+      onComplete?.(nextValue);
+    }
+  };
+  const focusInput = (index) => {
+    inputRefs.current[index]?.focus();
+    inputRefs.current[index]?.select();
+  };
+  const handleChange = (index, nextChunk) => {
+    const sanitized = nextChunk.replace(/\s+/g, "");
+    const nextDigits = [...digits];
+    if (!sanitized) {
+      nextDigits[index] = "";
+      commitValue(nextDigits);
+      return;
+    }
+    if (sanitized.length > 1) {
+      sanitized.slice(0, length - index).split("").forEach((character, offset) => {
+        nextDigits[index + offset] = character;
+      });
+      commitValue(nextDigits);
+      focusInput(Math.min(index + sanitized.length, length - 1));
+      return;
+    }
+    nextDigits[index] = sanitized;
+    commitValue(nextDigits);
+    if (index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyDown = (index, event) => {
+    if (event.key === "Backspace" && !digits[index] && index > 0) {
+      focusInput(index - 1);
+    }
+    if (event.key === "ArrowLeft" && index > 0) {
+      event.preventDefault();
+      focusInput(index - 1);
+    }
+    if (event.key === "ArrowRight" && index < length - 1) {
+      event.preventDefault();
+      focusInput(index + 1);
+    }
+  };
+  const handlePaste = (index, event) => {
+    event.preventDefault();
+    handleChange(index, event.clipboardData.getData("text"));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(AUTH_FORM_CLASSES.otpGroup, className),
+      style: {
+        "--rq-auth-otp-columns": String(length)
+      },
+      children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (element) => {
+            inputRefs.current[index] = element;
+          },
+          id: `${baseId}-${index}`,
+          type: "text",
+          inputMode: "text",
+          autoComplete: index === 0 ? "one-time-code" : "off",
+          maxLength: 1,
+          value: digit,
+          disabled,
+          className: cn(AUTH_FORM_CLASSES.otpInput, inputClassName),
+          onChange: (event) => handleChange(index, event.target.value),
+          onKeyDown: (event) => handleKeyDown(index, event),
+          onPaste: (event) => handlePaste(index, event),
+          "aria-label": `OTP digit ${index + 1}`
+        },
+        `otp-${index}`
+      ))
+    }
+  );
+};
+OtpInput.displayName = "OtpInput";
+const TwoFactorForm = ({
+  onSuccess,
+  onError,
+  className,
+  submitButtonText = "Verify Code",
+  loadingText = "Verifying...",
+  title = "Two-factor authentication",
+  subtitle = "Enter the verification code to continue.",
+  length = 6
+}) => {
+  const {
+    verifyTwoFactor,
+    clearError,
+    isLoading,
+    error: authError
+  } = useAuth();
+  const [code, setCode] = useState("");
+  const [formError, setFormError] = useState("");
+  const error = formError || authError?.message;
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    clearError();
+    setFormError("");
+    if (code.length !== length) {
+      setFormError(`Enter the full ${length}-digit code.`);
+      return;
+    }
+    try {
+      const response = await verifyTwoFactor({ code });
+      onSuccess?.(response);
+    } catch (caughtError) {
+      const message = caughtError instanceof Error ? caughtError.message : "Two-factor verification failed";
+      setFormError(message);
+      onError?.({
+        code: "TWO_FACTOR_ERROR",
+        message
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
+      /* @__PURE__ */ jsx("h1", { className: AUTH_FORM_CLASSES.title, children: title }),
+      /* @__PURE__ */ jsx("p", { className: AUTH_FORM_CLASSES.subtitle, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: AUTH_FORM_CLASSES.form, children: [
+      /* @__PURE__ */ jsxs("div", { className: AUTH_FORM_CLASSES.field, children: [
+        /* @__PURE__ */ jsx("label", { className: AUTH_FORM_CLASSES.label, children: "Verification code" }),
+        /* @__PURE__ */ jsx(
+          OtpInput,
+          {
+            length,
+            value: code,
+            onChange: setCode,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx("div", { className: AUTH_FORM_CLASSES.error, role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: isLoading,
+          className: AUTH_FORM_CLASSES.button,
+          children: isLoading ? loadingText : submitButtonText
+        }
+      )
+    ] })
+  ] });
+};
+TwoFactorForm.displayName = "TwoFactorForm";
+const defaultLabels = {
+  google: "Continue with Google",
+  github: "Continue with GitHub",
+  facebook: "Continue with Facebook",
+  custom: "Continue"
+};
+const defaultIcons = {
+  google: "G",
+  github: "GH",
+  facebook: "f",
+  custom: "+"
+};
+const SocialLoginButton = ({
+  provider,
+  label,
+  icon,
+  onClick,
+  className,
+  disabled = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(AUTH_FORM_CLASSES.socialButton, className),
+      "data-provider": provider,
+      onClick,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: AUTH_FORM_CLASSES.socialIcon, "aria-hidden": "true", children: icon ?? defaultIcons[provider] }),
+        /* @__PURE__ */ jsx("span", { className: AUTH_FORM_CLASSES.socialLabel, children: label ?? defaultLabels[provider] })
+      ]
+    }
+  );
+};
+SocialLoginButton.displayName = "SocialLoginButton";
 const ProtectedRoute = ({
   children,
   redirectTo = "/login",
   fallback,
   roles,
-  permissions
+  permissions,
+  unauthorizedTo,
+  requireAllPermissions = true
 }) => {
-  const { isAuthenticated, isLoading, user } = useAuth();
+  const {
+    isAuthenticated,
+    isLoading,
+    hasAllPermissions,
+    hasAnyPermission,
+    hasAnyRole
+  } = 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." }) });
-    }
+  const hasRequiredRole = !roles?.length || hasAnyRole(roles);
+  const hasRequiredPermission = !permissions?.length || (requireAllPermissions ? hasAllPermissions(permissions) : hasAnyPermission(permissions));
+  if (!hasRequiredRole || !hasRequiredPermission) {
+    return /* @__PURE__ */ jsx(Navigate, { to: unauthorizedTo ?? redirectTo, replace: true });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
 ProtectedRoute.displayName = "ProtectedRoute";
+const GuestRoute = ({
+  children,
+  redirectTo = "/",
+  fallback
+}) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (isLoading) {
+    return fallback || /* @__PURE__ */ jsx("div", { className: "auth-loading", children: "Loading..." });
+  }
+  if (isAuthenticated) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+GuestRoute.displayName = "GuestRoute";
 export {
   AuthContext,
+  AuthLayout,
   AuthProvider,
   ForgotPasswordForm,
+  GuestRoute,
   LoginForm,
+  OtpInput,
   ProtectedRoute,
   RegisterForm,
   ResetPasswordForm,
+  SocialLoginButton,
+  TwoFactorForm,
   VerifyEmailForm,
   cn,
   createAuthClient,