65: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"] 66: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-checkbox@^1.1.1"}] 53:["$","li","@radix-ui/react-dialog@^1.1.14",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dialog","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-dialog@^1.1.14"}]]}]}] 54:["$","li","@radix-ui/react-label@^2.1.7",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-label","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-label@^2.1.7"}]]}]}] 55:["$","li","@radix-ui/react-radio-group@^1.2.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-radio-group","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-radio-group@^1.2.0"}]]}]}] 56:["$","li","@radix-ui/react-select@^2.2.5",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-select","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-select@^2.2.5"}]]}]}] 57:["$","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"}]]}]}] 58:["$","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"}]]}]}] 59:["$","li","@radix-ui/react-tabs@^1.1.12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-tabs","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-tabs@^1.1.12"}]]}]}] 5a:["$","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"}]]}]}] 5b:["$","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"}]]}]}] 5c:["$","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"}]]}]}] 5d:["$","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"}]]}]}] 5e:["$","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"}]]}]}] 5f:["$","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"}]]}]}] 60:["$","li","react-hook-form@^7.57.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-hook-form@^7.57.0"}]]}]}] 61:["$","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"}]]}]}] 62:["$","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"}]]}]}] 63:["$","$L65",null,{"namespace":"@auth0","registryDependencies":[]}] 67:T2c9c,/** @module sso-provider-edit */ 'use client'; import { getComponentStyles } from '@auth0/universal-components-core'; import { useState, useMemo } from 'react'; import { SsoDomainTab } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab'; import { SsoProviderTab } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab'; import { SsoProvisioningTab } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab'; 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { useSsoProviderEdit } from '@/hooks/my-organization/use-sso-provider-edit'; import { useSsoProviderEditLogic } from '@/hooks/my-organization/use-sso-provider-edit-logic'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderEditHandlerProps, SsoProviderEditLogicProps, SsoProviderEditProps, SsoProviderEditViewProps, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; /** * SSO provider edit container component. * @param props - Component props * @param props.providerId - ID of the SSO provider * @param props.backButton - Configuration for the back button * @param props.sso - SSO configuration * @param props.provisioning - Provisioning configuration * @param props.domains - Array of domains * @param props.hideHeader - Whether to hide the header * @param props.customMessages - Custom translation messages to override defaults * @param props.styling - Custom styling configuration with variables and classes * @param props.schema - Zod validation schema * @param props.readOnly - Whether the component is in read-only mode * @internal * @returns JSX element */ function SsoProviderEdit(props: SsoProviderEditProps) { const { providerId, backButton, sso, provisioning, domains, hideHeader = false, customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, schema, readOnly = false, } = props; const ssoProviderEdit = useSsoProviderEdit(providerId, { sso, provisioning, domains, customMessages, }); const ssoProviderEditLogic = useSsoProviderEditLogic(ssoProviderEdit); const ssoProviderCreateLogicProps: Omit = { ...ssoProviderEdit, shouldAllowDeletion: ssoProviderEditLogic.shouldAllowDeletion, idpConfig: ssoProviderEditLogic.idpConfig, showProvisioningTab: ssoProviderEditLogic.showProvisioningTab, styling, customMessages, backButton, schema, readOnly, providerId, domains, hideHeader, }; const ssoProviderCreateHandlerProps: SsoProviderEditHandlerProps = { handleToggleProvider: ssoProviderEditLogic.handleToggleProvider, updateProvider: ssoProviderEdit.updateProvider, listScimTokens: ssoProviderEdit.listScimTokens, syncSsoAttributes: ssoProviderEdit.syncSsoAttributes, onDeleteConfirm: ssoProviderEdit.onDeleteConfirm, onRemoveConfirm: ssoProviderEdit.onRemoveConfirm, createScimTokenAction: ssoProviderEdit.createScimToken, deleteScimTokenAction: ssoProviderEdit.deleteScimToken, createProvisioningAction: ssoProviderEdit.createProvisioning, deleteProvisioningAction: ssoProviderEdit.deleteProvisioning, syncProvisioningAttributes: ssoProviderEdit.syncProvisioningAttributes, }; const isLoading = ssoProviderEdit.isLoading || ssoProviderEditLogic.isLoadingConfig || ssoProviderEditLogic.isLoadingIdpConfig; return ( ); } /** * Internal SSO provider edition view component * @param props - Component props * @param props.logic - Component logic props * @param props.handlers - Component handler props * @internal * @returns JSX element */ function SsoProviderEditView({ logic, handlers }: SsoProviderEditViewProps) { const { styling, schema, readOnly, providerId, domains, hideHeader, provider, organization, isLoading, isUpdating, isDeleting, isRemoving, idpConfig, customMessages, backButton, shouldAllowDeletion, showProvisioningTab, isProvisioningUpdating, isProvisioningDeleting, isScimTokensLoading, isScimTokenCreating, isScimTokenDeleting, isSsoAttributesSyncing, isProvisioningAttributesSyncing, hasSsoAttributeSyncWarning, hasProvisioningAttributeSyncWarning, } = logic; const { updateProvider, listScimTokens, syncSsoAttributes, onDeleteConfirm, onRemoveConfirm, handleToggleProvider, createProvisioningAction, deleteProvisioningAction, createScimTokenAction, deleteScimTokenAction, syncProvisioningAttributes, } = handlers; const { isDarkMode } = useTheme(); const [activeTab, setActiveTab] = useState('sso'); const { t } = useTranslator('idp_management.edit_sso_provider', customMessages); const currentStyles = useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); return (

{!hideHeader && (

)} {t('tabs.sso.name')} {showProvisioningTab && ( {t('tabs.provisioning.name')} )} {t('tabs.domains.name')} {showProvisioningTab && ( )}

); } /** * SSO provider edit interface with tabbed navigation. * * Provides a complete interface for editing SSO provider settings including: * - SSO tab: Provider configuration, attribute mappings, delete/remove actions * - Provisioning tab: SCIM configuration and token management * - Domains tab: Domain association and verification * * @param props - {@link SsoProviderEditProps} * @param props.providerId - Identity provider ID to edit * @param props.backButton - Back button configuration * @param props.sso - SSO tab lifecycle hooks (save, delete, remove actions) * @param props.provisioning - Provisioning tab lifecycle hooks * @param props.domains - Domains tab configuration * @param props.hideHeader - Hide the header section * @param props.customMessages - Custom i18n message overrides * @param props.styling - CSS variables and class overrides * @param props.schema - Validation schema overrides * @param props.readOnly - Render in read-only mode * @returns SSO provider edit component * * @see {@link SsoProviderEditProps} for full props documentation * * @example * ```tsx * console.log('Saved:', provider) }, * deleteAction: { onAfter: () => navigate('/providers') }, * }} * backButton={{ * onClick: () => navigate('/providers'), * }} * /> * ``` */ export { SsoProviderEdit, SsoProviderEditView }; 68:T1085,/** * Domain creation modal. * @module domain-create-modal * @internal */ import { createDomainCreateSchema, type InternalDomainCreateFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { Form, FormControl, FormField, FormItem, FormMessage, FormLabel, } from '@/components/ui/form'; import { Modal } from '@/components/ui/modal'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { DomainCreateModalProps } from '@/types/my-organization/domain-management/domain-create-types'; /** * * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.schema - Zod validation schema * @param props.onClose - Callback fired when the component should close * @param props.onCreate - Callback fired when create action is triggered * @returns JSX element */ export function DomainCreateModal({ translatorKey = 'domain_management.domain_create.modal', className, customMessages, isOpen, isLoading, schema, onClose, onCreate, }: DomainCreateModalProps) { const { t } = useTranslator(translatorKey, customMessages); const domainCreateSchema = React.useMemo( () => createDomainCreateSchema(schema, t('field.error')), [schema, t], ); const form = useForm({ resolver: zodResolver(domainCreateSchema), defaultValues: { domain_url: '', }, mode: FORM_VALIDATION_MODE, }); const handleCreate = React.useCallback( async (values: InternalDomainCreateFormValues) => { if (!values.domain_url) return; await onCreate(values.domain_url); form.reset(); }, [form, onCreate], ); const handleClose = React.useCallback(() => { form.reset(); onClose(); }, [form, onClose]); const onSubmit = React.useCallback( (e: React.FormEvent) => { e.preventDefault(); form.handleSubmit(handleCreate)(); }, [form, handleCreate], ); return ( !open && handleClose()} className={cn('p-10', className)} title={t('title')} content={

} modalActions={{ isLoading, nextAction: { type: 'button', label: t('actions.create_button_text'), variant: 'primary', disabled: isLoading, onClick: (e) => { e.preventDefault(); form.handleSubmit(handleCreate)(); }, }, previousAction: { label: t('actions.cancel_button_text'), onClick: handleClose, }, }} /> ); } 69:T956,/** * Domain deletion confirmation modal. * @module domain-delete-modal * @internal */ import type { Domain } from '@auth0/universal-components-core'; import React from 'react'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { DomainDeleteModalProps } from '@/types/my-organization/domain-management/domain-delete-types'; const getDescriptionKey = (domain: Domain | null) => { return domain?.status === 'pending' ? 'description.pending' : 'description.verified'; }; /** * * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.domain - Domain object or domain name * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.onClose - Callback fired when the component should close * @param props.onDelete - Callback fired when delete action is triggered * @returns JSX element */ export function DomainDeleteModal({ translatorKey = 'domain_management.domain_delete.modal', className, customMessages, domain, isOpen, isLoading, onClose, onDelete, }: DomainDeleteModalProps) { const { t } = useTranslator(translatorKey, customMessages); const handleDelete = React.useCallback(() => { if (domain) { onDelete(domain); } }, [onDelete, domain]); return ( !open && onClose()} className={cn('p-10', className)} title={t('title')} content={

{t(getDescriptionKey(domain), { domainName: domain?.domain })}

} modalActions={{ isLoading, nextAction: { type: 'button', label: t('actions.delete_button_text'), variant: 'destructive', disabled: isLoading, onClick: handleDelete, }, previousAction: { label: t('actions.cancel_button_text'), onClick: onClose, }, }} /> ); } 6a:T11ad,/** * Domain verification modal. * @module domain-verify-modal * @internal */ import { MessageSquare } from 'lucide-react'; import React from 'react'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Modal } from '@/components/ui/modal'; import { Spinner } from '@/components/ui/spinner'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { DomainVerifyModalProps } from '@/types/my-organization/domain-management/domain-verify-types'; /** * * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.domain - Domain object or domain name * @param props.error - Error message or error object to display * @param props.onClose - Callback fired when the component should close * @param props.onVerify - Callback fired when verify action is triggered * @param props.onDelete - Callback fired when delete action is triggered * @returns JSX element */ export function DomainVerifyModal({ translatorKey = 'domain_management.domain_verify.modal', className, customMessages, isOpen, isLoading, domain, error, onClose, onVerify, onDelete, }: DomainVerifyModalProps) { const { t } = useTranslator(translatorKey, customMessages); const handleVerify = React.useCallback(() => { if (domain) { onVerify(domain); } }, [onVerify, domain]); const handleDelete = React.useCallback(() => { if (domain) { onDelete(domain); } }, [onDelete, domain]); return ( !open && onClose()} className="p-10 break-all" title={t('title', { domainName: domain?.domain })} content={

{error && ( {error} )}

{t('txt_record_name.label')}

{t('txt_record_content.label')}

{t('verification_status.label')} {t('verification_status.pending')}

{t('verification_status.description')}

} modalActions={{ showNext: false, previousAction: { label: t('actions.done_button_text'), onClick: onClose, variant: 'primary', }, }} /> ); } 6b:T2671,/** * ADFS SSO provider configuration form. * @module adfs-sso-configure-form * @internal */ import { createProviderConfigureSchema, type AdfsConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { FileUpload } from '@/components/ui/file-upload'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export interface AdfsConfigureFormHandle { validate: () => Promise; getData: () => AdfsConfigureFormValues; isDirty: () => boolean; reset: (data?: AdfsConfigureFormValues) => void; } interface AdfsConfigureFormProps extends Omit {} export const AdfsProviderForm = React.forwardRef( function AdfsProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const [uploadedFiles, setUploadedFiles] = useState([]); const adfsData = initialData as AdfsConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('adfs')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { meta_data_source: adfsData?.meta_data_source || 'meta_data_url', meta_data_location_url: adfsData?.meta_data_location_url || '', adfs_server: adfsData?.adfs_server || '', fedMetadataXml: adfsData?.fedMetadataXml || '', show_as_button: adfsData?.show_as_button ?? false, assign_membership_on_login: adfsData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); const typeValue = form.watch('meta_data_source'); const showFederationMetadataFile = typeValue === 'meta_data_file'; const handleFileUpload = async (files: File[]) => { setUploadedFiles(files); const file = files[0]; if (file) { try { const content = await file.text(); form.setValue('fedMetadataXml', content); } catch (error) { console.error('Error reading file:', error); } } }; return (

( {t('fields.adfs.meta_data_source.label')}

{t('fields.adfs.meta_data_source.options.meta_data_url.label')}

{t('fields.adfs.meta_data_source.options.meta_data_file.label')}

)} /> {typeValue === 'meta_data_url' && ( <> ( {t('fields.adfs.meta_data_url.label')} {t('fields.adfs.meta_data_url.helper_text')} )} /> ( {t('fields.adfs.meta_data_location_url.label')} {t('fields.adfs.meta_data_location_url.helper_text')} )} /> )} {showFederationMetadataFile && ( ( {t('fields.adfs.federation_metadata_file.label')}

{t('fields.adfs.federation_metadata_file.helper_text')} )} /> )}

); }, ); 6c:Te28,/** * Common SSO provider configuration fields. * @module common-configure-fields * @internal */ import type { GetIdpConfigurationResponseContent } from '@auth0/universal-components-core'; import { useFormContext } from 'react-hook-form'; import { Checkbox } from '@/components/ui/checkbox'; import { FormField, FormItem, FormLabel, FormControl, FormDescription } from '@/components/ui/form'; import { useTranslator } from '@/hooks/shared/use-translator'; interface CommonConfigureFieldsProps { idpConfig: GetIdpConfigurationResponseContent | null; readOnly?: boolean; customMessages?: Partial>; } /** * CommonConfigureFields Component * Renders common fields (show_as_button, assign_membership_on_login) that are shared across all SSO provider strategies * @param props - Component props. * @param props.idpConfig - Identity provider configuration * @param props.readOnly - Whether the component is in read-only mode * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function CommonConfigureFields({ idpConfig, readOnly = false, customMessages = {}, }: CommonConfigureFieldsProps) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const form = useFormContext(); // Only show these fields if the config allows them const showAsButtonEnabled = idpConfig?.organization?.can_set_show_as_button; const assignMembershipEnabled = idpConfig?.organization?.can_set_assign_membership_on_login; // If neither field is enabled, don't render anything if (!showAsButtonEnabled && !assignMembershipEnabled) { return null; } return (

{showAsButtonEnabled && ( (

{t('fields.common.show_as_button.label')} {t('fields.common.show_as_button.helper_text')}

)} /> )} {assignMembershipEnabled && ( (

{t('fields.common.assign_membership_on_login.label')} {t('fields.common.assign_membership_on_login.helper_text')}

)} /> )}

); } 6d:T1eaf,/** * Google Apps SSO provider configuration form. * @module google-apps-sso-configure-form * @internal */ import { createProviderConfigureSchema, type GoogleAppsConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export interface GoogleAppsConfigureFormHandle { validate: () => Promise; getData: () => GoogleAppsConfigureFormValues; isDirty: () => boolean; reset: (data?: GoogleAppsConfigureFormValues) => void; } interface GoogleAppsConfigureFormProps extends Omit {} export const GoogleAppsProviderForm = React.forwardRef< GoogleAppsConfigureFormHandle, GoogleAppsConfigureFormProps >(function GoogleAppsProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig, mode = 'create', }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const { coreClient } = useCoreClient(); const { showCopyButtons } = useProviderFormMode(mode); const callbackUrl = React.useMemo(() => { const domain = coreClient?.getDomain() || 'YOUR_DOMAIN'; return `https://${domain}/login/callback`; }, [coreClient]); const googleAppsData = initialData as GoogleAppsConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('google-apps')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { domain: googleAppsData?.domain || '', client_id: googleAppsData?.client_id || '', client_secret: googleAppsData?.client_secret || '', callback_url: callbackUrl || '', show_as_button: googleAppsData?.show_as_button ?? false, assign_membership_on_login: googleAppsData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); return (

( {t('fields.google-apps.domain.label')} )} /> ( {t('fields.google-apps.client_id.label')} {t('fields.google-apps.client_id.helper_text')} )} /> ( {t('fields.google-apps.client_secret.label')} {t('fields.google-apps.client_secret.helper_text')} )} /> ( {t('fields.google-apps.callback_url.label')} {t('fields.google-apps.callback_url.helper_text')} )} />

); }); 6e:T257f,/** * OIDC SSO provider configuration form. * @module oidc-sso-configure-form * @internal */ import { createProviderConfigureSchema, type OidcConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export interface OidcConfigureFormHandle { validate: () => Promise; getData: () => OidcConfigureFormValues; isDirty: () => boolean; reset: (data?: OidcConfigureFormValues) => void; } interface OidcConfigureFormProps extends Omit {} export const OidcProviderForm = React.forwardRef( function OidcProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig, mode = 'create', }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const { showCopyButtons } = useProviderFormMode(mode); const oidcData = initialData as OidcConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('oidc')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { discovery_url: oidcData?.discovery_url || '', type: oidcData?.type || 'back_channel', client_id: oidcData?.client_id || '', client_secret: oidcData?.client_secret || '', show_as_button: oidcData?.show_as_button ?? false, assign_membership_on_login: oidcData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); const typeValue = form.watch('type'); const showClientSecret = typeValue === 'back_channel'; // Clear client_secret error and value when switching to front channel React.useEffect(() => { if (typeValue === 'front_channel') { form.clearErrors('client_secret'); form.setValue('client_secret', '', { shouldValidate: false }); } }, [typeValue, form]); return (

( {t('fields.oidc.discovery_url.label')} {t('fields.oidc.discovery_url.helper_text')} )} /> ( {t('fields.oidc.type.label')}

{t('fields.oidc.type.options.back_channel.label')}

{t('fields.oidc.type.options.front_channel.label')}

{t('fields.oidc.type.helper_text')} )} /> ( {t('fields.oidc.client_id.label')} {t('fields.oidc.client_id.helper_text')} )} /> {showClientSecret && ( ( {t('fields.oidc.client_secret.label')} {t('fields.oidc.client_secret.helper_text')} )} /> )}

); }, ); 6f:T2836,/** * Okta SSO provider configuration form. * @module okta-sso-configure-form * @internal */ import { createProviderConfigureSchema, type OktaConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { Link } from '@/components/ui/link'; import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; const OKTA_HELP_LINKS = { domain: 'https://developer.okta.com/docs/guides/find-your-domain/main/', client_id: 'https://developer.okta.com/docs/guides/find-your-app-credentials/main', client_secret: 'https://developer.okta.com/docs/guides/find-your-app-credentials/main', } as const; export interface OktaConfigureFormHandle { validate: () => Promise; getData: () => OktaConfigureFormValues; isDirty: () => boolean; reset: (data?: OktaConfigureFormValues) => void; } interface OktaConfigureFormProps extends Omit {} export const OktaProviderForm = React.forwardRef( function OktaProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig, mode = 'create', }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const { coreClient } = useCoreClient(); const { showCopyButtons } = useProviderFormMode(mode); const callbackUrl = React.useMemo(() => { const domain = coreClient?.getDomain() || 'YOUR_DOMAIN'; return `https://${domain}/login/callback`; }, [coreClient]); const oktaData = initialData as OktaConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('okta')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { domain: oktaData?.domain || '', client_id: oktaData?.client_id || '', client_secret: oktaData?.client_secret || '', icon_url: oktaData?.icon_url || '', callback_url: oktaData?.callback_url || callbackUrl, show_as_button: oktaData?.show_as_button ?? false, assign_membership_on_login: oktaData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); return (

( {t('fields.okta.domain.label')} <> {t.trans('fields.okta.domain.helper_text', { components: { link: (children: string) => ( {children} ), }, })} )} /> ( {t('fields.okta.client_id.label')} <> {t.trans('fields.okta.client_id.helper_text', { components: { link: (children: string) => ( {children} ), }, })} )} /> ( {t('fields.okta.client_secret.label')} <> {t.trans('fields.okta.client_secret.helper_text', { components: { link: (children: string) => ( {children} ), }, })} )} /> ( {t('fields.okta.callback_url.label')} {t('fields.okta.callback_url.helper_text')} )} />

); }, ); 70:T3446,/** * PingFederate SSO provider configuration form. * @module ping-federate-sso-configure-form * @internal */ import { createProviderConfigureSchema, type PingFederateConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { Checkbox } from '@/components/ui/checkbox'; import { FileUpload } from '@/components/ui/file-upload'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { Link } from '@/components/ui/link'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; const PING_FEDERATE_HELP_LINKS = { sign_request: 'domain/pem?cert=connection', } as const; const SIGNATURE_ALGORITHMS = [ { value: 'rsa-sha1', label: 'RSA-SHA1' }, { value: 'rsa-sha256', label: 'RSA-SHA256' }, ] as const; const DIGEST_ALGORITHMS = [ { value: 'sha1', label: 'SHA1' }, { value: 'sha256', label: 'SHA256' }, ] as const; const ALLOWED_CERT_EXTENSIONS = ['.pem', '.cer', '.crt'] as const; export interface PingFederateConfigureFormHandle { validate: () => Promise; getData: () => PingFederateConfigureFormValues; isDirty: () => boolean; reset: (data?: PingFederateConfigureFormValues) => void; } interface PingFederateConfigureFormProps extends Omit {} export const PingFederateProviderForm = React.forwardRef< PingFederateConfigureFormHandle, PingFederateConfigureFormProps >(function PingFederateProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const [uploadedFiles, setUploadedFiles] = useState([]); const pingFederateData = initialData as PingFederateConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('pingfederate')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { pingFederateBaseUrl: pingFederateData?.pingFederateBaseUrl || '', signingCert: pingFederateData?.signingCert || '', signSAMLRequest: pingFederateData?.signSAMLRequest || false, signatureAlgorithm: pingFederateData?.signatureAlgorithm || 'rsa-sha256', digestAlgorithm: pingFederateData?.digestAlgorithm || 'sha256', show_as_button: pingFederateData?.show_as_button ?? false, assign_membership_on_login: pingFederateData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); const signRequestEnabled = form.watch('signSAMLRequest'); const isAllowedCertificateFile = React.useCallback((file: File) => { const fileName = file.name.toLowerCase(); return ALLOWED_CERT_EXTENSIONS.some((extension) => fileName.endsWith(extension)); }, []); const handleFileUpload = async (files: File[]) => { setUploadedFiles(files); const file = files[0]; if (file) { try { const content = await file.text(); form.setValue('signingCert', content, { shouldDirty: true, shouldValidate: true }); form.clearErrors('signingCert'); } catch (error) { console.error('Error reading file:', error); } } }; const handleInvalidFiles = (files: File[]) => { if (files.some((file) => !isAllowedCertificateFile(file))) { form.setError('signingCert', { type: 'manual', message: t('fields.ping-federate.sign_cert.error'), }); } }; return (

( {t('fields.ping-federate.ping_federate_baseurl.label')} {t('fields.ping-federate.ping_federate_baseurl.helper_text')} )} /> ( {t('fields.ping-federate.sign_cert.label')}

{t('fields.ping-federate.sign_cert.helper_text')} )} /> {t('fields.ping-federate.advanced_settings.title')} (

{t('fields.ping-federate.advanced_settings.sign_request.label')} <> {t.trans( 'fields.ping-federate.advanced_settings.sign_request.helper_text', { components: { link: (children: string) => ( {children} ), }, }, )}

)} /> {signRequestEnabled && ( <> ( {t('fields.ping-federate.advanced_settings.sign_request_algorithm.label')} )} /> ( {t( 'fields.ping-federate.advanced_settings.sign_request_algorithm_digest.label', )} )} /> )}

); }); 71:Te10,/** * Provider-specific configuration field router. * @module provider-configure-fields * @internal */ import { STRATEGIES } from '@auth0/universal-components-core'; import * as React from 'react'; import { AdfsProviderForm, type AdfsConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form'; import { GoogleAppsProviderForm, type GoogleAppsConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form'; import { OidcProviderForm, type OidcConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form'; import { OktaProviderForm, type OktaConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form'; import { PingFederateProviderForm, type PingFederateConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form'; import { SamlpProviderForm, type SamlpConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form'; import { WaadProviderForm, type WaadConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export type ProviderConfigureFormHandle = | OktaConfigureFormHandle | GoogleAppsConfigureFormHandle | WaadConfigureFormHandle | PingFederateConfigureFormHandle | AdfsConfigureFormHandle | SamlpConfigureFormHandle | OidcConfigureFormHandle; export const ProviderConfigureFields = React.forwardRef< ProviderConfigureFormHandle, ProviderConfigureFieldsProps >(function ProviderConfigureFields({ strategy, className, ...props }, ref) { const renderProviderForm = () => { switch (strategy) { case STRATEGIES.OKTA: return ( } {...props} /> ); case STRATEGIES.GOOGLE_APPS: return ( } {...props} /> ); case STRATEGIES.WAAD: return ( } {...props} /> ); case STRATEGIES.PINGFEDERATE: return ( } {...props} /> ); case STRATEGIES.ADFS: return ( } {...props} /> ); case STRATEGIES.SAMLP: return ( } {...props} /> ); case STRATEGIES.OIDC: return ( } {...props} /> ); default: return null; } }; return

