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"] 51:["$","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"}]}] 52:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dropdown-menu@^2.1.1"}] 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-switch@^1.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-switch","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-switch@^1.1.0"}]]}]}] 55:["$","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"}]]}]}] 56:["$","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"}]]}]}] 57:["$","li","@tanstack/react-table@^8.21.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","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-table@^8.21.3"}]]}]}] 58:["$","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"}]]}]}] 59:["$","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"}]]}]}] 5a:["$","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"}]]}]}] 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:T21fb,/** @module sso-provider-table */ import { getComponentStyles, type IdpKnownResponse, STRATEGY_DISPLAY_NAMES, } from '@auth0/universal-components-core'; import { Plus } from 'lucide-react'; import * as React from 'react'; import { SsoProviderDeleteModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal'; import { SsoProviderRemoveFromOrganizationModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal'; import { SsoProviderTableActionsColumn } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action'; import { DataTable, type Column } from '@/components/auth0/shared/data-table'; import { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper'; import { Header } from '@/components/auth0/shared/header'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { useSsoProviderTable } from '@/hooks/my-organization/use-sso-provider-table'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { SsoProviderTableProps, SsoProviderTableViewProps, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types'; /** * SSO provider table container component. * @param props - Component props * @param props.customMessages - Custom translation messages to override defaults * @param props.styling - Custom styling configuration with variables and classes * @param props.readOnly - Whether the component is in read-only mode * @param props.createAction - Configuration for the create action * @param props.editAction - Configuration for the edit action * @param props.deleteAction - Configuration for the delete action * @param props.deleteFromOrganizationAction - Configuration for removing from organization * @param props.enableProviderAction - Configuration for enabling a provider * @returns JSX element * @internal */ function SsoProviderTable(props: SsoProviderTableProps) { const { customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} }, readOnly = false, hideHeader = false, createAction, editAction, deleteAction, deleteFromOrganizationAction, enableProviderAction, } = props; const providerTable = useSsoProviderTable({ readOnly, customMessages, createAction, editAction, deleteAction, deleteFromOrganizationAction, enableProviderAction, }); return ( ); } /** * Internal SSO provider table view component * @param props - Component props * @internal * @returns JSX element */ function SsoProviderTableView({ styling, customMessages, readOnly, hideHeader, providers, shouldHideCreate, isViewLoading, createAction, editAction, selectedIdp, showDeleteModal, showRemoveModal, shouldAllowDeletion, organization, isUpdating, isUpdatingId, isDeleting, isRemoving, handleCreate, handleEdit, handleDelete, handleDeleteFromOrganization, handleToggleEnabled, handleDeleteConfirm, handleRemoveConfirm, setShowDeleteModal, setShowRemoveModal, }: SsoProviderTableViewProps) { const { isDarkMode } = useTheme(); const { t } = useTranslator('idp_management.sso_provider_table', customMessages); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const columns: Column[] = React.useMemo( () => [ { type: 'text', accessorKey: 'name', title: t('table.columns.name'), width: '25%', render: (idp) =>

{idp.name}

, }, { type: 'text', accessorKey: 'display_name', width: '30%', title: t('table.columns.display_name'), render: (idp) =>

{idp.display_name}

, }, { type: 'text', accessorKey: 'strategy', title: t('table.columns.identity_provider'), width: '25%', render: (idp) => (

{STRATEGY_DISPLAY_NAMES[idp.strategy]}

), }, { type: 'actions', title: '', width: '20%', render: (idp) => ( ), }, ], [ t, readOnly, editAction, isUpdating, handleEdit, handleDelete, handleDeleteFromOrganization, handleToggleEnabled, ], ); return ( {!hideHeader && (

handleCreate(), icon: Plus, hidden: shouldHideCreate || isViewLoading, disabled: createAction?.disabled || readOnly, }, ]} />

)} {selectedIdp && ( setShowDeleteModal(false)} provider={selectedIdp} onDelete={handleDeleteConfirm} isLoading={isDeleting} customMessages={customMessages?.delete_modal} /> )} {selectedIdp && ( setShowRemoveModal(false)} provider={selectedIdp} organizationName={organization?.name} onRemove={handleRemoveConfirm} isLoading={isRemoving} customMessages={customMessages?.remove_modal} /> )} ); } /** * SSO identity providers table. * * Displays a table of SSO identity providers with actions for creating, editing, * enabling/disabling, deleting, and removing providers from the organization. * * @param props - {@link SsoProviderTableProps} * @param props.customMessages - Custom i18n message overrides * @param props.styling - CSS variables and class overrides * @param props.readOnly - Render in read-only mode * @param props.createAction - Lifecycle hooks for provider creation * @param props.editAction - Lifecycle hooks for provider editing * @param props.deleteAction - Lifecycle hooks for provider deletion * @param props.deleteFromOrganizationAction - Lifecycle hooks for removing provider from organization * @param props.enableProviderAction - Lifecycle hooks for enabling/disabling provider * @returns SSO provider table component * * @see {@link SsoProviderTableProps} for full props documentation * * @example * ```tsx * navigate('/providers/new') }} * editAction={{ onAfter: (provider) => navigate(`/providers/${provider.id}`) }} * deleteAction={{ * onBefore: (provider) => confirm(`Delete ${provider.name}?`), * onAfter: (provider) => console.log('Deleted:', provider), * }} * /> * ``` */ export { SsoProviderTable, SsoProviderTableView }; 62:T6ea,/** * SSO provider deletion modal content. * @module provider-delete-modal-content * @internal */ import React from 'react'; import { Label } from '@/components/ui/label'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderDeleteModalContentProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types'; /** * * @param props - Component props. * @param props.onChange - Callback fired when the value changes * @param props.customMessages - Custom translation messages to override defaults * @param props.className - Optional CSS class name for styling * @returns JSX element */ export function SsoProviderDeleteModalContent({ onChange, customMessages = {}, className, }: SsoProviderDeleteModalContentProps) { const handleInputChange = (event: React.ChangeEvent) => { onChange(event.target.value); }; const { t } = useTranslator('idp_management.delete_sso_provider.modal.content', customMessages); return (

