@frank-auth/react/dist/types/hooks/use-config.d.ts

Flexible and customizable React UI components for Frank Authentication

import { AppearanceConfig, ComponentOverrides, FrankAuthUIConfig, LocalizationConfig, OrganizationConfig, Theme } from '../config';
import { AuthFeatures, LinksPathConfig } from '../provider/types';
export interface UseConfigReturn {
    config: FrankAuthUIConfig;
    publishableKey: string;
    apiUrl: string;
    userType: string;
    debug: boolean;
    theme: Theme;
    appearance: AppearanceConfig;
    localization: LocalizationConfig;
    components: ComponentOverrides;
    titleAlignment: "left" | "center" | "right";
    linksPath?: LinksPathConfig;
    organization: OrganizationConfig | undefined;
    organizationSettings: any;
    features: AuthFeatures;
    updateConfig: (updates: Partial<FrankAuthUIConfig>) => void;
    setTheme: (theme: Partial<Theme>) => void;
    setAppearance: (appearance: Partial<AppearanceConfig>) => void;
    setLocale: (locale: string) => void;
    resetToDefaults: () => void;
    hasFeature: (feature: keyof AuthFeatures) => boolean;
    requireFeature: (feature: keyof AuthFeatures) => void;
    isConfigValid: boolean;
    configErrors: string[];
    isLoaded: boolean;
    isMultiTenant: boolean;
    isCustomBranded: boolean;
}
/**
 * Configuration hook providing access to all UI configuration and settings
 *
 * @example Basic configuration access
 * ```tsx
 * import { useConfig } from '@frank-auth/react';
 *
 * function ConfigDisplay() {
 *   const {
 *     theme,
 *     features,
 *     hasFeature,
 *     organization,
 *     setTheme
 *   } = useConfig();
 *
 *   return (
 *     <div>
 *       <p>Theme mode: {theme.mode}</p>
 *       <p>MFA enabled: {hasFeature('mfa') ? 'Yes' : 'No'}</p>
 *       {organization && <p>Organization: {organization.name}</p>}
 *
 *       <button onClick={() => setTheme({ mode: 'dark' })}>
 *         Switch to Dark Mode
 *       </button>
 *     </div>
 *   );
 * }
 * ```
 *
 * @example Feature-based conditional rendering
 * ```tsx
 * function ConditionalFeatures() {
 *   const { hasFeature, requireFeature } = useConfig();
 *
 *   // Conditional rendering
 *   if (!hasFeature('mfa')) {
 *     return <div>MFA not available</div>;
 *   }
 *
 *   // Feature requirement (throws if not available)
 *   const handleMFASetup = () => {
 *     requireFeature('mfa');
 *     // MFA setup logic...
 *   };
 *
 *   return <button onClick={handleMFASetup}>Setup MFA</button>;
 * }
 * ```
 *
 * @example Organization-specific configuration
 * ```tsx
 * function OrganizationConfig() {
 *   const {
 *     organization,
 *     organizationSettings,
 *     isMultiTenant,
 *     isCustomBranded
 *   } = useConfig();
 *
 *   if (!isMultiTenant) {
 *     return <div>Single tenant mode</div>;
 *   }
 *
 *   return (
 *     <div>
 *       <h3>{organization?.name}</h3>
 *       {isCustomBranded && (
 *         <img src={organizationSettings?.branding?.logo} alt="Organization Logo" />
 *       )}
 *       <p>MFA Required: {organizationSettings?.mfaRequired ? 'Yes' : 'No'}</p>
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useConfig(): UseConfigReturn;
/**
 * Hook for feature flags only
 */