{renderProviderForm()}

; }); 72:T455d,/** * SAML-P SSO provider configuration form. * @module samlp-sso-configure-form * @internal */ import { createProviderConfigureSchema, type SamlpConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { Checkbox } from '@/components/ui/checkbox'; import { FileUpload } from '@/components/ui/file-upload'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { Label } from '@/components/ui/label'; import { Link } from '@/components/ui/link'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; const SAMLP_HELP_LINKS = { sign_request: 'domain/pem?cert=connection', } as const; const SIGNATURE_ALGORITHMS = [ { value: 'rsa-sha1', label: 'RSA-SHA1' }, { value: 'rsa-sha256', label: 'RSA-SHA256' }, ] as const; const DIGEST_ALGORITHMS = [ { value: 'sha1', label: 'SHA1' }, { value: 'sha256', label: 'SHA256' }, ] as const; const BINDING_METHODS = [ { value: 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect', label: 'HTTP-Redirect' }, { value: 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST', label: 'HTTP-POST' }, ] as const; export interface SamlpConfigureFormHandle { validate: () => Promise; getData: () => SamlpConfigureFormValues; isDirty: () => boolean; reset: (data?: SamlpConfigureFormValues) => void; } interface SamlpConfigureFormProps extends Omit {} export const SamlpProviderForm = React.forwardRef< SamlpConfigureFormHandle, SamlpConfigureFormProps >(function SamlpProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const [uploadedFiles, setUploadedFiles] = useState([]); const samlpData = initialData as SamlpConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('samlp')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { meta_data_source: samlpData?.meta_data_source || 'meta_data_url', metadataUrl: samlpData?.metadataUrl || '', single_sign_on_login_url: samlpData?.single_sign_on_login_url || '', cert: samlpData?.cert || '', signSAMLRequest: samlpData?.signSAMLRequest || false, signatureAlgorithm: samlpData?.signatureAlgorithm || 'rsa-sha256', digestAlgorithm: samlpData?.digestAlgorithm || 'sha256', bindingMethod: samlpData?.bindingMethod || 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST', show_as_button: samlpData?.show_as_button ?? false, assign_membership_on_login: samlpData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); const typeValue = form.watch('meta_data_source'); const showMetadataFileField = typeValue === 'meta_data_file'; const signRequestEnabled = form.watch('signSAMLRequest'); const handleFileUpload = async (files: File[]) => { setUploadedFiles(files); const file = files[0]; if (file) { try { const content = await file.text(); form.setValue('cert', content); } catch (error) { console.error('Error reading file:', error); } } }; return (

( {t('fields.samlp.meta_data_source.label')}

{t('fields.samlp.meta_data_source.options.meta_data_url.label')}

{t('fields.samlp.meta_data_source.options.meta_data_file.label')}

)} /> ( {t('fields.samlp.meta_data_url.label')} {t('fields.samlp.meta_data_url.helper_text')} )} /> {showMetadataFileField && ( <> ( {t('fields.samlp.single_sign_on_login_url.label')} {t('fields.samlp.single_sign_on_login_url.helper_text')} )} /> ( {t('fields.samlp.cert.label')}

{t('fields.samlp.cert.helper_text')} )} /> )} {t('fields.samlp.advanced_settings.title')} (

{t('fields.samlp.advanced_settings.sign_request.label')} <> {t.trans( typeValue === 'meta_data_url' ? 'fields.samlp.advanced_settings.sign_request.helper_text_metadata_url' : 'fields.samlp.advanced_settings.sign_request.helper_text_metadata_file', { components: { link: (children: string) => ( {children} ), }, }, )}

)} /> {signRequestEnabled && ( <> ( {t('fields.samlp.advanced_settings.sign_request_algorithm.label')} )} /> ( {t('fields.samlp.advanced_settings.sign_request_algorithm_digest.label')} )} /> )} ( {t('fields.samlp.advanced_settings.request_protocol_binding.label')} )} />

); }); 73:T1f80,/** * Azure AD (WAAD) SSO provider configuration form. * @module waad-sso-configure-form * @internal */ import { createProviderConfigureSchema, type WaadConfigureFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription, } from '@/components/ui/form'; import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export interface WaadConfigureFormHandle { validate: () => Promise; getData: () => WaadConfigureFormValues; isDirty: () => boolean; reset: (data?: WaadConfigureFormValues) => void; } interface WaadConfigureFormProps extends Omit {} export const WaadProviderForm = React.forwardRef( function WaadProviderForm( { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig, mode = 'create', }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const { coreClient } = useCoreClient(); const { showCopyButtons } = useProviderFormMode(mode); const callbackUrl = React.useMemo(() => { const domain = coreClient?.getDomain() || 'YOUR_DOMAIN'; return `https://${domain}/login/callback`; }, [coreClient]); const waadData = initialData as WaadConfigureFormValues | undefined; const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('waad')), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { tenant_domain: waadData?.tenant_domain || '', client_id: waadData?.client_id || '', client_secret: waadData?.client_secret || '', callback_url: waadData?.callback_url || callbackUrl, show_as_button: waadData?.show_as_button ?? false, assign_membership_on_login: waadData?.assign_membership_on_login ?? false, }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); return (

( {t('fields.waad.tenant_domain.label')} )} /> ( {t('fields.waad.client_id.label')} {t('fields.waad.client_id.helper_text')} )} /> ( {t('fields.waad.client_secret.label')} {t('fields.waad.client_secret.helper_text')} )} /> ( {t('fields.waad.callback_url.label')} {t('fields.waad.callback_url.helper_text')} )} />

); }, ); 74:T1187,/** * SSO provider details form step. * @module provider-details * @internal */ import { createProviderDetailsSchema, type ProviderDetailsFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { Section } from '@/components/auth0/shared/section'; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import type { ProviderDetailsFormHandle, ProviderDetailsProps, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export const ProviderDetails = React.forwardRef( function ProviderDetails( { initialData, mode, readOnly = false, customMessages = {}, className, onFormDirty }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_details', customMessages, ); const form = useForm({ resolver: zodResolver(createProviderDetailsSchema()), mode: FORM_VALIDATION_MODE, reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { name: initialData?.name || '', display_name: initialData?.display_name || '', }, }); const { isDirty } = form.formState; React.useEffect(() => { onFormDirty?.(isDirty); }, [isDirty, onFormDirty]); React.useImperativeHandle(ref, () => ({ validate: async () => { return await form.trigger(); }, getData: () => form.getValues(), isDirty: () => form.formState.isDirty, reset: (data) => { if (data) { form.reset(data); } else { form.reset(); } }, })); return ( ); }, ); 75: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')}

); } 76: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, }, }} /> ); } 77:Ta7a,/** * SSO provider delete section component. * @module provider-delete * @internal */ import * as React from 'react'; import { SsoProviderDeleteModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderDeleteProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types'; /** * * @param props - Component props. * @param props.provider - SSO provider object * @param props.onDelete - Callback fired when delete action is triggered * @param props.customMessages - Custom translation messages to override defaults * @param props.isLoading - Whether the component is in a loading state * @param props.readOnly - Whether the component is in read-only mode * @returns JSX element */ export function SsoProviderDelete({ provider, onDelete, customMessages = {}, isLoading, readOnly, }: SsoProviderDeleteProps) { const { t } = useTranslator('idp_management.delete_sso_provider', customMessages); const [isModalOpen, setIsModalOpen] = React.useState(false); const openModal = React.useCallback(() => { setIsModalOpen(true); }, []); const closeModal = React.useCallback(() => { setIsModalOpen(false); }, []); return ( <>

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

{t('description')}

); } 78:Tac1,/** * SSO domain tab table action column. * @module sso-domain-tab-action-column * @internal */ 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 { useTranslator } from '@/hooks/shared/use-translator'; import type { SsoDomainTabActionColumn } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types'; /** * SsoDomainTabActionsColumn component * Handles the actions column for SSO provider edit on domain tab table * with enable/disable toggle and verify button * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.customMessages - Custom translation messages to override defaults * @param props.readOnly - Whether the component is in read-only mode * @param props.idpDomains - Identity provider domains * @param props.domain - Domain object or domain name * @param props.handleVerify - Handler function for domain verification * @param props.isUpdating - Whether an update operation is in progress * @param props.isUpdatingId - ID of the item currently being updated * @param props.onToggle - Callback fired when toggle state changes * @returns JSX element */ export function SsoDomainTabActionsColumn({ translatorKey = 'idp_management.edit_sso_provider.tabs.domains', customMessages = {}, readOnly, idpDomains, domain, handleVerify, isUpdating, isUpdatingId, onToggle, }: SsoDomainTabActionColumn) { const { t } = useTranslator(translatorKey, customMessages); const providerHasDomain = idpDomains.includes(domain.id); if (isUpdating && isUpdatingId === domain.id) { return (

); } return (

{domain.status === 'verified' ? ( onToggle(domain, checked)} disabled={readOnly || isUpdating} /> {providerHasDomain ? t('table.actions.disable_domain_tooltip') : t('table.actions.enable_domain_tooltip')} ) : ( )}

); } 79:T18af,/** * SSO provider domains tab component. * @module sso-domain-tab * @internal */ import type { Domain } from '@auth0/universal-components-core'; import { getComponentStyles } from '@auth0/universal-components-core'; import { Plus } from 'lucide-react'; import React from 'react'; import { DomainCreateModal } from '@/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal'; import { DomainDeleteModal } from '@/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal'; import { DomainVerifyModal } from '@/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal'; import { SsoDomainTabActionsColumn } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column'; import { DataTable, type Column } from '@/components/auth0/shared/data-table'; import { Header } from '@/components/auth0/shared/header'; import { Badge } from '@/components/ui/badge'; import { useSsoDomainTab } from '@/hooks/my-organization/use-sso-domain-tab'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { getStatusBadgeVariant } from '@/lib/utils/my-organization/domain-management/domain-management-utils'; import type { SsoDomainsTabProps } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types'; /** * SsoDomainTab 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.schema - Zod validation schema * @param props.idpId - Identity provider ID * @param props.domains - Array of domains * @param props.provider - SSO provider object * @returns JSX element */ export function SsoDomainTab({ customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, readOnly = false, schema, idpId, domains, provider, }: SsoDomainsTabProps) { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.domains.content', customMessages, ); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const { domainsList, isCreating, selectedDomain, showVerifyModal, isVerifying, showDeleteModal, verifyError, handleCloseVerifyModal, handleVerify, handleDeleteClick, isLoading, isDeleting, setShowDeleteModal, handleDelete, setShowCreateModal, showCreateModal, handleCreate, idpDomains, handleVerifyActionColumn, isUpdating, isUpdatingId, handleToggleSwitch, } = useSsoDomainTab(idpId, { customMessages, domains, provider, }); const columns: Column[] = React.useMemo( () => [ { type: 'text', accessorKey: 'domain', title: t('table.columns.name'), render: (domain) => (

{domain.domain}

), }, { type: 'text', accessorKey: 'status', title: t('table.columns.status'), render: (domain) => ( {t(`table.domain_statuses.${domain.status}`)} ), }, { type: 'actions', title: '', render: (domain) => ( ), }, ], [t], ); return (

setShowCreateModal(true), icon: Plus, disabled: domains?.createAction?.disabled || readOnly, }, ]} />

