@payez/next-mvp 4.8.1 → 4.8.2

package/src/hooks/useAvailableProviders.ts

@@ -1,143 +1,143 @@
-/**
- * useAvailableProviders Hook
- *
- * Returns the list of OAuth providers configured for this client.
- * Ensures UI only shows buttons for providers that are enabled in IDP.
- */
-
-'use client';
-
-import { useState, useEffect } from 'react';
-import type { FederatedProvider } from '../types/auth';
-
-// Map provider IDs to our FederatedProvider type
-const PROVIDER_MAP: Record<string, FederatedProvider> = {
-    'google': 'google',
-    'apple': 'apple',
-    'facebook': 'facebook',
-    'github': 'github',
-    'azure-ad': 'microsoft',
-    'microsoft-entra-id': 'microsoft',
-};
-
-// Providers we support in UI (excludes credentials)
-const OAUTH_PROVIDERS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
-
-export interface UseAvailableProvidersResult {
-    providers: FederatedProvider[];
-    isLoading: boolean;
-    error: Error | null;
-    rawProviders: Record<string, any> | null;
-}
-
-/**
- * Hook to get available federated OAuth providers.
- *
- * Returns only the providers that are enabled in IDP config.
- *
- * @example
- * ```tsx
- * function SignupPage() {
- *   const { providers, isLoading } = useAvailableProviders();
- *
- *   if (isLoading) return <Spinner />;
- *
- *   return (
- *     <FederatedAuthSection
- *       providers={providers}
- *       onProviderClick={handleClick}
- *     />
- *   );
- * }
- * ```
- */
-export function useAvailableProviders(): UseAvailableProvidersResult {
-    const [providers, setProviders] = useState<FederatedProvider[]>([]);
-    const [rawProviders, setRawProviders] = useState<Record<string, any> | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<Error | null>(null);
-
-    useEffect(() => {
-        let mounted = true;
-
-        async function fetchProviders() {
-            try {
-                // PAY-2104: THIS USED TO BE A HARDCODED GOOGLE LITERAL.
-                //
-                //   const result = { google: { id: 'google', name: 'Google' } };
-                //
-                // under a comment claiming providers were "loaded dynamically". It
-                // returned Google for EVERY client whatever the tenant had enabled -
-                // a config-shaped constant, so Apple/Facebook (PAY-2104) could never
-                // appear and a client that had DISABLED Google would still see its
-                // button. The real answer is served by /api/auth/settings (the same
-                // route routes/auth/settings.ts builds from the IDP's oauthProviders).
-                const response = await fetch('/api/auth/settings', { cache: 'no-store' });
-
-                if (!mounted) return;
-
-                if (!response.ok) {
-                    // FAIL CLOSED. An unreadable policy is not an empty provider list
-                    // that we may then pad with a guess - it is "we do not know". See
-                    // the PAY-1243 rule: never fabricate a provider list.
-                    throw new Error(`Failed to fetch auth settings: ${response.status}`);
-                }
-
-                const body = await response.json().catch(() => null);
-                const settings = body?.data ?? body;
-                if (body?.success === false || !settings) {
-                    throw new Error(body?.error?.code ?? 'POLICY_UNAVAILABLE');
-                }
-
-                // Keep the raw provider rows (id -> the settings row) for callers that
-                // want more than the mapped union type, exactly as before.
-                const enabledIds: string[] = Array.isArray(settings.enabledProviders)
-                    ? settings.enabledProviders.filter((p: unknown): p is string => typeof p === 'string')
-                    : [];
-                const raw: Record<string, { id: string; name: string }> = {};
-                for (const id of enabledIds) raw[id] = { id, name: id };
-
-                if (!mounted) return;
-                setRawProviders(raw);
-
-                // Filter to OAuth providers only (exclude credentials) and map to our
-                // FederatedProvider union, in the IDP's order.
-                const oauthProviders = enabledIds
-                    .filter(id => OAUTH_PROVIDERS.includes(id))
-                    .map(id => PROVIDER_MAP[id])
-                    .filter((p): p is FederatedProvider => p !== undefined);
-
-                setProviders(oauthProviders);
-                setError(null);
-            } catch (err) {
-                if (!mounted) return;
-                setError(err instanceof Error ? err : new Error(String(err)));
-                setProviders([]);
-                setRawProviders(null);   // never leave a stale list behind a failure
-            } finally {
-                if (mounted) {
-                    setIsLoading(false);
-                }
-            }
-        }
-
-        fetchProviders();
-
-        return () => {
-            mounted = false;
-        };
-    }, []);
-
-    return { providers, isLoading, error, rawProviders };
-}
-
-/**
- * Check if a specific provider is available.
- *
- * @param provider The provider to check
- * @returns boolean indicating if provider is configured
- */
-export function useIsProviderAvailable(provider: FederatedProvider): boolean {
-    const { providers } = useAvailableProviders();
-    return providers.includes(provider);
-}
+/**
+ * useAvailableProviders Hook
+ *
+ * Returns the list of OAuth providers configured for this client.
+ * Ensures UI only shows buttons for providers that are enabled in IDP.
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { FederatedProvider } from '../types/auth';
+
+// Map provider IDs to our FederatedProvider type
+const PROVIDER_MAP: Record<string, FederatedProvider> = {
+    'google': 'google',
+    'apple': 'apple',
+    'facebook': 'facebook',
+    'github': 'github',
+    'azure-ad': 'microsoft',
+    'microsoft-entra-id': 'microsoft',
+};
+
+// Providers we support in UI (excludes credentials)
+const OAUTH_PROVIDERS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
+
+export interface UseAvailableProvidersResult {
+    providers: FederatedProvider[];
+    isLoading: boolean;
+    error: Error | null;
+    rawProviders: Record<string, any> | null;
+}
+
+/**
+ * Hook to get available federated OAuth providers.
+ *
+ * Returns only the providers that are enabled in IDP config.
+ *
+ * @example
+ * ```tsx
+ * function SignupPage() {
+ *   const { providers, isLoading } = useAvailableProviders();
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return (
+ *     <FederatedAuthSection
+ *       providers={providers}
+ *       onProviderClick={handleClick}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useAvailableProviders(): UseAvailableProvidersResult {
+    const [providers, setProviders] = useState<FederatedProvider[]>([]);
+    const [rawProviders, setRawProviders] = useState<Record<string, any> | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        let mounted = true;
+
+        async function fetchProviders() {
+            try {
+                // PAY-2104: THIS USED TO BE A HARDCODED GOOGLE LITERAL.
+                //
+                //   const result = { google: { id: 'google', name: 'Google' } };
+                //
+                // under a comment claiming providers were "loaded dynamically". It
+                // returned Google for EVERY client whatever the tenant had enabled -
+                // a config-shaped constant, so Apple/Facebook (PAY-2104) could never
+                // appear and a client that had DISABLED Google would still see its
+                // button. The real answer is served by /api/auth/settings (the same
+                // route routes/auth/settings.ts builds from the IDP's oauthProviders).
+                const response = await fetch('/api/auth/settings', { cache: 'no-store' });
+
+                if (!mounted) return;
+
+                if (!response.ok) {
+                    // FAIL CLOSED. An unreadable policy is not an empty provider list
+                    // that we may then pad with a guess - it is "we do not know". See
+                    // the PAY-1243 rule: never fabricate a provider list.
+                    throw new Error(`Failed to fetch auth settings: ${response.status}`);
+                }
+
+                const body = await response.json().catch(() => null);
+                const settings = body?.data ?? body;
+                if (body?.success === false || !settings) {
+                    throw new Error(body?.error?.code ?? 'POLICY_UNAVAILABLE');
+                }
+
+                // Keep the raw provider rows (id -> the settings row) for callers that
+                // want more than the mapped union type, exactly as before.
+                const enabledIds: string[] = Array.isArray(settings.enabledProviders)
+                    ? settings.enabledProviders.filter((p: unknown): p is string => typeof p === 'string')
+                    : [];
+                const raw: Record<string, { id: string; name: string }> = {};
+                for (const id of enabledIds) raw[id] = { id, name: id };
+
+                if (!mounted) return;
+                setRawProviders(raw);
+
+                // Filter to OAuth providers only (exclude credentials) and map to our
+                // FederatedProvider union, in the IDP's order.
+                const oauthProviders = enabledIds
+                    .filter(id => OAUTH_PROVIDERS.includes(id))
+                    .map(id => PROVIDER_MAP[id])
+                    .filter((p): p is FederatedProvider => p !== undefined);
+
+                setProviders(oauthProviders);
+                setError(null);
+            } catch (err) {
+                if (!mounted) return;
+                setError(err instanceof Error ? err : new Error(String(err)));
+                setProviders([]);
+                setRawProviders(null);   // never leave a stale list behind a failure
+            } finally {
+                if (mounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        fetchProviders();
+
+        return () => {
+            mounted = false;
+        };
+    }, []);
+
+    return { providers, isLoading, error, rawProviders };
+}
+
+/**
+ * Check if a specific provider is available.
+ *
+ * @param provider The provider to check
+ * @returns boolean indicating if provider is configured
+ */
+export function useIsProviderAvailable(provider: FederatedProvider): boolean {
+    const { providers } = useAvailableProviders();
+    return providers.includes(provider);
+}

