62: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"] 63: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-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"}]]}]}] 54:["$","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"}]]}]}] 55:["$","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"}]]}]}] 56:["$","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"}]]}]}] 57:["$","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"}]]}]}] 58:["$","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"}]]}]}] 59:["$","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"}]]}]}] 5a:["$","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"}]]}]}] 5b:["$","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"}]]}]}] 5c:["$","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"}]]}]}] 5d:["$","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"}]]}]}] 5e:["$","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"}]]}]}] 5f:["$","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"}]]}]}] 60:["$","$L62",null,{"namespace":"@auth0","registryDependencies":[]}] 64:T2203,/** @module sso-provider-create */ import { getComponentStyles } from '@auth0/universal-components-core'; import { useMemo } from 'react'; import ProviderConfigure from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure'; import { ProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details'; import { ProviderSelect } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-select'; 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 { Wizard } from '@/components/auth0/shared/wizard'; import type { StepProps } from '@/components/auth0/shared/wizard'; import { useSsoProviderCreate } from '@/hooks/my-organization/use-sso-provider-create'; import { useSsoProviderCreateLogic } from '@/hooks/my-organization/use-sso-provider-create-logic'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { FormState, SsoProviderCreateHandlerProps, SsoProviderCreateLogicProps, SsoProviderCreateProps, SsoProviderCreateViewProps, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; /** * SSO provider creation container component. * @param props - Component props * @param props.createAction - Configuration for the create action * @param props.backButton - Configuration for the back button * @param props.customMessages - Custom translation messages to override defaults * @param props.styling - Custom styling configuration with variables and classes * @param props.onNext - Callback for next action * @param props.onPrevious - Callback for previous action * @internal * @returns JSX element */ function SsoProviderCreate(props: SsoProviderCreateProps) { const { createAction, backButton, customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {}, }, onNext, onPrevious, } = props; const { createProvider, isCreating } = useSsoProviderCreate({ createAction, customMessages, }); const { formData, detailsRef, configureRef, setFormData, handleCreate, createStepActions, isLoadingConfig, filteredStrategies, isLoadingIdpConfig, idpConfig, } = useSsoProviderCreateLogic({ onNext, onPrevious, createProvider, }); const { strategy, details, configure } = formData; const ssoProviderCreateLogicProps: SsoProviderCreateLogicProps = { formData, strategy, details, configure, isCreating, isLoadingConfig, filteredStrategies, isLoadingIdpConfig, idpConfig, styling, customMessages, backButton, }; const ssoProviderCreateHandlerProps: SsoProviderCreateHandlerProps = { onNext, onPrevious, setFormData, detailsRef, configureRef, handleCreate, createStepActions, }; return ( ); } /** * Internal SSO provider creation view component * @param props - Component props * @param props.logic - Component logic props * @param props.handlers - Component handler props * @internal * @returns JSX element */ function SsoProviderCreateView({ logic, handlers }: SsoProviderCreateViewProps) { const { styling, customMessages, backButton, isCreating, strategy, details, configure, isLoadingConfig, filteredStrategies, isLoadingIdpConfig, idpConfig, }: SsoProviderCreateLogicProps = logic; const { isDarkMode } = useTheme(); const { t } = useTranslator('idp_management.create_sso_provider', customMessages); const { detailsRef, configureRef, onNext, onPrevious, setFormData, handleCreate, createStepActions, }: SsoProviderCreateHandlerProps = handlers; const currentStyles = useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const wizardSteps = useMemo( () => [ { id: 'provider_select', title: t('steps.one'), content: ({ onNext: navigate }: StepProps) => ( { setFormData((prev: FormState) => ({ strategy: selected, details: prev.strategy === selected ? prev.details : null, configure: prev.strategy === selected ? prev.configure : null, })); onNext?.('provider_select', { strategy: selected }); navigate?.(); }} selectedStrategy={strategy} customMessages={customMessages?.provider_select} className={currentStyles?.classes?.['ProviderSelect-root']} /> ), actions: { showNext: false }, }, { id: 'provider_details', title: t('steps.two'), content: () => ( ), actions: createStepActions('provider_details', detailsRef), }, { id: 'provider_configure', title: t('steps.three'), content: () => strategy ? ( ) : null, actions: createStepActions('provider_configure', configureRef), }, ], [ t, strategy, details, configure, onNext, onPrevious, customMessages, currentStyles, styling, createStepActions, ], ); return (

); } /** * SSO provider creation wizard. * * Multi-step wizard for creating new SSO identity providers. Guides users through * provider selection, configuration, and setup. Supports OIDC, SAML, Google Workspace, * Microsoft Entra ID, Okta, PingFederate, and ADFS strategies. * * @param props - {@link SsoProviderCreateProps} * @param props.createAction - Lifecycle hooks for provider creation * @param props.backButton - Back button configuration * @param props.onNext - Callback when moving to next step * @param props.onPrevious - Callback when moving to previous step * @param props.customMessages - Custom i18n message overrides * @param props.styling - CSS variables and class overrides * @returns SSO provider creation wizard component * * @see {@link SsoProviderCreateProps} for full props documentation * * @example * ```tsx * true, * onAfter: (provider) => navigate(`/providers/${provider.id}`), * }} * backButton={{ * onClick: () => navigate('/providers'), * }} * /> * ``` */ export { SsoProviderCreate, SsoProviderCreateView }; 65: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')} )} /> )}

); }, ); 66: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')}

)} /> )}

); } 67: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')} )} />

); }); 68: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')} )} /> )}

); }, ); 69: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')} )} />

); }, ); 6a: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', )} )} /> )}

); }); 6b: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()}