{t('field.label')}

); } 63:Tbb2,/** * SSO provider deletion modal. * @module provider-delete-modal * @internal */ import * as React from 'react'; import { SsoProviderDeleteModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderDeleteModalProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types'; /** * * @param props - Component props. * @param props.className - Optional CSS class name for styling * @param props.isOpen - Whether the modal/dialog is open * @param props.onClose - Callback fired when the component should close * @param props.provider - SSO provider object * @param props.onDelete - Callback fired when delete action is triggered * @param props.isLoading - Whether the component is in a loading state * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function SsoProviderDeleteModal({ className, isOpen, onClose, provider, onDelete, isLoading = false, customMessages = {}, }: SsoProviderDeleteModalProps) { const { t } = useTranslator('idp_management.delete_sso_provider', customMessages); const [confirmationText, setConfirmationText] = React.useState(''); const handleModalContentChange = React.useCallback((value: string) => { setConfirmationText(value); }, []); const handleDelete = React.useCallback(async () => { if (provider) { await onDelete(provider); onClose(); } }, [onDelete, provider, onClose]); const handleOpenChange = React.useCallback( (open: boolean) => { if (!open) { onClose(); } }, [onClose], ); React.useEffect(() => { if (isOpen) { setConfirmationText(''); } }, [isOpen]); return (

{t('modal.description', { providerName: provider.name })}

} modalActions={{ isLoading, nextAction: { type: 'button', label: t('modal.actions.delete_button_label'), onClick: handleDelete, variant: 'destructive', disabled: isLoading || confirmationText !== provider.name, }, previousAction: { label: t('modal.actions.cancel_button_label'), onClick: onClose, }, }} /> ); } 64:Td5b,/** * SSO provider remove from organization modal. * @module provider-remove-modal * @internal */ import * as React from 'react'; import { SsoProviderDeleteModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderRemoveFromOrganizationModalProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types'; /** * * @param props - Component props. * @param props.className - Optional CSS class name for styling * @param props.isOpen - Whether the modal/dialog is open * @param props.onClose - Callback fired when the component should close * @param props.provider - SSO provider object * @param props.organizationName - Name of the organization * @param props.onRemove - Callback fired when remove action is triggered * @param props.isLoading - Whether the component is in a loading state * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function SsoProviderRemoveFromOrganizationModal({ className, isOpen, onClose, provider, organizationName, onRemove, isLoading = false, customMessages = {}, }: SsoProviderRemoveFromOrganizationModalProps) { const { t } = useTranslator('idp_management.remove_sso_provider', customMessages); const [confirmationText, setConfirmationText] = React.useState(''); const handleModalContentChange = React.useCallback((value: string) => { setConfirmationText(value); }, []); const handleRemove = React.useCallback(async () => { if (provider) { await onRemove(provider); onClose(); } }, [onRemove, provider, onClose]); const handleOpenChange = React.useCallback( (open: boolean) => { if (!open) { onClose(); } }, [onClose], ); React.useEffect(() => { if (isOpen) { setConfirmationText(''); } }, [isOpen]); return (

<> {t.trans('modal.description', { components: { bold: (children: string) => {children}, }, vars: { providerName: provider.name }, })}

} modalActions={{ isLoading, nextAction: { type: 'button', label: t('modal.actions.remove_button_text'), onClick: handleRemove, variant: 'destructive', disabled: isLoading || confirmationText !== provider.name, }, previousAction: { label: t('modal.actions.cancel_button_text'), onClick: onClose, }, }} /> ); } 65:T1260,/** * SSO provider table row actions column. * @module sso-provider-table-action * @internal */ import { MoreHorizontal, Edit, Trash2 } from 'lucide-react'; import * as React from 'react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuPortal, } from '@/components/ui/dropdown-menu'; import { Switch } from '@/components/ui/switch'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { SsoProviderTableActionsColumnProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types'; /** * SsoProviderTableActionsColumn Component * Handles the actions column for SSO Provider table with enable/disable toggle and dropdown menu * @param props - Component props. * @param props.provider - SSO provider object * @param props.shouldAllowDeletion - Whether deletion should be allowed * @param props.readOnly - Whether the component is in read-only mode * @param props.isUpdating - Whether an update operation is in progress * @param props.isUpdatingId - ID of the item currently being updated * @param props.customMessages - Custom translation messages to override defaults * @param props.edit - Edit mode configuration * @param props.onToggleEnabled - Callback fired when enabled state is toggled * @param props.onEdit - Callback fired when edit action is triggered * @param props.onDelete - Callback fired when delete action is triggered * @param props.onRemoveFromOrganization - Callback fired when removing from organization * @returns JSX element */ export function SsoProviderTableActionsColumn({ provider, shouldAllowDeletion, readOnly = false, isUpdating = false, isUpdatingId, customMessages = {}, edit, onToggleEnabled, onEdit, onDelete, onRemoveFromOrganization, }: SsoProviderTableActionsColumnProps) { const { t } = useTranslator('idp_management.sso_provider_table', customMessages); const handleToggleEnabled = React.useCallback( (checked: boolean) => { onToggleEnabled(provider, checked); }, [provider, onToggleEnabled], ); const handleEdit = React.useCallback(() => { onEdit(provider); }, [provider, onEdit]); const handleDelete = React.useCallback(() => { onDelete(provider); }, [provider, onDelete]); const handleRemoveFromOrganization = React.useCallback(() => { onRemoveFromOrganization(provider); }, [provider, onRemoveFromOrganization]); return (

{provider.is_enabled ? t('table.actions.enabled_tooltip') : t('table.actions.disabled_tooltip')} {t('table.actions.edit_button_text')} {shouldAllowDeletion && ( {t('table.actions.delete_button_text')} )} {t('table.actions.remove_button_text')}

); } 66:T5272,/** * Data table with sorting and actions. * @module data-table * @internal */ import type { ActionButton as CoreActionButton } from '@auth0/universal-components-core'; import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, } from '@tanstack/react-table'; import type { SortingState, ColumnDef, RowSelectionState } from '@tanstack/react-table'; import { Copy } from 'lucide-react'; import React, { useState, useMemo } from 'react'; import { MiddleEllipsisText } from '@/components/auth0/shared/middle-ellipsis-text'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { InlineCode } from '@/components/ui/inline-code'; import { Spinner } from '@/components/ui/spinner'; import { Switch } from '@/components/ui/switch'; import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, } from '@/components/ui/table'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; interface ActionButton extends Omit { onClick: (event: React.MouseEvent) => void; } type AlignmentType = 'left' | 'center' | 'right'; export interface BaseColumn { title: string | React.ReactNode; accessorKey: keyof Item; width?: string; enableSorting?: boolean; headerAlign?: AlignmentType; } export interface TextColumn extends BaseColumn { type: 'text'; render?: (item: Item, value: unknown) => React.ReactNode; } export interface DateColumn extends BaseColumn { type: 'date'; format?: 'short' | 'medium' | 'long' | 'relative'; render?: (item: Item, value: Date | string | number) => React.ReactNode; } export interface SwitchColumn extends BaseColumn { type: 'switch'; onToggle?: (checked: boolean, item: Item) => void; } export interface ButtonColumn extends BaseColumn { type: 'button'; buttonText: string; variant?: 'primary' | 'destructive' | 'outline' | 'ghost' | 'link'; onClick: (item: Item) => void; } export interface CopyColumnLabels { copyTooltip?: string; copiedTooltip?: string; } export interface DataTableSelectionLabels { selectAll: string; selectRow: (index: number) => string; } export interface CopyColumn extends BaseColumn { type: 'copy'; } export interface BadgeColumn extends BaseColumn { type: 'badge'; variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success'; } export interface ActionsColumn extends Omit, 'accessorKey'> { type: 'actions'; accessorKey?: keyof Item; render: (item: Item) => React.ReactNode; } export interface CustomColumn extends BaseColumn { type: 'custom'; render: (item: Item, value: unknown) => React.ReactNode; } export type Column = | TextColumn | DateColumn | SwitchColumn | ButtonColumn | CopyColumn | BadgeColumn | ActionsColumn | CustomColumn; export interface EmptyStateProps { title: string; subtitle?: string; action?: ActionButton; } export interface DataTableSortConfig { key: string | null; direction: 'asc' | 'desc'; } export interface DataTableProps { data: Item[]; columns: Column[]; loading?: boolean; loader?: React.ReactNode; emptyState?: EmptyStateProps; onRowClick?: (rowData: Item) => void; className?: string; headerAlign?: AlignmentType; /** When provided, sorting is delegated to the parent (server-side). */ onSortChange?: (sortConfig: DataTableSortConfig) => void; /** Controlled sort state. Used with onSortChange for server-side sorting. */ sortConfig?: DataTableSortConfig; /** Enable row selection with checkboxes. */ selectable?: boolean; /** Controlled selected rows. */ selectedRows?: Item[]; /** Called when selection changes. */ onSelectedRowsChange?: (rows: Item[]) => void; /** Derive a stable string ID from a row for selection tracking. */ getRowId?: (row: Item) => string; /** Accessible labels for selection checkboxes. */ selectionLabels?: DataTableSelectionLabels; } const ALIGNMENT_CLASSES = { text: { left: 'text-left', center: 'text-center', right: 'text-right', }, flex: { left: 'justify-start', center: 'justify-center', right: 'justify-end', }, } as const; const isEmpty = (value: unknown): boolean => { return value === null || value === undefined || value === ''; }; const formatDate = (value: Date | string | number, format: string = 'medium'): string => { const date = new Date(value); if (isNaN(date.getTime())) return 'Invalid Date'; switch (format) { case 'short': return date.toLocaleDateString(); case 'long': return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }); case 'relative': { const now = new Date(); const diffTime = date.getTime() - now.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (Math.abs(diffDays) === 0) return 'Today'; if (diffDays === 1) return 'Tomorrow'; if (diffDays === -1) return 'Yesterday'; if (diffDays > 0) return `In ${diffDays} days`; return `${Math.abs(diffDays)} days ago`; } case 'medium': default: return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', }); } }; const DEFAULT_COPY_LABELS: Required = { copyTooltip: 'Copy to clipboard', copiedTooltip: 'Copied!', }; const DEFAULT_SELECTION_LABELS: DataTableSelectionLabels = { selectAll: 'Select all rows', selectRow: (index: number) => `Select row ${index + 1}`, }; /** * Copy button with clipboard functionality. * @param props - Component props. * @param props.value - Value to copy * @param props.labels - Tooltip labels * @returns JSX element */ function CopyButton({ value, labels = DEFAULT_COPY_LABELS, }: { value: unknown; labels?: CopyColumnLabels; }) { const [copied, setCopied] = useState(false); const [copyTooltipOpen, setCopyTooltipOpen] = useState(false); const stringValue = String(value); const handleCopy = async (e: React.MouseEvent) => { e.stopPropagation(); if (!value) return; try { await navigator.clipboard.writeText(stringValue); setCopied(true); setCopyTooltipOpen(true); setTimeout(() => { setCopied(false); setCopyTooltipOpen(false); }, 2000); } catch (error) { console.error('Failed to copy text:', error); } }; return (

{copied ? labels.copiedTooltip : labels.copyTooltip}

); } /** * Renders a text column cell. * @param item - Data item. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderTextColumn( item: Item, value: unknown, column: TextColumn, ): React.ReactNode { if (column.render) { return column.render(item, value); } return {String(value)}; } /** * Renders a date column cell. * @param item - Data item. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderDateColumn( item: Item, value: Date | string | number, column: DateColumn, ): React.ReactNode { if (column.render) { return column.render(item, value); } const formattedDate = formatDate(value, column.format); return ( {formattedDate} ); } /** * Renders a switch column cell. * @param item - Data item. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderSwitchColumn( item: Item, value: boolean, column: SwitchColumn, ): React.ReactNode { const handleToggle = (checked: boolean) => { column.onToggle?.(checked, item); }; return (

e.stopPropagation()}>

); } /** * Renders a button column cell. * @param item - Data item. * @param column - Column configuration. * @returns React node */ function renderButtonColumn(item: Item, column: ButtonColumn): React.ReactNode { const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); column.onClick(item); }; return ( ); } /** * Renders a badge column cell. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderBadgeColumn(value: unknown, column: BadgeColumn): React.ReactNode { return {String(value)}; } /** * Renders a copy column cell. * @param value - Cell value. * @returns React node */ function renderCopyColumn(value: unknown): React.ReactNode { return ; } /** * Empty state component for data table. * @param props - Component props. * @param props.title - Empty state title. * @param props.subtitle - Empty state subtitle. * @param props.action - Optional action button config. * @returns JSX element */ function EmptyState({ title, subtitle, action }: EmptyStateProps) { return (

{title}

{subtitle &&

{subtitle}

} {action && ( )}

); } /** * Generic data table component. * @param props - Component props. * @param props.data - Table data items. * @param props.columns - Column configurations. * @param props.loading - Loading state. * @param props.loader - Custom loader component. * @param props.emptyState - Empty state configuration. * @param props.onRowClick - Row click handler. * @param props.className - Additional CSS classes. * @param props.headerAlign - Default header alignment. * @returns JSX element */ export function DataTable({ data, columns, loading = false, loader, emptyState, onRowClick, className, headerAlign = 'left', onSortChange, sortConfig, selectable = false, selectedRows, onSelectedRowsChange, getRowId, selectionLabels, }: DataTableProps) { const isServerSideSort = !!onSortChange; const isControlledSelection = selectedRows !== undefined; const [internalSorting, setInternalSorting] = useState([]); const [internalRowSelection, setInternalRowSelection] = useState({}); // Convert controlled sortConfig to TanStack SortingState for header display const sorting: SortingState = useMemo(() => { if (isServerSideSort && sortConfig?.key) { return [{ id: sortConfig.key, desc: sortConfig.direction === 'desc' }]; } return internalSorting; }, [isServerSideSort, sortConfig, internalSorting]); const rowSelection = useMemo(() => { if (!selectable) return {}; if (isControlledSelection && selectedRows) { if (getRowId) { return Object.fromEntries(selectedRows.map((row) => [getRowId(row), true])); } return Object.fromEntries( data.reduce<[string, boolean][]>((acc, item, idx) => { if (selectedRows.includes(item)) acc.push([String(idx), true]); return acc; }, []), ); } return internalRowSelection; }, [selectable, isControlledSelection, selectedRows, getRowId, data, internalRowSelection]); const handleSortingChange = React.useCallback( (updater: SortingState | ((old: SortingState) => SortingState)) => { const newSorting = typeof updater === 'function' ? updater(sorting) : updater; if (isServerSideSort) { const sort = newSorting[0]; if (sort) { onSortChange({ key: sort.id, direction: sort.desc ? 'desc' : 'asc' }); } else { onSortChange({ key: null, direction: 'asc' }); } } else { setInternalSorting(newSorting); } }, [isServerSideSort, onSortChange, sorting], ); const handleRowSelectionChange = React.useCallback( (updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => { const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater; if (!isControlledSelection) setInternalRowSelection(newSelection); if (onSelectedRowsChange) { const items = getRowId ? data.filter((item) => newSelection[getRowId(item)]) : data.filter((_, idx) => newSelection[String(idx)]); onSelectedRowsChange(items); } }, [rowSelection, isControlledSelection, onSelectedRowsChange, getRowId, data], ); const selectionColumn = useMemo>( () => ({ id: '__selection__', enableSorting: false, size: 48, meta: { headerAlign: 'left' as AlignmentType, column: { type: 'actions', title: '', width: '48px', enableSorting: false, render: () => null, } as unknown as Column, }, header: ({ table: t }) => ( t.toggleAllPageRowsSelected(!!checked)} aria-label={selectionLabels?.selectAll ?? DEFAULT_SELECTION_LABELS.selectAll} onClick={(e: React.MouseEvent) => e.stopPropagation()} /> ), cell: ({ row }) => ( row.toggleSelected(!!checked)} aria-label={ selectionLabels?.selectRow(row.index) ?? DEFAULT_SELECTION_LABELS.selectRow(row.index) } onClick={(e: React.MouseEvent) => e.stopPropagation()} /> ), }), [selectionLabels], ); const tableColumns = useMemo[]>(() => { const dataCols: ColumnDef[] = columns.map((column, index) => { return { id: column.accessorKey ? String(column.accessorKey) : `column-${index}`, accessorKey: column.accessorKey as string, header: typeof column.title === 'string' ? column.title : () => column.title as React.ReactNode, size: column.width ? isNaN(Number(column.width)) ? undefined : Number(column.width) : undefined, enableSorting: column.enableSorting !== false && !!column.accessorKey, meta: { headerAlign: column.headerAlign || headerAlign || 'left', column: column, }, cell: ({ getValue, row }) => { const value = getValue(); const item = row.original; if (column.type === 'actions') { return

e.stopPropagation()}>{column.render(item)}

