5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}] 51:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-label@^2.1.7"}] 52:["$","li","@radix-ui/react-popover@^1.1.14",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-popover@^1.1.14"}]]}]}] 53:["$","li","@radix-ui/react-slot@^1.2.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot@^1.2.3"}]]}]}] 54:["$","li","@radix-ui/react-tooltip@^1.2.7",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-tooltip","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-tooltip@^1.2.7"}]]}]}] 55:["$","li","@tanstack/react-query@^5.56.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-query","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-query@^5.56.2"}]]}]}] 56:["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}] 57:["$","li","clsx@^2.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx@^2.1.1"}]]}]}] 58:["$","li","lucide-react@^1.16.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.16.0"}]]}]}] 59:["$","li","qrcode@^1.5.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/qrcode","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"qrcode@^1.5.4"}]]}]}] 5a:["$","li","react-hook-form@^7.57.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-hook-form@^7.57.0"}]]}]}] 5b:["$","li","sonner@^2.0.5",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"sonner@^2.0.5"}]]}]}] 5c:["$","li","tailwind-merge@^3.3.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge@^3.3.0"}]]}]}] 5d:["$","$L5f",null,{"namespace":"@auth0","registryDependencies":[]}] 61:T3160,/** @module user-mfa-management */ import { getComponentStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import { DeleteFactorConfirmation } from '@/components/auth0/my-account/shared/mfa/delete-factor-confirmation'; import { MFAEmptyState } from '@/components/auth0/my-account/shared/mfa/empty-state'; import { MFAErrorState } from '@/components/auth0/my-account/shared/mfa/error-state'; import { FactorsList } from '@/components/auth0/my-account/shared/mfa/factors-list'; import { UserMFASetupForm } from '@/components/auth0/my-account/shared/mfa/user-mfa-setup-form'; import { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardDescription, CardTitle } from '@/components/ui/card'; import { List, ListItem } from '@/components/ui/list'; import { useUserMFA } from '@/hooks/my-account/use-user-mfa'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { UserMFAMgmtProps, UserMFAMgmtViewProps } from '@/types/my-account/mfa/mfa-types'; /** * Multi-factor authentication management component. * * Complete MFA management interface for enrolling, viewing, and deleting authentication * factors. Supports TOTP authenticators, SMS, Email, Push notifications, and recovery codes. * * @param props - {@link UserMFAMgmtProps} * @param props.customMessages - Custom i18n message overrides * @param props.styling - CSS variables and class overrides * @param props.hideHeader - Hide the header section * @param props.showActiveOnly - Show only enrolled factors * @param props.disableEnroll - Disable enroll actions * @param props.disableDelete - Disable delete actions * @param props.readOnly - Render in read-only mode * @param props.factorConfig - Per-factor visibility/enabled configuration * @param props.onEnroll - Callback after successful enrollment * @param props.onDelete - Callback after successful deletion * @param props.onFetch - Callback after factors are loaded * @param props.onErrorAction - Callback when actions error * @param props.onBeforeAction - Callback before actions; return false to cancel * @param props.schema - Validation schema overrides * @returns MFA management component * * @see {@link UserMFAMgmtProps} for full props documentation * * @example * ```tsx * console.log('Enrolled:', factor)} * onDelete={(factor) => console.log('Deleted:', factor)} * factorConfig={{ * otp: { enabled: true }, * sms: { enabled: true }, * email: { enabled: false }, * }} * /> * ``` */ function UserMFAMgmt({ customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} }, hideHeader = false, showActiveOnly = false, disableEnroll = false, disableDelete = false, readOnly = false, factorConfig = {}, onEnroll, onDelete, onFetch, onErrorAction, onBeforeAction, schema, }: UserMFAMgmtProps) { const { factorsByType, isLoadingFactors, isEnrolling, isDeleting, isConfirming, error, isEnrollDialogOpen, enrollFactor, enrollmentPhase, contact, otpData, recoveryCode, isDeleteDialogOpen, factorToDelete, visibleFactorTypes, hasNoActiveFactors, handleEnroll, handleCloseEnrollDialog, handleDeleteFactor, handleConfirmDelete, handleCancelDelete, handleSendCode, handleConfirmOtp, handleConfirmPush, handleConfirmRecoveryCode, handleEnterQRPhase, } = useUserMFA({ showActiveOnly, readOnly, disableDelete, factorConfig, customMessages, onFetch, onEnroll, onDelete, onErrorAction, onBeforeAction, }); return ( ); } /** * UserMFAMgmtView — Presentational component. * @param props - All state and handlers passed directly. * @returns User Management View element * @internal */ function UserMFAMgmtView({ error, schema, isEnrolling, isDeleting, isConfirming, styling, customMessages, hideHeader, showActiveOnly, disableEnroll, disableDelete, readOnly, factorConfig, isEnrollDialogOpen, enrollFactor, enrollmentPhase, contact, otpData, recoveryCode, isDeleteDialogOpen, factorToDelete, factorsByType, visibleFactorTypes, hasNoActiveFactors, onEnrollFactor, onDeleteFactor, onCloseEnrollDialog, onConfirmDelete, onCancelDelete, onSubmitContact, onConfirmOtp, onContinueQR, onConfirmRecoveryCode, onAdvanceToQR, }: UserMFAMgmtViewProps) { const { isDarkMode } = useTheme(); const { t } = useTranslator('mfa', customMessages); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); return ( {error ? ( ) : ( <> {!hideHeader && ( <> {t('title')} {t('description')} )} {showActiveOnly && hasNoActiveFactors ? ( ) : ( {visibleFactorTypes.map((factorType) => { const factors = factorsByType[factorType] || []; const activeFactors = factors.filter((f) => f.enrolled); const isEnabledFactor = factorConfig?.[factorType]?.enabled !== false; const hasActiveFactors = activeFactors.length > 0; return (

{t(`${factorType}.title`)} {hasActiveFactors && ( {t('enabled')} )}

{!readOnly && ( )}

{!hasActiveFactors && (

{t(`${factorType}.description`)}

)} {hasActiveFactors && ( )} ); })} )} )} {enrollFactor && ( )} !open && !isDeleting && onCancelDelete()} factorToDelete={factorToDelete} isDeletingFactor={isDeleting} onConfirm={onConfirmDelete} onCancel={onCancelDelete} styling={styling} customMessages={customMessages} /> ); } export { UserMFAMgmt, UserMFAMgmtView }; 62:T203f,/** * MFA contact input form for email/SMS enrollment. * @module contact-input-form * @internal */ import { FACTOR_TYPE_EMAIL, createEmailContactSchema, createSmsContactSchema, type EmailContactForm, type SmsContactForm, getComponentStyles, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import { MailIcon, SmartphoneIcon } from 'lucide-react'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { OTPVerificationForm } from '@/components/auth0/my-account/shared/mfa/otp-verification-form'; import { Button } from '@/components/ui/button'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, } from '@/components/ui/form'; import { Spinner } from '@/components/ui/spinner'; import { TextField } from '@/components/ui/text-field'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { ENTER_CONTACT, ENTER_OTP } from '@/lib/constants/my-account/mfa/mfa-constants'; import type { ContactInputFormProps } from '@/types/my-account/mfa/mfa-types'; type ContactForm = EmailContactForm | SmsContactForm; type Phase = typeof ENTER_CONTACT | typeof ENTER_OTP; /** * * @param props - Component props. * @param props.factorType - The MFA factor type * @param props.contact - Current contact value (email or phone) from hook state * @param props.isEnrolling - Whether enrollment is in progress * @param props.isConfirming - Whether OTP confirmation is in progress * @param props.onSubmitContact - Called with contact options; returns true on success * @param props.onConfirmOtp - Called with the 6-digit OTP code * @param props.onClose - Callback fired when the component should close * @param props.schema - Zod validation schema * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function ContactInputForm({ factorType, contact, isEnrolling, isConfirming, onSubmitContact, onConfirmOtp, onClose, schema, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: ContactInputFormProps) { const [phase, setPhase] = React.useState(ENTER_CONTACT); const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const ContactSchema = React.useMemo(() => { return factorType === FACTOR_TYPE_EMAIL ? createEmailContactSchema(t('errors.invalid_email'), schema?.email) : createSmsContactSchema(t('errors.invalid_phone_number'), schema?.phone); }, [factorType, t, schema]); const form = useForm({ resolver: zodResolver(ContactSchema), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { contact: contact || '' }, }); const handleCancel = () => { form.reset(); onClose?.(); }; const handleBack = () => setPhase(ENTER_CONTACT); const handleSubmit = async (data: ContactForm) => { const options: Record = factorType === FACTOR_TYPE_EMAIL ? { email: data.contact } : { phone_number: data.contact }; const success = await onSubmitContact(options); if (success) setPhase(ENTER_OTP); }; const renderContactScreen = () => (

{isEnrolling ? (

) : ( <>

{factorType === FACTOR_TYPE_EMAIL ? t('enrollment_form.enroll_email_description') : t('enrollment_form.enroll_sms_description')}

} placeholder={ factorType === FACTOR_TYPE_EMAIL ? t('enrollment_form.enroll_email_placeholder') : t('enrollment_form.enroll_sms_placeholder') } error={Boolean(form.formState.errors.contact)} aria-invalid={Boolean(form.formState.errors.contact)} {...field} /> )} />

)}

); const renderOtpScreen = () => ( ); return phase === ENTER_CONTACT ? renderContactScreen() : renderOtpScreen(); } 63:Td5b,/** * MFA factor deletion confirmation dialog. * @module delete-factor-confirmation * @internal */ import { getComponentStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Separator } from '@/components/ui/separator'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { DeleteFactorConfirmationProps } from '@/types/my-account/mfa/mfa-types'; /** * * @param props - Component props. * @param props.open - Whether the component is open/visible * @param props.onOpenChange - Callback fired when open state changes * @param props.factorToDelete - The factor selected for deletion * @param props.isDeletingFactor - Whether a factor deletion is in progress * @param props.onConfirm - Callback fired when the action is confirmed * @param props.onCancel - Callback fired when the operation is cancelled * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function DeleteFactorConfirmation({ open, onOpenChange, factorToDelete, isDeletingFactor, onConfirm, onCancel, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: DeleteFactorConfirmationProps) { const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); return ( ); } 64:T410,/** * MFA error state display. * @module error-state * @internal */ import { cn } from '@/lib/utils'; interface ErrorStateProps { title: string; description: string; className?: string; } /** * Displays an error state for MFA operations. * * @param props - Component props. * @param props.title - Error title text. * @param props.description - Error description text. * @param props.className - Additional CSS class names. * @returns Error state component. * @internal */ export function MFAErrorState({ title, description, className }: ErrorStateProps) { return (

{title}

{description}

); } 65:T11de,/** * MFA enrolled factors list display. * @module factors-list * @internal */ import { FACTOR_TYPE_PHONE, FACTOR_TYPE_EMAIL } from '@auth0/universal-components-core'; import { getComponentStyles } from '@auth0/universal-components-core'; import { MoreVertical, Trash2, Mail, Smartphone } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { FactorsListProps } from '@/types/my-account/mfa/mfa-types'; const FACTOR_ICONS = { [FACTOR_TYPE_PHONE]: Smartphone, [FACTOR_TYPE_EMAIL]: Mail, } as const; /** * * @param props - Component props. * @param props.factors - Array of MFA factors * @param props.factorType - The MFA factor type * @param props.readOnly - Whether the component is in read-only mode * @param props.isEnabledFactor - Whether the factor is enabled * @param props.onDeleteFactor - Callback to delete a factor * @param props.isDeletingFactor - Whether a factor deletion is in progress * @param props.disableDelete - Whether delete action is disabled * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function FactorsList({ factors, factorType, readOnly, isEnabledFactor, onDeleteFactor, isDeletingFactor, disableDelete, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: FactorsListProps) { const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const IconComponent = FACTOR_ICONS[factorType as keyof typeof FACTOR_ICONS]; const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); return (

{factors.map((factor) => (

{IconComponent && (

{!readOnly && (

)} ))}

); } 66:T14f0,/** * OTP verification input form. * @module otp-verification-form * @internal */ import { type MFAType, FACTOR_TYPE_EMAIL, FACTOR_TYPE_TOTP, FACTOR_TYPE_PUSH_NOTIFICATION, getComponentStyles, } from '@auth0/universal-components-core'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { Button } from '@/components/ui/button'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, } from '@/components/ui/form'; import { OTPField } from '@/components/ui/otp-field'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import type { OTPVerificationFormProps } from '@/types/my-account/mfa/mfa-types'; type OtpForm = { userOtp: string; }; const maskContact = (contact: string, factorType: MFAType): string => { if (!contact) return ''; if (factorType === FACTOR_TYPE_EMAIL) { const [local, domain] = contact.split('@'); if (!domain || !local || local.length <= 2) return contact; return `${local.slice(0, 2)}${'*'.repeat(local.length - 2)}@${domain}`; } return contact.length > 6 ? `${contact.slice(0, 3)}${'*'.repeat(contact.length - 6)}${contact.slice(-3)}` : contact; }; /** * OTP verification form for MFA enrollment confirmation. * @param props - Component props. * @param props.factorType - The MFA factor type * @param props.contact - Contact information (email/phone) * @param props.isConfirming - Whether confirmation is in progress * @param props.onConfirmOtp - Called with the 6-digit OTP code on submit * @param props.onBack - Callback fired when back navigation is triggered * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function OTPVerificationForm({ factorType, contact, isConfirming, onConfirmOtp, onBack, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, customMessages = {}, }: OTPVerificationFormProps) { const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const form = useForm({ mode: FORM_VALIDATION_MODE }); const userOtp = form.watch('userOtp'); const otpInputRef = React.useRef(null); React.useEffect(() => { otpInputRef.current?.focus(); }, []); const maskedContact = contact ? maskContact(contact, factorType) : ''; return (

onConfirmOtp(data.userOtp))} autoComplete="off" className="space-y-6" aria-describedby="otp-description" >

{[FACTOR_TYPE_PUSH_NOTIFICATION, FACTOR_TYPE_TOTP].includes(factorType) ? t('enrollment_form.show_otp.enter_opt_code') : t('enrollment_form.show_otp.enter_verify_code', { verifier: maskedContact })}

( {t('enrollment_form.show_otp.one_time_passcode')} )} />

); } 67:T1356,/** * QR code MFA enrollment form. * @module qr-code-enrollment-form * @internal */ import { getComponentStyles, FACTOR_TYPE_TOTP, FACTOR_TYPE_PUSH_NOTIFICATION, } from '@auth0/universal-components-core'; import * as React from 'react'; import { OTPVerificationForm } from '@/components/auth0/my-account/shared/mfa/otp-verification-form'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Button } from '@/components/ui/button'; import { QRCodeDisplayer } from '@/components/ui/qr-code'; import { Spinner } from '@/components/ui/spinner'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { QR_PHASE_ENTER_OTP, QR_PHASE_SCAN } from '@/lib/constants/my-account/mfa/mfa-constants'; import type { QRCodeEnrollmentFormProps } from '@/types/my-account/mfa/mfa-types'; type Phase = typeof QR_PHASE_SCAN | typeof QR_PHASE_ENTER_OTP; /** * * @param props - Component props. * @param props.factorType - The MFA factor type * @param props.barcodeUri - QR code URI to display * @param props.manualInputCode - Manual input code fallback * @param props.isEnrolling - Whether enrollment data is loading * @param props.isConfirming - Whether OTP confirmation is in progress * @param props.onContinueQR - Called when continuing past QR scan (push notification confirm) * @param props.onConfirmOtp - Called with the 6-digit OTP code (TOTP) * @param props.onClose - Callback fired when the component should close * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function QRCodeEnrollmentForm({ factorType, barcodeUri, manualInputCode, isEnrolling, isConfirming, onContinueQR, onConfirmOtp, onClose, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: QRCodeEnrollmentFormProps) { const [phase, setPhase] = React.useState(QR_PHASE_SCAN); const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const handleContinue = React.useCallback(async () => { if (factorType === FACTOR_TYPE_PUSH_NOTIFICATION) { await onContinueQR(); } else { setPhase(QR_PHASE_ENTER_OTP); } }, [factorType, onContinueQR]); const handleBack = React.useCallback(() => { setPhase(QR_PHASE_SCAN); }, []); const renderQrScreen = () => (

{isEnrolling ? (

) : (

{factorType === FACTOR_TYPE_TOTP ? t('enrollment_form.show_otp.title') : t('enrollment_form.show_auth0_guardian_title')}

)}

); const renderOtpScreen = () => ( ); return phase === QR_PHASE_SCAN ? renderQrScreen() : renderOtpScreen(); } 68:Tb38,/** * Recovery code display component. * @module show-recovery-code * @internal */ import { getComponentStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { ShowRecoveryCodeProps } from '@/types/my-account/mfa/mfa-types'; /** * * @param props - Component props. * @param props.recoveryCode - Recovery code to display * @param props.isEnrolling - Whether enrollment (code fetch) is in progress * @param props.isConfirming - Whether confirmation is in progress * @param props.onConfirmRecoveryCode - Called when the user confirms they've saved the code * @param props.onClose - Callback fired when the component should close * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function ShowRecoveryCode({ recoveryCode, isEnrolling, isConfirming, onConfirmRecoveryCode, onClose, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: ShowRecoveryCodeProps) { const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); return (

{isEnrolling || isConfirming ? (

) : (

{t('enrollment_form.recovery_code_description')}

)}

); } 69:T1bee,/** * MFA setup form with factor selection. * @module user-mfa-setup-form * @internal */ import { getComponentStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import AppleLogo from '@/assets/icons/apple-logo'; import GoogleLogo from '@/assets/icons/google-logo'; import { ContactInputForm } from '@/components/auth0/my-account/shared/mfa/contact-input-form'; import { QRCodeEnrollmentForm } from '@/components/auth0/my-account/shared/mfa/qr-code-enrollment-form'; import { ShowRecoveryCode } from '@/components/auth0/my-account/shared/mfa/show-recovery-code'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Separator } from '@/components/ui/separator'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { ENTER_QR, ENTER_CONTACT, QR_PHASE_INSTALLATION, SHOW_RECOVERY_CODE, } from '@/lib/constants/my-account/mfa/mfa-constants'; import { cn } from '@/lib/utils'; import type { UserMFASetupFormProps } from '@/types/my-account/mfa/mfa-types'; /** * * @param props - Component props. * @param props.open - Whether the dialog is open * @param props.onClose - Callback fired when the dialog should close * @param props.factorType - The MFA factor type being enrolled * @param props.enrollmentPhase - Current enrollment phase from useUserMFA * @param props.contact - Current enrolled contact (email/phone) from hook state * @param props.otpData - QR code data from hook state * @param props.recoveryCode - Recovery code from hook state * @param props.isEnrolling - Whether enrollment mutation is pending * @param props.isConfirming - Whether confirmation mutation is pending * @param props.onSubmitContact - Called with contact options on submit * @param props.onConfirmOtp - Called with OTP code on verification * @param props.onContinueQR - Called when continuing past QR scan (push notification) * @param props.onConfirmRecoveryCode - Called when confirming recovery code * @param props.onAdvanceToQR - Called to move from installation to QR scan phase * @param props.styling - Custom styling configuration * @param props.customMessages - Custom translation messages * @returns JSX element */ export function UserMFASetupForm({ open, onClose, factorType, enrollmentPhase, contact, otpData, recoveryCode, isEnrolling, isConfirming, onSubmitContact, onConfirmOtp, onContinueQR, onConfirmRecoveryCode, onAdvanceToQR, schema, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: UserMFASetupFormProps) { const { t } = useTranslator('mfa', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const renderInstallationPhase = () => (

{t('enrollment_form.show_otp.install_guardian_description')}

{t('app-store')} {t('google-play')}

); const renderForm = () => { switch (enrollmentPhase) { case QR_PHASE_INSTALLATION: return renderInstallationPhase(); case ENTER_CONTACT: return ( ); case ENTER_QR: return ( ); case SHOW_RECOVERY_CODE: return ( ); default: return null; } }; return ( ); } 6a:Taae,/** * Text field with copy-to-clipboard button. * @module copyable-text-field * @internal */ import { Copy } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { TextField, type TextFieldProps } from '@/components/ui/text-field'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; export interface CopyableTextFieldProps extends TextFieldProps { onCopy?: () => void; copyButtonClassName?: string; tooltipSide?: 'top' | 'bottom' | 'left' | 'right'; tooltipAlign?: 'start' | 'center' | 'end'; showCopyButton?: boolean; } const CopyableTextField = React.forwardRef( ( { onCopy, copyButtonClassName, tooltipSide = 'top', tooltipAlign = 'end', readOnly = true, endAdornment, showCopyButton = true, ...props }, ref, ) => { const { t } = useTranslator('common'); const [tooltipText, setTooltipText] = React.useState(t('copy')); const [tooltipOpen, setTooltipOpen] = React.useState(false); const handleCopy = async () => { if (props.value) { await navigator.clipboard.writeText(String(props.value)); setTooltipText(t('copied')); setTooltipOpen(true); setTimeout(() => { setTooltipText(t('copy')); setTooltipOpen(false); }, 1000); onCopy?.(); } }; const copyButton = ( {tooltipText} ); return ( {endAdornment} {copyButton} ) : ( copyButton ) ) : ( endAdornment ) } /> ); }, ); CopyableTextField.displayName = 'CopyableTextField'; export { CopyableTextField }; 6b:T112a,/** * GateKeeper component for guarding content during loading, MFA step-up, and 5xx error states. * @module gate-keeper * @internal */ import { type ComponentStyling, getComponentStyles, getStatusCode, isMfaRequiredError, } from '@auth0/universal-components-core'; import { RefreshCcw } from 'lucide-react'; import React, { useCallback, useMemo, useState, useEffect } from 'react'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardTitle } from '@/components/ui/card'; import { Spinner } from '@/components/ui/spinner'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { useGateKeeperContext } from '@/providers/gate-keeper-context'; interface GateKeeperProps { styling?: ComponentStyling>; isLoading?: boolean; children: React.ReactNode; } /** * Blocking error fallback with retry button. * Shown for 5xx errors and dismissed MFA errors. * * @param props - Component props. * @param props.onRetry - Retry handler. * @returns Error fallback element. * @internal */ function ErrorFallback({ onRetry, isMfa }: { onRetry: () => void; isMfa?: boolean }) { const { t } = useTranslator('gate_keeper'); const key = isMfa ? 'mfa_error' : 'fallback'; return ( {t(`${key}.title`)} {t(`${key}.description`)} {!isMfa && ( )} ); } /** * Guards children from rendering during loading/error states. MFA step-up overlays * children without unmounting them, preserving any in-progress form state. * - Loading → spinner (blocks children) * - MFA required error → MFA step-up dialog overlaid on children * - 5xx error or dismissed MFA → blocking error fallback with retry * - No error → children * * @param props - Component props. * @param props.styling - Styling configuration forwarded to the styled scope. * @param props.isLoading - Whether content is loading. * @param props.children - Child elements to render on success. * @returns GateKeeper element. */ export function GateKeeper({ styling, isLoading, children }: GateKeeperProps) { const { error, onRetry } = useGateKeeperContext(); const { coreClient } = useCoreClient(); const { isDarkMode } = useTheme(); const [isRetrying, setIsRetrying] = useState(false); const styles = useMemo(() => getComponentStyles(styling, isDarkMode), [styling, isDarkMode]); const handleRetry = useCallback(async () => { setIsRetrying(true); try { await onRetry?.(); } finally { setIsRetrying(false); } }, [onRetry]); const isMfaStepUp = isMfaRequiredError(error); const statusCode = getStatusCode(error); const isSystemError = !!error && !!statusCode && statusCode >= 500; useEffect(() => { if (isMfaStepUp && coreClient && !coreClient.isProxyMode()) { console.warn( `🚨 [Auth0 Components Warning]: A step-up authentication (MFA) was triggered, but the interactiveErrorHandler is not configured.\n\nTo enable Universal Login redirects for MFA step-up, login required, or consent errors, please update your configuration:\n\n\n\nFor more details, refer to the Auth0 Documentation.`, ); } }, [isMfaStepUp, coreClient]); if (isLoading || isRetrying) { return (

); } if (isSystemError || isMfaStepUp) { return ( ); } return {children}; } 6c:T526,/** * Auth0Scope component — CSS scope root and portal container for lib components. * @module auth0-scope * @internal */ 'use client'; import { getCoreStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { ThemeContext } from '@/providers/theme-provider'; export interface StyledScopeProps { children: React.ReactNode; style?: React.CSSProperties; } /** * CSS scope root for lib components. Handles dark-mode class and theme attribute. * * @param props - Component props. * @param props.children - Content to render inside the scope root. * @param props.style - Optional inline CSS styles * @returns A scoped wrapper div with dark-mode and theme attributes applied. * @internal */ export const StyledScope: React.FC = ({ children, style }) => { const { theme = 'default', isDarkMode, variables } = React.useContext(ThemeContext); const mergedStyle = React.useMemo(() => { const providerVars = getCoreStyles(variables, isDarkMode).variables; return { ...providerVars, ...style }; }, [variables, isDarkMode, style]); return (

{children}

); }; 6d:T1765,/** * Toast notification utilities. * @module toast * @internal */ import { Flag } from 'lucide-react'; import type { ReactNode } from 'react'; import { toast, type ExternalToast } from 'sonner'; import { DEFAULT_TOAST_SETTINGS } from '@/types/toast-types'; import type { ToastOptions, ToastSettings, ToastType } from '@/types/toast-types'; const TOAST_COLOR_CLASSES: Record = { success: 'text-success-foreground', error: 'text-destructive-foreground', warning: 'text-warning-foreground', info: 'text-info-foreground', } as const; const VALID_TOAST_TYPES: ToastType[] = ['success', 'error', 'warning', 'info'] as const; const BASE_TOAST_Z_INDEX = 1000; let toastZIndexCounter = 0; const MAX_Z_INDEX_COUNTER = 1000; const activeToastIds = new Set(); /** * Resets the z-index counter if no active toasts remain */ const resetCounterIfEmpty = (): void => { if (activeToastIds.size === 0) { toastZIndexCounter = 0; } }; /** * Removes a toast from tracking and resets counter if needed * @param toastId - The toast ID to remove, or undefined to clear all */ const removeToastFromTracking = (toastId?: string | number | unknown): void => { if (toastId !== undefined && toastId !== null) { activeToastIds.delete(toastId); } else { activeToastIds.clear(); } resetCounterIfEmpty(); }; let globalToastSettings: ToastSettings = { ...DEFAULT_TOAST_SETTINGS, }; /** * Sets global toast configuration. Called by Auth0ComponentProvider. * @param settings - Settings configuration * @internal */ export const setGlobalToastSettings = (settings?: ToastSettings): void => { if (!settings) { globalToastSettings = { ...DEFAULT_TOAST_SETTINGS, }; return; } globalToastSettings = { ...settings, }; if (settings.provider === 'custom') { const { methods } = settings; const availableMethods = Object.keys(methods); if (availableMethods.length === 0) { console.warn( 'Auth0ComponentProvider: Custom toast provider specified but no custom methods provided', ); } availableMethods.forEach((method) => { if (typeof methods[method as keyof typeof methods] !== 'function') { console.warn(`Auth0ComponentProvider: Custom toast method '${method}' is not a function`); } }); } }; /** * Gets the current global toast configuration. * @returns The current toast settings */ export const getGlobalToastSettings = (): ToastSettings => globalToastSettings; /** * Creates a styled message element with appropriate color classes. * @param type - The toast type for styling * @param message - The message text to style * @returns A React element with styled text */ const createStyledMessage = (type: ToastType, message: string): ReactNode => { const colorClass = TOAST_COLOR_CLASSES[type]; return {message}; }; /** * Creates a default icon for the toast based on its type. * @param type - The toast type to create an icon for * @returns A React element with a styled Flag icon */ const createDefaultIcon = (type: ToastType): ReactNode => { const colorClass = TOAST_COLOR_CLASSES[type]; return ; }; /** * Shows a toast notification using the configured provider. * * @param options - The toast configuration options * @param options.type - The type of toast ('success', 'error', 'info', 'warning', 'loading') * @param options.message - The message to display in the toast * @param options.className - Optional CSS class name for custom styling * @param options.icon - Optional custom icon to display * @param options.data - Additional options passed to the toast provider * @returns The toast instance ID or result from custom method */ export const showToast = ({ type, message, className, icon, data = {}, }: ToastOptions): string | number | void => { if (!message?.trim()) { console.warn('showToast: Empty message provided'); return; } if (!VALID_TOAST_TYPES.includes(type)) { console.error( `showToast: Invalid toast type '${type}'. Must be one of: ${VALID_TOAST_TYPES.join(', ')}`, ); return; } if (globalToastSettings.provider === 'custom' && globalToastSettings.methods[type]) { try { // Custom methods only receive the message - they handle their own configuration return globalToastSettings.methods[type]!(message); } catch (error) { console.error(`showToast: Error in custom ${type} method:`, error); } } const styledMessage = createStyledMessage(type, message); const defaultIcon = icon || createDefaultIcon(type); const currentZIndex = BASE_TOAST_Z_INDEX + toastZIndexCounter; toastZIndexCounter += 1; if (toastZIndexCounter >= MAX_Z_INDEX_COUNTER) { toastZIndexCounter = 0; } const toastOptions: ExternalToast = { className, icon: defaultIcon, style: { zIndex: currentZIndex, }, onDismiss: (toastId) => { removeToastFromTracking(toastId); }, ...data, }; try { const toastId = toast[type](styledMessage, toastOptions); if (toastId) { activeToastIds.add(toastId); } return toastId; } catch (error) { console.error(`showToast: Error showing ${type} toast:`, error); return toast(message); } }; /** * Dismisses a toast notification by ID, or dismisses all toasts if no ID is provided. * * @param toastId - Optional toast ID to dismiss. If not provided, dismisses all toasts. */ export const dismissToast = (toastId?: string | number): void => { if (globalToastSettings.provider === 'custom' && globalToastSettings.methods.dismiss) { try { globalToastSettings.methods.dismiss(toastId?.toString()); } catch (error) { console.error('dismissToast: Error in custom dismiss method:', error); } return; } toast.dismiss(toastId); removeToastFromTracking(toastId); }; 6e:T695,/** * Badge component with variants. * @module badge * @internal */ import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const badgeVariants = cva( 'theme-default:shadow-xs box-border inline-flex items-center overflow-clip rounded-2xl border border-transparent font-medium', { variants: { variant: { default: 'bg-primary text-primary-foreground theme-default:border-primary', secondary: 'bg-muted text-muted-foreground theme-default:border-muted-foreground/25', outline: 'border-border', info: 'bg-info text-info-foreground theme-default:border-info-foreground/25', success: 'bg-success theme-default:border-success-foreground/25 text-success-foreground', warning: 'bg-warning theme-default:border-warning-foreground/25 text-warning-foreground', destructive: 'bg-destructive theme-default:border-destructive-foreground/25 text-destructive-foreground', }, size: { sm: 'px-1.5 py-0.5 text-xs', md: 'px-2 py-1 text-sm', lg: 'px-2.5 py-1.5 text-sm', }, }, defaultVariants: { variant: 'default', size: 'md', }, }, ); function Badge({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span'; return ( ); } export { Badge, badgeVariants }; 6f:Td62,/** * Button component with variants. * @module button * @internal */ 'use client'; import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const buttonVariants = cva( "focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden text-sm font-medium whitespace-nowrap transition-all duration-150 ease-in-out outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { primary: "shadow-button-resting hover:shadow-button-hover hover:border-primary/50 border-primary bg-primary text-primary-foreground hover:bg-primary/90 theme-default:before:from-primary-foreground/0 theme-default:before:to-primary-foreground/15 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border", outline: "dark:bg-muted/50 hover:text-accent-foreground shadow-button-outlined-resting hover:shadow-button-outlined-hover hover:border-accent bg-background hover:bg-muted text-primary border-primary/35 theme-default:before:from-primary/5 theme-default:before:to-primary/0 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border", ghost: 'hover:bg-muted text-primary bg-transparent', destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-button-destructive-resting hover:shadow-button-destructive-hover border-destructive-border/25 hover:border-destructive-border/50 theme-default:before:to-primary-foreground/50 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] theme-default:border", link: 'text-foreground underline-offset-4 hover:underline', }, size: { default: 'h-10 rounded-2xl px-4 py-2.5 has-[>svg]:px-3', xs: 'h-7 rounded-md px-2 py-1.5 text-xs has-[>svg]:px-2', sm: 'h-8 gap-1.5 rounded-xl px-3 py-2 text-xs has-[>svg]:px-2.5', lg: 'h-12 rounded-3xl px-6 py-3 text-base has-[>svg]:px-4', icon: 'size-7 rounded-xl', }, }, defaultVariants: { variant: 'primary', size: 'default', }, }, ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { as?: boolean; } function Button({ className, variant, size, as, ...props }: React.ComponentProps<'button'> & ButtonProps) { const Comp = as ? Slot : 'button'; return ; } export { Button, buttonVariants }; 70:T7cb,/** * Card layout component. * @module card * @internal */ import * as React from 'react'; import { cn } from '@/lib/utils'; function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return

; } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

); } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }; 71:T11fe,/** * Dialog component using Radix primitives. * @module dialog * @internal */ 'use client'; import * as DialogPrimitive from '@radix-ui/react-dialog'; import { XIcon } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; function Dialog({ ...props }: React.ComponentProps) { return ; } function DialogTrigger({ ...props }: React.ComponentProps) { const { children, asChild = false, ...elementProps } = props; if (asChild && React.isValidElement(children)) { return React.cloneElement(children, { ...(typeof children.props === 'object' ? children.props : {}), ...elementProps, }); } return ( ); } function DialogPortal({ ...props }: React.ComponentProps) { const portalContainer = usePortalContainer(); return ( ); } function DialogClose({ ...props }: React.ComponentProps) { const { children } = props; return ( ); } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ); } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean; }) { return ( {children} {showCloseButton && ( )} ); } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ); } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ); } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, }; 72:T113a,/** * Form components with react-hook-form integration. * @module form * @internal */ 'use client'; import type * as LabelPrimitive from '@radix-ui/react-label'; import { Slot } from '@radix-ui/react-slot'; import * as React from 'react'; import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues, } from 'react-hook-form'; import { Label } from '@/components/ui/label'; import { cn } from '@/lib/utils'; const Form: typeof FormProvider = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName; }; const FormFieldContext = React.createContext({} as FormFieldContextValue); const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { return ( { const { onChange, onBlur, ...rest } = field; return props.render({ field: { ...rest, onChange: (...args: unknown[]) => { onChange(...(args as Parameters)); }, onBlur: (...args: unknown[]) => { onBlur(...(args as Parameters)); }, }, fieldState, formState, }); }} /> ); }; const useFormField = () => { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); const { getFieldState } = useFormContext(); const formState = useFormState({ name: fieldContext.name }); const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { throw new Error('useFormField should be used within '); } const { id } = itemContext; return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, }; }; type FormItemContextValue = { id: string; }; const FormItemContext = React.createContext({} as FormItemContextValue); function FormItem({ className, ...props }: React.ComponentProps<'div'>) { const id = React.useId(); return (

); } function FormLabel({ className, ...props }: React.ComponentProps) { const { error, formItemId } = useFormField(); return ( ); } function FormControl({ ...props }: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( ); } function FormDescription({ className, ...props }: React.ComponentProps<'p'>) { const { formDescriptionId } = useFormField(); return (

); } function FormMessage({ className, ...props }: React.ComponentProps<'p'>) { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message ?? '') : props.children; if (!body) { return null; } return (

{body}

); } export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, }; 73:T7a9,/** * List component with variants. * @module list * @internal */ import * as React from 'react'; import { cn } from '@/lib/utils'; export interface ListProps extends React.HTMLAttributes { variant?: 'bullet' | 'number' | 'icon' | 'plain'; spacing?: 'tight' | 'default' | 'relaxed'; iconPosition?: 'start' | 'end'; } export interface ListItemProps extends React.LiHTMLAttributes { icon?: React.ReactNode; description?: string; info?: React.ReactNode; } const ListItem = React.forwardRef( ({ className, children, icon, description, info, ...props }, ref) => { return (

{icon &&

{icon}

}

{children}

{description &&

{description}

}

{info &&

{info}

}

); }, ); ListItem.displayName = 'ListItem'; const List = React.forwardRef( ({ className, children, variant = 'plain', spacing = 'default', ...props }, ref) => { return (

{children} ); }, ); List.displayName = 'List'; export { List, ListItem }; 74:T1838,/** * One-time password input field. * @module otp-field * @internal */ 'use client'; import type { ClipboardEvent, KeyboardEvent } from 'react'; import React, { useRef, useState } from 'react'; import { TextField } from '@/components/ui/text-field'; import { cn } from '@/lib/utils'; export interface OTPFieldProps { length?: number; className?: string; placeholder?: string; disabled?: boolean; onChange?: (value: string) => void; autoSubmit?: (value: string) => void; separator?: { character?: string; afterEvery?: number; }; id?: string; value?: string; name?: string; inputRef?: React.Ref; } function OTPField({ length = 6, placeholder, disabled, className, onChange, autoSubmit, separator, id, value, name, inputRef, }: OTPFieldProps) { const [internalOtp, setInternalOtp] = useState(new Array(length).fill('')); const inputRefs = useRef<(HTMLInputElement | null)[]>([]); // Controlled vs uncontrolled logic const isControlled = value !== undefined; const otpValue = value || ''; const otp = isControlled ? Array.from({ length }, (_, i) => otpValue[i] || '') : internalOtp; const setOtp = (newOtp: string[]) => { if (!isControlled) { setInternalOtp(newOtp); } }; const handleChange = (element: HTMLInputElement, index: number) => { const value = element.value; if (isNaN(Number(value))) return; const newOtp = [...otp]; newOtp[index] = value.substring(value.length - 1); setOtp(newOtp); const otpValue = newOtp.join(''); onChange?.(otpValue); if (otpValue.length === length && autoSubmit) { autoSubmit(otpValue); } if (value && index < length - 1) { inputRefs.current[index + 1]?.focus(); } }; const handleKeyDown = (e: KeyboardEvent, index: number) => { if ((e.key === 'Delete' || e.key === 'Backspace') && (e.ctrlKey || e.metaKey)) { e.preventDefault(); const newOtp = new Array(length).fill(''); setOtp(newOtp); onChange?.(''); inputRefs.current[0]?.focus(); return; } if (e.key === 'ArrowLeft') { e.preventDefault(); if (index > 0) { inputRefs.current[index - 1]?.focus(); } return; } if (e.key === 'ArrowRight') { e.preventDefault(); if (index < length - 1) { inputRefs.current[index + 1]?.focus(); } return; } if (e.key === 'Home') { e.preventDefault(); inputRefs.current[0]?.focus(); return; } if (e.key === 'End') { e.preventDefault(); inputRefs.current[length - 1]?.focus(); return; } if (e.key === 'Backspace') { if (!otp[index] && index > 0) { const newOtp = [...otp]; newOtp[index - 1] = ''; setOtp(newOtp); onChange?.(newOtp.join('')); inputRefs.current[index - 1]?.focus(); } return; } if (e.key === 'Delete') { if (otp[index]) { const newOtp = [...otp]; newOtp[index] = ''; setOtp(newOtp); onChange?.(newOtp.join('')); } else if (index < length - 1) { const newOtp = [...otp]; newOtp[index + 1] = ''; setOtp(newOtp); onChange?.(newOtp.join('')); } return; } if (e.key === ' ') { e.preventDefault(); const nextEmptyIndex = otp.findIndex((digit, i) => i > index && !digit); if (nextEmptyIndex !== -1) { inputRefs.current[nextEmptyIndex]?.focus(); } else if (index < length - 1) { inputRefs.current[index + 1]?.focus(); } return; } }; const handlePaste = (e: ClipboardEvent, startIndex: number) => { e.preventDefault(); const pasteData = e.clipboardData.getData('text').replace(/[^0-9]/g, ''); if (!pasteData) return; const newOtp = [...otp]; const availableSlots = length - startIndex; const digitsToPaste = pasteData.slice(0, availableSlots); for (let i = startIndex; i < Math.min(startIndex + digitsToPaste.length, length); i++) { newOtp[i] = ''; } for (let i = 0; i < digitsToPaste.length && startIndex + i < length; i++) { newOtp[startIndex + i] = digitsToPaste[i] ?? ''; } setOtp(newOtp); const otpValue = newOtp.join(''); onChange?.(otpValue); if (otpValue.length === length && autoSubmit) { autoSubmit(otpValue); } const nextFocusIndex = Math.min(startIndex + digitsToPaste.length, length - 1); setTimeout(() => { inputRefs.current[nextFocusIndex]?.focus(); }, 0); }; return (

{otp.map((digit, index) => ( { inputRefs.current[index] = el as HTMLInputElement; if (index === 0 && inputRef) { if (typeof inputRef === 'function') { inputRef(el as HTMLInputElement); } else { inputRef.current = el as HTMLInputElement; } } }} type="text" inputMode="numeric" maxLength={1} value={digit} placeholder={placeholder} disabled={disabled} className="flex-1 text-xl font-semibold *:text-center has-[input]:text-center" onChange={(e) => handleChange(e.target, index)} onKeyDown={(e) => handleKeyDown(e, index)} onPaste={(e) => handlePaste(e, index)} // Apply the id and name only to the first input for label association and form submission id={index === 0 ? id : undefined} name={index === 0 ? name : undefined} /> {separator?.afterEvery && (index + 1) % separator.afterEvery === 0 && index < length - 1 && ( {separator.character || '-'} )} ))}

); } export { OTPField }; 75:T7ba,/** * Popover component using Radix primitives. * @module popover * @internal */ 'use client'; import * as PopoverPrimitive from '@radix-ui/react-popover'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; function Popover({ ...props }: React.ComponentProps) { return ; } function PopoverTrigger({ ...props }: React.ComponentProps) { return ; } function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps) { const portalContainer = usePortalContainer(); return ( ); } function PopoverAnchor({ ...props }: React.ComponentProps) { return ; } export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }; 76:T9f4,/** * QR code display component. * @module qr-code * @internal */ import * as React from 'react'; import { Spinner } from '@/components/ui/spinner'; import { useTheme } from '@/hooks/shared/use-theme'; import { cn } from '@/lib/utils'; export interface QRCodeDisplayerProps { value: string; size?: number; className?: string; alt?: string; loadingMessage?: string; errorMessage?: string; } export function QRCodeDisplayer({ value, size = 150, className, alt = 'QR Code', loadingMessage = 'Loading QR code', errorMessage = 'Failed to load QR code', }: QRCodeDisplayerProps) { const [qrUrl, setQrUrl] = React.useState(null); const [hasError, setHasError] = React.useState(false); const [isLoading, setIsLoading] = React.useState(true); const { isDarkMode } = useTheme(); const qrCodeColorScheme = React.useMemo( () => ({ dark: isDarkMode ? '#FFFFFF' : '#000000', light: isDarkMode ? '#000000' : '#FFFFFF', }), [isDarkMode], ); React.useEffect(() => { if (!value) { setQrUrl(null); setHasError(true); setIsLoading(false); return; } const generateQRCode = async () => { try { // Lazy load qrcode only in browser const { toDataURL } = await import('qrcode'); const dataURL = await toDataURL(value, { width: size, margin: 1, color: qrCodeColorScheme, }); setQrUrl(dataURL); setHasError(false); } catch (err) { setQrUrl(null); setHasError(true); } finally { setIsLoading(false); } }; setIsLoading(true); generateQRCode(); }, [value, size, qrCodeColorScheme]); const wrapperProps = { className: cn( 'flex items-center justify-center rounded p-2', 'bg-gray-100 dark:bg-gray-800', hasError && 'text-gray-500 dark:text-gray-400 text-sm', className, ), style: { width: size, height: size }, }; if (isLoading) { return (

); } if (hasError || !qrUrl) { return (

{errorMessage}

); } return ( {alt}

); } 77:T529,/** * Loading spinner component. * @module spinner * @internal */ import type { VariantProps } from 'class-variance-authority'; import { cva } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const spinnerVariants = cva( 'inline-block h-8 w-8 animate-spin rounded-full border-2 border-transparent', { variants: { variant: { solid: '!border-t-current', dots: 'animate-[spin_5s_linear_infinite] border-6 border-dotted border-current', pulse: 'animate-pulse bg-current', }, size: { sm: 'size-4', md: 'size-8', lg: 'size-12', }, colorScheme: { primary: 'text-primary', foreground: 'text-primary-foreground', muted: 'text-muted-foreground', }, }, defaultVariants: { variant: 'solid', size: 'md', colorScheme: 'primary', }, }, ); export interface SpinnerProps extends React.HTMLAttributes, VariantProps {} export function Spinner({ variant, size, colorScheme, className, ...props }: SpinnerProps) { return (

); } 78:Tf76,/** * Text input field with variants. * @module text-field * @internal */ import type { VariantProps } from 'class-variance-authority'; import { cva } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const textFieldVariants = cva( "bg-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative box-border inline-flex w-full shrink-0 cursor-text items-center justify-center gap-2 overflow-hidden rounded-2xl text-sm transition-[color,box-shadow] duration-150 ease-in-out outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: 'border-border/50 text-input-foreground shadow-input-resting hover:shadow-input-hover hover:border-primary/25 focus-within:border-border focus-within:ring-primary/15 focus-within:ring-4', error: 'border-destructive-border/50 text-destructive-foreground shadow-input-destructive-resting hover:shadow-input-destructive-hover hover:border-destructive-border/25 focus-within:ring-destructive-border/15 focus-within:ring-4', }, size: { default: 'h-10', sm: 'h-9', lg: 'h-11', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); export interface TextFieldProps extends Omit, 'size'> { error?: boolean; helperText?: string; size?: VariantProps['size']; variant?: VariantProps['variant']; startAdornment?: React.ReactNode; endAdornment?: React.ReactNode; } const TextField = React.forwardRef( ( { className, variant, size, error, helperText, startAdornment, endAdornment, ...props }, ref, ) => { const isDisabled = props.disabled; const WrapperComponent = props.id ? 'div' : 'label'; return (

{startAdornment && (

{startAdornment}

)} {endAdornment && (

{endAdornment}

)} {helperText && (

{helperText}

)}

); }, ); TextField.displayName = 'TextField'; export { TextField, textFieldVariants }; 79:T9a2,/** * Tooltip using Radix primitives. * @module tooltip * @internal */ 'use client'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; const tooltipVariants = cva( 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-bevel-lg z-50 w-fit rounded-xl px-2 py-1 text-sm text-balance', { variants: { position: { top: 'origin-bottom', bottom: 'origin-top', left: 'origin-left', right: 'origin-right', }, }, defaultVariants: { position: 'top', }, }, ); function Tooltip({ children, ...props }: React.ComponentProps) { return ( {children} ); } function TooltipTrigger({ asChild = true, ...props }: React.ComponentProps) { return ; } interface TooltipContentProps extends React.ComponentProps, VariantProps {} const TooltipContent = React.forwardRef< React.ElementRef, TooltipContentProps >(({ className, side = 'top', position, sideOffset = 8, children, ...props }, ref) => { const portalContainer = usePortalContainer(); return ( {children} ); }); TooltipContent.displayName = TooltipPrimitive.Content.displayName; export { Tooltip, TooltipTrigger, TooltipContent, tooltipVariants }; 7a:Ta69,/** * MFA service hook with TanStack Query. * @module use-user-mfa-service * @internal */ import { MFAMappers, mfaQueryKeys, type Authenticator, type MFAType, type EnrollOptions, type ConfirmEnrollmentOptions, } from '@auth0/universal-components-core'; import { useQuery, useMutation } from '@tanstack/react-query'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import type { UseUserMFAServiceReturn } from '@/types/my-account/mfa/mfa-types'; /** * Internal service hook for MFA operations backed by TanStack Query. * Provides queries and mutations; use `useUserMFA` for the public API. * @param onlyActive - Whether to return only active factors. * @returns MFA query and mutation handlers for factor listing and enrollment lifecycle operations. * @internal */ export function useUserMFAService(onlyActive: boolean): UseUserMFAServiceReturn { const { coreClient } = useCoreClient(); const factorsQuery = useQuery>({ queryKey: mfaQueryKeys.factors(onlyActive), queryFn: async () => { const client = coreClient!.getMyAccountApiClient(); const [availableFactors, enrolledFactors] = await Promise.all([ client.factors.list(), client.authenticationMethods.list(), ]); return MFAMappers.fromAPI(availableFactors, enrolledFactors, onlyActive) as Record< MFAType, Authenticator[] >; }, enabled: !!coreClient, }); const enrollMutation = useMutation({ mutationFn: ({ factorType, options = {}, }: { factorType: MFAType; options?: EnrollOptions; }) => { const client = coreClient!.getMyAccountApiClient(); const params = MFAMappers.buildEnrollParams(factorType, options); return client.authenticationMethods.create(params); }, }); const deleteMutation = useMutation({ mutationFn: (authenticatorId: string) => coreClient!.getMyAccountApiClient().authenticationMethods.delete(authenticatorId), }); const verifyMutation = useMutation({ mutationFn: ({ factorType, authSession, authenticationMethodId, options, }: { factorType: MFAType; authSession: string; authenticationMethodId: string; options: ConfirmEnrollmentOptions; }) => { const client = coreClient!.getMyAccountApiClient(); const params = MFAMappers.buildConfirmEnrollmentParams(factorType, authSession, options); return client.authenticationMethods.verify(authenticationMethodId, params); }, }); return { factorsQuery, enrollMutation, deleteMutation, verifyMutation, }; } 7b:T2b78,/** * User MFA management hook. * @module use-user-mfa */ import { FACTOR_TYPE_EMAIL, FACTOR_TYPE_PHONE, FACTOR_TYPE_PUSH_NOTIFICATION, FACTOR_TYPE_RECOVERY_CODE, isNotifiableError, normalizeError, type Authenticator, type CreateAuthenticationMethodResponseContent, type MFAType, } from '@auth0/universal-components-core'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { toast } from 'sonner'; import { useUserMFAService } from '@/hooks/my-account/shared/services/use-user-mfa-service'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import { CONFIRM, ENTER_CONTACT, ENTER_QR, ENROLL, QR_PHASE_INSTALLATION, SHOW_RECOVERY_CODE, } from '@/lib/constants/my-account/mfa/mfa-constants'; import type { EnrollmentPhase, UserMFAOptions, UseUserMFAReturn, } from '@/types/my-account/mfa/mfa-types'; const EMPTY_SESSION = { authSession: '', authenticationMethodId: '' }; const extractSession = (res: CreateAuthenticationMethodResponseContent) => ({ authSession: res.auth_session, authenticationMethodId: 'id' in res ? res.id : '', }); const extractOtpData = (res: CreateAuthenticationMethodResponseContent) => ({ barcodeUri: 'barcode_uri' in res ? res.barcode_uri : '', manualInputCode: 'manual_input_code' in res ? (res.manual_input_code ?? '') : '', }); /** * Hook for user MFA management — fetch, enroll, delete, confirm, and all UI state. * @param options - Hook options. * @returns MFA state, UI handlers, and API methods. */ export function useUserMFA({ showActiveOnly = false, readOnly = false, disableDelete = false, factorConfig, customMessages = {}, onFetch, onEnroll, onDelete, onErrorAction, onBeforeAction, }: UserMFAOptions = {}): UseUserMFAReturn { const { t } = useTranslator('mfa', customMessages); const handleError = useErrorHandler(); const { factorsQuery, enrollMutation, deleteMutation, verifyMutation } = useUserMFAService(showActiveOnly); const [isEnrollDialogOpen, setIsEnrollDialogOpen] = useState(false); const [enrollFactor, setEnrollFactor] = useState(null); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [factorToDelete, setFactorToDelete] = useState<{ id: string; type: MFAType } | null>(null); const [enrollmentPhase, setEnrollmentPhase] = useState(null); const [enrollmentSession, setEnrollmentSession] = useState(EMPTY_SESSION); const [contact, setContact] = useState(''); const [otpData, setOtpData] = useState({ barcodeUri: '', manualInputCode: '' }); const [recoveryCode, setRecoveryCode] = useState(''); const factorsByType = factorsQuery.data ?? ({} as Record); useEffect(() => { if (factorsQuery.isSuccess) onFetch?.(); }, [factorsQuery.isSuccess, onFetch]); useEffect(() => { if (factorsQuery.isError) { handleError(factorsQuery.error, { fallbackMessage: t('errors.factors_loading_error') }); } }, [factorsQuery.isError, factorsQuery.error, handleError, t]); const visibleFactorTypes = useMemo( () => (Object.keys(factorsByType) as MFAType[]).filter( (factorType) => factorConfig?.[factorType]?.visible !== false, ), [factorsByType, factorConfig], ); const hasNoActiveFactors = useMemo( () => visibleFactorTypes.every((type) => !factorsByType[type]?.some((f) => f.enrolled)), [visibleFactorTypes, factorsByType], ); const handleEnrollError = useCallback( (err: unknown, stage: typeof ENROLL | typeof CONFIRM, factor: MFAType | null) => { if (!isNotifiableError(err)) { handleError(err); return; } const label = stage === ENROLL ? t('enrollment') : t('confirmation'); const error = normalizeError(err, { resolver: (code) => t(`errors.${factor}.${code}`, {}, t('errors.unexpected')), }); toast.error(`${label} ${t('errors.failed', { message: error.message })}`); onErrorAction?.(error, stage); }, [handleError, onErrorAction, t], ); const handleEnrollSuccess = useCallback(async () => { toast.success(t('enroll_factor'), { duration: 2000, onAutoClose: () => onEnroll?.(), }); setIsEnrollDialogOpen(false); setEnrollFactor(null); setEnrollmentPhase(null); setEnrollmentSession(EMPTY_SESSION); setContact(''); setOtpData({ barcodeUri: '', manualInputCode: '' }); setRecoveryCode(''); await factorsQuery.refetch(); }, [factorsQuery, onEnroll, t]); const verifyAndComplete = useCallback( async (params: Parameters[0]) => { try { await verifyMutation.mutateAsync(params); await handleEnrollSuccess(); } catch (err) { handleEnrollError(err, CONFIRM, params.factorType); } }, [verifyMutation, handleEnrollSuccess, handleEnrollError], ); const handleEnroll = useCallback( async (factor: MFAType) => { setEnrollFactor(factor); setIsEnrollDialogOpen(true); if (factor === FACTOR_TYPE_EMAIL || factor === FACTOR_TYPE_PHONE) { setEnrollmentPhase(ENTER_CONTACT); return; } if (factor === FACTOR_TYPE_PUSH_NOTIFICATION) { setEnrollmentPhase(QR_PHASE_INSTALLATION); return; } try { const enrollment = await enrollMutation.mutateAsync({ factorType: factor, options: {} }); setEnrollmentSession(extractSession(enrollment)); if (factor === FACTOR_TYPE_RECOVERY_CODE) { setRecoveryCode('recovery_code' in enrollment ? enrollment.recovery_code : ''); setEnrollmentPhase(SHOW_RECOVERY_CODE); } else { setOtpData(extractOtpData(enrollment)); setEnrollmentPhase(ENTER_QR); } } catch (err) { handleEnrollError(err, ENROLL, factor); setIsEnrollDialogOpen(false); setEnrollFactor(null); } }, [enrollMutation, handleEnrollError], ); const handleCancelDelete = useCallback(() => { if (deleteMutation.isPending) return; setIsDeleteDialogOpen(false); setFactorToDelete(null); }, [deleteMutation.isPending]); const handleCloseEnrollDialog = useCallback(async () => { setIsEnrollDialogOpen(false); setEnrollmentPhase(null); setEnrollmentSession(EMPTY_SESSION); setContact(''); setOtpData({ barcodeUri: '', manualInputCode: '' }); setRecoveryCode(''); if (enrollFactor === FACTOR_TYPE_PUSH_NOTIFICATION && enrollmentSession.authSession) { await factorsQuery.refetch(); } setEnrollFactor(null); }, [enrollFactor, enrollmentSession.authSession, factorsQuery]); const executeDelete = useCallback( async (factorId: string) => { try { await deleteMutation.mutateAsync(factorId); await factorsQuery.refetch(); toast.success(t('remove_factor'), { duration: 2000, onAutoClose: () => onDelete?.(), }); } catch (err) { if (isNotifiableError(err)) { onErrorAction?.( err instanceof Error ? err : new Error(t('errors.delete_factor')), 'delete', ); } handleError(err, { fallbackMessage: t('errors.delete_factor') }); } finally { setIsDeleteDialogOpen(false); setFactorToDelete(null); } }, [deleteMutation, factorsQuery, handleError, onDelete, onErrorAction, t], ); const handleConfirmDelete = useCallback(async () => { if (!factorToDelete) return; await executeDelete(factorToDelete.id); }, [factorToDelete, executeDelete]); const handleDeleteFactor = useCallback( async (factorId: string, factorType: MFAType) => { if (readOnly || disableDelete) return; if (onBeforeAction) { const canProceed = await onBeforeAction('delete', factorType); if (!canProceed) return; await executeDelete(factorId); } else { setFactorToDelete({ id: factorId, type: factorType }); setIsDeleteDialogOpen(true); } }, [readOnly, disableDelete, onBeforeAction, executeDelete], ); const handleSendCode = useCallback( async (options: Record): Promise => { try { const enrollment = await enrollMutation.mutateAsync({ factorType: enrollFactor!, options }); setContact(options.email ?? options.phone_number ?? ''); setEnrollmentSession(extractSession(enrollment)); return true; } catch (err) { handleEnrollError(err, ENROLL, enrollFactor); return false; } }, [enrollFactor, enrollMutation, handleEnrollError], ); const handleConfirmOtp = useCallback( (otpCode: string) => verifyAndComplete({ factorType: enrollFactor!, authSession: enrollmentSession.authSession, authenticationMethodId: enrollmentSession.authenticationMethodId, options: { userOtpCode: otpCode }, }), [enrollFactor, enrollmentSession, verifyAndComplete], ); const handleEnterQRPhase = useCallback(async () => { if (!enrollFactor) return; try { const enrollment = await enrollMutation.mutateAsync({ factorType: enrollFactor, options: {}, }); setEnrollmentSession(extractSession(enrollment)); setOtpData(extractOtpData(enrollment)); setEnrollmentPhase(ENTER_QR); } catch (err) { handleEnrollError(err, ENROLL, enrollFactor); setIsEnrollDialogOpen(false); setEnrollFactor(null); } }, [enrollFactor, enrollMutation, handleEnrollError]); const handleConfirmPush = useCallback(async () => { if (enrollFactor !== FACTOR_TYPE_PUSH_NOTIFICATION) return; await verifyAndComplete({ factorType: enrollFactor, authSession: enrollmentSession.authSession, authenticationMethodId: enrollmentSession.authenticationMethodId, options: {}, }); }, [enrollFactor, enrollmentSession, verifyAndComplete]); const handleConfirmRecoveryCode = useCallback( () => verifyAndComplete({ factorType: enrollFactor!, authSession: enrollmentSession.authSession, authenticationMethodId: enrollmentSession.authenticationMethodId, options: {}, }), [enrollFactor, enrollmentSession, verifyAndComplete], ); return { factorsByType, isLoadingFactors: factorsQuery.isLoading, isEnrolling: enrollMutation.isPending, isDeleting: deleteMutation.isPending, isConfirming: verifyMutation.isPending, error: factorsQuery.isError ? t('errors.factors_loading_error') : null, isEnrollDialogOpen, enrollFactor, enrollmentPhase, isDeleteDialogOpen, factorToDelete, visibleFactorTypes, hasNoActiveFactors, contact, otpData, recoveryCode, handleCancelDelete, handleConfirmDelete, handleEnroll, handleCloseEnrollDialog, handleDeleteFactor, handleSendCode, handleConfirmOtp, handleConfirmPush, handleConfirmRecoveryCode, handleEnterQRPhase, }; } 7c:T4bd,/** * CoreClient initialization hook. * @module use-core-client-initialization * @internal */ import type { CoreClientInterface, AuthDetails, I18nInitOptions, } from '@auth0/universal-components-core'; import { createCoreClient } from '@auth0/universal-components-core'; import * as React from 'react'; interface UseCoreClientInitializationProps { authDetails: AuthDetails; i18nOptions?: I18nInitOptions; } /** * @internal * @param props - Initialization props. * @returns The initialized CoreClient instance, or null while initializing. */ export const useCoreClientInitialization = ({ authDetails, i18nOptions, }: UseCoreClientInitializationProps): CoreClientInterface | null => { const { authProxyUrl } = authDetails; const [coreClient, setCoreClient] = React.useState(null); React.useEffect(() => { const initializeCoreClient = async () => { try { const initializedCoreClient = await createCoreClient(authDetails, i18nOptions); setCoreClient(initializedCoreClient); } catch (error) { console.error(error); } }; initializeCoreClient(); }, [authProxyUrl, i18nOptions]); return coreClient; }; 7d:T7a8,/** * Error handling hook with toast error. * @module use-error-handler */ import { isNetworkError, isNotifiableError, resolveErrorMessage, getStatusCode, hasApiErrorBody, ERROR_CODES, } from '@auth0/universal-components-core'; import { useCallback } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useTranslator } from '@/hooks/shared/use-translator'; interface ErrorHandlerCallOptions { fallbackMessage?: string; } /** * Hook for consistent error handling across the app. * * @returns Error handler function. * * @example * const handleError = useErrorHandler(); * * // With custom message * onError: (error) => handleError(error, { * fallbackMessage: t('my_error') * }); * * // With defaults * onError: handleError; */ export function useErrorHandler() { const { t } = useTranslator('common'); return useCallback( (error: unknown, options: ErrorHandlerCallOptions = {}): void => { if (!isNotifiableError(error)) return; const getCustomErrorMessage = (err: unknown): string | undefined => { if (isNetworkError(err)) return t('error.network'); const status = getStatusCode(err); switch (status) { case 400: return t('error.bad_request'); case 401: return t('error.missing_token'); case 403: return hasApiErrorBody(err) && err.body?.type?.includes(ERROR_CODES.INSUFFICIENT_SCOPE) ? t('error.insufficient_scope') : t('error.forbidden'); case 404: return t('error.not_found'); case 429: return t('error.rate_limit'); default: return undefined; } }; showToast({ type: 'error', message: getCustomErrorMessage(error) ?? resolveErrorMessage(error, options.fallbackMessage ?? t('error.generic')), }); }, [t], ); } 7e:T4be,/** * Toast settings management hook. * @module use-toast-provider * @internal */ import { useEffect, useMemo } from 'react'; import { setGlobalToastSettings } from '@/components/auth0/shared/toast'; import { DEFAULT_TOAST_SETTINGS, type ToastSettings } from '@/types/toast-types'; /** * Hook to merge and apply toast settings. * @param toastSettings - Optional toast settings. * @returns Merged toast settings. * @internal */ export const useToastProvider = (toastSettings?: ToastSettings) => { const mergedToastSettings = useMemo(() => { if (!toastSettings) { return DEFAULT_TOAST_SETTINGS; } if (toastSettings.provider === 'custom') { return toastSettings; } const defaultSonnerSettings = DEFAULT_TOAST_SETTINGS.provider === 'sonner' ? DEFAULT_TOAST_SETTINGS.settings || {} : {}; return { provider: 'sonner' as const, settings: { ...defaultSonnerSettings, ...(toastSettings.provider === 'sonner' ? toastSettings.settings : {}), }, } satisfies ToastSettings; }, [toastSettings]); useEffect(() => { setGlobalToastSettings(mergedToastSettings); }, [mergedToastSettings]); return mergedToastSettings; }; 7f:T5bd,/** * i18n translator hook. * @module use-translator */ import { type EnhancedTranslationFunction } from '@auth0/universal-components-core'; import { useMemo, useCallback } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; /** * Hook to access i18n translations. * @param namespace - Translation namespace. * @param overrides - Optional translation overrides. * @returns Translator function and language utilities. */ export function useTranslator( namespace: string, overrides?: Record, ): { t: EnhancedTranslationFunction; changeLanguage: (language: string, fallbackLanguage?: string) => Promise; currentLanguage: string; fallbackLanguage: string | undefined; } { const { coreClient } = useCoreClient(); if (!coreClient) { throw new Error( 'useTranslator must be used within Auth0ComponentProvider with initialized CoreClient', ); } const translator = useMemo(() => { return coreClient.i18nService.translator(namespace, overrides); }, [coreClient, namespace, overrides]); const changeLanguage = useCallback( async (language: string, fallbackLanguage?: string) => { await coreClient.i18nService.changeLanguage(language, fallbackLanguage); }, [coreClient], ); return { t: translator, changeLanguage, currentLanguage: coreClient.i18nService.currentLanguage, fallbackLanguage: coreClient.i18nService.fallbackLanguage, }; } 80:Tb67,/** * RWA proxy provider for server-side auth. * @module proxy-provider */ 'use client'; import type { AuthDetails } from '@auth0/universal-components-core'; import * as React from 'react'; import { Toaster } from '@/components/auth0/shared/sonner'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Spinner } from '@/components/ui/spinner'; import { CoreClientContext } from '@/hooks/shared/use-core-client'; import { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization'; import { useToastProvider } from '@/hooks/shared/use-toast-provider'; import { QueryProvider } from '@/providers/query-provider'; import { ThemeProvider } from '@/providers/theme-provider'; import type { Auth0ComponentProviderProps } from '@/types/auth-types'; /** * Auth0 provider for RWAs using backend proxy auth. * @param props - Provider configuration including domain, proxyConfig, i18n, themeSettings, toastSettings, cacheConfig, loader, and children. * @returns Provider component tree */ export const Auth0ComponentProvider = ({ i18n, domain, proxyConfig, previewMode, themeSettings = { theme: 'default', mode: 'light', variables: { common: {}, light: {}, dark: {}, }, }, toastSettings, cacheConfig, loader, children, }: Extract & { children: React.ReactNode }) => { const mergedToastSettings = useToastProvider(toastSettings); const { baseUrl, fetcher } = proxyConfig; const memoizedAuthDetails = React.useMemo( () => ({ domain, authProxyUrl: baseUrl, fetcher, previewMode, }), [domain, baseUrl, fetcher, previewMode], ); const coreClient = useCoreClientInitialization({ authDetails: memoizedAuthDetails, i18nOptions: i18n, }); const coreClientValue = React.useMemo( () => ({ coreClient, }), [coreClient], ); const fallback = loader || (

); return ( {mergedToastSettings.provider === 'sonner' && ( )} {coreClient ? ( {children} ) : ( fallback )} ); }; export default Auth0ComponentProvider; 81:T1468,'use client'; /** * TanStack Query provider wrapper. * @module query-provider * @internal */ import { isMfaRequiredError, isNotifiableError } from '@auth0/universal-components-core'; import { MutationCache, type Query, QueryCache, QueryClient, QueryClientProvider as TanStackQueryClientProvider, } from '@tanstack/react-query'; import { useMemo, useState, type ReactElement, type ReactNode } from 'react'; import { GateKeeperContext } from '@/providers/gate-keeper-context'; /** Query cache configuration. */ export interface QueryCacheConfig { enabled?: boolean; staleTime?: number; gcTime?: number; refetchOnWindowFocus?: boolean | 'always'; } /** Default cache configuration. */ export const DEFAULT_CACHE_CONFIG: Readonly> = { enabled: true, staleTime: 2 * 60 * 1000, gcTime: 5 * 60 * 1000, refetchOnWindowFocus: false, }; const QUERY_RETRY_CONFIG = { maxRetries: 3, maxRetryDelay: 30_000, backoffMultiplier: 2, } as const; const MUTATION_RETRY_CONFIG = { maxRetries: 1, } as const; const DISABLED_CACHE_GC_TIME = 5 * 1000; /** * Merges user config with defaults. * @param userConfig - User-provided cache config. * @returns The resolved cache configuration * @internal */ export function resolveCacheConfig(userConfig?: QueryCacheConfig): Required { const merged: Required = { ...DEFAULT_CACHE_CONFIG, ...userConfig, }; if (!merged.enabled) { return { ...merged, staleTime: 0, gcTime: DISABLED_CACHE_GC_TIME, }; } return merged; } /** * Returns true if a cached query has an error that GateKeeper should handle. * @param query - The cached query to check. * @returns Whether the query error should be intercepted by GateKeeper. */ function isGateKeeperError(query: Query): boolean { return !!query.state.error && !isNotifiableError(query.state.error); } /** * Creates a QueryClient with config and global GateKeeper error interception. * @param cacheConfig - Cache configuration. * @param setGateKeeperState - Setter for GateKeeper context state. * @returns The configured QueryClient instance * @internal */ function createQueryClient( cacheConfig: Required, setGateKeeperState: (state: { error: Error; onRetry: () => Promise } | null) => void, ): QueryClient { const queryClient = new QueryClient({ queryCache: new QueryCache({ onError: (error) => { if (!isNotifiableError(error)) { setGateKeeperState({ error, onRetry: async () => { await queryClient.refetchQueries({ predicate: isGateKeeperError }); const stillFailing = queryClient.getQueryCache().getAll().some(isGateKeeperError); if (!stillFailing) setGateKeeperState(null); return !stillFailing; }, }); } }, }), mutationCache: new MutationCache({ onError: (error, variables, _context, mutation) => { if (isMfaRequiredError(error)) { setGateKeeperState({ error, onRetry: async () => { try { await mutation.execute(variables); setGateKeeperState(null); return true; } catch { return false; } }, }); } }, }), defaultOptions: { queries: { staleTime: cacheConfig.staleTime, gcTime: cacheConfig.gcTime, refetchOnWindowFocus: cacheConfig.refetchOnWindowFocus, retry: (failureCount, error) => !isMfaRequiredError(error) && failureCount < QUERY_RETRY_CONFIG.maxRetries, retryDelay: (attemptIndex: number) => Math.min( 1000 * QUERY_RETRY_CONFIG.backoffMultiplier ** attemptIndex, QUERY_RETRY_CONFIG.maxRetryDelay, ), refetchOnReconnect: true, }, mutations: { retry: (failureCount, error) => !isMfaRequiredError(error) && failureCount < MUTATION_RETRY_CONFIG.maxRetries, }, }, }); return queryClient; } /** Props for QueryProvider. */ export interface QueryProviderProps { children: ReactNode; /** Cache config, only read on mount. */ cacheConfig?: QueryCacheConfig; } /** * Internal TanStack Query provider wrapper. * @param props - Component props. * @param props.children - Child components. * @param props.cacheConfig - Cache configuration. * @returns The context provider component * @internal */ export function QueryProvider({ children, cacheConfig }: QueryProviderProps): ReactElement { const [gateKeeperState, setGateKeeperState] = useState<{ error: Error; onRetry: () => Promise; } | null>(null); const [queryClient] = useState(() => createQueryClient(resolveCacheConfig(cacheConfig), setGateKeeperState), ); const contextValue = useMemo(() => gateKeeperState ?? { error: null }, [gateKeeperState]); return ( {children} ); } 82:Tdaf,/** * SPA provider using @auth0/auth0-react. * @module spa-provider */ 'use client'; import { useAuth0 } from '@auth0/auth0-react'; import type { AuthDetails, BasicAuth0ContextInterface } from '@auth0/universal-components-core'; import * as React from 'react'; import { Toaster } from '@/components/auth0/shared/sonner'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Spinner } from '@/components/ui/spinner'; import { CoreClientContext } from '@/hooks/shared/use-core-client'; import { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization'; import { useToastProvider } from '@/hooks/shared/use-toast-provider'; import { QueryProvider } from '@/providers/query-provider'; import { ThemeProvider } from '@/providers/theme-provider'; import type { Auth0ComponentProviderProps } from '@/types/auth-types'; /** * Auth0 provider for SPAs. Wraps components with required contexts. * @param props - Provider configuration including domain, mode, authContext, i18n, themeSettings, toastSettings, cacheConfig, loader, and children. * @returns Provider component tree */ export const Auth0ComponentProvider = ( props: Extract & { children: React.ReactNode }, ) => { const { i18n, previewMode, themeSettings = { theme: 'default', mode: 'light', variables: { common: {}, light: {}, dark: {}, }, }, toastSettings, cacheConfig, loader, children, authContext, } = props; const mergedToastSettings = useToastProvider(toastSettings); const auth0ReactContext = useAuth0(); const resolvedAuthContext = React.useMemo(() => { if (authContext) { return authContext; } if (auth0ReactContext && 'isAuthenticated' in auth0ReactContext) { return auth0ReactContext as BasicAuth0ContextInterface; } throw new Error( 'Auth0ContextInterface is not available. Make sure you wrap your app with Auth0Provider from @auth0/auth0-react, or pass authContext.', ); }, [auth0ReactContext, authContext]); const memoizedAuthDetails = React.useMemo( () => ({ contextInterface: resolvedAuthContext, previewMode, }), [resolvedAuthContext, previewMode], ); const coreClient = useCoreClientInitialization({ authDetails: memoizedAuthDetails, i18nOptions: i18n, }); const coreClientValue = React.useMemo( () => ({ coreClient, }), [coreClient], ); const fallback = loader || (

); return ( {mergedToastSettings.provider === 'sonner' && ( )} {coreClient ? ( {children} ) : ( fallback )} ); }; export default Auth0ComponentProvider; 83:T7c9,/** * Theme provider for styling configuration. * @module theme-provider * @internal */ 'use client'; import { applyStyleOverrides, type StylingVariables } from '@auth0/universal-components-core'; import * as React from 'react'; import { PortalContext } from '@/providers/portal-context'; import type { ThemeContextValue, ThemeInput } from '@/types/theme-types'; /** Default empty style overrides. */ const defaultStyleOverrides: StylingVariables = { common: {}, light: {}, dark: {} }; /** * Theme context for accessing theme settings. * @internal * @returns The context provider component */ export const ThemeContext = React.createContext({ isDarkMode: false, variables: defaultStyleOverrides, loader: null, }); /** * Provides theme configuration to the component tree. * @param props - Component props. * @param props.themeSettings - Theme settings with mode, variables, and loader. * @param props.children - Child components. * @returns Theme provider. * @internal */ export const ThemeProvider: React.FC<{ themeSettings?: ThemeInput; children: React.ReactNode; }> = ({ themeSettings, children }) => { const { variables, loader, mode, theme } = React.useMemo( () => ({ variables: themeSettings?.variables ?? defaultStyleOverrides, loader: themeSettings?.loader ?? null, mode: themeSettings?.mode, theme: themeSettings?.theme ?? 'default', }), [themeSettings], ); const [portalContainer, setPortalContainer] = React.useState(null); React.useEffect(() => { applyStyleOverrides(variables, mode, theme); }, [variables, mode, theme]); return ( {children}

); }; 84:T478,/** * Auth provider configuration types. * @module auth-types */ import type { AuthDetails, FetcherAuthParams } from '@auth0/universal-components-core'; import type * as React from 'react'; import type { QueryCacheConfig } from '@/types/cache-types'; import type { I18nOptions } from '@/types/i18n-types'; import type { ThemeSettings } from '@/types/theme-types'; import type { ToastSettings } from '@/types/toast-types'; /** Props for Auth0ComponentProvider. */ export type Auth0ComponentProviderProps = ( | { mode?: 'direct'; authContext?: AuthDetails['contextInterface']; proxyConfig?: never; } | { mode: 'proxy'; domain: string; proxyConfig: { baseUrl: string; fetcher?: ( url: string, init?: RequestInit, authParams?: FetcherAuthParams, ) => Promise; }; } ) & { i18n?: I18nOptions; themeSettings?: ThemeSettings; loader?: React.ReactNode; toastSettings?: ToastSettings; /** TanStack Query cache config. Use `{ enabled: false }` to disable. */ cacheConfig?: QueryCacheConfig; previewMode?: boolean; }; 85:T25a2,/** * MFA management types. * @module mfa-types */ import type { CreateAuthenticationMethodResponseContent, VerifyAuthenticationMethodResponseContent, Authenticator, MFAType, EnrollOptions, ConfirmEnrollmentOptions, MFAMessages, SharedComponentProps, } from '@auth0/universal-components-core'; import type { UseMutationResult, UseQueryResult } from '@tanstack/react-query'; import type { ENTER_CONTACT, ENTER_QR, SHOW_RECOVERY_CODE, QR_PHASE_INSTALLATION, QR_PHASE_SCAN, QR_PHASE_ENTER_OTP, } from '@/lib/constants/my-account/mfa/mfa-constants'; export type EnrollmentPhase = | typeof ENTER_CONTACT | typeof ENTER_QR | typeof SHOW_RECOVERY_CODE | typeof QR_PHASE_INSTALLATION | typeof QR_PHASE_SCAN | typeof QR_PHASE_ENTER_OTP | null; export interface UserMFAOptions { showActiveOnly?: boolean; readOnly?: boolean; disableDelete?: boolean; factorConfig?: FactorConfig; customMessages?: UserMFAMgmtProps['customMessages']; onFetch?: () => void; onEnroll?: () => void; onDelete?: () => void; onErrorAction?: (error: Error, action: 'enroll' | 'delete' | 'confirm') => void; onBeforeAction?: ( action: 'enroll' | 'delete' | 'confirm', factorType: MFAType, ) => boolean | Promise; } export interface UseUserMFAReturn { factorsByType: Record; isLoadingFactors: boolean; isEnrolling: boolean; isDeleting: boolean; isConfirming: boolean; error: string | null; isEnrollDialogOpen: boolean; enrollFactor: MFAType | null; enrollmentPhase: EnrollmentPhase; isDeleteDialogOpen: boolean; factorToDelete: { id: string; type: MFAType } | null; visibleFactorTypes: MFAType[]; hasNoActiveFactors: boolean; contact: string; otpData: { barcodeUri: string; manualInputCode: string }; recoveryCode: string; handleCancelDelete: () => void; handleConfirmDelete: () => Promise; handleEnroll: (factor: MFAType) => Promise; handleCloseEnrollDialog: () => Promise; handleDeleteFactor: (factorId: string, factorType: MFAType) => Promise; handleSendCode: (options: Record) => Promise; handleConfirmOtp: (otpCode: string) => Promise; handleConfirmPush: () => Promise; handleConfirmRecoveryCode: () => Promise; handleEnterQRPhase: () => Promise; } export interface UseUserMFAServiceReturn { factorsQuery: UseQueryResult>; enrollMutation: UseMutationResult< CreateAuthenticationMethodResponseContent, Error, { factorType: MFAType; options?: EnrollOptions } >; deleteMutation: UseMutationResult; verifyMutation: UseMutationResult< VerifyAuthenticationMethodResponseContent, Error, { factorType: MFAType; authSession: string; authenticationMethodId: string; options: ConfirmEnrollmentOptions; } >; } /** Configuration for an individual MFA factor type. */ export interface FactorConfigOptions { visible?: boolean; enabled?: boolean; } /** MFA factor type configuration map. */ export type FactorConfig = Partial>; /** CSS classes for UserMFAMgmt component. */ export interface UserMFAMgmtClasses { 'UserMFAMgmt-card'?: string; 'UserMFASetupForm-dialogContent'?: string; 'DeleteFactorConfirmation-dialogContent'?: string; } /** Props for UserMFAMgmt component. */ export interface UserMFAMgmtProps extends SharedComponentProps< MFAMessages, UserMFAMgmtClasses, { email?: RegExp; phone?: RegExp } > { /** Hide component header. */ hideHeader?: boolean; /** Show only active (enrolled) factors. */ showActiveOnly?: boolean; /** Disable enrolling new factors. */ disableEnroll?: boolean; /** * Whether to disable the ability to delete existing MFA factors. * @defaultValue `false` */ disableDelete?: boolean; /** * Whether the component should be in read-only mode. * When `true`, users cannot enroll or delete factors. * @defaultValue `false` */ readOnly?: boolean; /** * Configuration for individual MFA factor types. * Allows hiding or disabling specific factor types. * * @example * ```tsx * factorConfig={{ * sms: { visible: true, enabled: true }, * email: { visible: true, enabled: false }, * otp: { visible: false }, * }} * ``` * * @see {@link FactorConfig} for the type definition * @see {@link FactorConfigOptions} for available options per factor */ factorConfig?: FactorConfig; /** * Callback invoked after a factor is successfully enrolled. */ onEnroll?: () => void; /** * Callback invoked after a factor is successfully deleted. */ onDelete?: () => void; /** * Callback invoked after factors are successfully fetched. */ onFetch?: () => void; /** * Callback invoked when an error occurs during an MFA action. * @param error - The error that occurred * @param action - The action that failed ('enroll', 'delete', or 'confirm') */ onErrorAction?: (error: Error, action: 'enroll' | 'delete' | 'confirm') => void; /** * Callback invoked before an MFA action is performed. * Return `false` or a Promise resolving to `false` to cancel the action. * * @param action - The action about to be performed ('enroll', 'delete', or 'confirm') * @param factorType - The MFA factor type involved in the action * @returns `true` to proceed, `false` to cancel * * @example * ```tsx * onBeforeAction={async (action, factorType) => { * if (action === 'delete') { * return await confirmDeletion(); * } * return true; * }} * ``` */ onBeforeAction?: ( action: 'enroll' | 'delete' | 'confirm', factorType: MFAType, ) => boolean | Promise; } export interface ContactInputFormProps extends SharedComponentProps< MFAMessages, UserMFAMgmtClasses, { email?: RegExp; phone?: RegExp } > { factorType: MFAType; contact: string; isEnrolling: boolean; isConfirming: boolean; onSubmitContact: (options: Record) => Promise; onConfirmOtp: (otpCode: string) => Promise; onClose: () => void; } export interface DeleteFactorConfirmationProps extends SharedComponentProps { open: boolean; onOpenChange: (open: boolean) => void; factorToDelete: { id: string; type: MFAType; } | null; isDeletingFactor: boolean; onConfirm: () => void; onCancel: () => void; } export interface OTPVerificationFormProps extends SharedComponentProps { factorType: MFAType; contact?: string; isConfirming: boolean; onConfirmOtp: (otpCode: string) => Promise; onBack?: () => void; } export interface QRCodeEnrollmentFormProps extends SharedComponentProps { factorType: MFAType; barcodeUri: string; manualInputCode: string; isEnrolling: boolean; isConfirming: boolean; onContinueQR: () => Promise; onConfirmOtp: (otpCode: string) => Promise; onClose: () => void; } export interface UserMFASetupFormProps extends SharedComponentProps { open: boolean; onClose: () => void; factorType: MFAType; enrollmentPhase: EnrollmentPhase; contact: string; otpData: { barcodeUri: string; manualInputCode: string }; recoveryCode: string; isEnrolling: boolean; isConfirming: boolean; onSubmitContact: (options: Record) => Promise; onConfirmOtp: (otpCode: string) => Promise; onContinueQR: () => Promise; onConfirmRecoveryCode: () => Promise; onAdvanceToQR: () => void; } export interface ShowRecoveryCodeProps extends SharedComponentProps { recoveryCode: string; isEnrolling: boolean; isConfirming: boolean; onConfirmRecoveryCode: () => Promise; onClose: () => void; } export interface FactorsListProps extends SharedComponentProps { factors: Authenticator[]; factorType: MFAType; readOnly: boolean; isEnabledFactor: boolean; onDeleteFactor: (factorId: string, factorType: MFAType) => void; isDeletingFactor: boolean; disableDelete: boolean; } export interface UserMFAMgmtViewProps { error: string | null; schema: UserMFAMgmtProps['schema']; isEnrolling: boolean; isDeleting: boolean; isConfirming: boolean; styling: UserMFAMgmtProps['styling']; customMessages: UserMFAMgmtProps['customMessages']; hideHeader: boolean; showActiveOnly: boolean; disableEnroll: boolean; disableDelete: boolean; readOnly: boolean; factorConfig?: FactorConfig; isEnrollDialogOpen: boolean; enrollFactor: MFAType | null; enrollmentPhase: EnrollmentPhase; contact: string; otpData: { barcodeUri: string; manualInputCode: string }; recoveryCode: string; isDeleteDialogOpen: boolean; factorToDelete: { id: string; type: MFAType } | null; factorsByType: Record; visibleFactorTypes: MFAType[]; hasNoActiveFactors: boolean; onEnrollFactor: (factor: MFAType) => void; onDeleteFactor: (factorId: string, factorType: MFAType) => Promise; onCloseEnrollDialog: () => void; onConfirmDelete: () => Promise; onCancelDelete: () => void; onSubmitContact: (options: Record) => Promise; onConfirmOtp: (otpCode: string) => Promise; onContinueQR: () => Promise; onConfirmRecoveryCode: () => Promise; onAdvanceToQR: () => void; } 86:T5e4,/** * Toast notification types. * @module toast-types */ import type { ReactNode } from 'react'; import type { ExternalToast } from 'sonner'; /** Toast notification type. */ export type ToastType = 'success' | 'info' | 'warning' | 'error'; /** Toast position options. */ export type ToastPosition = | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'; /** Custom toast method signature. */ export interface CustomToastMethod { (message: string): void; } /** Custom toast methods for overriding default behavior. */ export interface CustomToastMethods { success?: CustomToastMethod; error?: CustomToastMethod; warning?: CustomToastMethod; info?: CustomToastMethod; dismiss?: (toastId?: string) => void; } /** Sonner toast settings. */ export interface SonnerSettings { position?: ToastPosition; maxToasts?: number; duration?: number; dismissible?: boolean; closeButton?: boolean; } /** Toast provider configuration. */ export type ToastSettings = | { provider?: 'sonner'; settings?: SonnerSettings } | { provider: 'custom'; methods: CustomToastMethods }; /** Toast options for showToast. */ export interface ToastOptions { type: ToastType; message: string; className?: string; icon?: ReactNode; data?: ExternalToast; } /** Default toast settings. */ export const DEFAULT_TOAST_SETTINGS: ToastSettings = { provider: 'sonner', settings: { position: 'top-right', closeButton: true, }, } as const; 5e:["$","$L60",null,{"files":[{"path":"src/components/auth0/my-account/user-mfa-management.tsx","content":"$61","type":"registry:block","target":"components/auth0/my-account/user-mfa-management.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/contact-input-form.tsx","content":"$62","type":"registry:component","target":"components/auth0/my-account/shared/mfa/contact-input-form.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/delete-factor-confirmation.tsx","content":"$63","type":"registry:component","target":"components/auth0/my-account/shared/mfa/delete-factor-confirmation.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/empty-state.tsx","content":"/**\n * MFA empty state display.\n * @module empty-state\n * @internal\n */\n\nimport { cn } from '@/lib/utils';\n\ninterface MFAEmptyStateProps {\n message: string;\n className?: string;\n}\n\n/**\n *\n * @param props - Component props.\n * @param props.message - The message to display\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function MFAEmptyState({ message, className }: MFAEmptyStateProps) {\n return (\n \n {message}\n