; }); 6c:T840,/** * SSO provider configuration step container. * @module provider-configure * @internal */ import type { ProviderConfigureFormValues } from '@auth0/universal-components-core'; import * as React from 'react'; import { ProviderConfigureFields, type ProviderConfigureFormHandle, } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields'; import { Section } from '@/components/auth0/shared/section'; import { Spinner } from '@/components/ui/spinner'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { ProviderConfigureHandle, ProviderConfigureProps, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; export const ProviderConfigure = React.forwardRef( function ProviderConfigure( { strategy, initialData, readOnly = false, customMessages = {}, className, idpConfig, isLoading, }, ref, ) { const { t } = useTranslator( 'idp_management.create_sso_provider.provider_configure', customMessages, ); const formRef = React.useRef(null); React.useImperativeHandle(ref, () => ({ validate: async () => { return (await formRef.current?.validate()) ?? false; }, getData: () => { return formRef.current?.getData() as ProviderConfigureFormValues; }, })); if (isLoading) { return (

); } return (

); }, ); export default ProviderConfigure; 6d: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')} )} />

); }); 6e: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')} )} />

); }, ); 6f: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 ( ); }, ); 70:Tcd3,/** * SSO provider type selection step. * @module provider-select * @internal */ import type { IdpStrategy } from '@auth0/universal-components-core'; import { STRATEGY_DISPLAY_NAMES, STRATEGIES } from '@auth0/universal-components-core'; import React from 'react'; import EntraIdLogo from '@/assets/icons/entraid-logo'; import GoogleLogo from '@/assets/icons/google-logo'; import MicrosoftLogo from '@/assets/icons/microsoft-logo'; import OidcLogo from '@/assets/icons/oidc-logo'; import OktaLogo from '@/assets/icons/okta-logo'; import PingIdLogo from '@/assets/icons/pingid-logo'; import SamlpLogo from '@/assets/icons/sampl-logo'; import { Section } from '@/components/auth0/shared/section'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { ProviderSelectProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; const STRATEGY_ICONS: Record> = { [STRATEGIES.OKTA]: OktaLogo, [STRATEGIES.GOOGLE_APPS]: GoogleLogo, [STRATEGIES.WAAD]: EntraIdLogo, [STRATEGIES.ADFS]: MicrosoftLogo, [STRATEGIES.PINGFEDERATE]: PingIdLogo, [STRATEGIES.SAMLP]: SamlpLogo, [STRATEGIES.OIDC]: OidcLogo, }; /** * Provider selection component for SSO setup. * @param props - Component props. * @param props.isLoading - Whether the component is in a loading state * @param props.strategyList - List of available strategies * @param props.onClickStrategy - Callback fired when a strategy is selected * @param props.customMessages - Custom translation messages to override defaults * @param props.className - Optional CSS class name for styling * @returns JSX element */ function ProviderSelect({ isLoading, strategyList, onClickStrategy, customMessages = {}, className, }: ProviderSelectProps) { const { t } = useTranslator('idp_management.create_sso_provider.provider_select', customMessages); return (

{isLoading ? (

) : ( strategyList.map((strategyType) => { const IconComponent = STRATEGY_ICONS[strategyType as IdpStrategy]; const displayName = STRATEGY_DISPLAY_NAMES[strategyType as IdpStrategy]; return ( ); }) )}

); } export { ProviderSelect }; 71: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 }; 72: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 && ( )}

); }; 73: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}; } 74: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'; 75: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}

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

); }; 77: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); }; 78:T61a,/** * Wizard stepper navigation component. * @module wizard-stepper * @internal */ 'use client'; import { Stepper, Step, StepTitle, StepDescription } from '@/components/ui/stepper'; export interface WizardStep { id?: string; title: string; description?: string; } interface WizardStepperProps { steps: WizardStep[]; currentStep?: number; onStepClick?: (stepIndex: number, stepId?: string) => void; className?: string; hideNumbers?: boolean; } /** * Wizard stepper navigation component. * @param props - Component props. * @param props.steps - Array of wizard steps * @param props.currentStep - Current active step index * @param props.onStepClick - Callback fired when a step is clicked * @param props.className - Optional CSS class name for styling * @param props.hideNumbers - Whether to hide numbers * @returns JSX element */ function WizardStepper({ steps, currentStep = 0, onStepClick, className, hideNumbers = true, }: WizardStepperProps) { return ( {steps.map((step, index) => ( {step.title} {step.description && {step.description}} ))} ); } export { WizardStepper }; export type { WizardStepperProps }; 79:T1499,/** * Multi-step wizard component. * @module wizard * @internal */ 'use client'; import * as React from 'react'; import { FormActions } from '@/components/auth0/shared/form-actions'; import { WizardStepper } from '@/components/auth0/shared/wizard-stepper'; import { Card, CardContent } from '@/components/ui/card'; import { Spinner } from '@/components/ui/spinner'; import { cn } from '@/lib/utils'; export interface StepFormActions { showPrevious?: boolean; showNext?: boolean; onPreviousAction?: (stepId: string) => Promise | boolean; onNextAction?: (stepId: string) => Promise | boolean; } export interface WizardStep { id: string; title: string; description?: string; content: React.ComponentType; actions?: StepFormActions; } export interface StepProps { onPrevious?: () => void; onNext?: () => void; isLoading?: boolean; } export interface FormActionLabels { nextButtonLabel?: string; previousButtonLabel?: string; completeButtonLabel?: string; } export interface WizardProps { steps: WizardStep[]; initialStep?: number; onComplete?: () => Promise | void; className?: string; formActionLabels?: FormActionLabels; hideStepperNumbers?: boolean; isLoading?: boolean; allowStepNavigation?: boolean; } /** * Multi-step wizard component. * @param props - Component props. * @param props.steps - Array of wizard steps * @param props.initialStep - Initial step index * @param props.onComplete - Callback fired when the operation completes * @param props.className - Optional CSS class name for styling * @param props.formActionLabels - Labels for form action buttons * @param props.hideStepperNumbers - Whether to hide step numbers * @param props.isLoading - Whether the component is in a loading state * @param props.allowStepNavigation - Whether step navigation is allowed * @returns JSX element */ function Wizard({ steps, initialStep = 0, onComplete, className, formActionLabels, hideStepperNumbers = false, isLoading = false, allowStepNavigation = true, }: WizardProps) { const [activeStep, setActiveStep] = React.useState(initialStep); const currentStepConfig = steps[activeStep]; const isFirstStep = activeStep === 0; const isLastStep = activeStep === steps.length - 1; const handleNext = React.useCallback(async () => { if (isLoading) return; const step = steps[activeStep]; if (step?.actions?.onNextAction) { const canProceed = await step.actions.onNextAction(step.id); if (!canProceed) { return; } } if (isLastStep) { await onComplete?.(); } else { setActiveStep((prev) => prev + 1); } }, [activeStep, isLastStep, steps, onComplete, isLoading]); const handlePrevious = React.useCallback(async () => { if (isFirstStep) return; const step = steps[activeStep]; if (step?.actions?.onPreviousAction) { const canProceed = await step.actions.onPreviousAction(step.id); if (!canProceed) { return; } } setActiveStep((prev) => prev - 1); }, [activeStep, isFirstStep, steps]); const handleStepClick = React.useCallback( async (stepIndex: number) => { if (isLoading || !allowStepNavigation) return; // Only allow navigation to previous steps or the current step if (stepIndex > activeStep) return; setActiveStep(stepIndex); }, [activeStep, isLoading, allowStepNavigation], ); const CurrentStepComponent = currentStepConfig?.content; const showPrevious = currentStepConfig?.actions?.showPrevious !== false && !isFirstStep; const showNext = currentStepConfig?.actions?.showNext ?? true; const labels = { nextButtonLabel: 'Next', previousButtonLabel: 'Previous', completeButtonLabel: 'Submit', ...formActionLabels, }; return (

{isLoading && (

)}

{CurrentStepComponent ? ( ) : null}

); } export { Wizard }; 7a: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 }; 7b: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 }; 7c: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 }; 7d: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 }; 7e: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

))}

)}

); } 7f: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, }; 80: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 }; 81: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 }; 82: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, }; 83: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 (

); } 84:T13ca,/** * Multi-step progress stepper component. * @module stepper * @internal */ 'use client'; import { Check } from 'lucide-react'; import * as React from 'react'; import { Card } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import { cn } from '@/lib/utils'; interface StepperContextValue { currentStep: number; isClickable: boolean; onStepClick?: (stepNumber: number, stepId?: string) => void; } const StepperContext = React.createContext(null); const useStepperContext = () => { const context = React.useContext(StepperContext); if (!context) { throw new Error('Stepper components must be used within a Stepper'); } return context; }; interface StepperProps { currentStep?: number; className?: string; onStepClick?: (stepNumber: number, stepId?: string) => void; enableAllSteps?: boolean; children: React.ReactNode; } function Stepper({ currentStep = 0, className, onStepClick, enableAllSteps = false, children, }: StepperProps) { const contextValue: StepperContextValue = React.useMemo( () => ({ currentStep, isClickable: enableAllSteps && !!onStepClick, onStepClick, }), [currentStep, enableAllSteps, onStepClick], ); const processedChildren = React.useMemo(() => { const childArray = React.Children.toArray(children); const result: React.ReactNode[] = []; childArray.forEach((child, index) => { result.push(child); if (index < childArray.length - 1) { result.push(); } }); return result; }, [children]); return ( ); } interface StepProps { step: number; id?: string; hideNumber?: boolean; className?: string; children: React.ReactNode; onClick?: () => void; } function Step({ step, id, hideNumber = true, className, children, onClick }: StepProps) { const { currentStep, isClickable, onStepClick } = useStepperContext(); const isCurrent = step === currentStep; const isCompleted = step < currentStep; const isClickableStep = isClickable && (isCompleted || isCurrent); const handleClick = () => { if (isClickableStep) { onClick?.(); onStepClick?.(step, id); } }; return (

{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } } : undefined } >