package/src/hooks/usePasswordValidation.ts

@@ -1,127 +1,127 @@
-/**
- * Password Validation Hook for @payez/next-mvp
- *
- * Provides real-time password validation against IDP password policy.
- * Uses debounced API calls to validate password strength.
- */
-
-'use client';
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-
-interface PasswordPolicy {
-  min_length?: number;
-  require_uppercase?: boolean;
-  require_lowercase?: boolean;
-  require_digit?: boolean;
-  require_special?: boolean;
-  min_strength_score?: number;
-}
-
-interface ValidationResult {
-  is_valid: boolean;
-  score: number;
-  failed_requirements: string[];
-  tip?: string;
-  policy?: PasswordPolicy;
-}
-
-interface UsePasswordValidationOptions {
-  debounceMs?: number;
-}
-
-export function usePasswordValidation(options: UsePasswordValidationOptions = {}) {
-  const { debounceMs = 300 } = options;
-
-  const [isValid, setIsValid] = useState(false);
-  const [score, setScore] = useState(0);
-  const [failedRequirements, setFailedRequirements] = useState<string[]>([]);
-  const [tip, setTip] = useState<string | undefined>(undefined);
-  const [policy, setPolicy] = useState<PasswordPolicy | undefined>(undefined);
-  const [isValidating, setIsValidating] = useState(false);
-
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const validatePassword = useCallback(async (password: string) => {
-    // Cancel any pending request
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    // Don't validate empty passwords
-    if (!password || password.length === 0) {
-      setIsValid(false);
-      setScore(0);
-      setFailedRequirements([]);
-      setTip(undefined);
-      return;
-    }
-
-    setIsValidating(true);
-    abortControllerRef.current = new AbortController();
-
-    try {
-      const response = await fetch('/api/account/validate-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ password }),
-        signal: abortControllerRef.current.signal,
-      });
-
-      const data: ValidationResult = await response.json();
-
-      setIsValid(data.is_valid);
-      setScore(data.score);
-      setFailedRequirements(data.failed_requirements || []);
-      setTip(data.tip);
-      if (data.policy) {
-        setPolicy(data.policy);
-      }
-    } catch (err: any) {
-      if (err.name !== 'AbortError') {
-        console.error('[usePasswordValidation] Error:', err);
-        // On error, assume invalid but don't block user
-        setIsValid(false);
-        setScore(0);
-        setFailedRequirements(['Unable to validate password']);
-      }
-    } finally {
-      setIsValidating(false);
-    }
-  }, []);
-
-  const setPassword = useCallback((password: string) => {
-    // Clear any pending debounce
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-
-    // Debounce the validation
-    debounceTimerRef.current = setTimeout(() => {
-      validatePassword(password);
-    }, debounceMs);
-  }, [debounceMs, validatePassword]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-    };
-  }, []);
-
-  return {
-    setPassword,
-    isValid,
-    score,
-    failedRequirements,
-    tip,
-    policy,
-    isValidating,
-  };
-}
+/**
+ * Password Validation Hook for @payez/next-mvp
+ *
+ * Provides real-time password validation against IDP password policy.
+ * Uses debounced API calls to validate password strength.
+ */
+
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+interface PasswordPolicy {
+  min_length?: number;
+  require_uppercase?: boolean;
+  require_lowercase?: boolean;
+  require_digit?: boolean;
+  require_special?: boolean;
+  min_strength_score?: number;
+}
+
+interface ValidationResult {
+  is_valid: boolean;
+  score: number;
+  failed_requirements: string[];
+  tip?: string;
+  policy?: PasswordPolicy;
+}
+
+interface UsePasswordValidationOptions {
+  debounceMs?: number;
+}
+
+export function usePasswordValidation(options: UsePasswordValidationOptions = {}) {
+  const { debounceMs = 300 } = options;
+
+  const [isValid, setIsValid] = useState(false);
+  const [score, setScore] = useState(0);
+  const [failedRequirements, setFailedRequirements] = useState<string[]>([]);
+  const [tip, setTip] = useState<string | undefined>(undefined);
+  const [policy, setPolicy] = useState<PasswordPolicy | undefined>(undefined);
+  const [isValidating, setIsValidating] = useState(false);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const validatePassword = useCallback(async (password: string) => {
+    // Cancel any pending request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    // Don't validate empty passwords
+    if (!password || password.length === 0) {
+      setIsValid(false);
+      setScore(0);
+      setFailedRequirements([]);
+      setTip(undefined);
+      return;
+    }
+
+    setIsValidating(true);
+    abortControllerRef.current = new AbortController();
+
+    try {
+      const response = await fetch('/api/account/validate-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      const data: ValidationResult = await response.json();
+
+      setIsValid(data.is_valid);
+      setScore(data.score);
+      setFailedRequirements(data.failed_requirements || []);
+      setTip(data.tip);
+      if (data.policy) {
+        setPolicy(data.policy);
+      }
+    } catch (err: any) {
+      if (err.name !== 'AbortError') {
+        console.error('[usePasswordValidation] Error:', err);
+        // On error, assume invalid but don't block user
+        setIsValid(false);
+        setScore(0);
+        setFailedRequirements(['Unable to validate password']);
+      }
+    } finally {
+      setIsValidating(false);
+    }
+  }, []);
+
+  const setPassword = useCallback((password: string) => {
+    // Clear any pending debounce
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Debounce the validation
+    debounceTimerRef.current = setTimeout(() => {
+      validatePassword(password);
+    }, debounceMs);
+  }, [debounceMs, validatePassword]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  return {
+    setPassword,
+    isValid,
+    score,
+    failedRequirements,
+    tip,
+    policy,
+    isValidating,
+  };
+}