\n );\n}\n","type":"registry:component","target":"components/auth0/my-account/shared/mfa/empty-state.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/error-state.tsx","content":"$64","type":"registry:component","target":"components/auth0/my-account/shared/mfa/error-state.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/factors-list.tsx","content":"$65","type":"registry:component","target":"components/auth0/my-account/shared/mfa/factors-list.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx","content":"$66","type":"registry:component","target":"components/auth0/my-account/shared/mfa/otp-verification-form.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/qr-code-enrollment-form.tsx","content":"$67","type":"registry:component","target":"components/auth0/my-account/shared/mfa/qr-code-enrollment-form.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/show-recovery-code.tsx","content":"$68","type":"registry:component","target":"components/auth0/my-account/shared/mfa/show-recovery-code.tsx"},{"path":"src/components/auth0/my-account/shared/mfa/user-mfa-setup-form.tsx","content":"$69","type":"registry:component","target":"components/auth0/my-account/shared/mfa/user-mfa-setup-form.tsx"},{"path":"src/components/auth0/shared/copyable-text-field.tsx","content":"$6a","type":"registry:component","target":"components/auth0/shared/copyable-text-field.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$6b","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/sonner.tsx","content":"/**\n * Sonner toast provider wrapper.\n * @module sonner\n * @internal\n */\n\n'use client';\n\nimport type { ToasterProps } from 'sonner';\nimport { Toaster as Sonner } from 'sonner';\n\nimport { useTheme } from '@/hooks/shared/use-theme';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { isDarkMode } = useTheme();\n const theme = isDarkMode ? 'dark' : 'light';\n\n return (\n \n );\n};\n\nexport { Toaster };\n","type":"registry:component","target":"components/auth0/shared/sonner.tsx"},{"path":"src/components/auth0/shared/styled-scope.tsx","content":"$6c","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$6d","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/ui/badge.tsx","content":"$6e","type":"registry:component","target":"components/ui/badge.tsx"},{"path":"src/components/ui/button.tsx","content":"$6f","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$70","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/dialog.tsx","content":"$71","type":"registry:component","target":"components/ui/dialog.tsx"},{"path":"src/components/ui/form.tsx","content":"$72","type":"registry:component","target":"components/ui/form.tsx"},{"path":"src/components/ui/label.tsx","content":"/**\n * Form label component.\n * @module label\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Label({ children, className, ...props }: React.ComponentPropsWithoutRef<'label'>) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/label.tsx"},{"path":"src/components/ui/list.tsx","content":"$73","type":"registry:component","target":"components/ui/list.tsx"},{"path":"src/components/ui/otp-field.tsx","content":"$74","type":"registry:component","target":"components/ui/otp-field.tsx"},{"path":"src/components/ui/popover.tsx","content":"$75","type":"registry:component","target":"components/ui/popover.tsx"},{"path":"src/components/ui/qr-code.tsx","content":"$76","type":"registry:component","target":"components/ui/qr-code.tsx"},{"path":"src/components/ui/separator.tsx","content":"/**\n * Visual separator component.\n * @module separator\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Separator({\n className,\n orientation = 'horizontal',\n decorative = true,\n ...props\n}: React.ComponentProps<'hr'> & { orientation?: 'horizontal' | 'vertical'; decorative?: boolean }) {\n return (\n \n );\n}\n\nexport { Separator };\n","type":"registry:component","target":"components/ui/separator.tsx"},{"path":"src/components/ui/spinner.tsx","content":"$77","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$78","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$79","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-account/shared/services/use-user-mfa-service.ts","content":"$7a","type":"registry:component","target":"hooks/my-account/shared/services/use-user-mfa-service.ts"},{"path":"src/hooks/my-account/use-user-mfa.ts","content":"$7b","type":"registry:component","target":"hooks/my-account/use-user-mfa.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$7c","type":"registry:component","target":"hooks/shared/use-core-client-initialization.ts"},{"path":"src/hooks/shared/use-core-client.ts","content":"/**\n * CoreClient context and hook.\n * @module use-core-client\n */\n\nimport type { CoreClientInterface } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\n/** @internal */\nconst CoreClientContext = React.createContext<{\n coreClient: CoreClientInterface | null;\n}>({\n coreClient: null,\n});\n\n/**\n * Hook to access CoreClient from context.\n * @returns CoreClient instance or null.\n * @throws If used outside Auth0ComponentProvider.\n */\nexport const useCoreClient = () => {\n const context = React.useContext(CoreClientContext);\n if (!context) {\n throw new Error('useCoreClient must be used within Auth0ComponentProvider');\n }\n return context;\n};\n\nexport { CoreClientContext };\n","type":"registry:component","target":"hooks/shared/use-core-client.ts"},{"path":"src/hooks/shared/use-error-handler.ts","content":"$7d","type":"registry:component","target":"hooks/shared/use-error-handler.ts"},{"path":"src/hooks/shared/use-theme.ts","content":"/**\n * Theme context hook.\n * @module use-theme\n */\n\n'use client';\n\nimport { useContext } from 'react';\n\nimport { ThemeContext } from '@/providers/theme-provider';\n\n/**\n * Hook to access theme context (mode, variables, loader).\n * @returns Theme context value.\n * @throws If used outside ThemeProvider.\n */\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n","type":"registry:component","target":"hooks/shared/use-theme.ts"},{"path":"src/hooks/shared/use-toast-provider.ts","content":"$7e","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$7f","type":"registry:component","target":"hooks/shared/use-translator.ts"},{"path":"src/providers/gate-keeper-context.tsx","content":"'use client';\n\nimport { createContext, useContext } from 'react';\n\nexport interface GateKeeperContextValue {\n error: Error | null;\n /** Defined only when an error is active. */\n onRetry?: () => Promise;\n}\n\nexport const GateKeeperContext = createContext(null);\n\n/**\n * @internal\n * @returns Current GateKeeper context value\n * @throws Error if used outside of the GateKeeperProvider\n */\nexport function useGateKeeperContext(): GateKeeperContextValue {\n const context = useContext(GateKeeperContext);\n\n if (!context) {\n throw new Error('useGateKeeperContext must be used within a GateKeeperProvider');\n }\n\n return context;\n}\n","type":"registry:component","target":"providers/gate-keeper-context.tsx"},{"path":"src/providers/portal-context.tsx","content":"'use client';\n\nimport * as React from 'react';\n\n/**\n * React context that stores the target HTML element used as a portal container\n * for overlay-based UI (for example, dialogs, popovers, and tooltips).\n *\n */\nexport const PortalContext = React.createContext(null);\n\n/**\n * Returns the current portal container element from `PortalContext`.\n *\n * @returns The configured portal host element, or `null` when not provided.\n */\nexport function usePortalContainer() {\n return React.useContext(PortalContext);\n}\n","type":"registry:component","target":"providers/portal-context.tsx"},{"path":"src/providers/proxy-provider.tsx","content":"$80","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$81","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$82","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$83","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$84","type":"registry:component","target":"types/auth-types.ts"},{"path":"src/types/cache-types.ts","content":"/**\n * TanStack Query cache configuration types.\n * @module cache-types\n */\n\n/** Cache configuration options. */\nexport interface QueryCacheConfig {\n enabled?: boolean;\n staleTime?: number;\n gcTime?: number;\n refetchOnWindowFocus?: boolean | 'always';\n}\n","type":"registry:component","target":"types/cache-types.ts"},{"path":"src/types/i18n-types.ts","content":"/**\n * Internationalization configuration types.\n * @module i18n-types\n */\n\n/** i18n configuration for Auth0 components. */\nexport interface I18nOptions {\n currentLanguage: string;\n fallbackLanguage?: string;\n}\n","type":"registry:component","target":"types/i18n-types.ts"},{"path":"src/types/my-account/mfa/mfa-types.ts","content":"$85","type":"registry:component","target":"types/my-account/mfa/mfa-types.ts"},{"path":"src/types/theme-types.ts","content":"/**\n * Theme configuration types.\n * @module theme-types\n */\n\nimport type { StylingVariables } from '@auth0/universal-components-core';\nimport type React from 'react';\n\n/** Theme settings for provider. */\nexport interface ThemeSettings {\n theme?: 'default' | 'minimal' | 'rounded';\n mode?: 'light' | 'dark';\n variables?: StylingVariables;\n}\n\n/** Theme input for ThemeProvider. */\nexport type ThemeInput = {\n theme?: 'default' | 'minimal' | 'rounded';\n mode?: 'light' | 'dark';\n variables?: StylingVariables;\n loader?: React.ReactNode;\n};\n\n/** Theme context value. */\nexport type ThemeContextValue = {\n theme?: 'default' | 'minimal' | 'rounded';\n isDarkMode?: boolean;\n variables: StylingVariables;\n loader: React.ReactNode | null;\n};\n","type":"registry:component","target":"types/theme-types.ts"},{"path":"src/types/toast-types.ts","content":"$86","type":"registry:component","target":"types/toast-types.ts"},{"path":"src/lib/constants/form-constants.ts","content":"/**\n * Form constants used across the components.\n * @internal\n */\n\nexport const FORM_VALIDATION_MODE = 'onTouched';\nexport const FORM_REVALIDATE_MODE = 'onChange';\n","type":"registry:component","target":"lib/constants/form-constants.ts"},{"path":"src/lib/constants/my-account/mfa/mfa-constants.ts","content":"/**\n * MFA enrollment flow constants.\n * @module mfa-constants\n * @internal\n */\n\nexport const ENTER_OTP = 'enterOtp';\nexport const ENTER_QR = 'showQr';\nexport const ENTER_CONTACT = 'enterContact';\n\nexport const ENROLL = 'enroll';\nexport const CONFIRM = 'confirm';\n\nexport const QR_PHASE_INSTALLATION = 'installation';\nexport const QR_PHASE_SCAN = 'scan';\nexport const QR_PHASE_ENTER_OTP = 'enter-otp';\nexport const SHOW_RECOVERY_CODE = 'show_recovery';\n","type":"registry:component","target":"lib/constants/my-account/mfa/mfa-constants.ts"},{"path":"src/lib/utils.ts","content":"/**\n * Tailwind CSS utility functions.\n * @module utils\n * @internal\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names with Tailwind CSS conflict resolution.\n * @param inputs - Input values to process\n * @returns The merged class name string\n * @internal\n */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:component","target":"lib/utils.ts"},{"path":"src/assets/icons/apple-logo.tsx","content":"/**\n * Apple logo icon component.\n * @module apple-logo\n * @internal\n */\n\nimport { AppleLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface AppleLogoProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * AppleLogo component renders the Apple SVG logo.\n *\n * @param props - Props including width, height, title, and standard SVG attributes.\n * @returns A JSX element with the Apple logo image.\n */\nconst AppleLogo: React.FC = ({\n width = 30,\n height = 30,\n title = 'Apple logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(AppleLogo);\n","type":"registry:component","target":"assets/icons/apple-logo.tsx"},{"path":"src/assets/icons/google-logo.tsx","content":"/**\n * Google logo icon component.\n * @module google-logo\n * @internal\n */\n\nimport { GoogleLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface GoogleLogoProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * GoogleLogo component renders the Google \"G\" logo SVG.\n *\n * @param props - Props including width, height, title, and standard SVG attributes.\n * @returns A JSX SVG element of the Google logo.\n */\nconst GoogleLogo: React.FC = ({\n width = 48,\n height = 48,\n title = 'Google logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(GoogleLogo);\n","type":"registry:component","target":"assets/icons/google-logo.tsx"},{"path":"src/styles/globals.css","content":"@import 'tailwindcss' important;\n@import '@auth0/universal-components-core/styles/globals.css';\n","type":"registry:component","target":"styles/globals.css"},{"path":"src/styles/tailwind.css","content":"/* Scan component library for class names */\n@source \"./**/*.js\";\n","type":"registry:component","target":"styles/tailwind.css"}],"className":"h-[70svh] min-h-80"}]