setShowCreateModal(false)} onCreate={handleCreate} customMessages={customMessages.domain_create} /> setShowDeleteModal(false)} onDelete={handleDelete} customMessages={customMessages.domain_delete} />

); } 7a:T1927,/** * SSO provider attribute mappings display. * @module sso-provider-attribute-mappings * @internal */ import { STRATEGY_DISPLAY_NAMES, type BaseUserAttributeMapItem, } from '@auth0/universal-components-core'; import { Info } from 'lucide-react'; import * as React from 'react'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import type { Column } from '@/components/auth0/shared/data-table'; import { Mapping } from '@/components/auth0/shared/mapping'; import { Badge } from '@/components/ui/badge'; import { Label } from '@/components/ui/label'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { SsoProviderAttributeMappingsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; type AttributeItem = BaseUserAttributeMapItem & { provisioning_field?: string; sso_field?: string[]; }; const SCIM_NAMESPACE = 'urn:ietf:params:scim:schemas:core:2.0:User'; const CHANGE_STATUS = { UPDATED: 'updated', REMOVED: 'removed', NEW: 'new', } as const; type ChangeStatus = (typeof CHANGE_STATUS)[keyof typeof CHANGE_STATUS]; const STATUS_VARIANTS: Record = { [CHANGE_STATUS.UPDATED]: 'info', [CHANGE_STATUS.REMOVED]: 'warning', [CHANGE_STATUS.NEW]: 'default', }; const getChangeStatus = (item: BaseUserAttributeMapItem): ChangeStatus | null => { const { is_extra: isRemoved, is_missing: isNew } = item; if (isRemoved && isNew) return CHANGE_STATUS.UPDATED; if (isRemoved) return CHANGE_STATUS.REMOVED; if (isNew) return CHANGE_STATUS.NEW; return null; }; const AttributeNameCell = ({ item, section, t, }: { item: BaseUserAttributeMapItem; section: 'required' | 'optional'; t: (key: string) => string; }) => { const status = getChangeStatus(item); return (

{item.label} {item.description && ( {item.description} )} {status && ( {t(`mappings.${section}.table.tags.${status}.label`)} {t(`mappings.${section}.table.tags.${status}.tooltip`)} )}

); }; /** * Displays SSO provider attribute mappings configuration. * * @param props - Component props. * @param props.userAttributeMap - User attribute mapping configuration. * @param props.strategy - SSO strategy type. * @param props.isProvisioning - Whether provisioning is enabled. * @param props.customMessages - Custom i18n message overrides. * @param props.className - Additional CSS class names. * @returns Attribute mappings component. * @internal */ export function SsoProviderAttributeMappings({ userAttributeMap = [], strategy, isProvisioning = false, customMessages, className, }: SsoProviderAttributeMappingsProps) { const { t } = useTranslator('idp_management.edit_sso_provider', customMessages); const strategyLabel = React.useMemo(() => { if (!strategy) return ''; const knownStrategy = (STRATEGY_DISPLAY_NAMES as Record)[strategy]; return knownStrategy || strategy; }, [strategy]); const { requiredItems, optionalItems } = React.useMemo(() => { const required: AttributeItem[] = []; const optional: AttributeItem[] = []; userAttributeMap?.forEach((item) => { if (item.is_required) required.push(item); else optional.push(item); }); return { requiredItems: required, optionalItems: optional }; }, [userAttributeMap]); const getColumns = React.useCallback( (section: 'required' | 'optional'): Column[] => [ { accessorKey: 'label', type: 'text', width: '30%', title: t(`mappings.${section}.table.columns.attribute_name_label`), render: (item) => , }, { accessorKey: isProvisioning ? 'provisioning_field' : 'sso_field', type: 'custom', width: '70%', title: t(`mappings.${section}.table.columns.external_field_label`), render: (item: AttributeItem) => { const value = isProvisioning ? item.provisioning_field : item.sso_field?.join(', '); return ; }, }, ], [t, isProvisioning], ); return (

{t('mappings.external_namespace.label')}

) : null } /> {optionalItems.length > 0 && ( )} ); } 7b:Tc0d,/** * SSO provider attribute sync confirmation alert. * @module sso-provider-attribute-sync-alert * @internal */ import { AlertTriangle } from 'lucide-react'; import * as React from 'react'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderAttributeSyncAlertProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; /** * Alert component for SSO provider attribute sync. * * @param props - Component props. * @param props.translatorKey - i18n translation key namespace. * @param props.className - Additional CSS class names. * @param props.customMessages - Custom i18n message overrides. * @param props.onSync - Callback when sync is triggered. * @param props.isSyncing - Whether sync is in progress. * @returns Attribute sync alert component. * @internal */ export function SsoProviderAttributeSyncAlert({ translatorKey = 'idp_management.edit_sso_provider.tabs.sso.content.attribute_sync_alert', className, customMessages, onSync, isSyncing = false, }: SsoProviderAttributeSyncAlertProps) { const [isSyncModalOpen, setIsSyncModalOpen] = React.useState(false); const { t } = useTranslator(translatorKey, customMessages); const handleSyncClick = () => { setIsSyncModalOpen(true); }; const handleConfirmSync = async () => { if (onSync) { await onSync(); } setIsSyncModalOpen(false); }; return ( <>

{t('title')} {t('description')}

{ } ); } 7c:T1717,/** * SSO provider details form section. * @module sso-provider-details * @internal */ import { getComponentStyles } from '@auth0/universal-components-core'; import React from 'react'; import { ProviderConfigureFields, type ProviderConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields'; import { ProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details'; import { SsoProviderAttributeMappings } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings'; import { FormActions } from '@/components/auth0/shared/form-actions'; import { Separator } from '@/components/ui/separator'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { ProviderDetailsFormHandle } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; import type { SsoProviderDetailsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-tab-types'; /** * SSO provider details editing form. * Combines provider details and configuration fields for editing SSO provider. * * @param props - Component props. * @param props.provider - The SSO provider being edited. * @param props.readOnly - Render in read-only mode. * @param props.idpConfig - Identity provider configuration. * @param props.formActions - Form action handlers. * @param props.customMessages - Custom i18n message overrides. * @param props.styling - CSS variables and class overrides. * @returns SSO provider details component. * @internal */ export function SsoProviderDetails({ provider, readOnly = false, idpConfig, formActions, customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, }: SsoProviderDetailsProps) { const { t } = useTranslator('idp_management.sso_provider_details', customMessages); const { isDarkMode } = useTheme(); const providerDetailsRef = React.useRef(null); const providerConfigureRef = React.useRef(null); const [isDetailsDirty, setIsDetailsDirty] = React.useState(false); const [isConfigureDirty, setIsConfigureDirty] = React.useState(false); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const providerDetailsData = React.useMemo(() => { if (!provider) return undefined; return { name: provider.name ?? undefined, display_name: provider.display_name ?? undefined, }; }, [provider]); const attributes = React.useMemo(() => { if (!provider) return null; return 'attributes' in provider ? (provider.attributes ?? null) : null; }, [provider]); const hasUnsavedChanges = isDetailsDirty || isConfigureDirty; const handleSave = async () => { if (!formActions?.nextAction?.onClick || !provider?.strategy) return; const isDetailsValid = await providerDetailsRef.current?.validate(); const isConfigureValid = await providerConfigureRef.current?.validate(); if (!isDetailsValid || !isConfigureValid) { return; } const detailsData = providerDetailsRef.current?.getData(); const configureData = providerConfigureRef.current?.getData(); const updateData = { strategy: provider.strategy, ...detailsData, ...configureData, }; await formActions.nextAction.onClick(updateData); // Reset forms to mark current values as the new baseline providerDetailsRef.current?.reset(detailsData); providerConfigureRef.current?.reset(configureData as never); setIsDetailsDirty(false); setIsConfigureDirty(false); }; if (!provider) { return null; } return (

{formActions && ( )}

); } 7d:T129b,/** * SSO provider edit tab component. * @module sso-provider-tab * @internal */ import { getComponentStyles } from '@auth0/universal-components-core'; import React from 'react'; import { SsoProviderDelete } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete'; import { SsoProviderAttributeSyncAlert } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert'; import { SsoProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-details'; import { SsoProviderRemoveFromOrganization } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { SsoProviderTabProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-tab-types'; /** * SSO provider tab content for editing provider configuration. * * @param props - Component props. * @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.provider - The SSO provider being edited. * @param props.onDelete - Callback when provider is deleted. * @param props.onRemove - Callback when provider is removed from organization. * @param props.organization - Current organization context. * @param props.isDeleting - Whether deletion is in progress. * @param props.isRemoving - Whether removal is in progress. * @param props.idpConfig - Identity provider configuration. * @param props.shouldAllowDeletion - Whether deletion is allowed. * @param props.formActions - Form action handlers. * @param props.hasSsoAttributeSyncWarning - Whether to show attribute sync warning. * @param props.onAttributeSync - Callback for attribute sync. * @param props.isSyncingAttributes - Whether attribute sync is in progress. * @returns SSO provider tab content. * @internal */ export function SsoProviderTab({ customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, readOnly = false, provider, onDelete, onRemove, organization, isDeleting, isRemoving, idpConfig, shouldAllowDeletion, formActions, hasSsoAttributeSyncWarning, onAttributeSync, isSyncingAttributes = false, }: SsoProviderTabProps) { const { t } = useTranslator('idp_management.edit_sso_provider.tabs.sso', customMessages); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); return (

{hasSsoAttributeSyncWarning && ( )}

{t('content.title')} {t('content.description')}

{provider && ( )}

{provider && organization && ( )} {provider && shouldAllowDeletion && ( )}

); } 7e:T241d,/** * SCIM token management section. * @module provisioning-manage-token * @internal */ 'use client'; import { getComponentStyles, type IdpScimTokenBase, type CreateIdpProvisioningScimTokenResponseContent, } from '@auth0/universal-components-core'; import { Trash2, Plus } from 'lucide-react'; import * as React from 'react'; import { ProvisioningCreateTokenModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal'; import { ProvisioningDeleteTokenModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Spinner } from '@/components/ui/spinner'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { ProvisioningManageTokenProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types'; const MAX_TOKENS = 2; const TOKEN_STATUS = { ACTIVE: 'active', EXPIRED: 'expired', } as const; /** * * @param props - Component props. * @param props.isScimTokensLoading - Whether SCIM tokens are loading * @param props.isScimTokenCreating - Whether a SCIM token is being created * @param props.isScimTokenDeleting - Whether a SCIM token is being deleted * @param props.onListScimTokens - Callback to list SCIM tokens * @param props.onCreateScimToken - Callback to create a SCIM token * @param props.onDeleteScimToken - Callback to delete a SCIM token * @param props.styling - Custom styling configuration with variables and classes * @param props.customMessages - Custom translation messages to override defaults * @returns JSX element */ export function ProvisioningManageToken({ isScimTokensLoading, isScimTokenCreating, isScimTokenDeleting, onListScimTokens, onCreateScimToken, onDeleteScimToken, styling = { variables: { common: {}, light: {}, dark: {}, }, classes: {}, }, customMessages = {}, }: ProvisioningManageTokenProps): React.JSX.Element { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens', customMessages, ); const { isDarkMode } = useTheme(); const [deleteTokenId, setDeleteTokenId] = React.useState(null); const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false); const [scimTokens, setScimTokens] = React.useState([]); const [createdToken, setCreatedToken] = React.useState(null); React.useEffect(() => { const loadTokens = async () => { const tokens = await onListScimTokens(); if (tokens?.scim_tokens) { setScimTokens(tokens.scim_tokens); } }; loadTokens(); }, []); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const canGenerateToken = scimTokens.length < MAX_TOKENS; const getTokenStatus = ( token: IdpScimTokenBase, ): { labelKey: string; variant: 'secondary' | 'destructive'; } => { if (!token.valid_until) { return { labelKey: TOKEN_STATUS.ACTIVE, variant: 'secondary' }; } const expiryDate = new Date(token.valid_until); const now = new Date(); const isExpired = expiryDate < now; return { labelKey: isExpired ? TOKEN_STATUS.EXPIRED : TOKEN_STATUS.ACTIVE, variant: isExpired ? 'destructive' : 'secondary', }; }; const handleGenerateToken = async () => { const result = await onCreateScimToken({ token_lifetime: 3600 }); if (result) { setCreatedToken(result); setIsCreateModalOpen(true); const tokens = await onListScimTokens(); if (tokens?.scim_tokens) { setScimTokens(tokens.scim_tokens); } } }; const handleDeleteClick = (tokenId: string) => { setDeleteTokenId(tokenId); }; const handleDeleteConfirm = async () => { if (deleteTokenId) { await onDeleteScimToken(deleteTokenId); setDeleteTokenId(null); const tokens = await onListScimTokens(); if (tokens?.scim_tokens) { setScimTokens(tokens.scim_tokens); } } }; const handleCloseCreateModal = () => { setCreatedToken(null); setIsCreateModalOpen(false); }; return (

{t('title')} {t('description')} {!canGenerateToken && {t('max_tokens_tooltip')}} {isScimTokensLoading ? ( ) : scimTokens.length > 0 ? ( {scimTokens.map((token) => { const status = getTokenStatus(token); const showExpiry = !token.valid_until; return (

{t('token_item.token_prefix')} {token.token_id}

{showExpiry && (

{t('token_item.never_expire')}

)}

{t('token_item.last_used')}

{t(`token_item.status_${status.labelKey}`)}

); })} ) : null} { setIsCreateModalOpen(open); if (!open) { handleCloseCreateModal(); } }} createdToken={createdToken} customMessages={customMessages} styling={styling} /> { if (!open) { setDeleteTokenId(null); } }} tokenId={deleteTokenId} onConfirm={handleDeleteConfirm} customMessages={customMessages} styling={styling} />

); } 7f:T6c4,/** * SCIM token creation modal content. * @module provisioning-create-token-modal-content * @internal */ import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Label } from '@/components/ui/label'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { ProvisioningCreateTokenModalContentProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-token-types'; /** * * @param props - Component props. * @param props.token - Token string * @param props.tokenId - Token identifier * @param props.customMessages - Custom translation messages to override defaults * @param props.className - Optional CSS class name for styling * @returns JSX element */ export function ProvisioningCreateTokenModalContent({ token, tokenId, customMessages = {}, className, }: ProvisioningCreateTokenModalContentProps) { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens.create_modal.content', customMessages, ); return (

{t('description')}

{t('field.label')} {tokenId}

); } 80:T8f0,/** * SCIM token creation modal. * @module provisioning-create-token-modal * @internal */ import { Copy } from 'lucide-react'; import * as React from 'react'; import { ProvisioningCreateTokenModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal-content'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { ProvisioningCreateTokenModalProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types'; /** * * @param props - Component props. * @param props.open - Whether the component is open/visible * @param props.onOpenChange - Callback fired when open state changes * @param props.createdToken - Newly created token data * @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 ProvisioningCreateTokenModal({ open, onOpenChange, createdToken, isLoading, customMessages = {}, }: ProvisioningCreateTokenModalProps): React.JSX.Element { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens', customMessages, ); return ( ) } modalActions={{ isLoading, showPrevious: false, showUnsavedChanges: false, nextAction: { type: 'button', label: t('create_modal.copy_and_close_button_label'), variant: 'primary', icon: , disabled: isLoading, onClick: () => { if (createdToken) { navigator.clipboard.writeText(createdToken.token!); } onOpenChange(false); }, }, }} /> ); } 81:T7ee,/** * SSO provisioning delete confirmation modal. * @module sso-provisioning-delete-modal * @internal */ import React from 'react'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProvisioningDeleteModalProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types'; /** * * @param props - Component props. * @param props.open - Whether the component is open/visible * @param props.onOpenChange - Callback fired when open state changes * @param props.onConfirm - Callback fired when the action is confirmed * @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 SsoProvisioningDeleteModal({ open, onOpenChange, onConfirm, isLoading, customMessages, }: SsoProvisioningDeleteModalProps): React.JSX.Element { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.delete', customMessages, ); return (

{t('modal.content.description')}

} modalActions={{ isLoading, showUnsavedChanges: false, previousAction: { type: 'button', label: t('modal.actions.cancel_button_label'), variant: 'outline', disabled: isLoading, onClick: () => onOpenChange(false), }, nextAction: { type: 'button', label: t('modal.actions.delete_button_label'), variant: 'destructive', disabled: isLoading, onClick: onConfirm, }, }} /> ); } 82:T504,/** * SCIM token deletion modal content. * @module provisioning-delete-token-modal-content * @internal */ import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { ProvisioningDeleteTokenModalContentProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-token-types'; /** * * @param props - Component props. * @param props.customMessages - Custom translation messages to override defaults * @param props.className - Optional CSS class name for styling * @param props.tokenId - Token identifier * @returns JSX element */ export function ProvisioningDeleteTokenModalContent({ customMessages = {}, className, tokenId, }: ProvisioningDeleteTokenModalContentProps) { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens.delete_modal.content', customMessages, ); return (

{t('confirmation', { tokenId })}

{t('description')}

); } 83:T8bd,/** * SCIM token deletion modal. * @module provisioning-delete-token-modal * @internal */ import React from 'react'; import { ProvisioningDeleteTokenModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal-content'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { ProvisioningDeleteTokenModalProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types'; /** * * @param props - Component props. * @param props.open - Whether the component is open/visible * @param props.onOpenChange - Callback fired when open state changes * @param props.tokenId - Token identifier * @param props.onConfirm - Callback fired when the action is confirmed * @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 ProvisioningDeleteTokenModal({ open, onOpenChange, tokenId, onConfirm, isLoading, customMessages, }: ProvisioningDeleteTokenModalProps): React.JSX.Element { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens', customMessages, ); return ( } modalActions={{ isLoading, showUnsavedChanges: false, previousAction: { type: 'button', label: t('delete_modal.cancel_button_label'), variant: 'outline', disabled: isLoading, onClick: () => onOpenChange(false), }, nextAction: { type: 'button', label: t('delete_modal.delete_button_label'), variant: 'destructive', disabled: isLoading, onClick: onConfirm, }, }} /> ); } 84:T17ff,/** * SSO provisioning details form. * @module sso-provisioning-details * @internal */ 'use client'; import { getComponentStyles, type ProvisioningDetailsFormValues, ssoProvisioningSchema, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import { useMemo } from 'react'; import { useForm } from 'react-hook-form'; import { SsoProviderAttributeMappings } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings'; import { ProvisioningManageToken } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/provisioning-manage-token'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form'; import { Separator } from '@/components/ui/separator'; import { TextField } from '@/components/ui/text-field'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { SsoProvisioningDetailsProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types'; /** * SSO provisioning details for SCIM token management. * * @param props - Component props. * @param props.provider - The SSO provider being configured. * @param props.provisioningConfig - Provisioning configuration settings. * @param props.isScimTokensLoading - Whether SCIM tokens are loading. * @param props.isScimTokenCreating - Whether a SCIM token is being created. * @param props.isScimTokenDeleting - Whether a SCIM token is being deleted. * @param props.onListScimTokens - Callback to list SCIM tokens. * @param props.onCreateScimToken - Callback to create a SCIM token. * @param props.onDeleteScimToken - Callback to delete a SCIM token. * @param props.customMessages - Custom i18n message overrides. * @param props.styling - CSS variables and class overrides. * @returns SSO provisioning details component. * @internal */ export function SsoProvisioningDetails({ provider, provisioningConfig, isScimTokensLoading, isScimTokenCreating, isScimTokenDeleting, onListScimTokens, onCreateScimToken, onDeleteScimToken, customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, }: SsoProvisioningDetailsProps) { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content.details', customMessages, ); const { isDarkMode } = useTheme(); const currentStyles = useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const { coreClient } = useCoreClient(); const scimEndpointUrl = useMemo(() => { const domain = coreClient?.getDomain() || 'your-domain'; return `https://${domain}/scim/v2/connections/${provider.id}/`; }, [coreClient, provider.id]); const form = useForm({ resolver: zodResolver(ssoProvisioningSchema), mode: FORM_VALIDATION_MODE, defaultValues: { userIdAttribute: provisioningConfig?.user_id_attribute || '', scimEndpointUrl: scimEndpointUrl || '', }, }); return (

); } 85:T1a05,/** * SSO provisioning tab component. * @module sso-provisioning-tab * @internal */ import { getComponentStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import { SsoProviderAttributeSyncAlert } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert'; import { SsoProvisioningDeleteModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-modal'; import { SsoProvisioningDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details'; import { Card, CardAction, CardDescription, CardHeader, CardTitle, CardContent, } from '@/components/ui/card'; import { Spinner } from '@/components/ui/spinner'; import { Switch } from '@/components/ui/switch'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { useSsoProviderEdit } from '@/hooks/my-organization/use-sso-provider-edit'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProvisioningTabProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types'; /** * SSO provisioning tab content for managing provisioning configuration. * * @param props - Component props. * @param props.provider - The SSO provider being configured. * @param props.styling - CSS variables and class overrides. * @param props.customMessages - Custom i18n message overrides. * @param props.hasProvisioningAttributeSyncWarning - Whether to show attribute sync warning. * @param props.onAttributeSync - Callback for attribute sync. * @param props.isSyncingAttributes - Whether attribute sync is in progress. * @returns SSO provisioning tab content. * @internal */ export function SsoProvisioningTab({ provider, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} }, customMessages = {}, hasProvisioningAttributeSyncWarning, onAttributeSync, isSyncingAttributes = false, }: SsoProvisioningTabProps): React.JSX.Element { const { t } = useTranslator( 'idp_management.edit_sso_provider.tabs.provisioning.content', customMessages, ); const { provisioningConfig, isProvisioningLoading, isProvisioningUpdating, isProvisioningDeleting, isScimTokensLoading, isScimTokenCreating, isScimTokenDeleting, fetchProvisioning, createProvisioning, deleteProvisioning, listScimTokens, createScimToken, deleteScimToken, } = useSsoProviderEdit(provider?.id || ''); const { isDarkMode } = useTheme(); const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const [isDeleteModalOpen, setDeleteModalOpen] = React.useState(false); React.useEffect(() => { if (provider?.id) { fetchProvisioning(); } }, [provider?.id]); const handleProvisioningToggle = async (enabled: boolean) => { if (!provider?.id) return; if (enabled) { await createProvisioning(); await fetchProvisioning(); } else { setDeleteModalOpen(true); } }; const handleDeleteProvisioningConfirm = async () => { await deleteProvisioning(); setDeleteModalOpen(false); }; const isLoading = isProvisioningLoading || isProvisioningUpdating || isProvisioningDeleting; const isProvisioningEnabled = !!provisioningConfig; const enableProvisioningToggle = isLoading || !provider?.id || !provider.is_enabled; return (

{hasProvisioningAttributeSyncWarning && ( )} {t('header.title')} {t('header.description')}

{isLoading ? ( ) : ( {!provider.is_enabled ? t('header.provider_disabled_tooltip') : isProvisioningEnabled ? t('header.disable_provisioning_tooltip') : t('header.enable_provisioning_tooltip')} )}

{isProvisioningEnabled && ( )}

); } 86: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, }, }} /> ); } 87:Tbc8,/** * SSO provider remove from organization section. * @module provider-remove * @internal */ import * as React from 'react'; import { SsoProviderRemoveFromOrganizationModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { SsoProviderRemoveFromOrganizationProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types'; /** * * @param props - Component props. * @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.customMessages - Custom translation messages to override defaults * @param props.isLoading - Whether the component is in a loading state * @param props.readOnly - Whether the component is in read-only mode * @returns JSX element */ export function SsoProviderRemoveFromOrganization({ provider, organizationName, onRemove, customMessages = {}, isLoading, readOnly, }: SsoProviderRemoveFromOrganizationProps) { const { t } = useTranslator('idp_management.remove_sso_provider', customMessages); const [isModalOpen, setIsModalOpen] = React.useState(false); const openModal = React.useCallback(() => { setIsModalOpen(true); }, []); const closeModal = React.useCallback(() => { setIsModalOpen(false); }, []); return ( <>

{t('title', { providerName: provider.name, organizationName: organizationName, })}

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

); } 88:Taae,/** * Text field with copy-to-clipboard button. * @module copyable-text-field * @internal */ import { Copy } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { TextField, type TextFieldProps } from '@/components/ui/text-field'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; export interface CopyableTextFieldProps extends TextFieldProps { onCopy?: () => void; copyButtonClassName?: string; tooltipSide?: 'top' | 'bottom' | 'left' | 'right'; tooltipAlign?: 'start' | 'center' | 'end'; showCopyButton?: boolean; } const CopyableTextField = React.forwardRef( ( { onCopy, copyButtonClassName, tooltipSide = 'top', tooltipAlign = 'end', readOnly = true, endAdornment, showCopyButton = true, ...props }, ref, ) => { const { t } = useTranslator('common'); const [tooltipText, setTooltipText] = React.useState(t('copy')); const [tooltipOpen, setTooltipOpen] = React.useState(false); const handleCopy = async () => { if (props.value) { await navigator.clipboard.writeText(String(props.value)); setTooltipText(t('copied')); setTooltipOpen(true); setTimeout(() => { setTooltipText(t('copy')); setTooltipOpen(false); }, 1000); onCopy?.(); } }; const copyButton = ( {tooltipText} ); return ( {endAdornment} {copyButton} ) : ( copyButton ) ) : ( endAdornment ) } /> ); }, ); CopyableTextField.displayName = 'CopyableTextField'; export { CopyableTextField }; 89: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())} ); })} )) )}

); } 8a: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 && ( )}

); }; 8b: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}; } 8c: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'; 8d:T8a9,/** * Attribute mapping display component. * @module mapping * @internal */ import React from 'react'; import { DataTable, type Column } from '@/components/auth0/shared/data-table'; import { Section } from '@/components/auth0/shared/section'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { CardTitle, CardDescription } from '@/components/ui/card'; import { cn } from '@/lib/utils'; export interface MappingProps { title?: string; description?: string; content: React.ReactNode; card: { title: string; description: string; table: { items: Item[]; columns: Column[]; }; }; className?: string; expanded?: boolean; } /** * * @param props - Component props. * @param props.title - Section title. * @param props.description - Section description. * @param props.card - Card configuration. * @param props.content - Main content. * @param props.className - Additional CSS classes. * @param props.expanded - Whether accordion is expanded. * @returns JSX element */ export function Mapping({ title, description, card, content, className, expanded = true, }: MappingProps) { return (

{content}