export declare function useFeatureFlags(): {
    features: AuthFeatures;
    hasFeature: (feature: keyof AuthFeatures) => boolean;
    requireFeature: (feature: keyof AuthFeatures) => void;
    canSignUp: boolean;
    canSignIn: boolean;
    canResetPassword: boolean;
    hasMFA: boolean;
    hasPasskeys: boolean;
    hasOAuth: boolean;
    hasMagicLink: boolean;
    hasSSO: boolean;
    hasOrganizationManagement: boolean;
    hasUserProfile: boolean;
    hasSessionManagement: boolean;
};
/**
 * Hook for theme configuration
 */
export declare function useThemeConfig(): {
    theme: Theme;
    appearance: AppearanceConfig;
    setTheme: (theme: Partial<Theme>) => void;
    setAppearance: (appearance: Partial<AppearanceConfig>) => void;
    mode: import('../types').ThemeMode;
    colors: import('../types').ThemeColors;
    typography: import('../types').Typography;
    spacing: import('../types').Spacing;
    borderRadius: import('../types').BorderRadius;
    shadows: import('../types').Shadows;
    layout: import('../types').LayoutConfig;
    components: import('../config').ComponentAppearance;
    branding: import('../config').BrandingConfig;
    setMode: (mode: "light" | "dark" | "system") => void;
    setPrimaryColor: (color: string) => void;
    setSecondaryColor: (color: string) => void;
};
/**
 * Hook for localization configuration
 */
export declare function useLocalizationConfig(): {
    localization: LocalizationConfig;
    setLocale: (locale: string) => void;
    currentLocale: import('../locales').Locale;
    supportedLocales: import('../locales').Locale[];
    dateFormat: string;
    timeFormat: string;
    direction: import('../locales').LocaleDirection;
    isRTL: boolean;
    setEnglish: () => void;
    setSpanish: () => void;
    setFrench: () => void;
    setGerman: () => void;
};
/**
 * Hook for organization-specific configuration
 */
export declare function useOrganizationConfiguration(): {
    organization: OrganizationConfig | undefined;
    organizationSettings: any;
    isMultiTenant: boolean;
    isCustomBranded: boolean;
    features: {
        sso?: undefined;
        mfa?: undefined;
        auditLogs?: undefined;
        customBranding?: undefined;
        apiAccess?: undefined;
    } | {
        sso: boolean;
        mfa: boolean;
        auditLogs: boolean;
        customBranding: boolean;
        apiAccess: boolean;
    };
    organizationId: string | null;
    organizationName: string | null;
    organizationSlug: string | null;
    allowPublicSignup: any;
    requireEmailVerification: any;
    requirePhoneVerification: any;
    mfaRequired: any;
    allowedMfaMethods: any;
    branding: any;
    logo: any;
    primaryColor: any;
    secondaryColor: any;
    customCSS: any;
    limits: {
        maxUsers: number;
        maxSessions: number;
        apiRequestLimit: number;
    } | undefined;
    maxUsers: number;
    maxSessions: number;
    apiRequestLimit: number;
};
/**
 * Hook for component overrides
 */
export declare function useComponentConfiguration(): {
    components: ComponentOverrides;
    getComponent: <T extends keyof ComponentOverrides>(componentName: T, defaultComponent: any) => any;
    hasOverride: (componentName: keyof ComponentOverrides) => boolean;
    hasCustomLayout: boolean;
    hasCustomHeader: boolean;
    hasCustomFooter: boolean;
    hasCustomSignInForm: boolean;
    hasCustomSignUpForm: boolean;
    hasCustomUserProfile: boolean;
    hasCustomButton: boolean;
    hasCustomInput: boolean;
    hasCustomCard: boolean;
    hasCustomModal: boolean;
};
/**
 * Hook for configuration validation and debugging
 */
export declare function useConfigValidation(): {
    isValid: boolean;
    errors: string[];
    warnings: string[];
    debug: boolean;
    hasErrors: boolean;
    hasWarnings: boolean;
    isProduction: boolean;
    isTestMode: boolean;
    validatePublishableKey: () => boolean;
    validateApiUrl: () => boolean;
    validateUserType: () => boolean;
};
//# sourceMappingURL=use-config.d.ts.map