{isCompleted ? ( ) : !hideNumber ? ( {step + 1} ) : null}

{children}

); } interface StepTitleProps { className?: string; children: React.ReactNode; } function StepTitle({ className, children }: StepTitleProps) { return (

{children}

); } interface StepSeparatorProps { className?: string; } function StepSeparator({ className }: StepSeparatorProps) { return ( ); } interface StepDescriptionProps { className?: string; children: React.ReactNode; } function StepDescription({ className, children }: StepDescriptionProps) { return (

{children}

); } export { Stepper, Step, StepTitle, StepSeparator, StepDescription }; 85: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 }; 86: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 }; 87: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 }; 88: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 }; 89: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, }; } 8a: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, }; } 8b:Tb0c,/** * SSO provider create logic hook. * @module use-sso-provider-create-logic * @internal */ import { useCallback, useRef, useState } from 'react'; import { useConfig } from '@/hooks/my-organization/use-config'; import { useIdpConfig } from '@/hooks/my-organization/use-idp-config'; import type { FormState, ProviderConfigureHandle, ProviderDetailsFormHandle, UseSsoProviderCreateLogicOptions, UseSsoProviderCreateLogicResult, } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; /** * Hook for SSO provider create logic (form state, step actions, create handler). * @param params - SsoProviderCreateLogicParams * @returns formData, setFormData, createStepActions, handleCreate, detailsRef, configureRef */ export function useSsoProviderCreateLogic({ onNext, onPrevious, createProvider, }: UseSsoProviderCreateLogicOptions): UseSsoProviderCreateLogicResult { const [formData, setFormData] = useState({}); const { strategy, details, configure } = formData; const detailsRef = useRef(null); const configureRef = useRef(null); const { isLoadingConfig, filteredStrategies } = useConfig(); const { isLoadingIdpConfig, idpConfig } = useIdpConfig(); const createStepActions = useCallback( ( stepId: 'provider_details' | 'provider_configure', ref: React.RefObject, ) => { const dataKey = stepId === 'provider_details' ? 'details' : 'configure'; const handleAction = async ( handler: typeof onNext | typeof onPrevious | undefined, shouldValidate = false, ): Promise => { if (shouldValidate) { const isValid = await ref.current?.validate(); if (!isValid) return false; } const currentData = ref.current?.getData() ?? null; setFormData((prev) => ({ ...prev, [dataKey]: currentData })); if (!handler) return true; const fullPayload = { ...formData, [dataKey]: currentData }; return handler(stepId, fullPayload); }; return { onNextAction: () => handleAction(onNext, true), onPreviousAction: () => handleAction(onPrevious, false), }; }, [formData, onNext, onPrevious], ); const handleCreate = useCallback(async () => { const finalConfigureData = configureRef.current?.getData(); await createProvider({ strategy: strategy!, ...details!, ...finalConfigureData, }); }, [strategy, details, configure, createProvider]); return { formData, setFormData, createStepActions, handleCreate, detailsRef, configureRef, isLoadingConfig, filteredStrategies, isLoadingIdpConfig, idpConfig, }; } 8c:T12f8,/** * SSO provider creation hook. * @module use-sso-provider-create */ import { hasApiErrorBody, SsoProviderMappers, type CreateIdentityProviderRequestContent, type CreateIdentityProviderRequestContentPrivate, type IdpKnownResponse, } from '@auth0/universal-components-core'; import { ssoProviderQueryKeys } from '@auth0/universal-components-core'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useCallback } 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 { UseSsoProviderCreateOptions } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; /** * Extracts domain from discovery error detail. * @param detail - Error detail string. * @returns Domain string or null. * @internal */ function extractDomainFromDiscoveryError(detail?: string): string | null { if (!detail) return null; const match = detail.match(/discovery failure:\s*(.+)/i); return match?.[1]?.trim() ?? null; } export interface UseSsoProviderCreateReturn { createProvider: (data: CreateIdentityProviderRequestContentPrivate) => Promise; isCreating: boolean; } /** * Hook for creating SSO identity providers. * @param options - Hook options. * @param options.createAction - Callback after successful creation. * @param options.customMessages - Custom translation messages. * @returns Hook state and methods */ export function useSsoProviderCreate({ createAction, customMessages = {}, }: UseSsoProviderCreateOptions = {}): UseSsoProviderCreateReturn { const { coreClient } = useCoreClient(); const { t } = useTranslator('idp_management.create_sso_provider', customMessages); const queryClient = useQueryClient(); const handleError = useErrorHandler(); const createProviderMutation = useMutation({ mutationFn: async ( data: CreateIdentityProviderRequestContentPrivate, ): Promise => { if (!coreClient) { throw new Error('Core client not available'); } const { strategy, name, display_name, show_as_button, assign_membership_on_login, ...configOptions } = data; const formData = { strategy, name, display_name, show_as_button, assign_membership_on_login, options: configOptions, }; const apiRequestData: CreateIdentityProviderRequestContent = SsoProviderMappers.createToAPI(formData); const result: IdpKnownResponse = await coreClient .getMyOrganizationApiClient() .organization.identityProviders.create(apiRequestData); return result; }, onSuccess: (result, data) => { showToast({ type: 'success', message: t('notifications.provider_create_success', { providerName: result.name }), }); createAction?.onAfter?.(data, result); // Invalidate the providers list to refetch with the new provider queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list() }); }, onError: (error, data) => { if ( hasApiErrorBody(error) && error.body?.status === 409 && error.body?.type === 'https://auth0.com/api-errors#A0E-409-0001' ) { showToast({ type: 'error', message: t('notifications.provider_create_duplicated_provider_error', { providerName: data.name, }), }); return; } // Handle discovery failure error for domain if (hasApiErrorBody(error)) { const domainFromError = extractDomainFromDiscoveryError(error.body?.detail); if (domainFromError) { showToast({ type: 'error', message: t('notifications.provider_create_discovery_failure', { domain: domainFromError, }), }); return; } } handleError(error, { fallbackMessage: t('notifications.general_error') }); }, }); const createProvider = useCallback( async (data: CreateIdentityProviderRequestContentPrivate): Promise => { if (!coreClient) { showToast({ type: 'error', message: t('notifications.general_error'), }); return; } if (createAction?.onBefore) { const canProceed = createAction.onBefore(data); if (!canProceed) { return; } } await createProviderMutation.mutateAsync(data); }, [coreClient, createAction, createProviderMutation], ); return { createProvider, isCreating: createProviderMutation.isPending, }; } 8d: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; }; 8e: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], ); } 8f: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; }; 90: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, }; } 91: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; 92: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} ); } 93: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; 94: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}

); }; 95: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; }; 96: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; }; } 97: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; 61:["$","$L63",null,{"files":[{"path":"src/components/auth0/my-organization/sso-provider-create.tsx","content":"$64","type":"registry:block","target":"components/auth0/my-organization/sso-provider-create.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx","content":"$65","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":"$66","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":"$67","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":"$68","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":"$69","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":"$6a","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":"$6b","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/provider-configure.tsx","content":"$6c","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure.tsx"},{"path":"src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx","content":"$6d","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":"$6e","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":"$6f","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-create/provider-select.tsx","content":"$70","type":"registry:component","target":"components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-select.tsx"},{"path":"src/components/auth0/shared/copyable-text-field.tsx","content":"$71","type":"registry:component","target":"components/auth0/shared/copyable-text-field.tsx"},{"path":"src/components/auth0/shared/form-actions.tsx","content":"$72","type":"registry:component","target":"components/auth0/shared/form-actions.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$73","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/header.tsx","content":"$74","type":"registry:component","target":"components/auth0/shared/header.tsx"},{"path":"src/components/auth0/shared/section.tsx","content":"$75","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":"$76","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$77","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/auth0/shared/wizard-stepper.tsx","content":"$78","type":"registry:component","target":"components/auth0/shared/wizard-stepper.tsx"},{"path":"src/components/auth0/shared/wizard.tsx","content":"$79","type":"registry:component","target":"components/auth0/shared/wizard.tsx"},{"path":"src/components/ui/accordion.tsx","content":"$7a","type":"registry:component","target":"components/ui/accordion.tsx"},{"path":"src/components/ui/button.tsx","content":"$7b","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$7c","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/checkbox.tsx","content":"$7d","type":"registry:component","target":"components/ui/checkbox.tsx"},{"path":"src/components/ui/file-upload.tsx","content":"$7e","type":"registry:component","target":"components/ui/file-upload.tsx"},{"path":"src/components/ui/form.tsx","content":"$7f","type":"registry:component","target":"components/ui/form.tsx"},{"path":"src/components/ui/label.tsx","content":"/**\n * Form label component.\n * @module label\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Label({ children, className, ...props }: React.ComponentPropsWithoutRef<'label'>) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/label.tsx"},{"path":"src/components/ui/link.tsx","content":"$80","type":"registry:component","target":"components/ui/link.tsx"},{"path":"src/components/ui/radio-group.tsx","content":"$81","type":"registry:component","target":"components/ui/radio-group.tsx"},{"path":"src/components/ui/select.tsx","content":"$82","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":"$83","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/stepper.tsx","content":"$84","type":"registry:component","target":"components/ui/stepper.tsx"},{"path":"src/components/ui/switch.tsx","content":"$85","type":"registry:component","target":"components/ui/switch.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$86","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/toggle.tsx","content":"$87","type":"registry:component","target":"components/ui/toggle.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$88","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-organization/use-config.ts","content":"$89","type":"registry:component","target":"hooks/my-organization/use-config.ts"},{"path":"src/hooks/my-organization/use-idp-config.ts","content":"$8a","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-provider-create-logic.ts","content":"$8b","type":"registry:component","target":"hooks/my-organization/use-sso-provider-create-logic.ts"},{"path":"src/hooks/my-organization/use-sso-provider-create.ts","content":"$8c","type":"registry:component","target":"hooks/my-organization/use-sso-provider-create.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$8d","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":"$8e","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":"$8f","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$90","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":"$91","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$92","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$93","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$94","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$95","type":"registry:component","target":"types/auth-types.ts"},{"path":"src/types/cache-types.ts","content":"/**\n * TanStack Query cache configuration types.\n * @module cache-types\n */\n\n/** Cache configuration options. */\nexport interface QueryCacheConfig {\n enabled?: boolean;\n staleTime?: number;\n gcTime?: number;\n refetchOnWindowFocus?: boolean | 'always';\n}\n","type":"registry:component","target":"types/cache-types.ts"},{"path":"src/types/i18n-types.ts","content":"/**\n * Internationalization configuration types.\n * @module i18n-types\n */\n\n/** i18n configuration for Auth0 components. */\nexport interface I18nOptions {\n currentLanguage: string;\n fallbackLanguage?: string;\n}\n","type":"registry:component","target":"types/i18n-types.ts"},{"path":"src/types/my-organization/config/config-idp-types.ts","content":"/**\n * IDP configuration types.\n * @module config-idp-types\n */\n\nimport type {\n GetIdpConfigurationResponseContent,\n IdpStrategy,\n} from '@auth0/universal-components-core';\n\n/** useIdpConfig hook result. */\nexport interface UseConfigIdpResult {\n idpConfig: GetIdpConfigurationResponseContent | null;\n isLoadingIdpConfig: boolean;\n fetchIdpConfig: () => Promise;\n isProvisioningEnabled: (strategy: IdpStrategy | undefined) => boolean;\n isProvisioningMethodEnabled: (strategy: IdpStrategy | undefined) => boolean;\n isIdpConfigValid: boolean;\n}\n","type":"registry:component","target":"types/my-organization/config/config-idp-types.ts"},{"path":"src/types/my-organization/config/config-types.ts","content":"/**\n * Organization configuration types.\n * @module config-types\n */\n\nimport type {\n GetConfigurationResponseContent,\n IdpStrategy,\n} from '@auth0/universal-components-core';\n\n/** useConfig hook result. */\nexport interface UseConfigResult {\n config: GetConfigurationResponseContent | null;\n isLoadingConfig: boolean;\n fetchConfig: () => Promise;\n filteredStrategies: IdpStrategy[];\n shouldAllowDeletion: boolean;\n isConfigValid: boolean;\n}\n","type":"registry:component","target":"types/my-organization/config/config-types.ts"},{"path":"src/types/my-organization/idp-management/sso-provider/sso-provider-create-types.ts","content":"$96","type":"registry:component","target":"types/my-organization/idp-management/sso-provider/sso-provider-create-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":"$97","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/assets/icons/entraid-logo.tsx","content":"/**\n * Entra ID logo icon component.\n * @module entraid-logo\n * @internal\n */\n\nimport { EntraIdLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface EntraIdProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * EntraIdLogo component renders the EntraId SVG logo.\n *\n * @param props - Props including width, height, title, and standard SVG attributes.\n * @returns A JSX SVG element of the EntraId logo.\n */\nconst EntraIdLogo: React.FC = ({\n width = 17,\n height = 17,\n title = 'EntraID logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(EntraIdLogo);\n","type":"registry:component","target":"assets/icons/entraid-logo.tsx"},{"path":"src/assets/icons/google-logo.tsx","content":"/**\n * Google logo icon component.\n * @module google-logo\n * @internal\n */\n\nimport { GoogleLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface GoogleLogoProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * GoogleLogo component renders the Google \"G\" logo SVG.\n *\n * @param props - Props including width, height, title, and standard SVG attributes.\n * @returns A JSX SVG element of the Google logo.\n */\nconst GoogleLogo: React.FC = ({\n width = 48,\n height = 48,\n title = 'Google logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(GoogleLogo);\n","type":"registry:component","target":"assets/icons/google-logo.tsx"},{"path":"src/assets/icons/microsoft-logo.tsx","content":"/**\n * Microsoft logo icon component.\n * @module microsoft-logo\n * @internal\n */\n\nimport { MicrosoftLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface MicrosoftLogoProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * MicrosoftLogo component renders the Microsoft logo.\n *\n * @param props - Props including width, height, title, and standard img attributes.\n * @returns A JSX img element of the Microsoft logo.\n */\nconst MicrosoftLogo: React.FC = ({\n width = 17,\n height = 17,\n title = 'Microsoft logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(MicrosoftLogo);\n","type":"registry:component","target":"assets/icons/microsoft-logo.tsx"},{"path":"src/assets/icons/oidc-logo.tsx","content":"/**\n * OIDC logo icon component.\n * @module oidc-logo\n * @internal\n */\n\nimport { OidcLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface OidcProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * OidcLogo component renders the Oidc logo.\n *\n * @param props - Props including width, height, title, and standard img attributes.\n * @returns A JSX img element of the Oidc logo.\n */\nconst OidcLogo: React.FC = ({\n width = 17,\n height = 17,\n title = 'Oidc logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(OidcLogo);\n","type":"registry:component","target":"assets/icons/oidc-logo.tsx"},{"path":"src/assets/icons/okta-logo.tsx","content":"/**\n * Okta logo icon component.\n * @module okta-logo\n * @internal\n */\n\nimport { OktaLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface OktaLogoProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * OktaLogo component renders the Okta logo.\n *\n * @param props - Props including width, height, title, and standard img attributes.\n * @returns A JSX img element of the Okta logo.\n */\nconst OktaLogo: React.FC = ({\n width = 17,\n height = 17,\n title = 'Okta logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(OktaLogo);\n","type":"registry:component","target":"assets/icons/okta-logo.tsx"},{"path":"src/assets/icons/pingid-logo.tsx","content":"/**\n * PingID logo icon component.\n * @module pingid-logo\n * @internal\n */\n\nimport { PingIdLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface PingIdProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * PingIdLogo component renders the PingId logo.\n *\n * @param props - Props including width, height, title, and standard img attributes.\n * @returns A JSX img element of the PingId logo.\n */\nconst PingIdLogo: React.FC = ({\n width = 17,\n height = 17,\n title = 'PingId logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(PingIdLogo);\n","type":"registry:component","target":"assets/icons/pingid-logo.tsx"},{"path":"src/assets/icons/sampl-logo.tsx","content":"/**\n * SAML-P logo icon component.\n * @module sampl-logo\n * @internal\n */\n\nimport { SamlpLogoSvg } from '@auth0/universal-components-core';\nimport React from 'react';\n\nexport interface SamlpProps extends React.ImgHTMLAttributes {\n width?: number | string;\n height?: number | string;\n title?: string;\n}\n\n/**\n * SamlpLogo component renders the Samlp logo.\n *\n * @param props - Props including width, height, title, and standard img attributes.\n * @returns A JSX img element of the Samlp logo.\n */\nconst SamlpLogo: React.FC = ({\n width = 17,\n height = 17,\n title = 'Samlp logo',\n className,\n ...props\n}) => {\n return (\n \n );\n};\n\nexport default React.memo(SamlpLogo);\n","type":"registry:component","target":"assets/icons/sampl-logo.tsx"},{"path":"src/styles/globals.css","content":"@import 'tailwindcss' important;\n@import '@auth0/universal-components-core/styles/globals.css';\n","type":"registry:component","target":"styles/globals.css"},{"path":"src/styles/tailwind.css","content":"/* Scan component library for class names */\n@source \"./**/*.js\";\n","type":"registry:component","target":"styles/tailwind.css"}],"className":"h-[70svh] min-h-80"}]