{card.title} {card.description}

); } 8e: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} ); }), ); 8f:Tf1f,/** * Section layout with title and actions. * @module section * @internal */ import type { ActionButton as CoreActionButton } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Toggle } from '@/components/ui/toggle'; import { cn } from '@/lib/utils'; export interface BaseActionProps extends Omit { icon?: LucideIcon; className?: string; } export interface ButtonActionProps extends BaseActionProps { type: 'button'; onClick: (e: React.MouseEvent) => void; } export interface ToggleActionProps extends Omit { type: 'toggle'; pressed?: boolean; onPressedChange: (pressed: boolean) => void; 'aria-label': string; } export type ActionProps = ButtonActionProps | ToggleActionProps; interface SectionProps { title?: string; description?: string; children: React.ReactNode; actions?: ActionProps[]; className?: string; } const ButtonAction: React.FC = ({ icon: Icon, className, label, onClick, disabled, variant, size, }) => ( ); const ToggleAction: React.FC = ({ icon: Icon, className, label, 'aria-label': ariaLabel, pressed, onPressedChange, disabled, variant, size, }) => ( {Icon && ); /** * * @param props - Component props. * @param props.title - The title text * @param props.description - The description text * @param props.children - Child elements to render * @param props.actions - Action buttons or elements * @param props.className - Optional CSS class name for styling * @returns JSX element */ export function Section({ title, description, children, actions, className, }: SectionProps): React.JSX.Element { const renderAction = (action: ActionProps, index: number) => { const key = `action-${index}`; return action.type === 'toggle' ? ( ) : ( ); }; return (

{title && (

{title}

)} {description && (

{description}

)}

{actions && actions.length > 0 && (

{actions.map(renderAction)}

)}

{children}

); } 90: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}

); }; 91: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); }; 92:T994,/** * Accordion component using Radix primitives. * @module accordion * @internal */ 'use client'; import * as AccordionPrimitive from '@radix-ui/react-accordion'; import { ChevronDown } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Accordion({ className, ...props }: React.ComponentProps) { return ( ); } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ); } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ); } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

); } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; 93:T87e,/** * Alert component with status variants. * @module alert * @internal */ import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const alertVariants = cva( 'shadow-input-hover bg-input relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 overflow-clip rounded-3xl p-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'text-foreground border-b-2 border-transparent', info: 'text-info-foreground [&>svg]:text-info-foreground', success: 'text-success-foreground [&>svg]:text-success-foreground', warning: 'text-warning-foreground [&>svg]:text-warning-foreground', destructive: 'text-destructive-foreground [&>svg]:text-destructive-foreground', }, }, defaultVariants: { variant: 'default', }, }, ); function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

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

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

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

); } export { Alert, AlertTitle, AlertDescription, AlertAction }; 94: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 }; 95: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 }; 96: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 }; 97: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 }; 98: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, }; 99:T1542,/** * File upload component with drag-drop support. * @module file-upload * @internal */ import { Upload, X } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; export interface FileUploadProps extends Omit, 'value' | 'onChange'> { value?: File[]; onChange?: (files: File[]) => void; onInvalidFiles?: (files: File[]) => void; onRemove?: (file: File) => void; maxSize?: number; accept?: string; maxFiles?: number; preview?: boolean; className?: string; } export function FileUpload({ value = [], onChange, onInvalidFiles, onRemove, maxSize, accept, maxFiles = 1, preview = true, className, disabled, ...props }: FileUploadProps) { const inputRef = React.useRef(null); const [dragActive, setDragActive] = React.useState(false); const handleDrag = React.useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.type === 'dragenter' || e.type === 'dragover') { setDragActive(true); } else if (e.type === 'dragleave') { setDragActive(false); } }, []); const handleDrop = React.useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setDragActive(false); const files = Array.from(e.dataTransfer.files); handleFiles(files); }, []); const handleChange = React.useCallback((e: React.ChangeEvent) => { const files = Array.from(e.target.files || []); handleFiles(files); }, []); const handleFiles = React.useCallback( (files: File[]) => { if (disabled) return; const validFiles: File[] = []; const invalidFiles: File[] = []; files.forEach((file) => { if (maxSize && file.size > maxSize) { invalidFiles.push(file); return; } if ( accept && !accept.split(',').some((type) => { const fileType = type.trim().toLowerCase(); const fileName = file.name.toLowerCase(); const fileMimeType = file.type.toLowerCase(); if (fileType.startsWith('.')) { return fileName.endsWith(fileType); } if (fileType === fileMimeType) { return true; } if (fileType.endsWith('/*')) { const baseType = fileType.slice(0, -2); return fileMimeType.startsWith(`${baseType}/`); } return false; }) ) { invalidFiles.push(file); return; } validFiles.push(file); }); if (invalidFiles.length > 0) { onInvalidFiles?.(invalidFiles); } if (maxFiles === 1) { onChange?.(validFiles.slice(0, 1)); } else { onChange?.([...value, ...validFiles].slice(0, maxFiles)); } if (inputRef.current) inputRef.current.value = ''; }, [disabled, maxSize, accept, maxFiles, onChange, onInvalidFiles, value], ); const removeFile = React.useCallback( (file: File) => { onRemove?.(file); onChange?.(value.filter((f) => f !== file)); }, [onChange, onRemove, value], ); return (

Drag & drop files here, or click to select files

{accept &&

Allowed files: {accept}

} {maxSize && (

Max size: {(maxSize / 1024 / 1024).toFixed(2)}MB

)}

{preview && value.length > 0 && (

{value.map((file, i) => (

{file.name}

{(file.size / 1024).toFixed(2)}KB

))}

)}

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

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

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

{body}

); } export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, }; 9b:T511,/** * Link component with variants. * @module link * @internal */ import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const linkVariants = cva( 'focus-within:ring-ring inline-flex items-center gap-2 rounded-md py-0.5 underline-offset-4 transition-colors focus:ring-3 focus-visible:outline-hidden', { variants: { variant: { destructive: 'text-destructive hover:text-destructive/90', muted: 'text-muted hover:text-muted/80', primary: 'text-primary hover:text-primary/90', }, underline: { none: 'no-underline', hover: 'no-underline hover:underline', always: 'underline', }, }, defaultVariants: { variant: 'primary', underline: 'always', }, }, ); export interface LinkProps extends React.AnchorHTMLAttributes, VariantProps { /** * Optional ref for the link element. */ ref?: React.Ref; } function Link({ ref, className, children, variant, underline, ...props }: LinkProps) { return ( {children} ); } export { Link }; 9c: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'; 9d:T628,/** * Radio group using Radix primitives. * @module radio-group * @internal */ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; import * as React from 'react'; import { cn } from '@/lib/utils'; function RadioGroup({ className, ...props }: React.ComponentProps) { return ( ); } function RadioGroupItem({ className, ...props }: React.ComponentProps) { return ( ); } export { RadioGroup, RadioGroupItem }; 9e:T1769,/** * Select component using Radix primitives. * @module select * @internal */ import * as SelectPrimitive from '@radix-ui/react-select'; import { CheckIcon, ChevronDownIcon, ChevronUpIcon } 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 Select({ ...props }: React.ComponentProps) { return ; } function SelectGroup({ ...props }: React.ComponentProps) { return ; } function SelectValue({ ...props }: React.ComponentProps) { return ; } function SelectTrigger({ className, size = 'default', children, ...props }: React.ComponentProps & { size?: 'sm' | 'default'; }) { return ( ); } function SelectContent({ className, children, position = 'popper', ...props }: React.ComponentProps) { const portalContainer = usePortalContainer(); return ( {children} ); } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ); } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ); } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ); } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ); } export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, }; 9f: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 (

); } a0: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 }; a1: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 }; a2:T805,/** * Tabs component using Radix primitives. * @module tabs * @internal / 'use client'; import as TabsPrimitive from '@radix-ui/react-tabs'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Tabs({ className, ...props }: React.ComponentProps) { return ( ); } function TabsList({ className, ...props }: React.ComponentProps) { return ( ); } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ); } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ); } export { Tabs, TabsList, TabsTrigger, TabsContent }; a3: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 }; a4:T885,/* * Toggle button component. * @module toggle * @internal / import { cva } from 'class-variance-authority'; import as React from 'react'; import { cn } from '@/lib/utils'; const toggleVariants = cva( "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:shadow-bevel-sm focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4", { variants: { variant: { default: 'hover:bg-muted data-[state=on]:bg-muted data-[state=on]:text-primary bg-transparent', outline: 'data-[state=on]:bg-muted data-[state=on]:text-primary-foreground hover:bg-accent hover:text-accent-foreground shadow-input-resting bg-transparent', }, size: { default: 'h-9 min-w-9 px-2', sm: 'h-8 min-w-8 px-1.5', lg: 'h-10 min-w-10 px-2.5', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); export interface ToggleProps extends React.ButtonHTMLAttributes { pressed?: boolean; onPressedChange?: (pressed: boolean) => void; variant?: 'default' \| 'outline'; size?: 'sm' \| 'default' \| 'lg'; } function ToggleRoot({ className, children, pressed, onPressedChange, variant = 'default', size = 'default', ...props }: ToggleProps) { return ( ); } function Toggle(props: ToggleProps) { return ; } export { Toggle }; a5: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 }; a6: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, }; } a7: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, }; } a8:T3236,/* * SSO domain tab data and actions hook. * @module use-sso-domain-tab / import type { CreateOrganizationDomainRequestContent } from '@auth0/universal-components-core'; import { BusinessError, type Domain, type IdpId } from '@auth0/universal-components-core'; import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'; import { useCallback, useState, useMemo, useEffect } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { ssoProviderEditQueryKeys } from '@/hooks/my-organization/use-sso-provider-edit'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoDomainTabOptions, UseSsoDomainTabReturn, } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types'; const domainQueryKeys = { all: ['sso-domains'] as const, lists: () => [...domainQueryKeys.all, 'list'] as const, list: (idpId: IdpId) => [...domainQueryKeys.lists(), idpId] as const, }; /* * Hook for SSO domain tab domain operations and state. * @param idpId - Identity provider ID. * @param options - Hook options. * @param options.customMessages - Custom translation messages. * @param options.domains - Initial domains data. * @param options.provider - SSO provider data. * @returns Hook state and methods / export function useSsoDomainTab( idpId: IdpId, { customMessages = {}, domains, provider }: Partial = {}, ): UseSsoDomainTabReturn { const { coreClient } = useCoreClient(); const { t } = useTranslator('idp_management.notifications', customMessages); const handleError = useErrorHandler(); const queryClient = useQueryClient(); const [selectedDomain, setSelectedDomain] = useState(null); const [showVerifyModal, setShowVerifyModal] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false); const [verifyError, setVerifyError] = useState(undefined); const [showCreateModal, setShowCreateModal] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [isUpdatingId, setIsUpdatingId] = useState(null); // Fetch domains list using TanStack Query const domainsQuery = useQuery({ queryKey: domainQueryKeys.list(idpId), queryFn: async () => { const { response } = await coreClient! .getMyOrganizationApiClient() .organization.domains.list(); return response.organization_domains; }, enabled: !!coreClient && !!idpId, }); const domainsList = domainsQuery.data ?? []; const isLoading = domainsQuery.isLoading; // Handle errors from domains query useEffect(() => { if (domainsQuery.error) { handleError(domainsQuery.error, { fallbackMessage: t('general_error'), }); } }, [domainsQuery.error, handleError, t]); // Derive idpDomains from the provider's domains field (provider is fetched by the parent hook) const idpDomains = useMemo(() => { const idpDomainNames = provider?.domains ?? []; return domainsList .filter((domain) => idpDomainNames.includes(domain.domain)) .map((domain) => domain.id); }, [provider?.domains, domainsList]); // Mutations const createDomainMutation = useMutation({ mutationFn: async (data: CreateOrganizationDomainRequestContent) => { if (domains?.createAction?.onBefore) { const canProceed = domains.createAction.onBefore(data as Domain); if (!canProceed) { throw new BusinessError({ message: t('domain_create.on_before') }); } } const result: Domain = await coreClient! .getMyOrganizationApiClient() .organization.domains.create(data); domains?.createAction?.onAfter?.(result); return result; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: domainQueryKeys.list(idpId) }); queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const verifyDomainMutation = useMutation({ mutationFn: async (domain: Domain) => { if (domains?.verifyAction?.onBefore) { const canProceed = domains.verifyAction.onBefore(domain); if (!canProceed) { throw new BusinessError({ message: t('domain_verify.on_before') }); } } const updatedDomain = await coreClient! .getMyOrganizationApiClient() .organization.domains.verify.create(domain.id); if (domains?.verifyAction?.onAfter) { await domains.verifyAction.onAfter(domain); } return { updatedDomain, isVerified: updatedDomain.status === 'verified' }; }, onSuccess: ({ updatedDomain, isVerified }, domain) => { if (isVerified) { queryClient.setQueryData(domainQueryKeys.list(idpId), (oldDomains) => { if (!oldDomains) return oldDomains; return oldDomains.map((d) => (d.id === domain.id ? { ...d, ...updatedDomain } : d)); }); } }, }); const deleteDomainMutation = useMutation({ mutationFn: async (domain: Domain) => { if (!coreClient) { return domain; } if (domains?.deleteAction?.onBefore) { const canProceed = domains.deleteAction.onBefore(domain); if (!canProceed) { throw new BusinessError({ message: t('domain_delete.on_before') }); } } await coreClient.getMyOrganizationApiClient().organization.domains.delete(domain.id); if (domains?.deleteAction?.onAfter) { await domains.deleteAction.onAfter(domain); } return domain; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: domainQueryKeys.list(idpId) }); queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const associateToProviderMutation = useMutation({ mutationFn: async (domain: Domain) => { if (domains?.associateToProviderAction?.onBefore) { const canProceed = domains.associateToProviderAction.onBefore(domain, provider); if (!canProceed) { throw new BusinessError({ message: t('domain_associate_provider.on_before') }); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.create(idpId, { domain: domain.domain, }); if (domains?.associateToProviderAction?.onAfter) { await domains.associateToProviderAction.onAfter(domain, provider); } return domain; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const deleteFromProviderMutation = useMutation({ mutationFn: async (domain: Domain) => { if (!provider) { return domain; } if (domains?.deleteFromProviderAction?.onBefore) { const canProceed = domains.deleteFromProviderAction.onBefore(domain, provider); if (!canProceed) { throw new BusinessError({ message: t('domain_delete_provider.on_before') }); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.delete(provider.id!, domain.domain); if (domains?.deleteFromProviderAction?.onAfter) { await domains.deleteFromProviderAction.onAfter(domain); } return domain; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const handleCreate = useCallback( async (domainUrl: string) => { try { const newDomain = await createDomainMutation.mutateAsync({ domain: domainUrl }); showToast({ type: 'success', message: t('domain_create.success', { domainName: newDomain?.domain, }), }); setSelectedDomain(newDomain); setShowCreateModal(false); setShowVerifyModal(true); } catch (error) { handleError(error, { fallbackMessage: t('domain_create.error'), }); } }, [handleError, createDomainMutation, t], ); const handleCloseVerifyModal = useCallback(() => { setShowVerifyModal(false); setVerifyError(undefined); }, []); const handleVerify = useCallback( async (domain: Domain) => { try { const { isVerified } = await verifyDomainMutation.mutateAsync(domain); if (isVerified) { setShowVerifyModal(false); showToast({ type: 'success', message: t('domain_verify.success', { domainName: domain.domain, }), }); await associateToProviderMutation.mutateAsync(domain); } else { setVerifyError(t('domain_verify.verification_failed', { domainName: domain.domain })); } } catch (error) { handleError(error, { fallbackMessage: t('domain_verify.verification_failed'), }); } }, [verifyDomainMutation, t, handleError, associateToProviderMutation], ); const handleDeleteClick = useCallback((domain: Domain) => { setSelectedDomain(domain); setShowVerifyModal(false); setShowDeleteModal(true); }, []); const handleDelete = useCallback( async (domain: Domain) => { try { await deleteDomainMutation.mutateAsync(domain); showToast({ type: 'success', message: t('domain_delete.success', { domainName: domain.domain, }), }); setShowDeleteModal(false); setShowVerifyModal(false); } catch (error) { handleError(error, { fallbackMessage: t('domain_delete.error'), }); } }, [handleError, deleteDomainMutation, t], ); const handleVerifyActionColumn = useCallback( async (domain: Domain) => { setIsUpdating(true); setIsUpdatingId(domain.id); try { const { isVerified } = await verifyDomainMutation.mutateAsync(domain); if (isVerified) { showToast({ type: 'success', message: t('domain_verify.success', { domainName: domain.domain, }), }); await associateToProviderMutation.mutateAsync(domain); } else { showToast({ type: 'error', message: t('domain_verify.verification_failed', { domainName: domain.domain, }), }); } } catch (error) { handleError(error, { fallbackMessage: t('domain_verify.verification_failed', { domainName: domain.domain }), }); } finally { setIsUpdating(false); setIsUpdatingId(null); } }, [verifyDomainMutation, t, handleError, associateToProviderMutation], ); const handleToggleSwitch = useCallback( async (domain: Domain, newCheckedValue: boolean) => { setIsUpdating(true); setIsUpdatingId(domain.id); if (newCheckedValue) { try { await associateToProviderMutation.mutateAsync(domain); showToast({ type: 'success', message: t('domain_associate_provider.success', { domain: domain.domain, idp: provider?.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('general_error'), }); } finally { setIsUpdating(false); setIsUpdatingId(null); } } else { try { await deleteFromProviderMutation.mutateAsync(domain); showToast({ type: 'success', message: t('domain_delete_provider.success', { domain: domain.domain, idp: provider?.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('general_error'), }); } finally { setIsUpdating(false); setIsUpdatingId(null); } } }, [associateToProviderMutation, t, provider, handleError, deleteFromProviderMutation], ); return { isLoading, domainsList, isCreating: createDomainMutation.isPending, selectedDomain, showVerifyModal, showDeleteModal, isVerifying: verifyDomainMutation.isPending, verifyError, isDeleting: deleteDomainMutation.isPending, showCreateModal, handleCreate, handleCloseVerifyModal, handleVerify, handleDeleteClick, handleDelete, setShowCreateModal, setShowDeleteModal, idpDomains, handleVerifyActionColumn, isUpdating, isUpdatingId, handleToggleSwitch, }; } a9:T62c,/* * SSO provider edit logic hook. * @module use-sso-provider-edit-logic * @internal / import { useCallback } from 'react'; import { useConfig } from '@/hooks/my-organization/use-config'; import { useIdpConfig } from '@/hooks/my-organization/use-idp-config'; import type { UseSsoProviderEditLogicResult, UseSsoProviderEditReturn, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; /* * Hook for SSO provider edit logic (e.g., handleToggleProvider). * @param ssoProviderEdit - SSO Provider Edit Prop * @internal * @returns Hook state and methods / export function useSsoProviderEditLogic( ssoProviderEdit: UseSsoProviderEditReturn, ): UseSsoProviderEditLogicResult { const { shouldAllowDeletion, isLoadingConfig } = useConfig(); const { idpConfig, isLoadingIdpConfig, isProvisioningEnabled, isProvisioningMethodEnabled } = useIdpConfig(); const showProvisioningTab = isProvisioningEnabled(ssoProviderEdit.provider?.strategy) && isProvisioningMethodEnabled(ssoProviderEdit.provider?.strategy); const handleToggleProvider = useCallback( async (enabled: boolean) => { if (!ssoProviderEdit.provider?.strategy) return; await ssoProviderEdit.updateProvider({ strategy: ssoProviderEdit.provider.strategy, is_enabled: enabled, }); }, [ssoProviderEdit.provider?.strategy, ssoProviderEdit.updateProvider], ); return { shouldAllowDeletion, isLoadingConfig, idpConfig, isLoadingIdpConfig, showProvisioningTab, handleToggleProvider, }; } aa:T656f,/* * SSO provider edit hook. * @module use-sso-provider-edit / import { OrganizationDetailsFactory, OrganizationDetailsMappers, SsoProviderMappers, type IdpKnownResponse, type IdpId, type OrganizationPrivate, type UpdateIdentityProviderRequestContent, type CreateIdpProvisioningScimTokenRequestContent, type GetIdPProvisioningConfigResponseContent, getStatusCode, } from '@auth0/universal-components-core'; import { ssoProviderQueryKeys } from '@auth0/universal-components-core'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useCallback, useEffect, useMemo, useRef } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoProviderEditOptions, UseSsoProviderEditReturn, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; const ACTION_CANCELLED_ERROR = 'ACTION_CANCELLED'; const isActionCancelledError = (error: unknown): boolean => { return error instanceof Error && error.message === ACTION_CANCELLED_ERROR; }; export const ssoProviderEditQueryKeys = { all: ['sso-providers'] as const, list: () => [...ssoProviderEditQueryKeys.all, 'list'] as const, detail: (idpId: IdpId) => [...ssoProviderEditQueryKeys.all, 'detail', idpId] as const, organization: () => ['organization', 'details'] as const, provisioning: (idpId: IdpId) => [...ssoProviderEditQueryKeys.all, 'provisioning', idpId] as const, scimTokens: (idpId: IdpId) => [...ssoProviderEditQueryKeys.all, 'scim-tokens', idpId] as const, }; /* * Hook for editing SSO provider settings and provisioning. * @param idpId - Identity provider ID. * @param options - Hook options. * @param options.sso - SSO action callbacks. * @param options.provisioning - Provisioning action callbacks. * @param options.customMessages - Custom translation messages. * @returns Hook state and methods / export function useSsoProviderEdit( idpId: IdpId, { sso, provisioning, customMessages = {} }: Partial = {}, ): UseSsoProviderEditReturn { const { coreClient } = useCoreClient(); const { t } = useTranslator('idp_management.notifications', customMessages); const queryClient = useQueryClient(); const handleError = useErrorHandler(); const hasShownProviderError = useRef(false); const hasShownProvisioningError = useRef(false); const hasShownOrganizationError = useRef(false); /* * Provider query - fetches the identity provider details. * TanStack Query handles caching, loading states, and refetching. / const providerQuery = useQuery({ queryKey: ssoProviderEditQueryKeys.detail(idpId), queryFn: async (): Promise => { const response = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.get(idpId); return response; }, enabled: !!coreClient && !!idpId, }); /* * Organization query - fetches organization details. * Shared across the application, so it uses a common query key. / const organizationQuery = useQuery({ queryKey: ssoProviderEditQueryKeys.organization(), queryFn: async (): Promise => { const response = await coreClient!.getMyOrganizationApiClient().organizationDetails.get(); return OrganizationDetailsMappers.fromAPI(response); }, enabled: !!coreClient, initialData: OrganizationDetailsFactory.create(), }); /* * Provisioning config query - fetches provisioning configuration. * Returns null if provisioning is not configured (404). / const provisioningQuery = useQuery({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), queryFn: async (): Promise => { try { const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.get(idpId); return result; } catch (error) { const status = getStatusCode(error); if (status === 404) { return null; } throw error; } }, enabled: !!coreClient && !!idpId, }); useEffect(() => { if (providerQuery.isError && !hasShownProviderError.current) { handleError(providerQuery.error, { fallbackMessage: t('general_error') }); hasShownProviderError.current = true; } if (!providerQuery.isError) { hasShownProviderError.current = false; } }, [providerQuery.isError, providerQuery.error, t, handleError]); useEffect(() => { if (organizationQuery.isError && !hasShownOrganizationError.current) { handleError(organizationQuery.error, { fallbackMessage: t('general_error') }); hasShownOrganizationError.current = true; } if (!organizationQuery.isError) { hasShownOrganizationError.current = false; } }, [organizationQuery.error, organizationQuery.isError, t, handleError]); useEffect(() => { if (provisioningQuery.isError && !hasShownProvisioningError.current) { handleError(provisioningQuery.error, { fallbackMessage: t('general_error') }); hasShownProvisioningError.current = true; } if (!provisioningQuery.isError) { hasShownProvisioningError.current = false; } }, [provisioningQuery.isError, provisioningQuery.error, t, handleError]); /* * Update provider mutation - updates SSO provider configuration. / const updateProviderMutation = useMutation({ mutationFn: async (data: UpdateIdentityProviderRequestContent): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (sso?.updateAction?.onBefore) { const canProceed = sso.updateAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } const apiRequestData: UpdateIdentityProviderRequestContent = SsoProviderMappers.updateToAPI({ strategy: provider.strategy, ...data, }); const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.update(idpId, apiRequestData); return result; }, onSuccess: async (result, _variables) => { const provider = providerQuery.data; showToast({ type: 'success', message: t('update_success', { providerName: provider?.display_name }), }); // Update detail cache immediately with API response, invalidate list to refetch queryClient.setQueryData(ssoProviderEditQueryKeys.detail(idpId), result); await queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list(), }); if (sso?.updateAction?.onAfter && provider) { await sso.updateAction.onAfter(provider, result); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /* * Create provisioning mutation - enables provisioning for the provider. / const createProvisioningMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.createAction?.onBefore) { const canProceed = provisioning.createAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.create(idpId); return result; }, onSuccess: async (result) => { const provider = providerQuery.data; showToast({ type: 'success', message: t('update_success', { providerName: provider?.display_name }), }); // Invalidate queries to refetch fresh data await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); queryClient.setQueryData(ssoProviderEditQueryKeys.provisioning(idpId), result); if (provisioning?.createAction?.onAfter && provider) { await provisioning.createAction.onAfter(provider, result); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /* * Delete provisioning mutation - disables provisioning for the provider. / const deleteProvisioningMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.deleteAction?.onBefore) { const canProceed = provisioning.deleteAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.delete(idpId); }, onSuccess: async () => { const provider = providerQuery.data; showToast({ type: 'success', message: t('update_success', { providerName: provider?.display_name }), }); // Update cache to reflect deleted provisioning queryClient.setQueryData(ssoProviderEditQueryKeys.provisioning(idpId), null); await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); if (provisioning?.deleteAction?.onAfter && provider) { await provisioning.deleteAction.onAfter(provider); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /* * Create SCIM token mutation - generates a new SCIM token for provisioning. / const createScimTokenMutation = useMutation({ mutationFn: async (data: CreateIdpProvisioningScimTokenRequestContent) => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.createScimTokenAction?.onBefore) { const canProceed = provisioning.createScimTokenAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.scimTokens.create(idpId, data); return result; }, onSuccess: async (result) => { const provider = providerQuery.data; showToast({ type: 'success', message: t('scim_token_create_success'), }); // Invalidate SCIM tokens list to refetch await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.scimTokens(idpId), }); if (provisioning?.createScimTokenAction?.onAfter && provider) { await provisioning.createScimTokenAction.onAfter(provider, result); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /* * Delete SCIM token mutation - removes a SCIM token. / const deleteScimTokenMutation = useMutation({ mutationFn: async (idpScimTokenId: string): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.deleteScimTokenAction?.onBefore) { const canProceed = provisioning.deleteScimTokenAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.scimTokens.delete(idpId, idpScimTokenId); }, onSuccess: async () => { const provider = providerQuery.data; showToast({ type: 'success', message: t('scim_token_delete_sucess'), }); // Invalidate SCIM tokens list to refetch await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.scimTokens(idpId), }); if (provisioning?.deleteScimTokenAction?.onAfter && provider) { await provisioning.deleteScimTokenAction.onAfter(provider); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /* * Delete provider mutation - completely deletes the provider. / const deleteProviderMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider?.id) { throw new Error('Provider not loaded or missing ID'); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.delete(provider.id); }, onSuccess: async () => { const provider = providerQuery.data; showToast({ type: 'success', message: t('delete_success', { providerName: provider?.display_name }), }); // Remove all related queries from cache queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), }); queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.scimTokens(idpId), }); // Invalidate all queries from cache await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.all, }); if (sso?.deleteAction?.onAfter && provider) { await sso.deleteAction.onAfter(provider); } }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); /* * Detach provider mutation - removes provider from organization but doesn't delete it. / const detachProviderMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider?.id) { throw new Error('Provider not loaded or missing ID'); } if (sso?.deleteFromOrganizationAction?.onBefore) { const canProceed = sso.deleteFromOrganizationAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } // Ensure organization data is fresh before detaching await queryClient.ensureQueryData({ queryKey: ssoProviderEditQueryKeys.organization(), }); await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.detach(provider.id); }, onSuccess: async () => { const provider = providerQuery.data; const organization = organizationQuery.data; showToast({ type: 'success', message: t('remove_success', { providerName: provider?.display_name, organizationName: organization?.display_name, }), }); // Remove provider from cache to invalidate details queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); // Remove provider from cache to invalidate list await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.list() }); if (sso?.deleteFromOrganizationAction?.onAfter && provider) { await sso.deleteFromOrganizationAction.onAfter(provider); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); const fetchProvider = useCallback(async (): Promise => { if (!coreClient \|\| !idpId) { return null; } try { const data = await queryClient.ensureQueryData({ queryKey: ssoProviderEditQueryKeys.detail(idpId), queryFn: async () => { const response = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.get(idpId); return response; }, }); return data; } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); return null; } }, [coreClient, idpId, queryClient, t, handleError]); const fetchOrganizationDetails = useCallback(async (): Promise => { if (!coreClient) { return; } await queryClient.getQueryData(ssoProviderEditQueryKeys.organization()); }, [coreClient, queryClient]); const fetchProvisioning = useCallback(async (): Promise => { if (!coreClient \|\| !idpId) { return null; } try { const data = await queryClient.fetchQuery({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), queryFn: async () => { try { const result = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.provisioning.get(idpId); return result; } catch (error) { const status = getStatusCode(error); if (status === 404) { return null; } throw error; } }, }); return data; } catch (error) { const status = getStatusCode(error); if (status !== 404) { handleError(error, { fallbackMessage: t('general_error') }); } return null; } }, [coreClient, idpId, queryClient, t, handleError]); const updateProvider = useCallback( async (data: UpdateIdentityProviderRequestContent): Promise => { const provider = providerQuery.data; if (!coreClient \|\| !idpId \|\| !provider) { return; } try { await updateProviderMutation.mutateAsync(data); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, idpId, providerQuery.data, updateProviderMutation], ); const createProvisioning = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient \|\| !idpId \|\| !provider) { return; } try { await createProvisioningMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, createProvisioningMutation, idpId, providerQuery.data]); const deleteProvisioning = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient \|\| !idpId \|\| !provider) { return; } try { await deleteProvisioningMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, deleteProvisioningMutation, idpId, providerQuery.data]); /* * List SCIM tokens mutation - fetches SCIM tokens for provisioning. * Note: This uses imperative fetching rather than a query because tokens * are typically fetched on-demand and the response includes sensitive data * that shouldn't be automatically cached. / const listScimTokensMutation = useMutation({ mutationFn: async () => { if (!coreClient \|\| !idpId) { return null; } const result = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.provisioning.scimTokens.list(idpId); return result; }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); const listScimTokens = useCallback(async () => { try { return await listScimTokensMutation.mutateAsync(); } catch (error) { return null; } }, [listScimTokensMutation]); const createScimToken = useCallback( async (data: CreateIdpProvisioningScimTokenRequestContent) => { const provider = providerQuery.data; if (!coreClient \|\| !idpId \|\| !provider) { return undefined; } try { return await createScimTokenMutation.mutateAsync(data); } catch (error) { if (!isActionCancelledError(error)) { throw error; } return undefined; } }, [coreClient, createScimTokenMutation, idpId, providerQuery.data], ); const deleteScimToken = useCallback( async (idpScimTokenId: string): Promise => { const provider = providerQuery.data; if (!coreClient \|\| !idpId \|\| !provider) { return; } try { await deleteScimTokenMutation.mutateAsync(idpScimTokenId); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, deleteScimTokenMutation, idpId, providerQuery.data], ); const syncSsoAttributesMutation = useMutation({ mutationFn: async () => { await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.updateAttributes(idpId, {}); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); showToast({ type: 'success', message: t('sso_attributes_sync_success'), }); }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); const syncSsoAttributes = useCallback(async (): Promise => { if (!coreClient \|\| !idpId) { return; } await syncSsoAttributesMutation.mutateAsync(); }, [coreClient, idpId, syncSsoAttributesMutation]); const syncProvisioningAttributesMutation = useMutation({ mutationFn: async () => { await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.updateAttributes(idpId, {}); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), }); showToast({ type: 'success', message: t('provisioning_attributes_sync_success'), }); }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); const syncProvisioningAttributes = useCallback(async (): Promise => { if (!coreClient \|\| !idpId) { return; } await syncProvisioningAttributesMutation.mutateAsync(); }, [coreClient, idpId, syncProvisioningAttributesMutation]); const onDeleteConfirm = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient \|\| !provider?.id) { return; } try { await deleteProviderMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, deleteProviderMutation, providerQuery.data]); const onRemoveConfirm = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient \|\| !provider?.id) { return; } try { await detachProviderMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, detachProviderMutation, providerQuery.data]); const hasSsoAttributeSyncWarning = useMemo(() => { const provider = providerQuery.data; const attributes = provider && 'attributes' in provider ? (provider.attributes ?? []) : []; return attributes.some((attr) => attr.is_extra \|\| attr.is_missing); }, [providerQuery.data]); const hasProvisioningAttributeSyncWarning = useMemo(() => { const provisioningConfig = provisioningQuery.data; const attributes = provisioningConfig?.attributes ?? []; return attributes.some((attr) => attr.is_extra \|\| attr.is_missing); }, [provisioningQuery.data]); return { // Data from TanStack Query - single source of truth provider: providerQuery.data ?? null, organization: organizationQuery.data ?? OrganizationDetailsFactory.create(), provisioningConfig: provisioningQuery.data ?? null, // Loading states - all derived from TanStack Query isLoading: providerQuery.isLoading \|\| organizationQuery.isLoading, isUpdating: updateProviderMutation.isPending, isDeleting: deleteProviderMutation.isPending, isRemoving: detachProviderMutation.isPending, isProvisioningUpdating: createProvisioningMutation.isPending, isProvisioningDeleting: deleteProvisioningMutation.isPending, isProvisioningLoading: provisioningQuery.isLoading \|\| provisioningQuery.isFetching, isScimTokensLoading: listScimTokensMutation.isPending, isScimTokenCreating: createScimTokenMutation.isPending, isScimTokenDeleting: deleteScimTokenMutation.isPending, isSsoAttributesSyncing: syncSsoAttributesMutation.isPending, isProvisioningAttributesSyncing: syncProvisioningAttributesMutation.isPending, // Warning states hasSsoAttributeSyncWarning, hasProvisioningAttributeSyncWarning, // Actions fetchProvider, fetchOrganizationDetails, fetchProvisioning, updateProvider, createProvisioning, deleteProvisioning, listScimTokens, createScimToken, deleteScimToken, syncSsoAttributes, syncProvisioningAttributes, onDeleteConfirm, onRemoveConfirm, }; } ab: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; }; ac: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], ); } ad: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; }; ae: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, }; } af: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; b0: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} ); } b1: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; b2: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} ); }; b3: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; }; b4:T128e,/* * Domain table types. * @module domain-table-types / import type { SharedComponentProps, IdpKnownResponse, DomainCreateMessages, DomainCreateSchemas, ComponentAction, Domain, DomainDeleteMessages, DomainConfigureMessages, DomainVerifyMessages, DomainTableMessages, CreateOrganizationDomainRequestContent, EnhancedTranslationFunction, IdentityProviderAssociatedWithDomain, } from '@auth0/universal-components-core'; export type { Domain }; /* CSS classes for DomainTable. / export interface DomainTableClasses { 'DomainTable-header'?: string; 'DomainTable-table'?: string; 'DomainTable-createModal'?: string; 'DomainTable-configureModal'?: string; 'DomainTable-deleteModal'?: string; } /* DomainTable translation messages. / export interface DomainTableMainMessages extends DomainTableMessages { create: DomainCreateMessages; configure: DomainConfigureMessages; verify: DomainVerifyMessages; delete: DomainDeleteMessages; } /* DomainTable validation schemas. / export interface DomainTableSchema { create?: DomainCreateSchemas; } /* Props for DomainTable component. / export interface DomainTableProps extends SharedComponentProps { hideHeader?: boolean; createAction?: ComponentAction; verifyAction?: ComponentAction; deleteAction?: ComponentAction; associateToProviderAction?: ComponentAction; deleteFromProviderAction?: ComponentAction; onOpenProvider?: (provider: IdpKnownResponse) => void; onCreateProvider?: () => void; } // DomainTableView component props export interface DomainTableViewProps { logic: UseDomainTableResult & DomainTableProps; handlers: UseDomainTableLogicResult; } /* Props for DomainTable actions column. / export interface DomainTableActionsColumnProps { customMessages?: Partial; readOnly: boolean; domain: Domain; onView: (domain: Domain) => void; onConfigure: (domain: Domain) => void; onVerify: (domain: Domain) => void; onDelete: (domain: Domain) => void; } export interface UseDomainTableOptions { createAction?: DomainTableProps['createAction']; verifyAction?: DomainTableProps['verifyAction']; deleteAction?: DomainTableProps['deleteAction']; associateToProviderAction?: DomainTableProps['associateToProviderAction']; deleteFromProviderAction?: DomainTableProps['deleteFromProviderAction']; customMessages?: DomainTableProps['customMessages']; } export interface UseDomainTableResult extends SharedComponentProps { domains: Domain[]; providers: IdentityProviderAssociatedWithDomain[]; isFetching: boolean; isLoadingProviders: boolean; isCreating: boolean; isDeleting: boolean; isVerifying: boolean; fetchProviders: (domain: Domain) => Promise; fetchDomains: () => Promise; onCreateDomain: (data: CreateOrganizationDomainRequestContent) => Promise; onVerifyDomain: (data: Domain) => Promise; onDeleteDomain: (domain: Domain) => Promise; onAssociateToProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; onDeleteFromProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; } export interface UseDomainTableLogicOptions { t: EnhancedTranslationFunction; onCreateDomain: UseDomainTableResult['onCreateDomain']; onVerifyDomain: UseDomainTableResult['onVerifyDomain']; onDeleteDomain: UseDomainTableResult['onDeleteDomain']; onAssociateToProvider: UseDomainTableResult['onAssociateToProvider']; onDeleteFromProvider: UseDomainTableResult['onDeleteFromProvider']; fetchProviders: UseDomainTableResult['fetchProviders']; fetchDomains: UseDomainTableResult['fetchDomains']; } export interface UseDomainTableLogicResult { // Modal state showCreateModal: boolean; showConfigureModal: boolean; showVerifyModal: boolean; showDeleteModal: boolean; verifyError: string \| undefined; selectedDomain: Domain \| null; // State setters setShowCreateModal: (show: boolean) => void; setShowConfigureModal: (show: boolean) => void; setShowVerifyModal: (show: boolean) => void; setShowDeleteModal: (show: boolean) => void; // Handlers handleCreate: (domainUrl: string) => Promise; handleVerify: (domain: Domain) => Promise; handleDelete: (domain: Domain) => void; handleToggleSwitch: (domain: Domain, provider: IdpKnownResponse, checked: boolean) => void; handleCloseVerifyModal: () => void; handleCreateClick: () => void; handleConfigureClick: (domain: Domain) => void; handleVerifyClick: (domain: Domain) => Promise; handleDeleteClick: (domain: Domain) => void; } b5:Tac0,/* * SSO domain tab types. * @module sso-domain-tab-types / import type { ComponentAction, Domain, DomainCreateSchemas, IdpKnownResponse, SharedComponentProps, SsoDomainTabMessages, } from '@auth0/universal-components-core'; /* SSO domains tab edit action props. / export interface SsoDomainsTabEditProps { createAction?: ComponentAction; verifyAction?: ComponentAction; deleteAction?: ComponentAction; associateToProviderAction?: ComponentAction; deleteFromProviderAction?: ComponentAction; } /* CSS classes for SsoDomainsTab. / export interface SsoDomainTabClasses { 'SsoDomainsTab-header'?: string; 'SsoDomainsTab-table'?: string; 'SsoDomainsTab-createModal'?: string; 'SsoDomainsTab-verifyModal'?: string; 'SsoDomainsTab-deleteModal'?: string; } /* SSO provider edit domains tab schema. / export interface SsoProviderEditDomainsTabSchema { create: DomainCreateSchemas; } /* Props for SsoDomainsTab component. / export interface SsoDomainsTabProps extends SharedComponentProps< SsoDomainTabMessages, SsoDomainTabClasses, SsoProviderEditDomainsTabSchema > { domains: SsoDomainsTabEditProps \| undefined; idpId: string; provider: IdpKnownResponse \| null; } export interface SsoDomainTabActionColumn extends SharedComponentProps< SsoDomainTabMessages, SsoDomainTabClasses, SsoProviderEditDomainsTabSchema > { translatorKey?: string; idpDomains: string[]; domain: Domain; handleVerify: (domain: Domain) => Promise; isUpdating: boolean; isUpdatingId: string \| null; onToggle: (domain: Domain, newCheckedValue: boolean) => Promise; } export interface UseSsoDomainTabOptions extends SharedComponentProps { domains: SsoDomainsTabEditProps; provider: IdpKnownResponse \| null; } export interface UseSsoDomainTabReturn { domainsList: Domain[]; isLoading: boolean; showCreateModal: boolean; isCreating: boolean; selectedDomain: Domain \| null; showVerifyModal: boolean; showDeleteModal: boolean; isVerifying: boolean; verifyError: string \| undefined; isDeleting: boolean; idpDomains: string[]; isUpdating: boolean; isUpdatingId: string \| null; setShowCreateModal: (show: boolean) => void; handleCreate: (domainUrl: string) => Promise; handleCloseVerifyModal: () => void; handleVerify: (domain: Domain) => Promise; handleDeleteClick: (domain: Domain) => void; setShowDeleteModal: (show: boolean) => void; handleDelete: (domain: Domain) => void; handleVerifyActionColumn: (domain: Domain) => Promise; handleToggleSwitch: (domain: Domain, newCheckedValue: boolean) => Promise; } b6:T1829,/* * SSO provider create types. * @module sso-provider-create-types / import type { SharedComponentProps, ProviderSelectMessages, ProviderDetailsMessages, IdpStrategy, ProviderSelectionFormValues, IdpKnownResponse, ProviderConfigureMessages, ProviderConfigureFieldsMessages, SsoProviderCreateMessages, ProviderDetailsFormValues, ProviderConfigureFormValues, SsoProviderFormValues, SsoProviderSchema, ComponentAction, BackButton, CreateIdentityProviderRequestContentPrivate, GetIdpConfigurationResponseContent, } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import type React from 'react'; import type { UseFormReturn } from 'react-hook-form'; export interface ProviderConfigureHandle { validate: () => Promise; getData: () => ProviderConfigureFormValues; } export interface ProviderDetailsFormHandle { validate: () => Promise; getData: () => ProviderDetailsFormValues; isDirty: () => boolean; reset: (data?: ProviderDetailsFormValues) => void; } /* Form mode for provider configuration. / export type FormMode = 'create' \| 'edit'; /* CSS classes for SsoProviderCreate. / export interface SsoProviderCreateClasses { 'SsoProviderCreate-header'?: string; 'SsoProviderCreate-wizard'?: string; 'ProviderSelect-root'?: string; 'ProviderDetails-root'?: string; 'ProviderConfigure-root'?: string; } /* Props for ProviderSelect component. / export interface ProviderSelectProps extends SharedComponentProps { isLoading: boolean; strategyList: IdpStrategy[]; onClickStrategy: (strategy: IdpStrategy) => void; selectedStrategy?: IdpStrategy \| null; form?: UseFormReturn; className?: string; } /* Props for ProviderDetails component. / export interface ProviderDetailsProps extends SharedComponentProps { initialData?: Partial; className?: string; hideHeader?: boolean; mode: 'edit' \| 'create'; onFormDirty?: (isDirty: boolean) => void; } /* Props for ProviderConfigure component. / export interface ProviderConfigureProps extends SharedComponentProps { className?: string; isLoading: boolean; strategy: IdpStrategy; initialData?: Partial; idpConfig: GetIdpConfigurationResponseContent \| null; } export interface ProviderConfigureFieldsProps extends SharedComponentProps { strategy: IdpStrategy; initialData?: Partial; className?: string; onFormDirty?: (isDirty: boolean) => void; idpConfig: GetIdpConfigurationResponseContent \| null; mode?: FormMode; } export interface SsoProviderCreateBackButton extends Omit { icon?: LucideIcon; onClick: (e: React.MouseEvent) => void; } export interface SsoProviderCreateProps extends SharedComponentProps< SsoProviderCreateMessages, SsoProviderCreateClasses, SsoProviderSchema > { createAction: ComponentAction; backButton?: SsoProviderCreateBackButton; onPrevious?: (stepId: string, values: Partial) => boolean; onNext?: (stepId: string, values: Partial) => boolean; } export interface UseSsoProviderCreateOptions { createAction?: SsoProviderCreateProps['createAction']; customMessages?: SsoProviderCreateProps['customMessages']; } export interface UseSsoProviderCreateLogicOptions { onNext?: SsoProviderCreateProps['onNext']; onPrevious?: SsoProviderCreateProps['onPrevious']; createProvider: (data: CreateIdentityProviderRequestContentPrivate) => Promise; } export interface UseSsoProviderCreateLogicResult { formData: FormState; setFormData: React.Dispatch>; detailsRef: React.RefObject; configureRef: React.RefObject; handleCreate: () => Promise; isLoadingConfig: boolean; filteredStrategies: IdpStrategy[]; isLoadingIdpConfig: boolean; idpConfig?: GetIdpConfigurationResponseContent \| null; createStepActions: ( stepId: 'provider_details' \| 'provider_configure', ref: React.RefObject, ) => { onNextAction: () => Promise; onPreviousAction: () => Promise; }; } export type FormState = { strategy?: IdpStrategy; details?: ProviderDetailsFormValues \| null; configure?: ProviderConfigureFormValues \| null; }; export type SsoProviderCreateViewProps = { logic: SsoProviderCreateLogicProps; handlers: SsoProviderCreateHandlerProps; }; export interface SsoProviderCreateLogicProps { formData: FormState; strategy?: IdpStrategy; details?: ProviderDetailsFormValues \| null; configure?: ProviderConfigureFormValues \| null; isCreating: boolean; isLoadingConfig: boolean; filteredStrategies: IdpStrategy[]; isLoadingIdpConfig: boolean; idpConfig?: GetIdpConfigurationResponseContent \| null; styling?: SsoProviderCreateProps['styling']; customMessages?: SsoProviderCreateProps['customMessages']; backButton?: SsoProviderCreateProps['backButton']; } export interface SsoProviderCreateHandlerProps { onNext: ((stepId: string, values: Partial) => boolean) \| undefined; onPrevious: ((stepId: string, values: Partial) => boolean) \| undefined; setFormData: React.Dispatch>; detailsRef: React.RefObject; configureRef: React.RefObject; handleCreate: () => Promise; createStepActions: ( stepId: 'provider_details' \| 'provider_configure', ref: React.RefObject, ) => { onNextAction: () => Promise; onPreviousAction: () => Promise; }; } b7: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; } b8:T195f,/* * SSO provider edit types. * @module sso-provider-edit-types / import type { SharedComponentProps, BackButton, SsoProviderEditMessages, IdpKnownResponse, IdpId, OrganizationPrivate, UpdateIdentityProviderRequestContentPrivate, CreateIdpProvisioningScimTokenResponseContent, CreateIdpProvisioningScimTokenRequestContent, ListIdpProvisioningScimTokensResponseContent, GetIdPProvisioningConfigResponseContent, SsoProviderAttributeMappingsMessages, IdpProvisioningUserAttributeMapItem, IdpUserAttributeMapItem, IdpStrategy, AttributeSyncAlertMessages, GetIdpConfigurationResponseContent, } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import type React from 'react'; import type { SsoDomainsTabEditProps, SsoDomainTabClasses, SsoProviderEditDomainsTabSchema, } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types'; import type { SsoProviderTabClasses, SsoProviderTabEditProps, SsoProviderTabSchemas, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-tab-types'; import type { SsoProvisioningTabClasses, SsoProvisioningTabEditProps, SsoProvisioningTabSchemas, } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types'; /* Back button for SSO provider edit. / export interface SsoProviderEditBackButton extends Omit { icon?: LucideIcon; onClick: (e: React.MouseEvent) => void; } /* CSS classes for SsoProviderEdit. / export interface SsoProviderEditClasses extends SsoProviderTabClasses, SsoProvisioningTabClasses, SsoDomainTabClasses { 'SsoProviderEdit-header'?: string; 'SsoProviderEdit-tabs'?: string; } /* SSO provider edit schemas. / export interface SsoProviderEditSchema { provider: SsoProviderTabSchemas; provisioning: SsoProvisioningTabSchemas; domains?: SsoProviderEditDomainsTabSchema; } /* Props for SsoProviderEdit component. / export interface SsoProviderEditProps extends SharedComponentProps< SsoProviderEditMessages, SsoProviderEditClasses, SsoProviderEditSchema > { hideHeader?: boolean; providerId: IdpId; sso?: SsoProviderTabEditProps; provisioning?: SsoProvisioningTabEditProps; domains?: SsoDomainsTabEditProps; backButton?: SsoProviderEditBackButton; } /* useSsoProviderEdit options. / export interface UseSsoProviderEditOptions extends SharedComponentProps { sso?: SsoProviderTabEditProps; provisioning?: SsoProvisioningTabEditProps; domains?: SsoDomainsTabEditProps; } export interface UseSsoProviderEditReturn { provider: IdpKnownResponse \| null; organization: OrganizationPrivate \| null; provisioningConfig: GetIdPProvisioningConfigResponseContent \| null; isLoading: boolean; isUpdating: boolean; isDeleting: boolean; isRemoving: boolean; isProvisioningUpdating: boolean; isProvisioningDeleting: boolean; isProvisioningLoading: boolean; isScimTokensLoading: boolean; isScimTokenCreating: boolean; isScimTokenDeleting: boolean; isSsoAttributesSyncing: boolean; isProvisioningAttributesSyncing: boolean; hasSsoAttributeSyncWarning: boolean; hasProvisioningAttributeSyncWarning: boolean; fetchProvider: () => Promise; fetchOrganizationDetails: () => Promise; fetchProvisioning: () => Promise; updateProvider: (data: UpdateIdentityProviderRequestContentPrivate) => Promise; createProvisioning: () => Promise; deleteProvisioning: () => Promise; listScimTokens: () => Promise; createScimToken: ( data: CreateIdpProvisioningScimTokenRequestContent, ) => Promise; deleteScimToken: (idpScimTokenId: string) => Promise; syncSsoAttributes: () => Promise; syncProvisioningAttributes: () => Promise; onDeleteConfirm: () => Promise; onRemoveConfirm: () => Promise; } export interface SsoProviderAttributeMappingsProps extends SharedComponentProps { userAttributeMap: IdpProvisioningUserAttributeMapItem[] \| IdpUserAttributeMapItem[] \| null; strategy: IdpStrategy \| null; isProvisioning?: boolean; className?: string; } export interface SsoProviderAttributeSyncAlertProps { translatorKey?: string; className?: string; onSync?: () => void \| Promise; isSyncing?: boolean; customMessages?: Partial; } export type SsoProviderEditViewProps = { logic: SsoProviderEditLogicProps; handlers: SsoProviderEditHandlerProps; }; export interface SsoProviderEditLogicProps extends SsoProviderEditProps, Omit< UseSsoProviderEditLogicResult, 'handleToggleProvider' \| 'isLoadingConfig' \| 'isLoadingIdpConfig' >, Pick< UseSsoProviderEditReturn, \| 'provider' \| 'organization' \| 'isLoading' \| 'isUpdating' \| 'isDeleting' \| 'isRemoving' \| 'isProvisioningUpdating' \| 'isProvisioningDeleting' \| 'isScimTokensLoading' \| 'isScimTokenCreating' \| 'isScimTokenDeleting' \| 'isSsoAttributesSyncing' \| 'isProvisioningAttributesSyncing' \| 'hasSsoAttributeSyncWarning' \| 'hasProvisioningAttributeSyncWarning' > {} export interface SsoProviderEditHandlerProps { updateProvider: (data: UpdateIdentityProviderRequestContentPrivate) => Promise; createProvisioningAction: () => Promise; deleteProvisioningAction: () => Promise; listScimTokens: () => Promise; createScimTokenAction: ( data: CreateIdpProvisioningScimTokenRequestContent, ) => Promise; deleteScimTokenAction: (idpScimTokenId: string) => Promise; syncSsoAttributes: () => Promise; syncProvisioningAttributes: () => Promise; onDeleteConfirm: () => Promise; onRemoveConfirm: () => Promise; handleToggleProvider: (enabled: boolean) => Promise; } export interface UseSsoProviderEditLogicResult { shouldAllowDeletion: boolean; isLoadingConfig: boolean; idpConfig: GetIdpConfigurationResponseContent \| null; isLoadingIdpConfig: boolean; showProvisioningTab: boolean; handleToggleProvider: (enabled: boolean) => Promise; } b9:Tcb4,/* * SSO provider tab types. * @module sso-provider-tab-types / import type { SharedComponentProps, IdpKnownResponse, OrganizationPrivate, UpdateIdentityProviderRequestContentPrivate, SsoProviderTabMessages, SsoProviderDetailsMessages, SsoProviderDetailsSchema, ComponentAction, GetIdpConfigurationResponseContent, } from '@auth0/universal-components-core'; import type { FormActionsProps } from '@/components/auth0/shared/form-actions'; import type { SsoProviderCreateClasses } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; import type { SsoProviderDeleteClasses, SsoProviderRemoveClasses, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types'; /* SSO provider tab edit action props. / export interface SsoProviderTabEditProps { updateAction?: ComponentAction; deleteAction: ComponentAction; deleteFromOrganizationAction: ComponentAction; } /* CSS classes for SsoProviderTab. / export interface SsoProviderTabClasses extends SsoProviderDetailsClasses, SsoProviderDeleteClasses, SsoProviderRemoveClasses { 'SsoProviderAttributeSyncAlert-root'?: string; } /* Form actions for SSO provider details. / export interface SsoProviderDetailsFormActions extends Omit { nextAction?: { disabled: boolean; onClick?: (data: UpdateIdentityProviderRequestContentPrivate) => Promise; }; } /* SSO provider tab schemas. / export interface SsoProviderTabSchemas extends SsoProviderDetailsSchema {} /* Props for SsoProviderTab component. / export interface SsoProviderTabProps extends SharedComponentProps< SsoProviderTabMessages, SsoProviderTabClasses, SsoProviderTabSchemas > { formActions: SsoProviderDetailsFormActions; idpConfig: GetIdpConfigurationResponseContent \| null; shouldAllowDeletion: boolean; provider: IdpKnownResponse \| null; onDelete: (provider: IdpKnownResponse) => Promise; onRemove: (provider: IdpKnownResponse) => Promise; organization: OrganizationPrivate \| null; isDeleting: boolean; isRemoving: boolean; hasSsoAttributeSyncWarning?: boolean; onAttributeSync?: () => void \| Promise; isSyncingAttributes?: boolean; } export interface ProviderDetailsClasses extends Omit< SsoProviderCreateClasses, 'SsoProviderCreate-header' \| 'SsoProviderCreate-wizard' \| 'ProviderSelect-root' > {} export interface ProviderConfigureFieldsClasses extends Omit< SsoProviderCreateClasses, 'SsoProviderCreate-header' \| 'SsoProviderCreate-wizard' \| 'ProviderSelect-root' > {} export interface SsoProviderDetailsClasses { 'SsoProviderDetails-formActions'?: string; 'ProviderDetails-root'?: string; 'ProviderConfigure-root'?: string; 'SsoProvider-attributeMapping'?: string; 'SsoProviderDetails-FormActions'?: string; } export interface SsoProviderDetailsProps extends SharedComponentProps { provider: IdpKnownResponse; idpConfig: GetIdpConfigurationResponseContent \| null; readOnly?: boolean; formActions?: SsoProviderDetailsFormActions; } ba:T791,/* * Provisioning manage token types. * @module provisioning-manage-token-types / import type { SharedComponentProps, ProvisioningManageTokenMessages, ListIdpProvisioningScimTokensResponseContent, CreateIdpProvisioningScimTokenRequestContent, CreateIdpProvisioningScimTokenResponseContent, ProvisioningDeleteTokenModalMessages, ProvisioningCreateTokenModalMessages, } from '@auth0/universal-components-core'; /* CSS classes for ProvisioningManageToken. / export interface ProvisioningManageTokenClasses { 'ProvisioningManageToken-root'?: string; 'ProvisioningManageToken-header'?: string; 'ProvisioningManageToken-table'?: string; 'ProvisioningManageToken-emptyState'?: string; } /* Props for ProvisioningManageToken component. / export interface ProvisioningManageTokenProps extends SharedComponentProps { isScimTokensLoading: boolean; isScimTokenCreating: boolean; isScimTokenDeleting: boolean; onListScimTokens: () => Promise; onCreateScimToken: ( data: CreateIdpProvisioningScimTokenRequestContent, ) => Promise; onDeleteScimToken: (idpScimTokenId: string) => Promise; } /* Props for ProvisioningDeleteTokenModal. / export interface ProvisioningDeleteTokenModalProps extends SharedComponentProps { open: boolean; isLoading: boolean; onOpenChange: (open: boolean) => void; tokenId: string \| null; onConfirm: () => void; } /* Props for ProvisioningCreateTokenModal. / export interface ProvisioningCreateTokenModalProps extends SharedComponentProps { open: boolean; isLoading: boolean; onOpenChange: (open: boolean) => void; createdToken: CreateIdpProvisioningScimTokenResponseContent \| null; } bb:Tdba,/* * SSO provisioning tab types. * @module sso-provisioning-tab-types / import type { SharedComponentProps, SsoProvisioningTabMessages, IdpKnownResponse, CreateIdpProvisioningScimTokenRequestContent, ListIdpProvisioningScimTokensResponseContent, CreateIdpProvisioningScimTokenResponseContent, SsoProvisioningDetailsMessages, GetIdPProvisioningConfigResponseContent, SsoProvisioningDeleteMessages, ComponentAction, CreateIdPProvisioningConfigResponseContent, } from '@auth0/universal-components-core'; import type { ProvisioningManageTokenClasses } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types'; /* SSO provisioning tab edit action props. / export interface SsoProvisioningTabEditProps { createAction?: ComponentAction; deleteAction?: ComponentAction; createScimTokenAction?: ComponentAction< IdpKnownResponse, CreateIdpProvisioningScimTokenResponseContent >; deleteScimTokenAction?: ComponentAction; } /* CSS classes for SsoProvisioningTab. / export interface SsoProvisioningTabClasses { 'SsoProvisioningTab-root'?: string; 'SsoProvisioningDetails-root'?: string; 'SsoProvisioning-attributeMapping'?: string; 'SsoProvisioningDetails-formActions'?: string; 'SsoProviderAttributeSyncAlert-root'?: string; } /* Props for SsoProvisioningTab component. / export interface SsoProvisioningTabProps extends SharedComponentProps { provider: IdpKnownResponse; isProvisioningUpdating: boolean; isProvisioningDeleting: boolean; isScimTokensLoading: boolean; isScimTokenCreating: boolean; isScimTokenDeleting: boolean; onCreateProvisioning: () => Promise; onDeleteProvisioning: () => Promise; onListScimTokens: () => Promise; onCreateScimToken: ( data: CreateIdpProvisioningScimTokenRequestContent, ) => Promise; onDeleteScimToken: (idpScimTokenId: string) => Promise; hasProvisioningAttributeSyncWarning?: boolean; onAttributeSync?: () => void \| Promise; isSyncingAttributes?: boolean; } export interface SsoProvisioningTabSchemas {} export interface SsoProvisioningDetailsClasses extends ProvisioningManageTokenClasses { 'SsoProvisioningDetails-root'?: string; 'SsoProvisioningDetails-formActions'?: string; 'SsoProvisioning-attributeMapping'?: string; } export interface SsoProvisioningDeleteModalProps extends SharedComponentProps { open: boolean; isLoading: boolean; onOpenChange: (open: boolean) => void; onConfirm: () => void; } export interface SsoProvisioningDetailsProps extends SharedComponentProps< SsoProvisioningDetailsMessages, SsoProvisioningDetailsClasses, SsoProvisioningTabSchemas > { provider: IdpKnownResponse; provisioningConfig: GetIdPProvisioningConfigResponseContent \| null; isScimTokensLoading: boolean; isScimTokenCreating: boolean; isScimTokenDeleting: boolean; onListScimTokens: () => Promise; onCreateScimToken: ( data: CreateIdpProvisioningScimTokenRequestContent, ) => Promise; onDeleteScimToken: (idpScimTokenId: string) => Promise; } bc: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; 64:["$","$L66",null,{"files":[{"path":"src/components/auth0/my-organization/sso-provider-edit.tsx","content":"$67","type":"registry:block","target":"components/auth0/my-organization/sso-provider-edit.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx","content":"$68","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx","content":"$69","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx","content":"$6a","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx","content":"$6b","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields.tsx","content":"$6c","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx","content":"$6d","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx","content":"$6e","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx","content":"$6f","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx","content":"$70","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields.tsx","content":"$71","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx","content":"$72","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx","content":"$73","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx","content":"$74","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx","content":"$75","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":"$76","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-delete/provider-delete.tsx","content":"$77","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column.tsx","content":"$78","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab.tsx","content":"$79","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings.tsx","content":"$7a","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert.tsx","content":"$7b","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-details.tsx","content":"$7c","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-details.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab.tsx","content":"$7d","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/provisioning-manage-token.tsx","content":"$7e","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/provisioning-manage-token.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal-content.tsx","content":"$7f","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal-content.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal.tsx","content":"$80","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-modal.tsx","content":"$81","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal-content.tsx","content":"$82","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal-content.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal.tsx","content":"$83","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx","content":"$84","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab.tsx","content":"$85","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx","content":"$86","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-remove/provider-remove.tsx","content":"$87","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove.tsx"},{"path":"src/components/auth0/shared/copyable-text-field.tsx","content":"$88","type":"registry:component","target":"components/auth0/shared/copyable-text-field.tsx"},{"path":"src/components/auth0/shared/data-table.tsx","content":"$89","type":"registry:component","target":"components/auth0/shared/data-table.tsx"},{"path":"src/components/auth0/shared/form-actions.tsx","content":"$8a","type":"registry:component","target":"components/auth0/shared/form-actions.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$8b","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/header.tsx","content":"$8c","type":"registry:component","target":"components/auth0/shared/header.tsx"},{"path":"src/components/auth0/shared/mapping.tsx","content":"$8d","type":"registry:component","target":"components/auth0/shared/mapping.tsx"},{"path":"src/components/auth0/shared/middle-ellipsis-text.tsx","content":"$8e","type":"registry:component","target":"components/auth0/shared/middle-ellipsis-text.tsx"},{"path":"src/components/auth0/shared/section.tsx","content":"$8f","type":"registry:component","target":"components/auth0/shared/section.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":"$90","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$91","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/ui/accordion.tsx","content":"$92","type":"registry:component","target":"components/ui/accordion.tsx"},{"path":"src/components/ui/alert.tsx","content":"$93","type":"registry:component","target":"components/ui/alert.tsx"},{"path":"src/components/ui/badge.tsx","content":"$94","type":"registry:component","target":"components/ui/badge.tsx"},{"path":"src/components/ui/button.tsx","content":"$95","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$96","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/checkbox.tsx","content":"$97","type":"registry:component","target":"components/ui/checkbox.tsx"},{"path":"src/components/ui/dialog.tsx","content":"$98","type":"registry:component","target":"components/ui/dialog.tsx"},{"path":"src/components/ui/file-upload.tsx","content":"$99","type":"registry:component","target":"components/ui/file-upload.tsx"},{"path":"src/components/ui/form.tsx","content":"$9a","type":"registry:component","target":"components/ui/form.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/link.tsx","content":"$9b","type":"registry:component","target":"components/ui/link.tsx"},{"path":"src/components/ui/modal.tsx","content":"$9c","type":"registry:component","target":"components/ui/modal.tsx"},{"path":"src/components/ui/radio-group.tsx","content":"$9d","type":"registry:component","target":"components/ui/radio-group.tsx"},{"path":"src/components/ui/select.tsx","content":"$9e","type":"registry:component","target":"components/ui/select.tsx"},{"path":"src/components/ui/separator.tsx","content":"/*\n Visual separator component.\n * @module separator\n * @internal\n /\n\nimport as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Separator({\n className,\n orientation = 'horizontal',\n decorative = true,\n ...props\n}: React.ComponentProps<'hr'> & { orientation?: 'horizontal' \| 'vertical'; decorative?: boolean }) {\n return (\n \n );\n}\n\nexport { Separator };\n","type":"registry:component","target":"components/ui/separator.tsx"},{"path":"src/components/ui/spinner.tsx","content":"$9f","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/switch.tsx","content":"$a0","type":"registry:component","target":"components/ui/switch.tsx"},{"path":"src/components/ui/table.tsx","content":"$a1","type":"registry:component","target":"components/ui/table.tsx"},{"path":"src/components/ui/tabs.tsx","content":"$a2","type":"registry:component","target":"components/ui/tabs.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$a3","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/toggle.tsx","content":"$a4","type":"registry:component","target":"components/ui/toggle.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$a5","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-organization/use-config.ts","content":"$a6","type":"registry:component","target":"hooks/my-organization/use-config.ts"},{"path":"src/hooks/my-organization/use-idp-config.ts","content":"$a7","type":"registry:component","target":"hooks/my-organization/use-idp-config.ts"},{"path":"src/hooks/my-organization/use-provider-form-mode.ts","content":"/*\n Provider form mode configuration hook.\n * @module use-provider-form-mode\n /\n\nimport { useMemo } from 'react';\n\nimport type { FormMode } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\n/\n Hook to determine form behavior based on create/edit mode.\n * @param mode - Form mode.\n * @returns Form mode configuration.\n /\nexport const useProviderFormMode = (mode: FormMode = 'create') => {\n return useMemo(\n () => ({\n showCopyButtons: mode === 'edit',\n }),\n [mode],\n );\n};\n","type":"registry:component","target":"hooks/my-organization/use-provider-form-mode.ts"},{"path":"src/hooks/my-organization/use-sso-domain-tab.ts","content":"$a8","type":"registry:component","target":"hooks/my-organization/use-sso-domain-tab.ts"},{"path":"src/hooks/my-organization/use-sso-provider-edit-logic.ts","content":"$a9","type":"registry:component","target":"hooks/my-organization/use-sso-provider-edit-logic.ts"},{"path":"src/hooks/my-organization/use-sso-provider-edit.ts","content":"$aa","type":"registry:component","target":"hooks/my-organization/use-sso-provider-edit.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$ab","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":"$ac","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":"$ad","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$ae","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":"$af","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$b0","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$b1","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$b2","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$b3","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/domain-management/domain-create-types.ts","content":"/\n Domain create modal types.\n * @module domain-create-types\n /\n\nimport type { DomainCreateMessages, DomainCreateSchemas } from '@auth0/universal-components-core';\n\n/* Props for DomainCreateModal. /\nexport interface DomainCreateModalProps {\n translatorKey?: string;\n className?: string;\n customMessages?: Partial;\n schema?: DomainCreateSchemas;\n isOpen: boolean;\n isLoading: boolean;\n onClose: () => void;\n onCreate: (domainName: string) => void \| Promise;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-create-types.ts"},{"path":"src/types/my-organization/domain-management/domain-delete-types.ts","content":"/\n Domain delete modal types.\n * @module domain-delete-types\n /\n\nimport type { Domain, DomainDeleteMessages } from '@auth0/universal-components-core';\n\n/* Props for DomainDeleteModal. /\nexport interface DomainDeleteModalProps {\n translatorKey?: string;\n className?: string;\n customMessages?: Partial;\n domain: Domain \| null;\n isOpen: boolean;\n isLoading: boolean;\n onClose: () => void;\n onDelete: (domain: Domain) => void;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-delete-types.ts"},{"path":"src/types/my-organization/domain-management/domain-table-types.ts","content":"$b4","type":"registry:component","target":"types/my-organization/domain-management/domain-table-types.ts"},{"path":"src/types/my-organization/domain-management/domain-verify-types.ts","content":"/\n Domain verification modal types.\n * @module domain-verify-types\n /\n\nimport type { DomainVerifyMessages, Domain } from '@auth0/universal-components-core';\n\n/* Props for DomainVerifyModal. /\nexport interface DomainVerifyModalProps {\n translatorKey?: string;\n isOpen: boolean;\n isLoading?: boolean;\n domain: Domain \| null;\n error?: string;\n onClose: () => void;\n onVerify: (domain: Domain) => void;\n onDelete: (domain: Domain) => void;\n className?: string;\n customMessages?: Partial;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-verify-types.ts"},{"path":"src/types/my-organization/idp-management/sso-domain/sso-domain-tab-types.ts","content":"$b5","type":"registry:component","target":"types/my-organization/idp-management/sso-domain/sso-domain-tab-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-create-types.ts","content":"$b6","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-create-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-delete-types.ts","content":"$b7","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-edit-types.ts","content":"$b8","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-edit-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-tab-types.ts","content":"$b9","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-tab-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types.ts","content":"$ba","type":"registry:component","target":"types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provisioning/provisioning-token-types.ts","content":"/\n Provisioning token modal content types.\n * @module provisioning-token-types\n /\n\nimport type {\n SharedComponentProps,\n ProvisioningCreateTokenModalContentMessages,\n ProvisioningDeleteTokenModalContentMessages,\n} from '@auth0/universal-components-core';\n\n/* CSS classes for provisioning token components. /\nexport interface ProvisioningTokenClasses {\n 'ProvisioningToken-root'?: string;\n 'ProvisioningCreateTokenModal-root'?: string;\n}\n\n/* Props for ProvisioningCreateTokenModalContent. /\nexport interface ProvisioningCreateTokenModalContentProps\n extends SharedComponentProps<\n ProvisioningCreateTokenModalContentMessages,\n ProvisioningTokenClasses\n > {\n token: string;\n tokenId: string;\n className?: string;\n}\n\n/* Props for ProvisioningDeleteTokenModalContent. /\nexport interface ProvisioningDeleteTokenModalContentProps\n extends SharedComponentProps<\n ProvisioningDeleteTokenModalContentMessages,\n ProvisioningTokenClasses\n > {\n className?: string;\n tokenId?: string;\n}\n","type":"registry:component","target":"types/my-organization/idp-management/sso-provisioning/provisioning-token-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types.ts","content":"$bb","type":"registry:component","target":"types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-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":"$bc","type":"registry:component","target":"types/toast-types.ts"},{"path":"src/lib/constants/form-constants.ts","content":"/\n Form constants used across the components.\n * @internal\n /\n\nexport const FORM_VALIDATION_MODE = 'onTouched';\nexport const FORM_REVALIDATE_MODE = 'onChange';\n","type":"registry:component","target":"lib/constants/form-constants.ts"},{"path":"src/lib/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/lib/utils/my-organization/domain-management/domain-management-utils.ts","content":"/\n Domain management utility functions.\n * @module domain-management-utils\n * @internal\n /\n\nimport type { Domain } from '@/types/my-organization/domain-management/domain-table-types';\n\n/\n Returns badge variant for domain status.\n * @param status - Current status\n * @returns The badge variant\n * @internal\n /\nexport function getStatusBadgeVariant(\n status: Domain['status'],\n): 'success' \| 'warning' \| 'destructive' \| 'outline' {\n switch (status) {\n case 'verified':\n return 'success';\n case 'pending':\n return 'warning';\n case 'failed':\n return 'destructive';\n default:\n return 'outline';\n }\n}\n","type":"registry:component","target":"lib/utils/my-organization/domain-management/domain-management-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 }; a2:T805,/** * Tabs component using Radix primitives. * @module tabs * @internal */ 'use client'; import * as TabsPrimitive from '@radix-ui/react-tabs'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Tabs({ className, ...props }: React.ComponentProps) { return ( ); } function TabsList({ className, ...props }: React.ComponentProps) { return ( ); } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ); } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ); } export { Tabs, TabsList, TabsTrigger, TabsContent }; a3: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 }; a4:T885,/** * Toggle button component. * @module toggle * @internal */ import { cva } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const toggleVariants = cva( "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:shadow-bevel-sm focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: 'hover:bg-muted data-[state=on]:bg-muted data-[state=on]:text-primary bg-transparent', outline: 'data-[state=on]:bg-muted data-[state=on]:text-primary-foreground hover:bg-accent hover:text-accent-foreground shadow-input-resting bg-transparent', }, size: { default: 'h-9 min-w-9 px-2', sm: 'h-8 min-w-8 px-1.5', lg: 'h-10 min-w-10 px-2.5', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); export interface ToggleProps extends React.ButtonHTMLAttributes { pressed?: boolean; onPressedChange?: (pressed: boolean) => void; variant?: 'default' | 'outline'; size?: 'sm' | 'default' | 'lg'; } function ToggleRoot({ className, children, pressed, onPressedChange, variant = 'default', size = 'default', ...props }: ToggleProps) { return ( ); } function Toggle(props: ToggleProps) { return ; } export { Toggle }; a5: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 }; a6: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, }; } a7: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, }; } a8:T3236,/** * SSO domain tab data and actions hook. * @module use-sso-domain-tab */ import type { CreateOrganizationDomainRequestContent } from '@auth0/universal-components-core'; import { BusinessError, type Domain, type IdpId } from '@auth0/universal-components-core'; import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'; import { useCallback, useState, useMemo, useEffect } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { ssoProviderEditQueryKeys } from '@/hooks/my-organization/use-sso-provider-edit'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoDomainTabOptions, UseSsoDomainTabReturn, } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types'; const domainQueryKeys = { all: ['sso-domains'] as const, lists: () => [...domainQueryKeys.all, 'list'] as const, list: (idpId: IdpId) => [...domainQueryKeys.lists(), idpId] as const, }; /** * Hook for SSO domain tab domain operations and state. * @param idpId - Identity provider ID. * @param options - Hook options. * @param options.customMessages - Custom translation messages. * @param options.domains - Initial domains data. * @param options.provider - SSO provider data. * @returns Hook state and methods */ export function useSsoDomainTab( idpId: IdpId, { customMessages = {}, domains, provider }: Partial = {}, ): UseSsoDomainTabReturn { const { coreClient } = useCoreClient(); const { t } = useTranslator('idp_management.notifications', customMessages); const handleError = useErrorHandler(); const queryClient = useQueryClient(); const [selectedDomain, setSelectedDomain] = useState(null); const [showVerifyModal, setShowVerifyModal] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false); const [verifyError, setVerifyError] = useState(undefined); const [showCreateModal, setShowCreateModal] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [isUpdatingId, setIsUpdatingId] = useState(null); // Fetch domains list using TanStack Query const domainsQuery = useQuery({ queryKey: domainQueryKeys.list(idpId), queryFn: async () => { const { response } = await coreClient! .getMyOrganizationApiClient() .organization.domains.list(); return response.organization_domains; }, enabled: !!coreClient && !!idpId, }); const domainsList = domainsQuery.data ?? []; const isLoading = domainsQuery.isLoading; // Handle errors from domains query useEffect(() => { if (domainsQuery.error) { handleError(domainsQuery.error, { fallbackMessage: t('general_error'), }); } }, [domainsQuery.error, handleError, t]); // Derive idpDomains from the provider's domains field (provider is fetched by the parent hook) const idpDomains = useMemo(() => { const idpDomainNames = provider?.domains ?? []; return domainsList .filter((domain) => idpDomainNames.includes(domain.domain)) .map((domain) => domain.id); }, [provider?.domains, domainsList]); // Mutations const createDomainMutation = useMutation({ mutationFn: async (data: CreateOrganizationDomainRequestContent) => { if (domains?.createAction?.onBefore) { const canProceed = domains.createAction.onBefore(data as Domain); if (!canProceed) { throw new BusinessError({ message: t('domain_create.on_before') }); } } const result: Domain = await coreClient! .getMyOrganizationApiClient() .organization.domains.create(data); domains?.createAction?.onAfter?.(result); return result; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: domainQueryKeys.list(idpId) }); queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const verifyDomainMutation = useMutation({ mutationFn: async (domain: Domain) => { if (domains?.verifyAction?.onBefore) { const canProceed = domains.verifyAction.onBefore(domain); if (!canProceed) { throw new BusinessError({ message: t('domain_verify.on_before') }); } } const updatedDomain = await coreClient! .getMyOrganizationApiClient() .organization.domains.verify.create(domain.id); if (domains?.verifyAction?.onAfter) { await domains.verifyAction.onAfter(domain); } return { updatedDomain, isVerified: updatedDomain.status === 'verified' }; }, onSuccess: ({ updatedDomain, isVerified }, domain) => { if (isVerified) { queryClient.setQueryData(domainQueryKeys.list(idpId), (oldDomains) => { if (!oldDomains) return oldDomains; return oldDomains.map((d) => (d.id === domain.id ? { ...d, ...updatedDomain } : d)); }); } }, }); const deleteDomainMutation = useMutation({ mutationFn: async (domain: Domain) => { if (!coreClient) { return domain; } if (domains?.deleteAction?.onBefore) { const canProceed = domains.deleteAction.onBefore(domain); if (!canProceed) { throw new BusinessError({ message: t('domain_delete.on_before') }); } } await coreClient.getMyOrganizationApiClient().organization.domains.delete(domain.id); if (domains?.deleteAction?.onAfter) { await domains.deleteAction.onAfter(domain); } return domain; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: domainQueryKeys.list(idpId) }); queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const associateToProviderMutation = useMutation({ mutationFn: async (domain: Domain) => { if (domains?.associateToProviderAction?.onBefore) { const canProceed = domains.associateToProviderAction.onBefore(domain, provider); if (!canProceed) { throw new BusinessError({ message: t('domain_associate_provider.on_before') }); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.create(idpId, { domain: domain.domain, }); if (domains?.associateToProviderAction?.onAfter) { await domains.associateToProviderAction.onAfter(domain, provider); } return domain; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const deleteFromProviderMutation = useMutation({ mutationFn: async (domain: Domain) => { if (!provider) { return domain; } if (domains?.deleteFromProviderAction?.onBefore) { const canProceed = domains.deleteFromProviderAction.onBefore(domain, provider); if (!canProceed) { throw new BusinessError({ message: t('domain_delete_provider.on_before') }); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.delete(provider.id!, domain.domain); if (domains?.deleteFromProviderAction?.onAfter) { await domains.deleteFromProviderAction.onAfter(domain); } return domain; }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId) }); }, }); const handleCreate = useCallback( async (domainUrl: string) => { try { const newDomain = await createDomainMutation.mutateAsync({ domain: domainUrl }); showToast({ type: 'success', message: t('domain_create.success', { domainName: newDomain?.domain, }), }); setSelectedDomain(newDomain); setShowCreateModal(false); setShowVerifyModal(true); } catch (error) { handleError(error, { fallbackMessage: t('domain_create.error'), }); } }, [handleError, createDomainMutation, t], ); const handleCloseVerifyModal = useCallback(() => { setShowVerifyModal(false); setVerifyError(undefined); }, []); const handleVerify = useCallback( async (domain: Domain) => { try { const { isVerified } = await verifyDomainMutation.mutateAsync(domain); if (isVerified) { setShowVerifyModal(false); showToast({ type: 'success', message: t('domain_verify.success', { domainName: domain.domain, }), }); await associateToProviderMutation.mutateAsync(domain); } else { setVerifyError(t('domain_verify.verification_failed', { domainName: domain.domain })); } } catch (error) { handleError(error, { fallbackMessage: t('domain_verify.verification_failed'), }); } }, [verifyDomainMutation, t, handleError, associateToProviderMutation], ); const handleDeleteClick = useCallback((domain: Domain) => { setSelectedDomain(domain); setShowVerifyModal(false); setShowDeleteModal(true); }, []); const handleDelete = useCallback( async (domain: Domain) => { try { await deleteDomainMutation.mutateAsync(domain); showToast({ type: 'success', message: t('domain_delete.success', { domainName: domain.domain, }), }); setShowDeleteModal(false); setShowVerifyModal(false); } catch (error) { handleError(error, { fallbackMessage: t('domain_delete.error'), }); } }, [handleError, deleteDomainMutation, t], ); const handleVerifyActionColumn = useCallback( async (domain: Domain) => { setIsUpdating(true); setIsUpdatingId(domain.id); try { const { isVerified } = await verifyDomainMutation.mutateAsync(domain); if (isVerified) { showToast({ type: 'success', message: t('domain_verify.success', { domainName: domain.domain, }), }); await associateToProviderMutation.mutateAsync(domain); } else { showToast({ type: 'error', message: t('domain_verify.verification_failed', { domainName: domain.domain, }), }); } } catch (error) { handleError(error, { fallbackMessage: t('domain_verify.verification_failed', { domainName: domain.domain }), }); } finally { setIsUpdating(false); setIsUpdatingId(null); } }, [verifyDomainMutation, t, handleError, associateToProviderMutation], ); const handleToggleSwitch = useCallback( async (domain: Domain, newCheckedValue: boolean) => { setIsUpdating(true); setIsUpdatingId(domain.id); if (newCheckedValue) { try { await associateToProviderMutation.mutateAsync(domain); showToast({ type: 'success', message: t('domain_associate_provider.success', { domain: domain.domain, idp: provider?.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('general_error'), }); } finally { setIsUpdating(false); setIsUpdatingId(null); } } else { try { await deleteFromProviderMutation.mutateAsync(domain); showToast({ type: 'success', message: t('domain_delete_provider.success', { domain: domain.domain, idp: provider?.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('general_error'), }); } finally { setIsUpdating(false); setIsUpdatingId(null); } } }, [associateToProviderMutation, t, provider, handleError, deleteFromProviderMutation], ); return { isLoading, domainsList, isCreating: createDomainMutation.isPending, selectedDomain, showVerifyModal, showDeleteModal, isVerifying: verifyDomainMutation.isPending, verifyError, isDeleting: deleteDomainMutation.isPending, showCreateModal, handleCreate, handleCloseVerifyModal, handleVerify, handleDeleteClick, handleDelete, setShowCreateModal, setShowDeleteModal, idpDomains, handleVerifyActionColumn, isUpdating, isUpdatingId, handleToggleSwitch, }; } a9:T62c,/** * SSO provider edit logic hook. * @module use-sso-provider-edit-logic * @internal */ import { useCallback } from 'react'; import { useConfig } from '@/hooks/my-organization/use-config'; import { useIdpConfig } from '@/hooks/my-organization/use-idp-config'; import type { UseSsoProviderEditLogicResult, UseSsoProviderEditReturn, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; /** * Hook for SSO provider edit logic (e.g., handleToggleProvider). * @param ssoProviderEdit - SSO Provider Edit Prop * @internal * @returns Hook state and methods */ export function useSsoProviderEditLogic( ssoProviderEdit: UseSsoProviderEditReturn, ): UseSsoProviderEditLogicResult { const { shouldAllowDeletion, isLoadingConfig } = useConfig(); const { idpConfig, isLoadingIdpConfig, isProvisioningEnabled, isProvisioningMethodEnabled } = useIdpConfig(); const showProvisioningTab = isProvisioningEnabled(ssoProviderEdit.provider?.strategy) && isProvisioningMethodEnabled(ssoProviderEdit.provider?.strategy); const handleToggleProvider = useCallback( async (enabled: boolean) => { if (!ssoProviderEdit.provider?.strategy) return; await ssoProviderEdit.updateProvider({ strategy: ssoProviderEdit.provider.strategy, is_enabled: enabled, }); }, [ssoProviderEdit.provider?.strategy, ssoProviderEdit.updateProvider], ); return { shouldAllowDeletion, isLoadingConfig, idpConfig, isLoadingIdpConfig, showProvisioningTab, handleToggleProvider, }; } aa:T656f,/** * SSO provider edit hook. * @module use-sso-provider-edit */ import { OrganizationDetailsFactory, OrganizationDetailsMappers, SsoProviderMappers, type IdpKnownResponse, type IdpId, type OrganizationPrivate, type UpdateIdentityProviderRequestContent, type CreateIdpProvisioningScimTokenRequestContent, type GetIdPProvisioningConfigResponseContent, getStatusCode, } from '@auth0/universal-components-core'; import { ssoProviderQueryKeys } from '@auth0/universal-components-core'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useCallback, useEffect, useMemo, useRef } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseSsoProviderEditOptions, UseSsoProviderEditReturn, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types'; const ACTION_CANCELLED_ERROR = 'ACTION_CANCELLED'; const isActionCancelledError = (error: unknown): boolean => { return error instanceof Error && error.message === ACTION_CANCELLED_ERROR; }; export const ssoProviderEditQueryKeys = { all: ['sso-providers'] as const, list: () => [...ssoProviderEditQueryKeys.all, 'list'] as const, detail: (idpId: IdpId) => [...ssoProviderEditQueryKeys.all, 'detail', idpId] as const, organization: () => ['organization', 'details'] as const, provisioning: (idpId: IdpId) => [...ssoProviderEditQueryKeys.all, 'provisioning', idpId] as const, scimTokens: (idpId: IdpId) => [...ssoProviderEditQueryKeys.all, 'scim-tokens', idpId] as const, }; /** * Hook for editing SSO provider settings and provisioning. * @param idpId - Identity provider ID. * @param options - Hook options. * @param options.sso - SSO action callbacks. * @param options.provisioning - Provisioning action callbacks. * @param options.customMessages - Custom translation messages. * @returns Hook state and methods */ export function useSsoProviderEdit( idpId: IdpId, { sso, provisioning, customMessages = {} }: Partial = {}, ): UseSsoProviderEditReturn { const { coreClient } = useCoreClient(); const { t } = useTranslator('idp_management.notifications', customMessages); const queryClient = useQueryClient(); const handleError = useErrorHandler(); const hasShownProviderError = useRef(false); const hasShownProvisioningError = useRef(false); const hasShownOrganizationError = useRef(false); /** * Provider query - fetches the identity provider details. * TanStack Query handles caching, loading states, and refetching. */ const providerQuery = useQuery({ queryKey: ssoProviderEditQueryKeys.detail(idpId), queryFn: async (): Promise => { const response = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.get(idpId); return response; }, enabled: !!coreClient && !!idpId, }); /** * Organization query - fetches organization details. * Shared across the application, so it uses a common query key. */ const organizationQuery = useQuery({ queryKey: ssoProviderEditQueryKeys.organization(), queryFn: async (): Promise => { const response = await coreClient!.getMyOrganizationApiClient().organizationDetails.get(); return OrganizationDetailsMappers.fromAPI(response); }, enabled: !!coreClient, initialData: OrganizationDetailsFactory.create(), }); /** * Provisioning config query - fetches provisioning configuration. * Returns null if provisioning is not configured (404). */ const provisioningQuery = useQuery({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), queryFn: async (): Promise => { try { const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.get(idpId); return result; } catch (error) { const status = getStatusCode(error); if (status === 404) { return null; } throw error; } }, enabled: !!coreClient && !!idpId, }); useEffect(() => { if (providerQuery.isError && !hasShownProviderError.current) { handleError(providerQuery.error, { fallbackMessage: t('general_error') }); hasShownProviderError.current = true; } if (!providerQuery.isError) { hasShownProviderError.current = false; } }, [providerQuery.isError, providerQuery.error, t, handleError]); useEffect(() => { if (organizationQuery.isError && !hasShownOrganizationError.current) { handleError(organizationQuery.error, { fallbackMessage: t('general_error') }); hasShownOrganizationError.current = true; } if (!organizationQuery.isError) { hasShownOrganizationError.current = false; } }, [organizationQuery.error, organizationQuery.isError, t, handleError]); useEffect(() => { if (provisioningQuery.isError && !hasShownProvisioningError.current) { handleError(provisioningQuery.error, { fallbackMessage: t('general_error') }); hasShownProvisioningError.current = true; } if (!provisioningQuery.isError) { hasShownProvisioningError.current = false; } }, [provisioningQuery.isError, provisioningQuery.error, t, handleError]); /** * Update provider mutation - updates SSO provider configuration. */ const updateProviderMutation = useMutation({ mutationFn: async (data: UpdateIdentityProviderRequestContent): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (sso?.updateAction?.onBefore) { const canProceed = sso.updateAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } const apiRequestData: UpdateIdentityProviderRequestContent = SsoProviderMappers.updateToAPI({ strategy: provider.strategy, ...data, }); const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.update(idpId, apiRequestData); return result; }, onSuccess: async (result, _variables) => { const provider = providerQuery.data; showToast({ type: 'success', message: t('update_success', { providerName: provider?.display_name }), }); // Update detail cache immediately with API response, invalidate list to refetch queryClient.setQueryData(ssoProviderEditQueryKeys.detail(idpId), result); await queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list(), }); if (sso?.updateAction?.onAfter && provider) { await sso.updateAction.onAfter(provider, result); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /** * Create provisioning mutation - enables provisioning for the provider. */ const createProvisioningMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.createAction?.onBefore) { const canProceed = provisioning.createAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.create(idpId); return result; }, onSuccess: async (result) => { const provider = providerQuery.data; showToast({ type: 'success', message: t('update_success', { providerName: provider?.display_name }), }); // Invalidate queries to refetch fresh data await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); queryClient.setQueryData(ssoProviderEditQueryKeys.provisioning(idpId), result); if (provisioning?.createAction?.onAfter && provider) { await provisioning.createAction.onAfter(provider, result); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /** * Delete provisioning mutation - disables provisioning for the provider. */ const deleteProvisioningMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.deleteAction?.onBefore) { const canProceed = provisioning.deleteAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.delete(idpId); }, onSuccess: async () => { const provider = providerQuery.data; showToast({ type: 'success', message: t('update_success', { providerName: provider?.display_name }), }); // Update cache to reflect deleted provisioning queryClient.setQueryData(ssoProviderEditQueryKeys.provisioning(idpId), null); await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); if (provisioning?.deleteAction?.onAfter && provider) { await provisioning.deleteAction.onAfter(provider); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /** * Create SCIM token mutation - generates a new SCIM token for provisioning. */ const createScimTokenMutation = useMutation({ mutationFn: async (data: CreateIdpProvisioningScimTokenRequestContent) => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.createScimTokenAction?.onBefore) { const canProceed = provisioning.createScimTokenAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } const result = await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.scimTokens.create(idpId, data); return result; }, onSuccess: async (result) => { const provider = providerQuery.data; showToast({ type: 'success', message: t('scim_token_create_success'), }); // Invalidate SCIM tokens list to refetch await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.scimTokens(idpId), }); if (provisioning?.createScimTokenAction?.onAfter && provider) { await provisioning.createScimTokenAction.onAfter(provider, result); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /** * Delete SCIM token mutation - removes a SCIM token. */ const deleteScimTokenMutation = useMutation({ mutationFn: async (idpScimTokenId: string): Promise => { const provider = providerQuery.data; if (!provider) { throw new Error('Provider not loaded'); } if (provisioning?.deleteScimTokenAction?.onBefore) { const canProceed = provisioning.deleteScimTokenAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.scimTokens.delete(idpId, idpScimTokenId); }, onSuccess: async () => { const provider = providerQuery.data; showToast({ type: 'success', message: t('scim_token_delete_sucess'), }); // Invalidate SCIM tokens list to refetch await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.scimTokens(idpId), }); if (provisioning?.deleteScimTokenAction?.onAfter && provider) { await provisioning.deleteScimTokenAction.onAfter(provider); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); /** * Delete provider mutation - completely deletes the provider. */ const deleteProviderMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider?.id) { throw new Error('Provider not loaded or missing ID'); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.delete(provider.id); }, onSuccess: async () => { const provider = providerQuery.data; showToast({ type: 'success', message: t('delete_success', { providerName: provider?.display_name }), }); // Remove all related queries from cache queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), }); queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.scimTokens(idpId), }); // Invalidate all queries from cache await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.all, }); if (sso?.deleteAction?.onAfter && provider) { await sso.deleteAction.onAfter(provider); } }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); /** * Detach provider mutation - removes provider from organization but doesn't delete it. */ const detachProviderMutation = useMutation({ mutationFn: async (): Promise => { const provider = providerQuery.data; if (!provider?.id) { throw new Error('Provider not loaded or missing ID'); } if (sso?.deleteFromOrganizationAction?.onBefore) { const canProceed = sso.deleteFromOrganizationAction.onBefore(provider); if (!canProceed) { throw new Error(ACTION_CANCELLED_ERROR); } } // Ensure organization data is fresh before detaching await queryClient.ensureQueryData({ queryKey: ssoProviderEditQueryKeys.organization(), }); await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.detach(provider.id); }, onSuccess: async () => { const provider = providerQuery.data; const organization = organizationQuery.data; showToast({ type: 'success', message: t('remove_success', { providerName: provider?.display_name, organizationName: organization?.display_name, }), }); // Remove provider from cache to invalidate details queryClient.removeQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); // Remove provider from cache to invalidate list await queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.list() }); if (sso?.deleteFromOrganizationAction?.onAfter && provider) { await sso.deleteFromOrganizationAction.onAfter(provider); } }, onError: (error) => { if (isActionCancelledError(error)) { return; } handleError(error, { fallbackMessage: t('general_error') }); }, }); const fetchProvider = useCallback(async (): Promise => { if (!coreClient || !idpId) { return null; } try { const data = await queryClient.ensureQueryData({ queryKey: ssoProviderEditQueryKeys.detail(idpId), queryFn: async () => { const response = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.get(idpId); return response; }, }); return data; } catch (error) { handleError(error, { fallbackMessage: t('general_error') }); return null; } }, [coreClient, idpId, queryClient, t, handleError]); const fetchOrganizationDetails = useCallback(async (): Promise => { if (!coreClient) { return; } await queryClient.getQueryData(ssoProviderEditQueryKeys.organization()); }, [coreClient, queryClient]); const fetchProvisioning = useCallback(async (): Promise => { if (!coreClient || !idpId) { return null; } try { const data = await queryClient.fetchQuery({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), queryFn: async () => { try { const result = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.provisioning.get(idpId); return result; } catch (error) { const status = getStatusCode(error); if (status === 404) { return null; } throw error; } }, }); return data; } catch (error) { const status = getStatusCode(error); if (status !== 404) { handleError(error, { fallbackMessage: t('general_error') }); } return null; } }, [coreClient, idpId, queryClient, t, handleError]); const updateProvider = useCallback( async (data: UpdateIdentityProviderRequestContent): Promise => { const provider = providerQuery.data; if (!coreClient || !idpId || !provider) { return; } try { await updateProviderMutation.mutateAsync(data); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, idpId, providerQuery.data, updateProviderMutation], ); const createProvisioning = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient || !idpId || !provider) { return; } try { await createProvisioningMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, createProvisioningMutation, idpId, providerQuery.data]); const deleteProvisioning = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient || !idpId || !provider) { return; } try { await deleteProvisioningMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, deleteProvisioningMutation, idpId, providerQuery.data]); /** * List SCIM tokens mutation - fetches SCIM tokens for provisioning. * Note: This uses imperative fetching rather than a query because tokens * are typically fetched on-demand and the response includes sensitive data * that shouldn't be automatically cached. */ const listScimTokensMutation = useMutation({ mutationFn: async () => { if (!coreClient || !idpId) { return null; } const result = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.provisioning.scimTokens.list(idpId); return result; }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); const listScimTokens = useCallback(async () => { try { return await listScimTokensMutation.mutateAsync(); } catch (error) { return null; } }, [listScimTokensMutation]); const createScimToken = useCallback( async (data: CreateIdpProvisioningScimTokenRequestContent) => { const provider = providerQuery.data; if (!coreClient || !idpId || !provider) { return undefined; } try { return await createScimTokenMutation.mutateAsync(data); } catch (error) { if (!isActionCancelledError(error)) { throw error; } return undefined; } }, [coreClient, createScimTokenMutation, idpId, providerQuery.data], ); const deleteScimToken = useCallback( async (idpScimTokenId: string): Promise => { const provider = providerQuery.data; if (!coreClient || !idpId || !provider) { return; } try { await deleteScimTokenMutation.mutateAsync(idpScimTokenId); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, deleteScimTokenMutation, idpId, providerQuery.data], ); const syncSsoAttributesMutation = useMutation({ mutationFn: async () => { await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.updateAttributes(idpId, {}); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.detail(idpId), }); showToast({ type: 'success', message: t('sso_attributes_sync_success'), }); }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); const syncSsoAttributes = useCallback(async (): Promise => { if (!coreClient || !idpId) { return; } await syncSsoAttributesMutation.mutateAsync(); }, [coreClient, idpId, syncSsoAttributesMutation]); const syncProvisioningAttributesMutation = useMutation({ mutationFn: async () => { await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.provisioning.updateAttributes(idpId, {}); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ssoProviderEditQueryKeys.provisioning(idpId), }); showToast({ type: 'success', message: t('provisioning_attributes_sync_success'), }); }, onError: (error) => { handleError(error, { fallbackMessage: t('general_error') }); }, }); const syncProvisioningAttributes = useCallback(async (): Promise => { if (!coreClient || !idpId) { return; } await syncProvisioningAttributesMutation.mutateAsync(); }, [coreClient, idpId, syncProvisioningAttributesMutation]); const onDeleteConfirm = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient || !provider?.id) { return; } try { await deleteProviderMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, deleteProviderMutation, providerQuery.data]); const onRemoveConfirm = useCallback(async (): Promise => { const provider = providerQuery.data; if (!coreClient || !provider?.id) { return; } try { await detachProviderMutation.mutateAsync(); } catch (error) { if (!isActionCancelledError(error)) { throw error; } } }, [coreClient, detachProviderMutation, providerQuery.data]); const hasSsoAttributeSyncWarning = useMemo(() => { const provider = providerQuery.data; const attributes = provider && 'attributes' in provider ? (provider.attributes ?? []) : []; return attributes.some((attr) => attr.is_extra || attr.is_missing); }, [providerQuery.data]); const hasProvisioningAttributeSyncWarning = useMemo(() => { const provisioningConfig = provisioningQuery.data; const attributes = provisioningConfig?.attributes ?? []; return attributes.some((attr) => attr.is_extra || attr.is_missing); }, [provisioningQuery.data]); return { // Data from TanStack Query - single source of truth provider: providerQuery.data ?? null, organization: organizationQuery.data ?? OrganizationDetailsFactory.create(), provisioningConfig: provisioningQuery.data ?? null, // Loading states - all derived from TanStack Query isLoading: providerQuery.isLoading || organizationQuery.isLoading, isUpdating: updateProviderMutation.isPending, isDeleting: deleteProviderMutation.isPending, isRemoving: detachProviderMutation.isPending, isProvisioningUpdating: createProvisioningMutation.isPending, isProvisioningDeleting: deleteProvisioningMutation.isPending, isProvisioningLoading: provisioningQuery.isLoading || provisioningQuery.isFetching, isScimTokensLoading: listScimTokensMutation.isPending, isScimTokenCreating: createScimTokenMutation.isPending, isScimTokenDeleting: deleteScimTokenMutation.isPending, isSsoAttributesSyncing: syncSsoAttributesMutation.isPending, isProvisioningAttributesSyncing: syncProvisioningAttributesMutation.isPending, // Warning states hasSsoAttributeSyncWarning, hasProvisioningAttributeSyncWarning, // Actions fetchProvider, fetchOrganizationDetails, fetchProvisioning, updateProvider, createProvisioning, deleteProvisioning, listScimTokens, createScimToken, deleteScimToken, syncSsoAttributes, syncProvisioningAttributes, onDeleteConfirm, onRemoveConfirm, }; } ab: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; }; ac: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], ); } ad: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; }; ae: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, }; } af: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; b0: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} ); } b1: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; b2: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}

); }; b3: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; }; b4:T128e,/** * Domain table types. * @module domain-table-types */ import type { SharedComponentProps, IdpKnownResponse, DomainCreateMessages, DomainCreateSchemas, ComponentAction, Domain, DomainDeleteMessages, DomainConfigureMessages, DomainVerifyMessages, DomainTableMessages, CreateOrganizationDomainRequestContent, EnhancedTranslationFunction, IdentityProviderAssociatedWithDomain, } from '@auth0/universal-components-core'; export type { Domain }; /** CSS classes for DomainTable. */ export interface DomainTableClasses { 'DomainTable-header'?: string; 'DomainTable-table'?: string; 'DomainTable-createModal'?: string; 'DomainTable-configureModal'?: string; 'DomainTable-deleteModal'?: string; } /** DomainTable translation messages. */ export interface DomainTableMainMessages extends DomainTableMessages { create: DomainCreateMessages; configure: DomainConfigureMessages; verify: DomainVerifyMessages; delete: DomainDeleteMessages; } /** DomainTable validation schemas. */ export interface DomainTableSchema { create?: DomainCreateSchemas; } /** Props for DomainTable component. */ export interface DomainTableProps extends SharedComponentProps { hideHeader?: boolean; createAction?: ComponentAction; verifyAction?: ComponentAction; deleteAction?: ComponentAction; associateToProviderAction?: ComponentAction; deleteFromProviderAction?: ComponentAction; onOpenProvider?: (provider: IdpKnownResponse) => void; onCreateProvider?: () => void; } // DomainTableView component props export interface DomainTableViewProps { logic: UseDomainTableResult & DomainTableProps; handlers: UseDomainTableLogicResult; } /** Props for DomainTable actions column. */ export interface DomainTableActionsColumnProps { customMessages?: Partial; readOnly: boolean; domain: Domain; onView: (domain: Domain) => void; onConfigure: (domain: Domain) => void; onVerify: (domain: Domain) => void; onDelete: (domain: Domain) => void; } export interface UseDomainTableOptions { createAction?: DomainTableProps['createAction']; verifyAction?: DomainTableProps['verifyAction']; deleteAction?: DomainTableProps['deleteAction']; associateToProviderAction?: DomainTableProps['associateToProviderAction']; deleteFromProviderAction?: DomainTableProps['deleteFromProviderAction']; customMessages?: DomainTableProps['customMessages']; } export interface UseDomainTableResult extends SharedComponentProps { domains: Domain[]; providers: IdentityProviderAssociatedWithDomain[]; isFetching: boolean; isLoadingProviders: boolean; isCreating: boolean; isDeleting: boolean; isVerifying: boolean; fetchProviders: (domain: Domain) => Promise; fetchDomains: () => Promise; onCreateDomain: (data: CreateOrganizationDomainRequestContent) => Promise; onVerifyDomain: (data: Domain) => Promise; onDeleteDomain: (domain: Domain) => Promise; onAssociateToProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; onDeleteFromProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; } export interface UseDomainTableLogicOptions { t: EnhancedTranslationFunction; onCreateDomain: UseDomainTableResult['onCreateDomain']; onVerifyDomain: UseDomainTableResult['onVerifyDomain']; onDeleteDomain: UseDomainTableResult['onDeleteDomain']; onAssociateToProvider: UseDomainTableResult['onAssociateToProvider']; onDeleteFromProvider: UseDomainTableResult['onDeleteFromProvider']; fetchProviders: UseDomainTableResult['fetchProviders']; fetchDomains: UseDomainTableResult['fetchDomains']; } export interface UseDomainTableLogicResult { // Modal state showCreateModal: boolean; showConfigureModal: boolean; showVerifyModal: boolean; showDeleteModal: boolean; verifyError: string | undefined; selectedDomain: Domain | null; // State setters setShowCreateModal: (show: boolean) => void; setShowConfigureModal: (show: boolean) => void; setShowVerifyModal: (show: boolean) => void; setShowDeleteModal: (show: boolean) => void; // Handlers handleCreate: (domainUrl: string) => Promise; handleVerify: (domain: Domain) => Promise; handleDelete: (domain: Domain) => void; handleToggleSwitch: (domain: Domain, provider: IdpKnownResponse, checked: boolean) => void; handleCloseVerifyModal: () => void; handleCreateClick: () => void; handleConfigureClick: (domain: Domain) => void; handleVerifyClick: (domain: Domain) => Promise; handleDeleteClick: (domain: Domain) => void; } b5:Tac0,/** * SSO domain tab types. * @module sso-domain-tab-types */ import type { ComponentAction, Domain, DomainCreateSchemas, IdpKnownResponse, SharedComponentProps, SsoDomainTabMessages, } from '@auth0/universal-components-core'; /** SSO domains tab edit action props. */ export interface SsoDomainsTabEditProps { createAction?: ComponentAction; verifyAction?: ComponentAction; deleteAction?: ComponentAction; associateToProviderAction?: ComponentAction; deleteFromProviderAction?: ComponentAction; } /** CSS classes for SsoDomainsTab. */ export interface SsoDomainTabClasses { 'SsoDomainsTab-header'?: string; 'SsoDomainsTab-table'?: string; 'SsoDomainsTab-createModal'?: string; 'SsoDomainsTab-verifyModal'?: string; 'SsoDomainsTab-deleteModal'?: string; } /** SSO provider edit domains tab schema. */ export interface SsoProviderEditDomainsTabSchema { create: DomainCreateSchemas; } /** Props for SsoDomainsTab component. */ export interface SsoDomainsTabProps extends SharedComponentProps< SsoDomainTabMessages, SsoDomainTabClasses, SsoProviderEditDomainsTabSchema > { domains: SsoDomainsTabEditProps | undefined; idpId: string; provider: IdpKnownResponse | null; } export interface SsoDomainTabActionColumn extends SharedComponentProps< SsoDomainTabMessages, SsoDomainTabClasses, SsoProviderEditDomainsTabSchema > { translatorKey?: string; idpDomains: string[]; domain: Domain; handleVerify: (domain: Domain) => Promise; isUpdating: boolean; isUpdatingId: string | null; onToggle: (domain: Domain, newCheckedValue: boolean) => Promise; } export interface UseSsoDomainTabOptions extends SharedComponentProps { domains: SsoDomainsTabEditProps; provider: IdpKnownResponse | null; } export interface UseSsoDomainTabReturn { domainsList: Domain[]; isLoading: boolean; showCreateModal: boolean; isCreating: boolean; selectedDomain: Domain | null; showVerifyModal: boolean; showDeleteModal: boolean; isVerifying: boolean; verifyError: string | undefined; isDeleting: boolean; idpDomains: string[]; isUpdating: boolean; isUpdatingId: string | null; setShowCreateModal: (show: boolean) => void; handleCreate: (domainUrl: string) => Promise; handleCloseVerifyModal: () => void; handleVerify: (domain: Domain) => Promise; handleDeleteClick: (domain: Domain) => void; setShowDeleteModal: (show: boolean) => void; handleDelete: (domain: Domain) => void; handleVerifyActionColumn: (domain: Domain) => Promise; handleToggleSwitch: (domain: Domain, newCheckedValue: boolean) => Promise; } b6:T1829,/** * SSO provider create types. * @module sso-provider-create-types */ import type { SharedComponentProps, ProviderSelectMessages, ProviderDetailsMessages, IdpStrategy, ProviderSelectionFormValues, IdpKnownResponse, ProviderConfigureMessages, ProviderConfigureFieldsMessages, SsoProviderCreateMessages, ProviderDetailsFormValues, ProviderConfigureFormValues, SsoProviderFormValues, SsoProviderSchema, ComponentAction, BackButton, CreateIdentityProviderRequestContentPrivate, GetIdpConfigurationResponseContent, } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import type React from 'react'; import type { UseFormReturn } from 'react-hook-form'; export interface ProviderConfigureHandle { validate: () => Promise; getData: () => ProviderConfigureFormValues; } export interface ProviderDetailsFormHandle { validate: () => Promise; getData: () => ProviderDetailsFormValues; isDirty: () => boolean; reset: (data?: ProviderDetailsFormValues) => void; } /** Form mode for provider configuration. */ export type FormMode = 'create' | 'edit'; /** CSS classes for SsoProviderCreate. */ export interface SsoProviderCreateClasses { 'SsoProviderCreate-header'?: string; 'SsoProviderCreate-wizard'?: string; 'ProviderSelect-root'?: string; 'ProviderDetails-root'?: string; 'ProviderConfigure-root'?: string; } /** Props for ProviderSelect component. */ export interface ProviderSelectProps extends SharedComponentProps { isLoading: boolean; strategyList: IdpStrategy[]; onClickStrategy: (strategy: IdpStrategy) => void; selectedStrategy?: IdpStrategy | null; form?: UseFormReturn; className?: string; } /** Props for ProviderDetails component. */ export interface ProviderDetailsProps extends SharedComponentProps { initialData?: Partial; className?: string; hideHeader?: boolean; mode: 'edit' | 'create'; onFormDirty?: (isDirty: boolean) => void; } /** Props for ProviderConfigure component. */ export interface ProviderConfigureProps extends SharedComponentProps { className?: string; isLoading: boolean; strategy: IdpStrategy; initialData?: Partial; idpConfig: GetIdpConfigurationResponseContent | null; } export interface ProviderConfigureFieldsProps extends SharedComponentProps { strategy: IdpStrategy; initialData?: Partial; className?: string; onFormDirty?: (isDirty: boolean) => void; idpConfig: GetIdpConfigurationResponseContent | null; mode?: FormMode; } export interface SsoProviderCreateBackButton extends Omit { icon?: LucideIcon; onClick: (e: React.MouseEvent) => void; } export interface SsoProviderCreateProps extends SharedComponentProps< SsoProviderCreateMessages, SsoProviderCreateClasses, SsoProviderSchema > { createAction: ComponentAction; backButton?: SsoProviderCreateBackButton; onPrevious?: (stepId: string, values: Partial) => boolean; onNext?: (stepId: string, values: Partial) => boolean; } export interface UseSsoProviderCreateOptions { createAction?: SsoProviderCreateProps['createAction']; customMessages?: SsoProviderCreateProps['customMessages']; } export interface UseSsoProviderCreateLogicOptions { onNext?: SsoProviderCreateProps['onNext']; onPrevious?: SsoProviderCreateProps['onPrevious']; createProvider: (data: CreateIdentityProviderRequestContentPrivate) => Promise; } export interface UseSsoProviderCreateLogicResult { formData: FormState; setFormData: React.Dispatch>; detailsRef: React.RefObject; configureRef: React.RefObject; handleCreate: () => Promise; isLoadingConfig: boolean; filteredStrategies: IdpStrategy[]; isLoadingIdpConfig: boolean; idpConfig?: GetIdpConfigurationResponseContent | null; createStepActions: ( stepId: 'provider_details' | 'provider_configure', ref: React.RefObject, ) => { onNextAction: () => Promise; onPreviousAction: () => Promise; }; } export type FormState = { strategy?: IdpStrategy; details?: ProviderDetailsFormValues | null; configure?: ProviderConfigureFormValues | null; }; export type SsoProviderCreateViewProps = { logic: SsoProviderCreateLogicProps; handlers: SsoProviderCreateHandlerProps; }; export interface SsoProviderCreateLogicProps { formData: FormState; strategy?: IdpStrategy; details?: ProviderDetailsFormValues | null; configure?: ProviderConfigureFormValues | null; isCreating: boolean; isLoadingConfig: boolean; filteredStrategies: IdpStrategy[]; isLoadingIdpConfig: boolean; idpConfig?: GetIdpConfigurationResponseContent | null; styling?: SsoProviderCreateProps['styling']; customMessages?: SsoProviderCreateProps['customMessages']; backButton?: SsoProviderCreateProps['backButton']; } export interface SsoProviderCreateHandlerProps { onNext: ((stepId: string, values: Partial) => boolean) | undefined; onPrevious: ((stepId: string, values: Partial) => boolean) | undefined; setFormData: React.Dispatch>; detailsRef: React.RefObject; configureRef: React.RefObject; handleCreate: () => Promise; createStepActions: ( stepId: 'provider_details' | 'provider_configure', ref: React.RefObject, ) => { onNextAction: () => Promise; onPreviousAction: () => Promise; }; } b7: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; } b8:T195f,/** * SSO provider edit types. * @module sso-provider-edit-types */ import type { SharedComponentProps, BackButton, SsoProviderEditMessages, IdpKnownResponse, IdpId, OrganizationPrivate, UpdateIdentityProviderRequestContentPrivate, CreateIdpProvisioningScimTokenResponseContent, CreateIdpProvisioningScimTokenRequestContent, ListIdpProvisioningScimTokensResponseContent, GetIdPProvisioningConfigResponseContent, SsoProviderAttributeMappingsMessages, IdpProvisioningUserAttributeMapItem, IdpUserAttributeMapItem, IdpStrategy, AttributeSyncAlertMessages, GetIdpConfigurationResponseContent, } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import type React from 'react'; import type { SsoDomainsTabEditProps, SsoDomainTabClasses, SsoProviderEditDomainsTabSchema, } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types'; import type { SsoProviderTabClasses, SsoProviderTabEditProps, SsoProviderTabSchemas, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-tab-types'; import type { SsoProvisioningTabClasses, SsoProvisioningTabEditProps, SsoProvisioningTabSchemas, } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types'; /** Back button for SSO provider edit. */ export interface SsoProviderEditBackButton extends Omit { icon?: LucideIcon; onClick: (e: React.MouseEvent) => void; } /** CSS classes for SsoProviderEdit. */ export interface SsoProviderEditClasses extends SsoProviderTabClasses, SsoProvisioningTabClasses, SsoDomainTabClasses { 'SsoProviderEdit-header'?: string; 'SsoProviderEdit-tabs'?: string; } /** SSO provider edit schemas. */ export interface SsoProviderEditSchema { provider: SsoProviderTabSchemas; provisioning: SsoProvisioningTabSchemas; domains?: SsoProviderEditDomainsTabSchema; } /** Props for SsoProviderEdit component. */ export interface SsoProviderEditProps extends SharedComponentProps< SsoProviderEditMessages, SsoProviderEditClasses, SsoProviderEditSchema > { hideHeader?: boolean; providerId: IdpId; sso?: SsoProviderTabEditProps; provisioning?: SsoProvisioningTabEditProps; domains?: SsoDomainsTabEditProps; backButton?: SsoProviderEditBackButton; } /** useSsoProviderEdit options. */ export interface UseSsoProviderEditOptions extends SharedComponentProps { sso?: SsoProviderTabEditProps; provisioning?: SsoProvisioningTabEditProps; domains?: SsoDomainsTabEditProps; } export interface UseSsoProviderEditReturn { provider: IdpKnownResponse | null; organization: OrganizationPrivate | null; provisioningConfig: GetIdPProvisioningConfigResponseContent | null; isLoading: boolean; isUpdating: boolean; isDeleting: boolean; isRemoving: boolean; isProvisioningUpdating: boolean; isProvisioningDeleting: boolean; isProvisioningLoading: boolean; isScimTokensLoading: boolean; isScimTokenCreating: boolean; isScimTokenDeleting: boolean; isSsoAttributesSyncing: boolean; isProvisioningAttributesSyncing: boolean; hasSsoAttributeSyncWarning: boolean; hasProvisioningAttributeSyncWarning: boolean; fetchProvider: () => Promise; fetchOrganizationDetails: () => Promise; fetchProvisioning: () => Promise; updateProvider: (data: UpdateIdentityProviderRequestContentPrivate) => Promise; createProvisioning: () => Promise; deleteProvisioning: () => Promise; listScimTokens: () => Promise; createScimToken: ( data: CreateIdpProvisioningScimTokenRequestContent, ) => Promise; deleteScimToken: (idpScimTokenId: string) => Promise; syncSsoAttributes: () => Promise; syncProvisioningAttributes: () => Promise; onDeleteConfirm: () => Promise; onRemoveConfirm: () => Promise; } export interface SsoProviderAttributeMappingsProps extends SharedComponentProps