; } if (column.type === 'custom') { return <>{column.render(item, value)}; } if (column.type === 'switch') { return renderSwitchColumn(item, value as boolean, column); } if (column.type === 'button') { return renderButtonColumn(item, column); } if (isEmpty(value)) { return null; } switch (column.type) { case 'text': return renderTextColumn(item, value, column); case 'date': return renderDateColumn(item, value as Date | string | number, column); case 'copy': return renderCopyColumn(value); case 'badge': return renderBadgeColumn(value, column); default: return {String(value)}; } }, }; }); return selectable ? [selectionColumn, ...dataCols] : dataCols; }, [columns, headerAlign, selectable, selectionColumn]); const table = useReactTable({ data, columns: tableColumns, state: { sorting, ...(selectable && { rowSelection }), }, getRowId: getRowId, onSortingChange: handleSortingChange, ...(selectable && { onRowSelectionChange: handleRowSelectionChange }), enableRowSelection: selectable, getCoreRowModel: getCoreRowModel(), getSortedRowModel: isServerSideSort ? undefined : getSortedRowModel(), manualSorting: isServerSideSort, manualPagination: true, }); if (loading) { return (

{loader || }

); } return (

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const canSort = header.column.getCanSort(); const sortDirection = header.column.getIsSorted(); const meta = header.column.columnDef.meta as { headerAlign: AlignmentType; column: Column; }; return ( {flexRender(header.column.columnDef.header, header.getContext())} ); })} ))} {table.getRowModel().rows.length === 0 ? ( ) : ( table.getRowModel().rows.map((row) => ( onRowClick?.(row.original)} > {row.getVisibleCells().map((cell) => { const meta = cell.column.columnDef.meta as { column: Column; }; return ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ); })} )) )}

); } 67:Tf3d,/** * Form action buttons component. * @module form-actions * @internal */ import type { ActionButton } from '@auth0/universal-components-core'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { cn } from '@/lib/utils'; export interface FormActionsProps { hasUnsavedChanges?: boolean; isLoading?: boolean; nextAction?: Partial>; previousAction?: Partial>; showPrevious?: boolean; showNext?: boolean; showUnsavedChanges?: boolean; align?: 'left' | 'right'; className?: string; unsavedChangesText?: string; } const DEFAULT_NEXT_ACTION: ActionButton = { type: 'submit', label: 'Save', variant: 'primary', onClick: () => {}, }; const DEFAULT_PREVIOUS_ACTION: ActionButton = { label: 'Cancel', variant: 'outline', onClick: () => {}, }; export const FormActions: React.FC = ({ hasUnsavedChanges = false, isLoading = false, nextAction, previousAction, className, showPrevious = true, showNext = true, showUnsavedChanges = true, align = 'right', unsavedChangesText = 'Unsaved changes', }) => { const nextButtonProps = React.useMemo( () => ({ ...DEFAULT_NEXT_ACTION, ...nextAction }), [nextAction], ); const previousButtonProps = React.useMemo( () => ({ ...DEFAULT_PREVIOUS_ACTION, ...previousAction }), [previousAction], ); const handleNextClick = React.useCallback( (e: React.MouseEvent) => { nextButtonProps.onClick(e.nativeEvent); }, [nextButtonProps.onClick], ); const handlePreviousClick = React.useCallback( (e: React.MouseEvent) => { previousButtonProps.onClick(e.nativeEvent); }, [previousButtonProps.onClick], ); const showUnsavedIndicator = showUnsavedChanges && hasUnsavedChanges; const isPreviousVisible = showUnsavedChanges ? showPrevious && hasUnsavedChanges : showPrevious; return (

{showUnsavedIndicator && ( {unsavedChangesText} )} {showPrevious && ( )} {showNext && ( )}

); }; 68: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}; } 69:T13f1,/** * Section header with actions. * @module header * @internal */ import type { ActionButton as CoreActionButton } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import { ArrowLeft } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { Switch } from '@/components/ui/switch'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; export interface TooltipProps { content: React.ReactNode | string; } export interface WithTooltipProps { trigger: React.ReactNode | string; tooltip: TooltipProps; } export interface BaseActionProps extends Omit { icon?: LucideIcon; className?: string; hidden?: boolean; tooltip?: TooltipProps; } export interface ButtonActionProps extends BaseActionProps { type: 'button'; onClick: (e: React.MouseEvent) => void; } export interface SwitchActionProps extends Omit { type: 'switch'; checked?: boolean; onCheckedChange: (checked: boolean) => void; 'aria-label'?: string; } export type ActionProps = ButtonActionProps | SwitchActionProps; export interface HeaderProps { title?: string; description?: string; backButton?: { text?: string; icon?: LucideIcon; onClick: (e: React.MouseEvent) => void; }; actions?: ActionProps[]; isLoading?: boolean; className?: string; } const WithTooltip: React.FC = ({ trigger, tooltip }) => ( <>

{trigger}

{tooltip.content} ); const ButtonAction: React.FC = ({ icon: Icon, className, label, onClick, disabled, variant, size, }) => ( ); const SwitchAction: React.FC = ({ className, 'aria-label': ariaLabel, checked, onCheckedChange, disabled, }) => (

); export const Header = React.forwardRef< HTMLDivElement, HeaderProps & React.HTMLAttributes >(({ title, description, backButton, actions, isLoading, className, ...props }, ref) => { const BackIcon = backButton?.icon || ArrowLeft; const renderAction = (action: ActionProps, index: number) => { const key = `action-${index}`; if (isLoading) { return ; } if (action.hidden) { return null; } const actionElement = action.type === 'switch' ? ( ) : ( ); if (action.tooltip) { return ( ); } return actionElement; }; return ( ); }); Header.displayName = 'Header'; 6a:T120d,import * as React from 'react'; import { cn } from '@/lib/utils'; /** * Props for the `MiddleEllipsisText` component. */ export interface MiddleEllipsisTextProps { /** * Full text value to render and truncate from the middle when needed. */ text: string; /** * Optional class names applied to the text container. */ className?: string; } /** * Truncates text by preserving both the start and end segments and inserting * an ellipsis in the middle when the measured width exceeds the available width. * * @param text Full source text. * @param availableWidth Maximum width available for rendering in pixels. * @param font Canvas font shorthand used for text measurement. * @returns The display string and whether truncation was applied. */ function calculateTruncatedText( text: string, availableWidth: number, font: string, ): { truncated: string; isTruncated: boolean } { if (!text || availableWidth <= 0) { return { truncated: text, isTruncated: false }; } // Create a canvas element for text measurement const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); if (!context) { return { truncated: text, isTruncated: false }; } context.font = font; const ellipsis = '...'; const fullWidth = context.measureText(text).width; // If text fits, return as-is if (fullWidth <= availableWidth) { return { truncated: text, isTruncated: false }; } const ellipsisWidth = context.measureText(ellipsis).width; const targetWidth = availableWidth - ellipsisWidth; if (targetWidth <= 0) { return { truncated: ellipsis, isTruncated: true }; } // Binary search for optimal split point let start = 0; let end = text.length; let bestStart = 0; let bestEnd = text.length; while (start <= end) { const mid = Math.floor((start + end) / 2); const leftPart = text.substring(0, mid); const rightPart = text.substring(text.length - mid); const combinedWidth = context.measureText(leftPart).width + context.measureText(rightPart).width; if (combinedWidth <= targetWidth) { bestStart = mid; bestEnd = text.length - mid; start = mid + 1; } else { end = mid - 1; } } const truncated = text.substring(0, bestStart) + ellipsis + text.substring(bestEnd); return { truncated, isTruncated: true }; } /** * Renders text that truncates in the middle (`abc...xyz`) based on the * container width while preserving both the prefix and suffix. * * A tooltip with the original text is provided when truncation occurs. */ export const MiddleEllipsisText = React.memo( React.forwardRef(({ text, className }, ref) => { const [displayText, setDisplayText] = React.useState(text); const [isTruncated, setIsTruncated] = React.useState(false); const containerRef = React.useRef(null); const rafIdRef = React.useRef(null); React.useImperativeHandle(ref, () => containerRef.current!); const updateTruncation = React.useCallback(() => { const container = containerRef.current; if (!container) return; const computedStyle = window.getComputedStyle(container); const font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`; const availableWidth = container.offsetWidth; const { truncated, isTruncated: truncated_flag } = calculateTruncatedText( text, availableWidth, font, ); setDisplayText(truncated); setIsTruncated(truncated_flag); }, [text]); // Update truncation on mount/text change and observe resize React.useEffect(() => { updateTruncation(); const container = containerRef.current; let resizeObserver: ResizeObserver | null = null; if (container) { resizeObserver = new ResizeObserver(() => { if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); } rafIdRef.current = requestAnimationFrame(() => { updateTruncation(); }); }); resizeObserver.observe(container); } return () => { if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); rafIdRef.current = null; } resizeObserver?.disconnect(); }; }, [updateTruncation]); return ( {displayText} ); }), ); 6b: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}

); }; 6c: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); }; 6d: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 }; 6e: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 }; 6f: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 }; 70:T80a,/** * Checkbox component using Radix primitives. * @module checkbox * @internal */ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { CheckIcon, MinusIcon } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Checkbox({ className, ...props }: React.ComponentProps) { return ( {props.checked === 'indeterminate' ? ( ) : ( )} ); } export { Checkbox }; 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:T221c,/** * Dropdown menu using Radix primitives. * @module dropdown-menu * @internal */ 'use client'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import type { VariantProps } from 'class-variance-authority'; import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; import * as React from 'react'; import { Button, buttonVariants } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; function DropdownMenu({ ...props }: React.ComponentProps) { return ; } function DropdownMenuPortal({ ...props }: React.ComponentProps) { const portalContainer = usePortalContainer(); return ( ); } function DropdownMenuTrigger({ className, variant, size, ...props }: React.ComponentProps & VariantProps) { return ( ); } function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps & { sideOffset?: number; }) { const portalContainer = usePortalContainer(); return ( ); } function DropdownMenuGroup({ className, ...props }: React.ComponentProps<'div'>) { return

; } function DropdownMenuItem({ className, inset, variant = 'default', ...props }: React.ComponentProps & { inset?: boolean; variant?: 'default' | 'destructive'; }) { return ( ); } function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { return ; } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<'div'> & { inset?: boolean; }) { return (

); } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ); } function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) { return ( ); } function DropdownMenuSub({ ...props }: React.ComponentProps) { return ; } function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( {children} ); } function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ); } export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, }; 73:T6df,/** * Modal dialog wrapper component. * @module modal * @internal */ import * as React from 'react'; import { FormActions, type FormActionsProps } from '@/components/auth0/shared/form-actions'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from '@/components/ui/dialog'; interface ModalProps { open: boolean; onOpenChange: (open: boolean) => void; title?: string; description?: string; content?: React.ReactNode; modalActions?: FormActionsProps; className?: string; showCloseButton?: boolean; } export const Modal: React.FC = ({ open, onOpenChange, title, description, content, modalActions, className, showCloseButton, }) => { const hasHeader = title || description; const actions: FormActionsProps = { hasUnsavedChanges: true, showPrevious: true, showUnsavedChanges: false, previousAction: { label: 'Cancel', variant: 'outline', onClick: () => onOpenChange(false), }, nextAction: { label: 'Confirm', variant: 'primary', onClick: () => onOpenChange(false), }, ...modalActions, }; return ( ); }; Modal.displayName = 'Modal'; 74: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 (

); } 75:T63c,/** * Toggle switch using Radix primitives. * @module switch * @internal */ 'use client'; import * as SwitchPrimitive from '@radix-ui/react-switch'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Switch({ className, ...props }: React.ComponentProps) { return ( ); } export { Switch }; 76:Tda2,/** * Table component with sorting support. * @module table * @internal */ import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'; import React from 'react'; import { cn } from '@/lib/utils'; interface TableProps extends React.HTMLAttributes { className?: string; } const Table = React.forwardRef(({ className, ...props }, ref) => (

)); Table.displayName = 'Table'; const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableHeader.displayName = 'TableHeader'; const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableBody.displayName = 'TableBody'; interface TableRowProps extends React.HTMLAttributes { disableHover?: boolean; } const TableRow = React.forwardRef( ({ className, disableHover, ...props }, ref) => ( ), ); TableRow.displayName = 'TableRow'; interface TableHeadProps extends React.ThHTMLAttributes { isSortable?: boolean; sortDirection?: 'asc' | 'desc' | false; } const TableHead = React.forwardRef( ({ className, children, isSortable, sortDirection, ...props }, ref) => { const showSortIcon = isSortable !== undefined && sortDirection !== undefined; return ( ); }, ); TableHead.displayName = 'TableHead'; interface TableCellProps extends React.TdHTMLAttributes { className?: string; } const TableCell = React.forwardRef( ({ className, ...props }, ref) => (

{children} {showSortIcon && ( {sortDirection === false && ( )} {sortDirection === 'asc' && } {sortDirection === 'desc' && } )}	), ); TableCell.displayName = 'TableCell'; export interface TableColumn { header: string; accessor: keyof T; sortable?: boolean; } export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }; 77: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 }; 78: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 }; 79:T1c0b,/** * Internal SSO provider table service hook. * Handles data fetching and CRUD operations for SSO providers. * @module use-sso-provider-table-service * @internal / import { BusinessError, OrganizationDetailsMappers, SsoProviderMappers, ssoProviderQueryKeys, type UpdateIdentityProviderRequestContent, type ComponentAction, type IdpKnownResponse, type OrganizationPrivate, } from '@auth0/universal-components-core'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useCallback } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoProviderTableServiceReturn } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types'; export { ssoProviderQueryKeys }; /* * Internal service hook for SSO provider table data and CRUD operations. * @param deleteAction - Delete action handler. * @param removeFromOrg - Remove from org handler. * @param enableAction - Enable/disable handler. * @param customMessages - Custom translation messages. * @returns Provider data, mutations, and actions. * @internal / export function useSsoProviderTableService( deleteAction?: ComponentAction, removeFromOrg?: ComponentAction, enableAction?: ComponentAction, customMessages: Record = {}, ): UseSsoProviderTableServiceReturn { const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const { t } = useTranslator('idp_management.notifications', customMessages); const providersQuery = useQuery({ queryKey: ssoProviderQueryKeys.list(), queryFn: async () => { const response = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.list(); return (response?.identity_providers ?? []) as IdpKnownResponse[]; }, enabled: !!coreClient, }); const organizationQuery = useQuery({ queryKey: ssoProviderQueryKeys.organization, queryFn: async () => { const response = await coreClient!.getMyOrganizationApiClient().organizationDetails.get(); return OrganizationDetailsMappers.fromAPI(response); }, enabled: !!coreClient, }); const enableProviderMutation = useMutation({ mutationFn: async ({ selectedIdp, enabled, }: { selectedIdp: IdpKnownResponse; enabled: boolean; }): Promise => { if (!selectedIdp?.id) { throw new Error('Invalid provider'); } if (enableAction?.onBefore) { const shouldProceed = enableAction.onBefore(selectedIdp); if (!shouldProceed) { throw new BusinessError({ message: t('enable_on_before') }); } } const apiRequestData: UpdateIdentityProviderRequestContent = SsoProviderMappers.updateToAPI({ strategy: selectedIdp.strategy, is_enabled: enabled, }); const updatedProvider = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.update(selectedIdp.id, apiRequestData); return updatedProvider as IdpKnownResponse; }, onSuccess: async (updatedProvider, { selectedIdp }) => { if (enableAction?.onAfter) { await enableAction.onAfter(selectedIdp); } queryClient.setQueryData(ssoProviderQueryKeys.list(), (old) => { if (!old) return old; return old.map((provider) => provider.id === selectedIdp.id ? { ...provider, ...updatedProvider } : provider, ); }); }, }); const deleteProviderMutation = useMutation({ mutationFn: async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp?.id) { throw new Error('Invalid provider'); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.delete(selectedIdp.id); }, onSuccess: async (_, selectedIdp) => { if (deleteAction?.onAfter) { await deleteAction.onAfter(selectedIdp); } queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list() }); }, }); const removeProviderMutation = useMutation({ mutationFn: async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp?.id) { throw new Error('Invalid provider'); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.detach(selectedIdp.id); }, onSuccess: async (_, selectedIdp) => { if (removeFromOrg?.onAfter) { await removeFromOrg.onAfter(selectedIdp); } queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list() }); }, }); const onEnableProvider = useCallback( async (selectedIdp: IdpKnownResponse, enabled: boolean): Promise => { if (!selectedIdp \|\| !coreClient \|\| !selectedIdp.id) { throw new Error('Invalid provider'); } await enableProviderMutation.mutateAsync({ selectedIdp, enabled }); }, [coreClient, enableProviderMutation], ); const onDeleteConfirm = useCallback( async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp \|\| !coreClient \|\| !selectedIdp.id) { throw new Error('Invalid provider'); } await deleteProviderMutation.mutateAsync(selectedIdp); }, [coreClient, deleteProviderMutation], ); const onRemoveConfirm = useCallback( async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp \|\| !coreClient \|\| !selectedIdp.id) { throw new Error('Invalid provider'); } await removeProviderMutation.mutateAsync(selectedIdp); }, [coreClient, removeProviderMutation], ); const fetchProviders = useCallback(async (): Promise => { await queryClient.getQueryData(ssoProviderQueryKeys.list()); }, [queryClient]); const fetchOrganizationDetails = useCallback(async (): Promise => { if (!coreClient) { return null; } const data = await queryClient.ensureQueryData({ queryKey: ssoProviderQueryKeys.organization, queryFn: async () => { const response = await coreClient.getMyOrganizationApiClient().organizationDetails.get(); return OrganizationDetailsMappers.fromAPI(response); }, }); return data; }, [coreClient, queryClient]); return { providers: providersQuery.data ?? [], organization: organizationQuery.data ?? null, isLoading: providersQuery.isLoading \|\| organizationQuery.isLoading, providersError: providersQuery.error, organizationError: organizationQuery.error, isDeleting: deleteProviderMutation.isPending, isRemoving: removeProviderMutation.isPending, isUpdating: enableProviderMutation.isPending, isUpdatingId: enableProviderMutation.isPending ? (enableProviderMutation.variables?.selectedIdp?.id ?? null) : null, fetchProviders, fetchOrganizationDetails, onDeleteConfirm, onRemoveConfirm, onEnableProvider, }; } 7a:T732,/* * Organization configuration hook. * @module use-config / import { AVAILABLE_STRATEGY_LIST, hasApiErrorBody, type IdpStrategy, } from '@auth0/universal-components-core'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import type { UseConfigResult } from '@/types/my-organization/config/config-types'; const configQueryKeys = { all: ['config'] as const, details: () => [...configQueryKeys.all, 'details'] as const, }; /* * Hook for fetching organization configuration. * @returns Config data and allowed strategies. / export function useConfig(): UseConfigResult { const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const configQuery = useQuery({ queryKey: configQueryKeys.details(), queryFn: () => coreClient!.getMyOrganizationApiClient().organization.configuration.get(), enabled: !!coreClient, retry: (failureCount, error) => { if (hasApiErrorBody(error) && error.body?.status === 404) { return false; } return failureCount < 3; }, }); const config = configQuery.data; const allowedStrategies = config?.allowed_strategies; const filteredStrategies: IdpStrategy[] = allowedStrategies ? AVAILABLE_STRATEGY_LIST.filter((s) => allowedStrategies.includes(s)) : AVAILABLE_STRATEGY_LIST; const shouldAllowDeletion = config?.connection_deletion_behavior === 'allow' \|\| config?.connection_deletion_behavior === 'allow_if_empty'; const isConfigValid = !!allowedStrategies?.length; return { config: config ?? null, isLoadingConfig: configQuery.isLoading, fetchConfig: async () => await queryClient.getQueryData(configQueryKeys.details()), filteredStrategies, shouldAllowDeletion, isConfigValid, }; } 7b:Tb57,/* * Identity provider configuration hook. * @module use-idp-config / import { hasApiErrorBody, type GetIdpConfigurationResponseContent, type IdentityProvidersConfigStrategyBase, type IdpStrategy, } from '@auth0/universal-components-core'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import type { UseConfigIdpResult } from '@/types/my-organization/config/config-idp-types'; export const idpConfigQueryKeys = { all: ['idp-config'] as const, config: () => [...idpConfigQueryKeys.all, 'config'] as const, }; /* * Mapping from IdpStrategy values to the SDK's strategy config keys. / const STRATEGY_TO_CONFIG_KEY: Record< IdpStrategy, keyof NonNullable > = { adfs: 'adfs', 'google-apps': 'googleapps', oidc: 'oidc', okta: 'okta', pingfederate: 'pingfederate', samlp: 'samlp', waad: 'waad', }; /* * Hook for fetching IDP configuration and provisioning settings. * @returns IDP config and provisioning utilities. / export function useIdpConfig(): UseConfigIdpResult { const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const idpConfigQuery = useQuery({ queryKey: idpConfigQueryKeys.config(), queryFn: async () => { try { const response = await coreClient! .getMyOrganizationApiClient() .organization.configuration.identityProviders.get(); return response; } catch (error) { if (hasApiErrorBody(error) && error.body?.status === 404) { return null; } throw error; } }, enabled: !!coreClient, retry: (failureCount, error) => { if (hasApiErrorBody(error) && error.body?.status === 404) return false; return failureCount < 3; }, }); const idpConfig = idpConfigQuery.data ?? null; const strategies = idpConfig?.strategies; const getStrategyFor = ( strategy: IdpStrategy \| undefined, ): IdentityProvidersConfigStrategyBase \| undefined => { if (!strategy \|\| !strategies) return undefined; const key = STRATEGY_TO_CONFIG_KEY[strategy]; return strategies[key]; }; const isProvisioningEnabled = (strategy: IdpStrategy \| undefined): boolean => getStrategyFor(strategy)?.enabled_features.includes('provisioning') ?? false; const isProvisioningMethodEnabled = (strategy: IdpStrategy \| undefined): boolean => getStrategyFor(strategy)?.provisioning_methods.includes('scim') ?? false; return { idpConfig, isIdpConfigValid: !!strategies && Object.keys(strategies).length > 0, isLoadingIdpConfig: idpConfigQuery.isLoading, fetchIdpConfig: async () => await queryClient.getQueryData(idpConfigQueryKeys.config()), isProvisioningEnabled, isProvisioningMethodEnabled, }; } 7c:T1ac9,/* * SSO provider table hook. * Single public hook combining data operations and UI logic. * @module use-sso-provider-table / import type { IdpKnownResponse } from '@auth0/universal-components-core'; import { ssoProviderQueryKeys } from '@auth0/universal-components-core'; import { useCallback, useEffect, useRef, useState } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useSsoProviderTableService } from '@/hooks/my-organization/shared/services/use-sso-provider-table-service'; import { useConfig } from '@/hooks/my-organization/use-config'; import { useIdpConfig } from '@/hooks/my-organization/use-idp-config'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoProviderTableOptions, UseSsoProviderTableReturn, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types'; export { ssoProviderQueryKeys }; /* * Hook for SSO provider table data, CRUD operations, and UI logic. * Consumes the internal service hook and manages modal/UI state. * @param options - Hook options including actions, readOnly mode, and custom messages. * @returns Combined data, loading states, UI state, and handlers. / export function useSsoProviderTable({ readOnly = false, customMessages = {}, createAction, editAction, deleteAction, deleteFromOrganizationAction, enableProviderAction, }: UseSsoProviderTableOptions): UseSsoProviderTableReturn { const { t } = useTranslator( 'idp_management.notifications', customMessages as Record, ); const handleError = useErrorHandler(); const { providers, organization, isLoading, providersError, organizationError, isDeleting, isRemoving, isUpdating, isUpdatingId, fetchProviders, fetchOrganizationDetails, onDeleteConfirm, onRemoveConfirm, onEnableProvider, } = useSsoProviderTableService( deleteAction, deleteFromOrganizationAction, enableProviderAction, customMessages as Record, ); const [showDeleteModal, setShowDeleteModal] = useState(false); const [showRemoveModal, setShowRemoveModal] = useState(false); const [selectedIdp, setSelectedIdp] = useState(null); const hasShownProvidersError = useRef(false); const hasShownOrganizationError = useRef(false); const { isLoadingConfig, shouldAllowDeletion, isConfigValid } = useConfig(); const { isLoadingIdpConfig, isIdpConfigValid } = useIdpConfig(); const shouldHideCreate = !isConfigValid \|\| !isIdpConfigValid; const isViewLoading = isLoading \|\| isLoadingConfig \|\| isLoadingIdpConfig; useEffect(() => { if (providersError && !hasShownProvidersError.current) { handleError(providersError, { fallbackMessage: t('general_error') }); hasShownProvidersError.current = true; } if (!providersError) { hasShownProvidersError.current = false; } }, [providersError, t, handleError]); useEffect(() => { if (organizationError && !hasShownOrganizationError.current) { handleError(organizationError, { fallbackMessage: t('general_error') }); hasShownOrganizationError.current = true; } if (!organizationError) { hasShownOrganizationError.current = false; } }, [organizationError, t, handleError]); const handleCreate = useCallback(() => { if (createAction?.onAfter) { createAction.onAfter(); } }, [createAction]); const handleEdit = useCallback( (idp: IdpKnownResponse) => { if (editAction?.onAfter) { editAction.onAfter(idp); } }, [editAction], ); const handleDelete = useCallback( (idp: IdpKnownResponse) => { setSelectedIdp(idp); if (deleteAction?.onBefore) { const shouldProceed = deleteAction.onBefore(idp); if (!shouldProceed) return; } setShowDeleteModal(true); }, [deleteAction], ); const handleDeleteFromOrganization = useCallback( (idp: IdpKnownResponse) => { setSelectedIdp(idp); if (deleteFromOrganizationAction?.onBefore) { const shouldProceed = deleteFromOrganizationAction.onBefore(idp); if (!shouldProceed) return; } setShowRemoveModal(true); }, [deleteFromOrganizationAction], ); const handleFetchOrganizationDetails = useCallback(async () => { try { return await fetchOrganizationDetails(); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); return null; } }, [fetchOrganizationDetails, handleError, t]); const handleToggleEnabled = useCallback( async (idp: IdpKnownResponse, enabled: boolean) => { if (readOnly \|\| !onEnableProvider) return; try { await onEnableProvider(idp, enabled); showToast({ type: 'success', message: t('update_success', { providerName: idp.display_name }), }); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); } }, [readOnly, onEnableProvider, t, handleError], ); const handleDeleteConfirm = useCallback( async (provider: IdpKnownResponse) => { try { await onDeleteConfirm(provider); showToast({ type: 'success', message: t('delete_success', { providerName: provider.display_name }), }); setShowDeleteModal(false); setSelectedIdp(null); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); } }, [onDeleteConfirm, t, handleError], ); const handleRemoveConfirm = useCallback( async (provider: IdpKnownResponse) => { try { await onRemoveConfirm(provider); showToast({ type: 'success', message: t('remove_success', { providerName: provider.display_name, organizationName: organization?.display_name, }), }); setShowRemoveModal(false); setSelectedIdp(null); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); } }, [onRemoveConfirm, organization?.display_name, t, handleError], ); return { providers, organization, isLoading, isViewLoading, isDeleting, isRemoving, isUpdating, isUpdatingId, shouldAllowDeletion, shouldHideCreate, showDeleteModal, showRemoveModal, selectedIdp, fetchProviders, fetchOrganizationDetails: handleFetchOrganizationDetails, handleCreate, handleEdit, handleDelete, handleDeleteFromOrganization, handleToggleEnabled, handleDeleteConfirm, handleRemoveConfirm, setShowDeleteModal, setShowRemoveModal, setSelectedIdp, }; } 7d: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; }; 7e: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], ); } 7f: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; }; 80: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, }; } 81: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; 82: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} ); } 83: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; 84: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} ); }; 85: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; }; 86:T905,/* * SSO provider delete types. * @module sso-provider-delete-types / import type { SharedComponentProps, SsoProvideDeleteMessages, SsoProviderDeleteModalContentMessages, IdpKnownResponse, SsoProviderDeleteSchema, SsoProvideRemoveMessages, } from '@auth0/universal-components-core'; /* CSS classes for SsoProviderDelete. / export interface SsoProviderDeleteClasses { 'ProviderDelete-root'?: string; } /* CSS classes for SsoProviderRemove. / export interface SsoProviderRemoveClasses { 'ProviderRemove-root'?: string; } /* Props for SsoProviderDeleteModalContent. / export interface SsoProviderDeleteModalContentProps extends SharedComponentProps { onChange: (value: string) => void; className?: string; } /* Props for SsoProviderDelete component. / export interface SsoProviderDeleteProps extends SharedComponentProps< SsoProvideDeleteMessages, SsoProviderDeleteClasses, SsoProviderDeleteSchema > { provider: IdpKnownResponse; onDelete: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } /* Props for SsoProviderDeleteModal. / export interface SsoProviderDeleteModalProps extends SharedComponentProps< SsoProvideDeleteMessages, SsoProviderDeleteClasses, SsoProviderDeleteSchema > { className?: string; isOpen: boolean; onClose: () => void; provider: IdpKnownResponse; onDelete: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } /* Props for SsoProviderRemoveFromOrganization. / export interface SsoProviderRemoveFromOrganizationProps extends SharedComponentProps< SsoProvideRemoveMessages, SsoProviderRemoveClasses, SsoProviderDeleteSchema > { provider: IdpKnownResponse; organizationName: string \| undefined; onRemove: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } export interface SsoProviderRemoveFromOrganizationModalProps extends SharedComponentProps< SsoProvideRemoveMessages, SsoProviderRemoveClasses, SsoProviderDeleteSchema > { className?: string; isOpen: boolean; onClose: () => void; provider: IdpKnownResponse; organizationName?: string; onRemove: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } 87:T1200,/* * SSO provider table types. * @module sso-provider-table-types / import type { SharedComponentProps, ComponentAction, SsoProviderDeleteSchema, SsoProviderTableMessages, IdpKnownResponse, OrganizationPrivate, } from '@auth0/universal-components-core'; export type { IdpKnownResponse }; /* SSO provider table schema. / interface SsoProviderTableSchema { delete?: SsoProviderDeleteSchema; remove?: SsoProviderDeleteSchema; } /* CSS classes for SsoProviderTable. / interface SsoProviderTableClasses { 'SsoProviderTable-header'?: string; 'SsoProviderTable-table'?: string; 'SsoProviderTable-deleteProviderModal'?: string; 'SsoProviderTable-deleteProviderFromOrganizationModal'?: string; } /* Props for SsoProviderTable component. / export interface SsoProviderTableProps extends SharedComponentProps< SsoProviderTableMessages, SsoProviderTableClasses, SsoProviderTableSchema > { hideHeader?: boolean; createAction: ComponentAction; editAction: ComponentAction; deleteAction?: ComponentAction; deleteFromOrganizationAction?: ComponentAction; enableProviderAction?: ComponentAction; } /* Internal service hook result for SSO provider table data and CRUD operations. / export interface UseSsoProviderTableServiceReturn extends SharedComponentProps { providers: IdpKnownResponse[]; organization: OrganizationPrivate \| null; isLoading: boolean; providersError: unknown; organizationError: unknown; isDeleting: boolean; isRemoving: boolean; isUpdating: boolean; isUpdatingId: string \| null; fetchProviders: () => Promise; fetchOrganizationDetails: () => Promise; onDeleteConfirm: (selectedIdp: IdpKnownResponse) => Promise; onRemoveConfirm: (selectedIdp: IdpKnownResponse) => Promise; onEnableProvider: (selectedIdp: IdpKnownResponse, enabled: boolean) => Promise; } /* Options for the combined useSsoProviderTable hook. / export interface UseSsoProviderTableOptions { readOnly?: boolean; customMessages?: SsoProviderTableMessages; createAction: ComponentAction; editAction: ComponentAction; deleteAction?: ComponentAction; deleteFromOrganizationAction?: ComponentAction; enableProviderAction?: ComponentAction; } /* useSsoProviderTable hook result. / export interface UseSsoProviderTableReturn { providers: IdpKnownResponse[]; organization: OrganizationPrivate \| null; isLoading: boolean; isViewLoading: boolean; isDeleting: boolean; isRemoving: boolean; isUpdating: boolean; isUpdatingId: string \| null; shouldAllowDeletion: boolean; shouldHideCreate: boolean; showDeleteModal: boolean; showRemoveModal: boolean; selectedIdp: IdpKnownResponse \| null; fetchProviders: () => Promise; fetchOrganizationDetails: () => Promise; handleCreate: () => void; handleEdit: (idp: IdpKnownResponse) => void; handleDelete: (idp: IdpKnownResponse) => void; handleDeleteFromOrganization: (idp: IdpKnownResponse) => void; handleToggleEnabled: (idp: IdpKnownResponse, enabled: boolean) => Promise; handleDeleteConfirm: (provider: IdpKnownResponse) => Promise; handleRemoveConfirm: (provider: IdpKnownResponse) => Promise; setShowDeleteModal: React.Dispatch>; setShowRemoveModal: React.Dispatch>; setSelectedIdp: React.Dispatch>; } /* Props for SsoProviderTable actions column. / export interface SsoProviderTableActionsColumnProps extends SharedComponentProps< SsoProviderTableMessages, SsoProviderTableClasses, SsoProviderTableSchema > { provider: IdpKnownResponse; shouldAllowDeletion: boolean; isUpdating?: boolean; isUpdatingId?: string \| null; edit?: { disabled?: boolean; }; onToggleEnabled: (provider: IdpKnownResponse, enabled: boolean) => void; onEdit: (provider: IdpKnownResponse) => void; onDelete: (provider: IdpKnownResponse) => void; onRemoveFromOrganization: (provider: IdpKnownResponse) => void; } export interface SsoProviderTableViewProps extends UseSsoProviderTableReturn { styling: SsoProviderTableProps['styling']; customMessages: SsoProviderTableProps['customMessages']; readOnly: boolean; hideHeader: boolean; createAction: SsoProviderTableProps['createAction']; editAction: SsoProviderTableProps['editAction']; } 88: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-organization/sso-provider-table.tsx","content":"$61","type":"registry:block","target":"components/auth0/my-organization/sso-provider-table.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx","content":"$62","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal.tsx","content":"$63","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx","content":"$64","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action.tsx","content":"$65","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action.tsx"},{"path":"src/components/auth0/shared/data-table.tsx","content":"$66","type":"registry:component","target":"components/auth0/shared/data-table.tsx"},{"path":"src/components/auth0/shared/form-actions.tsx","content":"$67","type":"registry:component","target":"components/auth0/shared/form-actions.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$68","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/header.tsx","content":"$69","type":"registry:component","target":"components/auth0/shared/header.tsx"},{"path":"src/components/auth0/shared/middle-ellipsis-text.tsx","content":"$6a","type":"registry:component","target":"components/auth0/shared/middle-ellipsis-text.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":"$6b","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$6c","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/ui/badge.tsx","content":"$6d","type":"registry:component","target":"components/ui/badge.tsx"},{"path":"src/components/ui/button.tsx","content":"$6e","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$6f","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/checkbox.tsx","content":"$70","type":"registry:component","target":"components/ui/checkbox.tsx"},{"path":"src/components/ui/dialog.tsx","content":"$71","type":"registry:component","target":"components/ui/dialog.tsx"},{"path":"src/components/ui/dropdown-menu.tsx","content":"$72","type":"registry:component","target":"components/ui/dropdown-menu.tsx"},{"path":"src/components/ui/inline-code.tsx","content":"/\n Inline code display component.\n * @module inline-code\n * @internal\n /\n\nimport as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InlineCodeProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function InlineCode({ children, className }: InlineCodeProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/inline-code.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/modal.tsx","content":"$73","type":"registry:component","target":"components/ui/modal.tsx"},{"path":"src/components/ui/spinner.tsx","content":"$74","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/switch.tsx","content":"$75","type":"registry:component","target":"components/ui/switch.tsx"},{"path":"src/components/ui/table.tsx","content":"$76","type":"registry:component","target":"components/ui/table.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$77","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$78","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-organization/shared/services/use-sso-provider-table-service.ts","content":"$79","type":"registry:component","target":"hooks/my-organization/shared/services/use-sso-provider-table-service.ts"},{"path":"src/hooks/my-organization/use-config.ts","content":"$7a","type":"registry:component","target":"hooks/my-organization/use-config.ts"},{"path":"src/hooks/my-organization/use-idp-config.ts","content":"$7b","type":"registry:component","target":"hooks/my-organization/use-idp-config.ts"},{"path":"src/hooks/my-organization/use-sso-provider-table.ts","content":"$7c","type":"registry:component","target":"hooks/my-organization/use-sso-provider-table.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$7d","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":"$7e","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":"$7f","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$80","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":"$81","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$82","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$83","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$84","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$85","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-organization/config/config-idp-types.ts","content":"/\n IDP configuration types.\n * @module config-idp-types\n /\n\nimport type {\n GetIdpConfigurationResponseContent,\n IdpStrategy,\n} from '@auth0/universal-components-core';\n\n/* useIdpConfig hook result. /\nexport interface UseConfigIdpResult {\n idpConfig: GetIdpConfigurationResponseContent \| null;\n isLoadingIdpConfig: boolean;\n fetchIdpConfig: () => Promise;\n isProvisioningEnabled: (strategy: IdpStrategy \| undefined) => boolean;\n isProvisioningMethodEnabled: (strategy: IdpStrategy \| undefined) => boolean;\n isIdpConfigValid: boolean;\n}\n","type":"registry:component","target":"types/my-organization/config/config-idp-types.ts"},{"path":"src/types/my-organization/config/config-types.ts","content":"/\n Organization configuration types.\n * @module config-types\n /\n\nimport type {\n GetConfigurationResponseContent,\n IdpStrategy,\n} from '@auth0/universal-components-core';\n\n/* useConfig hook result. /\nexport interface UseConfigResult {\n config: GetConfigurationResponseContent \| null;\n isLoadingConfig: boolean;\n fetchConfig: () => Promise;\n filteredStrategies: IdpStrategy[];\n shouldAllowDeletion: boolean;\n isConfigValid: boolean;\n}\n","type":"registry:component","target":"types/my-organization/config/config-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-delete-types.ts","content":"$86","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-delete-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-table-types.ts","content":"$87","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-table-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":"$88","type":"registry:component","target":"types/toast-types.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/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"}]

{children} {showSortIcon && (

{sortDirection === false && ( )} {sortDirection === 'asc' && } {sortDirection === 'desc' && }

)}

), ); TableCell.displayName = 'TableCell'; export interface TableColumn { header: string; accessor: keyof T; sortable?: boolean; } export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }; 77: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 }; 78: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 }; 79:T1c0b,/** * Internal SSO provider table service hook. * Handles data fetching and CRUD operations for SSO providers. * @module use-sso-provider-table-service * @internal */ import { BusinessError, OrganizationDetailsMappers, SsoProviderMappers, ssoProviderQueryKeys, type UpdateIdentityProviderRequestContent, type ComponentAction, type IdpKnownResponse, type OrganizationPrivate, } from '@auth0/universal-components-core'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useCallback } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoProviderTableServiceReturn } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types'; export { ssoProviderQueryKeys }; /** * Internal service hook for SSO provider table data and CRUD operations. * @param deleteAction - Delete action handler. * @param removeFromOrg - Remove from org handler. * @param enableAction - Enable/disable handler. * @param customMessages - Custom translation messages. * @returns Provider data, mutations, and actions. * @internal */ export function useSsoProviderTableService( deleteAction?: ComponentAction, removeFromOrg?: ComponentAction, enableAction?: ComponentAction, customMessages: Record = {}, ): UseSsoProviderTableServiceReturn { const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const { t } = useTranslator('idp_management.notifications', customMessages); const providersQuery = useQuery({ queryKey: ssoProviderQueryKeys.list(), queryFn: async () => { const response = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.list(); return (response?.identity_providers ?? []) as IdpKnownResponse[]; }, enabled: !!coreClient, }); const organizationQuery = useQuery({ queryKey: ssoProviderQueryKeys.organization, queryFn: async () => { const response = await coreClient!.getMyOrganizationApiClient().organizationDetails.get(); return OrganizationDetailsMappers.fromAPI(response); }, enabled: !!coreClient, }); const enableProviderMutation = useMutation({ mutationFn: async ({ selectedIdp, enabled, }: { selectedIdp: IdpKnownResponse; enabled: boolean; }): Promise => { if (!selectedIdp?.id) { throw new Error('Invalid provider'); } if (enableAction?.onBefore) { const shouldProceed = enableAction.onBefore(selectedIdp); if (!shouldProceed) { throw new BusinessError({ message: t('enable_on_before') }); } } const apiRequestData: UpdateIdentityProviderRequestContent = SsoProviderMappers.updateToAPI({ strategy: selectedIdp.strategy, is_enabled: enabled, }); const updatedProvider = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.update(selectedIdp.id, apiRequestData); return updatedProvider as IdpKnownResponse; }, onSuccess: async (updatedProvider, { selectedIdp }) => { if (enableAction?.onAfter) { await enableAction.onAfter(selectedIdp); } queryClient.setQueryData(ssoProviderQueryKeys.list(), (old) => { if (!old) return old; return old.map((provider) => provider.id === selectedIdp.id ? { ...provider, ...updatedProvider } : provider, ); }); }, }); const deleteProviderMutation = useMutation({ mutationFn: async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp?.id) { throw new Error('Invalid provider'); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.delete(selectedIdp.id); }, onSuccess: async (_, selectedIdp) => { if (deleteAction?.onAfter) { await deleteAction.onAfter(selectedIdp); } queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list() }); }, }); const removeProviderMutation = useMutation({ mutationFn: async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp?.id) { throw new Error('Invalid provider'); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.detach(selectedIdp.id); }, onSuccess: async (_, selectedIdp) => { if (removeFromOrg?.onAfter) { await removeFromOrg.onAfter(selectedIdp); } queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list() }); }, }); const onEnableProvider = useCallback( async (selectedIdp: IdpKnownResponse, enabled: boolean): Promise => { if (!selectedIdp || !coreClient || !selectedIdp.id) { throw new Error('Invalid provider'); } await enableProviderMutation.mutateAsync({ selectedIdp, enabled }); }, [coreClient, enableProviderMutation], ); const onDeleteConfirm = useCallback( async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp || !coreClient || !selectedIdp.id) { throw new Error('Invalid provider'); } await deleteProviderMutation.mutateAsync(selectedIdp); }, [coreClient, deleteProviderMutation], ); const onRemoveConfirm = useCallback( async (selectedIdp: IdpKnownResponse): Promise => { if (!selectedIdp || !coreClient || !selectedIdp.id) { throw new Error('Invalid provider'); } await removeProviderMutation.mutateAsync(selectedIdp); }, [coreClient, removeProviderMutation], ); const fetchProviders = useCallback(async (): Promise => { await queryClient.getQueryData(ssoProviderQueryKeys.list()); }, [queryClient]); const fetchOrganizationDetails = useCallback(async (): Promise => { if (!coreClient) { return null; } const data = await queryClient.ensureQueryData({ queryKey: ssoProviderQueryKeys.organization, queryFn: async () => { const response = await coreClient.getMyOrganizationApiClient().organizationDetails.get(); return OrganizationDetailsMappers.fromAPI(response); }, }); return data; }, [coreClient, queryClient]); return { providers: providersQuery.data ?? [], organization: organizationQuery.data ?? null, isLoading: providersQuery.isLoading || organizationQuery.isLoading, providersError: providersQuery.error, organizationError: organizationQuery.error, isDeleting: deleteProviderMutation.isPending, isRemoving: removeProviderMutation.isPending, isUpdating: enableProviderMutation.isPending, isUpdatingId: enableProviderMutation.isPending ? (enableProviderMutation.variables?.selectedIdp?.id ?? null) : null, fetchProviders, fetchOrganizationDetails, onDeleteConfirm, onRemoveConfirm, onEnableProvider, }; } 7a:T732,/** * Organization configuration hook. * @module use-config */ import { AVAILABLE_STRATEGY_LIST, hasApiErrorBody, type IdpStrategy, } from '@auth0/universal-components-core'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import type { UseConfigResult } from '@/types/my-organization/config/config-types'; const configQueryKeys = { all: ['config'] as const, details: () => [...configQueryKeys.all, 'details'] as const, }; /** * Hook for fetching organization configuration. * @returns Config data and allowed strategies. */ export function useConfig(): UseConfigResult { const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const configQuery = useQuery({ queryKey: configQueryKeys.details(), queryFn: () => coreClient!.getMyOrganizationApiClient().organization.configuration.get(), enabled: !!coreClient, retry: (failureCount, error) => { if (hasApiErrorBody(error) && error.body?.status === 404) { return false; } return failureCount < 3; }, }); const config = configQuery.data; const allowedStrategies = config?.allowed_strategies; const filteredStrategies: IdpStrategy[] = allowedStrategies ? AVAILABLE_STRATEGY_LIST.filter((s) => allowedStrategies.includes(s)) : AVAILABLE_STRATEGY_LIST; const shouldAllowDeletion = config?.connection_deletion_behavior === 'allow' || config?.connection_deletion_behavior === 'allow_if_empty'; const isConfigValid = !!allowedStrategies?.length; return { config: config ?? null, isLoadingConfig: configQuery.isLoading, fetchConfig: async () => await queryClient.getQueryData(configQueryKeys.details()), filteredStrategies, shouldAllowDeletion, isConfigValid, }; } 7b:Tb57,/** * Identity provider configuration hook. * @module use-idp-config */ import { hasApiErrorBody, type GetIdpConfigurationResponseContent, type IdentityProvidersConfigStrategyBase, type IdpStrategy, } from '@auth0/universal-components-core'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import type { UseConfigIdpResult } from '@/types/my-organization/config/config-idp-types'; export const idpConfigQueryKeys = { all: ['idp-config'] as const, config: () => [...idpConfigQueryKeys.all, 'config'] as const, }; /** * Mapping from IdpStrategy values to the SDK's strategy config keys. */ const STRATEGY_TO_CONFIG_KEY: Record< IdpStrategy, keyof NonNullable > = { adfs: 'adfs', 'google-apps': 'googleapps', oidc: 'oidc', okta: 'okta', pingfederate: 'pingfederate', samlp: 'samlp', waad: 'waad', }; /** * Hook for fetching IDP configuration and provisioning settings. * @returns IDP config and provisioning utilities. */ export function useIdpConfig(): UseConfigIdpResult { const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const idpConfigQuery = useQuery({ queryKey: idpConfigQueryKeys.config(), queryFn: async () => { try { const response = await coreClient! .getMyOrganizationApiClient() .organization.configuration.identityProviders.get(); return response; } catch (error) { if (hasApiErrorBody(error) && error.body?.status === 404) { return null; } throw error; } }, enabled: !!coreClient, retry: (failureCount, error) => { if (hasApiErrorBody(error) && error.body?.status === 404) return false; return failureCount < 3; }, }); const idpConfig = idpConfigQuery.data ?? null; const strategies = idpConfig?.strategies; const getStrategyFor = ( strategy: IdpStrategy | undefined, ): IdentityProvidersConfigStrategyBase | undefined => { if (!strategy || !strategies) return undefined; const key = STRATEGY_TO_CONFIG_KEY[strategy]; return strategies[key]; }; const isProvisioningEnabled = (strategy: IdpStrategy | undefined): boolean => getStrategyFor(strategy)?.enabled_features.includes('provisioning') ?? false; const isProvisioningMethodEnabled = (strategy: IdpStrategy | undefined): boolean => getStrategyFor(strategy)?.provisioning_methods.includes('scim') ?? false; return { idpConfig, isIdpConfigValid: !!strategies && Object.keys(strategies).length > 0, isLoadingIdpConfig: idpConfigQuery.isLoading, fetchIdpConfig: async () => await queryClient.getQueryData(idpConfigQueryKeys.config()), isProvisioningEnabled, isProvisioningMethodEnabled, }; } 7c:T1ac9,/** * SSO provider table hook. * Single public hook combining data operations and UI logic. * @module use-sso-provider-table */ import type { IdpKnownResponse } from '@auth0/universal-components-core'; import { ssoProviderQueryKeys } from '@auth0/universal-components-core'; import { useCallback, useEffect, useRef, useState } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useSsoProviderTableService } from '@/hooks/my-organization/shared/services/use-sso-provider-table-service'; import { useConfig } from '@/hooks/my-organization/use-config'; import { useIdpConfig } from '@/hooks/my-organization/use-idp-config'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoProviderTableOptions, UseSsoProviderTableReturn, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types'; export { ssoProviderQueryKeys }; /** * Hook for SSO provider table data, CRUD operations, and UI logic. * Consumes the internal service hook and manages modal/UI state. * @param options - Hook options including actions, readOnly mode, and custom messages. * @returns Combined data, loading states, UI state, and handlers. */ export function useSsoProviderTable({ readOnly = false, customMessages = {}, createAction, editAction, deleteAction, deleteFromOrganizationAction, enableProviderAction, }: UseSsoProviderTableOptions): UseSsoProviderTableReturn { const { t } = useTranslator( 'idp_management.notifications', customMessages as Record, ); const handleError = useErrorHandler(); const { providers, organization, isLoading, providersError, organizationError, isDeleting, isRemoving, isUpdating, isUpdatingId, fetchProviders, fetchOrganizationDetails, onDeleteConfirm, onRemoveConfirm, onEnableProvider, } = useSsoProviderTableService( deleteAction, deleteFromOrganizationAction, enableProviderAction, customMessages as Record, ); const [showDeleteModal, setShowDeleteModal] = useState(false); const [showRemoveModal, setShowRemoveModal] = useState(false); const [selectedIdp, setSelectedIdp] = useState(null); const hasShownProvidersError = useRef(false); const hasShownOrganizationError = useRef(false); const { isLoadingConfig, shouldAllowDeletion, isConfigValid } = useConfig(); const { isLoadingIdpConfig, isIdpConfigValid } = useIdpConfig(); const shouldHideCreate = !isConfigValid || !isIdpConfigValid; const isViewLoading = isLoading || isLoadingConfig || isLoadingIdpConfig; useEffect(() => { if (providersError && !hasShownProvidersError.current) { handleError(providersError, { fallbackMessage: t('general_error') }); hasShownProvidersError.current = true; } if (!providersError) { hasShownProvidersError.current = false; } }, [providersError, t, handleError]); useEffect(() => { if (organizationError && !hasShownOrganizationError.current) { handleError(organizationError, { fallbackMessage: t('general_error') }); hasShownOrganizationError.current = true; } if (!organizationError) { hasShownOrganizationError.current = false; } }, [organizationError, t, handleError]); const handleCreate = useCallback(() => { if (createAction?.onAfter) { createAction.onAfter(); } }, [createAction]); const handleEdit = useCallback( (idp: IdpKnownResponse) => { if (editAction?.onAfter) { editAction.onAfter(idp); } }, [editAction], ); const handleDelete = useCallback( (idp: IdpKnownResponse) => { setSelectedIdp(idp); if (deleteAction?.onBefore) { const shouldProceed = deleteAction.onBefore(idp); if (!shouldProceed) return; } setShowDeleteModal(true); }, [deleteAction], ); const handleDeleteFromOrganization = useCallback( (idp: IdpKnownResponse) => { setSelectedIdp(idp); if (deleteFromOrganizationAction?.onBefore) { const shouldProceed = deleteFromOrganizationAction.onBefore(idp); if (!shouldProceed) return; } setShowRemoveModal(true); }, [deleteFromOrganizationAction], ); const handleFetchOrganizationDetails = useCallback(async () => { try { return await fetchOrganizationDetails(); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); return null; } }, [fetchOrganizationDetails, handleError, t]); const handleToggleEnabled = useCallback( async (idp: IdpKnownResponse, enabled: boolean) => { if (readOnly || !onEnableProvider) return; try { await onEnableProvider(idp, enabled); showToast({ type: 'success', message: t('update_success', { providerName: idp.display_name }), }); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); } }, [readOnly, onEnableProvider, t, handleError], ); const handleDeleteConfirm = useCallback( async (provider: IdpKnownResponse) => { try { await onDeleteConfirm(provider); showToast({ type: 'success', message: t('delete_success', { providerName: provider.display_name }), }); setShowDeleteModal(false); setSelectedIdp(null); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); } }, [onDeleteConfirm, t, handleError], ); const handleRemoveConfirm = useCallback( async (provider: IdpKnownResponse) => { try { await onRemoveConfirm(provider); showToast({ type: 'success', message: t('remove_success', { providerName: provider.display_name, organizationName: organization?.display_name, }), }); setShowRemoveModal(false); setSelectedIdp(null); } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); } }, [onRemoveConfirm, organization?.display_name, t, handleError], ); return { providers, organization, isLoading, isViewLoading, isDeleting, isRemoving, isUpdating, isUpdatingId, shouldAllowDeletion, shouldHideCreate, showDeleteModal, showRemoveModal, selectedIdp, fetchProviders, fetchOrganizationDetails: handleFetchOrganizationDetails, handleCreate, handleEdit, handleDelete, handleDeleteFromOrganization, handleToggleEnabled, handleDeleteConfirm, handleRemoveConfirm, setShowDeleteModal, setShowRemoveModal, setSelectedIdp, }; } 7d: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; }; 7e: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], ); } 7f: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; }; 80: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, }; } 81: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; 82: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} ); } 83: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; 84: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}

); }; 85: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; }; 86:T905,/** * SSO provider delete types. * @module sso-provider-delete-types */ import type { SharedComponentProps, SsoProvideDeleteMessages, SsoProviderDeleteModalContentMessages, IdpKnownResponse, SsoProviderDeleteSchema, SsoProvideRemoveMessages, } from '@auth0/universal-components-core'; /** CSS classes for SsoProviderDelete. */ export interface SsoProviderDeleteClasses { 'ProviderDelete-root'?: string; } /** CSS classes for SsoProviderRemove. */ export interface SsoProviderRemoveClasses { 'ProviderRemove-root'?: string; } /** Props for SsoProviderDeleteModalContent. */ export interface SsoProviderDeleteModalContentProps extends SharedComponentProps { onChange: (value: string) => void; className?: string; } /** Props for SsoProviderDelete component. */ export interface SsoProviderDeleteProps extends SharedComponentProps< SsoProvideDeleteMessages, SsoProviderDeleteClasses, SsoProviderDeleteSchema > { provider: IdpKnownResponse; onDelete: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } /** Props for SsoProviderDeleteModal. */ export interface SsoProviderDeleteModalProps extends SharedComponentProps< SsoProvideDeleteMessages, SsoProviderDeleteClasses, SsoProviderDeleteSchema > { className?: string; isOpen: boolean; onClose: () => void; provider: IdpKnownResponse; onDelete: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } /** Props for SsoProviderRemoveFromOrganization. */ export interface SsoProviderRemoveFromOrganizationProps extends SharedComponentProps< SsoProvideRemoveMessages, SsoProviderRemoveClasses, SsoProviderDeleteSchema > { provider: IdpKnownResponse; organizationName: string | undefined; onRemove: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } export interface SsoProviderRemoveFromOrganizationModalProps extends SharedComponentProps< SsoProvideRemoveMessages, SsoProviderRemoveClasses, SsoProviderDeleteSchema > { className?: string; isOpen: boolean; onClose: () => void; provider: IdpKnownResponse; organizationName?: string; onRemove: (provider: IdpKnownResponse) => Promise; isLoading?: boolean; } 87:T1200,/** * SSO provider table types. * @module sso-provider-table-types */ import type { SharedComponentProps, ComponentAction, SsoProviderDeleteSchema, SsoProviderTableMessages, IdpKnownResponse, OrganizationPrivate, } from '@auth0/universal-components-core'; export type { IdpKnownResponse }; /** SSO provider table schema. */ interface SsoProviderTableSchema { delete?: SsoProviderDeleteSchema; remove?: SsoProviderDeleteSchema; } /** CSS classes for SsoProviderTable. */ interface SsoProviderTableClasses { 'SsoProviderTable-header'?: string; 'SsoProviderTable-table'?: string; 'SsoProviderTable-deleteProviderModal'?: string; 'SsoProviderTable-deleteProviderFromOrganizationModal'?: string; } /** Props for SsoProviderTable component. */ export interface SsoProviderTableProps extends SharedComponentProps< SsoProviderTableMessages, SsoProviderTableClasses, SsoProviderTableSchema > { hideHeader?: boolean; createAction: ComponentAction; editAction: ComponentAction; deleteAction?: ComponentAction; deleteFromOrganizationAction?: ComponentAction; enableProviderAction?: ComponentAction; } /** Internal service hook result for SSO provider table data and CRUD operations. */ export interface UseSsoProviderTableServiceReturn extends SharedComponentProps { providers: IdpKnownResponse[]; organization: OrganizationPrivate | null; isLoading: boolean; providersError: unknown; organizationError: unknown; isDeleting: boolean; isRemoving: boolean; isUpdating: boolean; isUpdatingId: string | null; fetchProviders: () => Promise; fetchOrganizationDetails: () => Promise; onDeleteConfirm: (selectedIdp: IdpKnownResponse) => Promise; onRemoveConfirm: (selectedIdp: IdpKnownResponse) => Promise; onEnableProvider: (selectedIdp: IdpKnownResponse, enabled: boolean) => Promise; } /** Options for the combined useSsoProviderTable hook. */ export interface UseSsoProviderTableOptions { readOnly?: boolean; customMessages?: SsoProviderTableMessages; createAction: ComponentAction; editAction: ComponentAction; deleteAction?: ComponentAction; deleteFromOrganizationAction?: ComponentAction; enableProviderAction?: ComponentAction; } /** useSsoProviderTable hook result. */ export interface UseSsoProviderTableReturn { providers: IdpKnownResponse[]; organization: OrganizationPrivate | null; isLoading: boolean; isViewLoading: boolean; isDeleting: boolean; isRemoving: boolean; isUpdating: boolean; isUpdatingId: string | null; shouldAllowDeletion: boolean; shouldHideCreate: boolean; showDeleteModal: boolean; showRemoveModal: boolean; selectedIdp: IdpKnownResponse | null; fetchProviders: () => Promise; fetchOrganizationDetails: () => Promise; handleCreate: () => void; handleEdit: (idp: IdpKnownResponse) => void; handleDelete: (idp: IdpKnownResponse) => void; handleDeleteFromOrganization: (idp: IdpKnownResponse) => void; handleToggleEnabled: (idp: IdpKnownResponse, enabled: boolean) => Promise; handleDeleteConfirm: (provider: IdpKnownResponse) => Promise; handleRemoveConfirm: (provider: IdpKnownResponse) => Promise; setShowDeleteModal: React.Dispatch>; setShowRemoveModal: React.Dispatch>; setSelectedIdp: React.Dispatch>; } /** Props for SsoProviderTable actions column. */ export interface SsoProviderTableActionsColumnProps extends SharedComponentProps< SsoProviderTableMessages, SsoProviderTableClasses, SsoProviderTableSchema > { provider: IdpKnownResponse; shouldAllowDeletion: boolean; isUpdating?: boolean; isUpdatingId?: string | null; edit?: { disabled?: boolean; }; onToggleEnabled: (provider: IdpKnownResponse, enabled: boolean) => void; onEdit: (provider: IdpKnownResponse) => void; onDelete: (provider: IdpKnownResponse) => void; onRemoveFromOrganization: (provider: IdpKnownResponse) => void; } export interface SsoProviderTableViewProps extends UseSsoProviderTableReturn { styling: SsoProviderTableProps['styling']; customMessages: SsoProviderTableProps['customMessages']; readOnly: boolean; hideHeader: boolean; createAction: SsoProviderTableProps['createAction']; editAction: SsoProviderTableProps['editAction']; } 88: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-organization/sso-provider-table.tsx","content":"$61","type":"registry:block","target":"components/auth0/my-organization/sso-provider-table.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx","content":"$62","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal.tsx","content":"$63","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx","content":"$64","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action.tsx","content":"$65","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action.tsx"},{"path":"src/components/auth0/shared/data-table.tsx","content":"$66","type":"registry:component","target":"components/auth0/shared/data-table.tsx"},{"path":"src/components/auth0/shared/form-actions.tsx","content":"$67","type":"registry:component","target":"components/auth0/shared/form-actions.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$68","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/header.tsx","content":"$69","type":"registry:component","target":"components/auth0/shared/header.tsx"},{"path":"src/components/auth0/shared/middle-ellipsis-text.tsx","content":"$6a","type":"registry:component","target":"components/auth0/shared/middle-ellipsis-text.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":"$6b","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$6c","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/ui/badge.tsx","content":"$6d","type":"registry:component","target":"components/ui/badge.tsx"},{"path":"src/components/ui/button.tsx","content":"$6e","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$6f","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/checkbox.tsx","content":"$70","type":"registry:component","target":"components/ui/checkbox.tsx"},{"path":"src/components/ui/dialog.tsx","content":"$71","type":"registry:component","target":"components/ui/dialog.tsx"},{"path":"src/components/ui/dropdown-menu.tsx","content":"$72","type":"registry:component","target":"components/ui/dropdown-menu.tsx"},{"path":"src/components/ui/inline-code.tsx","content":"/**\n * Inline code display component.\n * @module inline-code\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InlineCodeProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function InlineCode({ children, className }: InlineCodeProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/inline-code.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/modal.tsx","content":"$73","type":"registry:component","target":"components/ui/modal.tsx"},{"path":"src/components/ui/spinner.tsx","content":"$74","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/switch.tsx","content":"$75","type":"registry:component","target":"components/ui/switch.tsx"},{"path":"src/components/ui/table.tsx","content":"$76","type":"registry:component","target":"components/ui/table.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$77","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$78","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-organization/shared/services/use-sso-provider-table-service.ts","content":"$79","type":"registry:component","target":"hooks/my-organization/shared/services/use-sso-provider-table-service.ts"},{"path":"src/hooks/my-organization/use-config.ts","content":"$7a","type":"registry:component","target":"hooks/my-organization/use-config.ts"},{"path":"src/hooks/my-organization/use-idp-config.ts","content":"$7b","type":"registry:component","target":"hooks/my-organization/use-idp-config.ts"},{"path":"src/hooks/my-organization/use-sso-provider-table.ts","content":"$7c","type":"registry:component","target":"hooks/my-organization/use-sso-provider-table.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$7d","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":"$7e","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":"$7f","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$80","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":"$81","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$82","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$83","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$84","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$85","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-organization/config/config-idp-types.ts","content":"/**\n * IDP configuration types.\n * @module config-idp-types\n */\n\nimport type {\n GetIdpConfigurationResponseContent,\n IdpStrategy,\n} from '@auth0/universal-components-core';\n\n/** useIdpConfig hook result. */\nexport interface UseConfigIdpResult {\n idpConfig: GetIdpConfigurationResponseContent | null;\n isLoadingIdpConfig: boolean;\n fetchIdpConfig: () => Promise;\n isProvisioningEnabled: (strategy: IdpStrategy | undefined) => boolean;\n isProvisioningMethodEnabled: (strategy: IdpStrategy | undefined) => boolean;\n isIdpConfigValid: boolean;\n}\n","type":"registry:component","target":"types/my-organization/config/config-idp-types.ts"},{"path":"src/types/my-organization/config/config-types.ts","content":"/**\n * Organization configuration types.\n * @module config-types\n */\n\nimport type {\n GetConfigurationResponseContent,\n IdpStrategy,\n} from '@auth0/universal-components-core';\n\n/** useConfig hook result. */\nexport interface UseConfigResult {\n config: GetConfigurationResponseContent | null;\n isLoadingConfig: boolean;\n fetchConfig: () => Promise;\n filteredStrategies: IdpStrategy[];\n shouldAllowDeletion: boolean;\n isConfigValid: boolean;\n}\n","type":"registry:component","target":"types/my-organization/config/config-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-delete-types.ts","content":"$86","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-delete-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-table-types.ts","content":"$87","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-table-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":"$88","type":"registry:component","target":"types/toast-types.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/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"}]