@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
232 lines (231 loc) • 7.42 kB
JavaScript
import { useCallback as g, useMemo as l } from "react";
import { useConfig as p } from "../provider/config-provider.js";
import { useAuth as d } from "./use-auth.js";
function o() {
const e = p(), { activeOrganization: n } = d(), a = g((i) => e.features[i], [e.features]), t = g((i) => {
if (!e.features[i])
throw new Error(`Feature ${i} is not enabled`);
}, [e.features]), { isConfigValid: s, configErrors: r } = l(() => {
const i = [];
if (e.publishableKey || i.push("Publishable key is required"), e.userType || i.push("User type is required"), e.publishableKey && !/^pk_(test|live)_[a-zA-Z0-9_]+$/.test(e.publishableKey) && i.push("Invalid publishable key format"), e.apiUrl)
try {
new URL(e.apiUrl);
} catch {
i.push("Invalid API URL format");
}
return e.userType && !["internal", "external", "end_user"].includes(e.userType) && i.push("Invalid user type"), {
isConfigValid: i.length === 0,
configErrors: i
};
}, [e.publishableKey, e.userType, e.apiUrl]), c = l(() => !!e.organizationConfig, [e.organizationConfig]), u = l(() => !!(e.organizationSettings?.branding?.logoUrl || e.organizationSettings?.branding?.primaryColor || e.organizationSettings?.branding?.customCss), [e.organizationSettings]);
return {
// Core configuration
config: e.config,
publishableKey: e.publishableKey,
apiUrl: e.apiUrl,
userType: e.userType,
debug: e.debug,
// UI configuration
titleAlignment: e.config?.appearance?.titleAlignment ?? "left",
theme: e.theme,
appearance: e.appearance,
localization: e.localization,
components: e.components,
linksPath: e.linksPath,
// Organization configuration
organization: e.organizationConfig,
organizationSettings: e.organizationSettings,
// Feature flags
features: e.features,
// Configuration methods
updateConfig: e.updateConfig,
setTheme: e.setTheme,
setAppearance: e.setAppearance,
setLocale: e.setLocale,
resetToDefaults: e.resetToDefaults,
// Feature flag helpers
hasFeature: a,
requireFeature: t,
// Validation
isConfigValid: s,
configErrors: r,
// State helpers
isLoaded: e.isLoaded,
isMultiTenant: c,
isCustomBranded: u
};
}
function y() {
const { features: e, hasFeature: n, requireFeature: a } = o();
return {
features: e,
hasFeature: n,
requireFeature: a,
// Convenience methods for common features
canSignUp: n("signUp"),
canSignIn: n("signIn"),
canResetPassword: n("passwordReset"),
hasMFA: n("mfa"),
hasPasskeys: n("passkeys"),
hasOAuth: n("oauth"),
hasMagicLink: n("magicLink"),
hasSSO: n("sso"),
hasOrganizationManagement: n("organizationManagement"),
hasUserProfile: n("userProfile"),
hasSessionManagement: n("sessionManagement")
};
}
function C() {
const { theme: e, setTheme: n, appearance: a, setAppearance: t } = o();
return {
theme: e,
appearance: a,
setTheme: n,
setAppearance: t,
// Theme helpers
mode: e.mode,
colors: e.colors,
typography: e.typography,
spacing: e.spacing,
borderRadius: e.borderRadius,
shadows: e.shadows,
// Appearance helpers
layout: a.layout,
components: a.components,
branding: a.branding,
// Quick theme updates
setMode: (s) => n({ mode: s }),
setPrimaryColor: (s) => n({
colors: { ...e.colors, primary: { ...e.colors.primary, DEFAULT: s } }
}),
setSecondaryColor: (s) => n({
colors: { ...e.colors, secondary: { ...e.colors.secondary, DEFAULT: s } }
})
};
}
function b() {
const { localization: e, setLocale: n } = o();
return {
localization: e,
setLocale: n,
// Localization helpers
currentLocale: e.defaultLocale,
supportedLocales: e.supportedLocales,
dateFormat: e.dateFormat,
timeFormat: e.timeFormat,
direction: e.direction,
// Quick locale updates
isRTL: e.direction === "rtl",
setEnglish: () => n("en"),
setSpanish: () => n("es"),
setFrench: () => n("fr"),
setGerman: () => n("de")
};
}
function S() {
const {
organization: e,
organizationSettings: n,
isMultiTenant: a,
isCustomBranded: t,
features: s
} = o(), r = l(() => e ? {
sso: e.features?.sso || !1,
mfa: e.features?.mfa || !1,
auditLogs: e.features?.auditLogs || !1,
customBranding: e.features?.customBranding || !1,
apiAccess: e.features?.apiAccess || !1
} : {}, [e]);
return {
organization: e,
organizationSettings: n,
isMultiTenant: a,
isCustomBranded: t,
features: r,
// Organization helpers
organizationId: e?.id || null,
organizationName: e?.name || null,
organizationSlug: e?.slug || null,
// Settings helpers
allowPublicSignup: n?.allowPublicSignup || !1,
requireEmailVerification: n?.requireEmailVerification || !1,
requirePhoneVerification: n?.requirePhoneVerification || !1,
mfaRequired: n?.mfaRequired || !1,
allowedMfaMethods: n?.allowedMfaMethods || [],
// Branding helpers
branding: n?.branding,
logo: n?.branding?.logo,
primaryColor: n?.branding?.primaryColor,
secondaryColor: n?.branding?.secondaryColor,
customCSS: n?.branding?.customCSS,
// Limits
limits: e?.limits,
maxUsers: e?.limits?.maxUsers || 0,
maxSessions: e?.limits?.maxSessions || 0,
apiRequestLimit: e?.limits?.apiRequestLimit || 0
};
}
function U() {
const { components: e } = o(), n = g((t, s) => e[t] || s, [e]), a = g((t) => !!e[t], [e]);
return {
components: e,
getComponent: n,
hasOverride: a,
// Component availability checks
hasCustomLayout: a("Layout"),
hasCustomHeader: a("Header"),
hasCustomFooter: a("Footer"),
hasCustomSignInForm: a("SignInForm"),
hasCustomSignUpForm: a("SignUpForm"),
hasCustomUserProfile: a("UserProfile"),
hasCustomButton: a("Button"),
hasCustomInput: a("Input"),
hasCustomCard: a("Card"),
hasCustomModal: a("Modal")
};
}
function z() {
const {
isConfigValid: e,
configErrors: n,
debug: a,
publishableKey: t,
apiUrl: s,
userType: r
} = o(), c = l(() => {
const u = [];
return t?.startsWith("pk_test_") && typeof window < "u" && window.location.hostname !== "localhost" && !window.location.hostname.includes("127.0.0.1") && u.push("Using test publishable key in production environment"), s?.startsWith("http://") && typeof window < "u" && window.location.protocol === "https:" && u.push("Using HTTP API URL on HTTPS site"), u;
}, [t, s]);
return {
isValid: e,
errors: n,
warnings: c,
debug: a,
// Helper methods
hasErrors: n.length > 0,
hasWarnings: c.length > 0,
isProduction: !t?.startsWith("pk_test_"),
isTestMode: t?.startsWith("pk_test_"),
// Validation helpers
validatePublishableKey: () => t ? /^pk_(test|live)_[a-zA-Z0-9_]+$/.test(t) : !1,
validateApiUrl: () => {
if (!s) return !0;
try {
return new URL(s), !0;
} catch {
return !1;
}
},
validateUserType: () => ["internal", "external", "end_user"].includes(r)
};
}
export {
U as useComponentConfiguration,
o as useConfig,
z as useConfigValidation,
y as useFeatureFlags,
b as useLocalizationConfig,
S as useOrganizationConfiguration,
C as useThemeConfig
};
//# sourceMappingURL=use-config.js.map