{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "my-organization/sso-provider-create", "type": "registry:block", "title": "SSO provider creation container component.", "description": "A block component for sso provider create.", "dependencies": [ "@auth0/universal-components-core@2.1.0", "@auth0/auth0-react@^2.15.1", "@hookform/resolvers@^5.1.0", "@radix-ui/react-accordion@^1.2.0", "@radix-ui/react-checkbox@^1.1.1", "@radix-ui/react-label@^2.1.7", "@radix-ui/react-radio-group@^1.2.0", "@radix-ui/react-select@^2.2.5", "@radix-ui/react-slot@^1.2.3", "@radix-ui/react-switch@^1.1.0", "@radix-ui/react-tooltip@^1.2.7", "@tanstack/react-query@^5.56.2", "class-variance-authority@^0.7.1", "clsx@^2.1.1", "lucide-react@^1.16.0", "react-hook-form@^7.57.0", "sonner@^2.0.5", "tailwind-merge@^3.3.0" ], "files": [ { "path": "src/components/auth0/my-organization/sso-provider-create.tsx", "content": "/** @module sso-provider-create */\n\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport { useMemo } from 'react';\n\nimport ProviderConfigure from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure';\nimport { ProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details';\nimport { ProviderSelect } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-select';\nimport { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper';\nimport { Header } from '@/components/auth0/shared/header';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Wizard } from '@/components/auth0/shared/wizard';\nimport type { StepProps } from '@/components/auth0/shared/wizard';\nimport { useSsoProviderCreate } from '@/hooks/my-organization/use-sso-provider-create';\nimport { useSsoProviderCreateLogic } from '@/hooks/my-organization/use-sso-provider-create-logic';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type {\n FormState,\n SsoProviderCreateHandlerProps,\n SsoProviderCreateLogicProps,\n SsoProviderCreateProps,\n SsoProviderCreateViewProps,\n} from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\n/**\n * SSO provider creation container component.\n * @param props - Component props\n * @param props.createAction - Configuration for the create action\n * @param props.backButton - Configuration for the back button\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.styling - Custom styling configuration with variables and classes\n * @param props.onNext - Callback for next action\n * @param props.onPrevious - Callback for previous action\n * @internal\n * @returns JSX element\n */\nfunction SsoProviderCreate(props: SsoProviderCreateProps) {\n const {\n createAction,\n backButton,\n customMessages = {},\n styling = {\n variables: { common: {}, light: {}, dark: {} },\n classes: {},\n },\n onNext,\n onPrevious,\n } = props;\n\n const { createProvider, isCreating } = useSsoProviderCreate({\n createAction,\n customMessages,\n });\n const {\n formData,\n detailsRef,\n configureRef,\n setFormData,\n handleCreate,\n createStepActions,\n isLoadingConfig,\n filteredStrategies,\n isLoadingIdpConfig,\n idpConfig,\n } = useSsoProviderCreateLogic({\n onNext,\n onPrevious,\n createProvider,\n });\n\n const { strategy, details, configure } = formData;\n\n const ssoProviderCreateLogicProps: SsoProviderCreateLogicProps = {\n formData,\n strategy,\n details,\n configure,\n isCreating,\n isLoadingConfig,\n filteredStrategies,\n isLoadingIdpConfig,\n idpConfig,\n styling,\n customMessages,\n backButton,\n };\n\n const ssoProviderCreateHandlerProps: SsoProviderCreateHandlerProps = {\n onNext,\n onPrevious,\n setFormData,\n detailsRef,\n configureRef,\n handleCreate,\n createStepActions,\n };\n\n return (\n \n \n \n );\n}\n\n/**\n * Internal SSO provider creation view component\n * @param props - Component props\n * @param props.logic - Component logic props\n * @param props.handlers - Component handler props\n * @internal\n * @returns JSX element\n */\nfunction SsoProviderCreateView({ logic, handlers }: SsoProviderCreateViewProps) {\n const {\n styling,\n customMessages,\n backButton,\n isCreating,\n strategy,\n details,\n configure,\n isLoadingConfig,\n filteredStrategies,\n isLoadingIdpConfig,\n idpConfig,\n }: SsoProviderCreateLogicProps = logic;\n\n const { isDarkMode } = useTheme();\n const { t } = useTranslator('idp_management.create_sso_provider', customMessages);\n const {\n detailsRef,\n configureRef,\n onNext,\n onPrevious,\n setFormData,\n handleCreate,\n createStepActions,\n }: SsoProviderCreateHandlerProps = handlers;\n\n const currentStyles = useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n const wizardSteps = useMemo(\n () => [\n {\n id: 'provider_select',\n title: t('steps.one'),\n content: ({ onNext: navigate }: StepProps) => (\n {\n setFormData((prev: FormState) => ({\n strategy: selected,\n details: prev.strategy === selected ? prev.details : null,\n configure: prev.strategy === selected ? prev.configure : null,\n }));\n onNext?.('provider_select', { strategy: selected });\n navigate?.();\n }}\n selectedStrategy={strategy}\n customMessages={customMessages?.provider_select}\n className={currentStyles?.classes?.['ProviderSelect-root']}\n />\n ),\n actions: { showNext: false },\n },\n {\n id: 'provider_details',\n title: t('steps.two'),\n content: () => (\n \n ),\n actions: createStepActions('provider_details', detailsRef),\n },\n {\n id: 'provider_configure',\n title: t('steps.three'),\n content: () =>\n strategy ? (\n \n ) : null,\n actions: createStepActions('provider_configure', configureRef),\n },\n ],\n [\n t,\n strategy,\n details,\n configure,\n onNext,\n onPrevious,\n customMessages,\n currentStyles,\n styling,\n createStepActions,\n ],\n );\n\n return (\n \n
\n \n
\n \n
\n
\n \n );\n}\n\n/**\n * SSO provider creation wizard.\n *\n * Multi-step wizard for creating new SSO identity providers. Guides users through\n * provider selection, configuration, and setup. Supports OIDC, SAML, Google Workspace,\n * Microsoft Entra ID, Okta, PingFederate, and ADFS strategies.\n *\n * @param props - {@link SsoProviderCreateProps}\n * @param props.createAction - Lifecycle hooks for provider creation\n * @param props.backButton - Back button configuration\n * @param props.onNext - Callback when moving to next step\n * @param props.onPrevious - Callback when moving to previous step\n * @param props.customMessages - Custom i18n message overrides\n * @param props.styling - CSS variables and class overrides\n * @returns SSO provider creation wizard component\n *\n * @see {@link SsoProviderCreateProps} for full props documentation\n *\n * @example\n * ```tsx\n * true,\n * onAfter: (provider) => navigate(`/providers/${provider.id}`),\n * }}\n * backButton={{\n * onClick: () => navigate('/providers'),\n * }}\n * />\n * ```\n */\nexport { SsoProviderCreate, SsoProviderCreateView };\n", "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": "/**\n * ADFS SSO provider configuration form.\n * @module adfs-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type AdfsConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport { FileUpload } from '@/components/ui/file-upload';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface AdfsConfigureFormHandle {\n validate: () => Promise;\n getData: () => AdfsConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: AdfsConfigureFormValues) => void;\n}\n\ninterface AdfsConfigureFormProps extends Omit {}\n\nexport const AdfsProviderForm = React.forwardRef(\n function AdfsProviderForm(\n { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const [uploadedFiles, setUploadedFiles] = useState([]);\n\n const adfsData = initialData as AdfsConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('adfs')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n meta_data_source: adfsData?.meta_data_source || 'meta_data_url',\n meta_data_location_url: adfsData?.meta_data_location_url || '',\n adfs_server: adfsData?.adfs_server || '',\n fedMetadataXml: adfsData?.fedMetadataXml || '',\n show_as_button: adfsData?.show_as_button ?? false,\n assign_membership_on_login: adfsData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const typeValue = form.watch('meta_data_source');\n const showFederationMetadataFile = typeValue === 'meta_data_file';\n\n const handleFileUpload = async (files: File[]) => {\n setUploadedFiles(files);\n\n const file = files[0];\n if (file) {\n try {\n const content = await file.text();\n form.setValue('fedMetadataXml', content);\n } catch (error) {\n console.error('Error reading file:', error);\n }\n }\n };\n\n return (\n
\n
\n (\n \n \n {t('fields.adfs.meta_data_source.label')}\n \n \n \n
\n \n \n
\n
\n \n \n {t('fields.adfs.meta_data_source.options.meta_data_file.label')}\n \n
\n \n \n \n \n )}\n />\n\n {typeValue === 'meta_data_url' && (\n <>\n (\n \n \n {t('fields.adfs.meta_data_url.label')}\n \n \n \n \n \n \n {t('fields.adfs.meta_data_url.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.adfs.meta_data_location_url.label')}\n \n \n \n \n \n \n {t('fields.adfs.meta_data_location_url.helper_text')}\n \n \n )}\n />\n \n )}\n\n {showFederationMetadataFile && (\n (\n \n \n {t('fields.adfs.federation_metadata_file.label')}\n \n \n
\n \n
\n \n \n \n {t('fields.adfs.federation_metadata_file.helper_text')}\n \n \n )}\n />\n )}\n\n \n
\n
\n );\n },\n);\n", "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": "/**\n * Common SSO provider configuration fields.\n * @module common-configure-fields\n * @internal\n */\n\nimport type { GetIdpConfigurationResponseContent } from '@auth0/universal-components-core';\nimport { useFormContext } from 'react-hook-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { FormField, FormItem, FormLabel, FormControl, FormDescription } from '@/components/ui/form';\nimport { useTranslator } from '@/hooks/shared/use-translator';\n\ninterface CommonConfigureFieldsProps {\n idpConfig: GetIdpConfigurationResponseContent | null;\n readOnly?: boolean;\n customMessages?: Partial>;\n}\n\n/**\n * CommonConfigureFields Component\n * Renders common fields (show_as_button, assign_membership_on_login) that are shared across all SSO provider strategies\n * @param props - Component props.\n * @param props.idpConfig - Identity provider configuration\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function CommonConfigureFields({\n idpConfig,\n readOnly = false,\n customMessages = {},\n}: CommonConfigureFieldsProps) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const form = useFormContext();\n\n // Only show these fields if the config allows them\n const showAsButtonEnabled = idpConfig?.organization?.can_set_show_as_button;\n const assignMembershipEnabled = idpConfig?.organization?.can_set_assign_membership_on_login;\n\n // If neither field is enabled, don't render anything\n if (!showAsButtonEnabled && !assignMembershipEnabled) {\n return null;\n }\n\n return (\n
\n {showAsButtonEnabled && (\n (\n \n \n \n \n
\n \n {t('fields.common.show_as_button.label')}\n \n \n {t('fields.common.show_as_button.helper_text')}\n \n
\n \n )}\n />\n )}\n\n {assignMembershipEnabled && (\n (\n \n \n \n \n
\n \n {t('fields.common.assign_membership_on_login.label')}\n \n \n {t('fields.common.assign_membership_on_login.helper_text')}\n \n
\n \n )}\n />\n )}\n
\n );\n}\n", "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": "/**\n * Google Apps SSO provider configuration form.\n * @module google-apps-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type GoogleAppsConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface GoogleAppsConfigureFormHandle {\n validate: () => Promise;\n getData: () => GoogleAppsConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: GoogleAppsConfigureFormValues) => void;\n}\n\ninterface GoogleAppsConfigureFormProps extends Omit {}\n\nexport const GoogleAppsProviderForm = React.forwardRef<\n GoogleAppsConfigureFormHandle,\n GoogleAppsConfigureFormProps\n>(function GoogleAppsProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { coreClient } = useCoreClient();\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const callbackUrl = React.useMemo(() => {\n const domain = coreClient?.getDomain() || 'YOUR_DOMAIN';\n return `https://${domain}/login/callback`;\n }, [coreClient]);\n\n const googleAppsData = initialData as GoogleAppsConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('google-apps')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n domain: googleAppsData?.domain || '',\n client_id: googleAppsData?.client_id || '',\n client_secret: googleAppsData?.client_secret || '',\n callback_url: callbackUrl || '',\n show_as_button: googleAppsData?.show_as_button ?? false,\n assign_membership_on_login: googleAppsData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n (\n \n \n {t('fields.google-apps.domain.label')}\n \n \n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.google-apps.client_id.label')}\n \n \n \n \n \n \n {t('fields.google-apps.client_id.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.google-apps.client_secret.label')}\n \n \n \n \n \n \n {t('fields.google-apps.client_secret.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.google-apps.callback_url.label')}\n \n \n \n \n \n \n {t('fields.google-apps.callback_url.helper_text')}\n \n \n )}\n />\n\n \n
\n
\n );\n});\n", "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": "/**\n * OIDC SSO provider configuration form.\n * @module oidc-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type OidcConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface OidcConfigureFormHandle {\n validate: () => Promise;\n getData: () => OidcConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: OidcConfigureFormValues) => void;\n}\n\ninterface OidcConfigureFormProps extends Omit {}\n\nexport const OidcProviderForm = React.forwardRef(\n function OidcProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const oidcData = initialData as OidcConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('oidc')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n discovery_url: oidcData?.discovery_url || '',\n type: oidcData?.type || 'back_channel',\n client_id: oidcData?.client_id || '',\n client_secret: oidcData?.client_secret || '',\n show_as_button: oidcData?.show_as_button ?? false,\n assign_membership_on_login: oidcData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const typeValue = form.watch('type');\n const showClientSecret = typeValue === 'back_channel';\n\n // Clear client_secret error and value when switching to front channel\n React.useEffect(() => {\n if (typeValue === 'front_channel') {\n form.clearErrors('client_secret');\n form.setValue('client_secret', '', { shouldValidate: false });\n }\n }, [typeValue, form]);\n\n return (\n
\n
\n (\n \n \n {t('fields.oidc.discovery_url.label')}\n \n \n \n \n \n \n {t('fields.oidc.discovery_url.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.oidc.type.label')}\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n {t('fields.oidc.type.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.oidc.client_id.label')}\n \n \n \n \n \n \n {t('fields.oidc.client_id.helper_text')}\n \n \n )}\n />\n\n {showClientSecret && (\n (\n \n \n {t('fields.oidc.client_secret.label')}\n \n \n \n \n \n \n {t('fields.oidc.client_secret.helper_text')}\n \n \n )}\n />\n )}\n\n \n
\n
\n );\n },\n);\n", "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": "/**\n * Okta SSO provider configuration form.\n * @module okta-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type OktaConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Link } from '@/components/ui/link';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst OKTA_HELP_LINKS = {\n domain: 'https://developer.okta.com/docs/guides/find-your-domain/main/',\n client_id: 'https://developer.okta.com/docs/guides/find-your-app-credentials/main',\n client_secret: 'https://developer.okta.com/docs/guides/find-your-app-credentials/main',\n} as const;\n\nexport interface OktaConfigureFormHandle {\n validate: () => Promise;\n getData: () => OktaConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: OktaConfigureFormValues) => void;\n}\n\ninterface OktaConfigureFormProps extends Omit {}\n\nexport const OktaProviderForm = React.forwardRef(\n function OktaProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { coreClient } = useCoreClient();\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const callbackUrl = React.useMemo(() => {\n const domain = coreClient?.getDomain() || 'YOUR_DOMAIN';\n return `https://${domain}/login/callback`;\n }, [coreClient]);\n\n const oktaData = initialData as OktaConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('okta')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n domain: oktaData?.domain || '',\n client_id: oktaData?.client_id || '',\n client_secret: oktaData?.client_secret || '',\n icon_url: oktaData?.icon_url || '',\n callback_url: oktaData?.callback_url || callbackUrl,\n show_as_button: oktaData?.show_as_button ?? false,\n assign_membership_on_login: oktaData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n (\n \n \n {t('fields.okta.domain.label')}\n \n \n \n \n \n \n <>\n {t.trans('fields.okta.domain.helper_text', {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n })}\n \n \n \n )}\n />\n\n (\n \n \n {t('fields.okta.client_id.label')}\n \n \n \n \n \n \n <>\n {t.trans('fields.okta.client_id.helper_text', {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n })}\n \n \n \n )}\n />\n\n (\n \n \n {t('fields.okta.client_secret.label')}\n \n \n \n \n \n \n <>\n {t.trans('fields.okta.client_secret.helper_text', {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n })}\n \n \n \n )}\n />\n\n (\n \n \n {t('fields.okta.callback_url.label')}\n \n \n \n \n \n \n {t('fields.okta.callback_url.helper_text')}\n \n \n )}\n />\n\n \n
\n
\n );\n },\n);\n", "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": "/**\n * PingFederate SSO provider configuration form.\n * @module ping-federate-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type PingFederateConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { FileUpload } from '@/components/ui/file-upload';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Link } from '@/components/ui/link';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst PING_FEDERATE_HELP_LINKS = {\n sign_request: 'domain/pem?cert=connection',\n} as const;\n\nconst SIGNATURE_ALGORITHMS = [\n { value: 'rsa-sha1', label: 'RSA-SHA1' },\n { value: 'rsa-sha256', label: 'RSA-SHA256' },\n] as const;\n\nconst DIGEST_ALGORITHMS = [\n { value: 'sha1', label: 'SHA1' },\n { value: 'sha256', label: 'SHA256' },\n] as const;\n\nconst ALLOWED_CERT_EXTENSIONS = ['.pem', '.cer', '.crt'] as const;\n\nexport interface PingFederateConfigureFormHandle {\n validate: () => Promise;\n getData: () => PingFederateConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: PingFederateConfigureFormValues) => void;\n}\n\ninterface PingFederateConfigureFormProps extends Omit {}\n\nexport const PingFederateProviderForm = React.forwardRef<\n PingFederateConfigureFormHandle,\n PingFederateConfigureFormProps\n>(function PingFederateProviderForm(\n { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig },\n ref,\n) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const [uploadedFiles, setUploadedFiles] = useState([]);\n\n const pingFederateData = initialData as PingFederateConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('pingfederate')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n pingFederateBaseUrl: pingFederateData?.pingFederateBaseUrl || '',\n signingCert: pingFederateData?.signingCert || '',\n signSAMLRequest: pingFederateData?.signSAMLRequest || false,\n signatureAlgorithm: pingFederateData?.signatureAlgorithm || 'rsa-sha256',\n digestAlgorithm: pingFederateData?.digestAlgorithm || 'sha256',\n show_as_button: pingFederateData?.show_as_button ?? false,\n assign_membership_on_login: pingFederateData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const signRequestEnabled = form.watch('signSAMLRequest');\n\n const isAllowedCertificateFile = React.useCallback((file: File) => {\n const fileName = file.name.toLowerCase();\n return ALLOWED_CERT_EXTENSIONS.some((extension) => fileName.endsWith(extension));\n }, []);\n\n const handleFileUpload = async (files: File[]) => {\n setUploadedFiles(files);\n\n const file = files[0];\n if (file) {\n try {\n const content = await file.text();\n form.setValue('signingCert', content, { shouldDirty: true, shouldValidate: true });\n form.clearErrors('signingCert');\n } catch (error) {\n console.error('Error reading file:', error);\n }\n }\n };\n\n const handleInvalidFiles = (files: File[]) => {\n if (files.some((file) => !isAllowedCertificateFile(file))) {\n form.setError('signingCert', {\n type: 'manual',\n message: t('fields.ping-federate.sign_cert.error'),\n });\n }\n };\n\n return (\n
\n
\n (\n \n \n {t('fields.ping-federate.ping_federate_baseurl.label')}\n \n \n \n \n \n \n {t('fields.ping-federate.ping_federate_baseurl.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.ping-federate.sign_cert.label')}\n \n \n
\n \n
\n \n \n \n {t('fields.ping-federate.sign_cert.helper_text')}\n \n \n )}\n />\n\n \n \n \n {t('fields.ping-federate.advanced_settings.title')}\n \n \n (\n \n \n \n \n
\n \n {t('fields.ping-federate.advanced_settings.sign_request.label')}\n \n \n <>\n {t.trans(\n 'fields.ping-federate.advanced_settings.sign_request.helper_text',\n {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n },\n )}\n \n \n
\n \n )}\n />\n\n {signRequestEnabled && (\n <>\n (\n \n \n {t('fields.ping-federate.advanced_settings.sign_request_algorithm.label')}\n \n \n \n \n )}\n />\n\n (\n \n \n {t(\n 'fields.ping-federate.advanced_settings.sign_request_algorithm_digest.label',\n )}\n \n \n \n \n )}\n />\n \n )}\n \n \n \n\n \n
\n
\n );\n});\n", "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": "/**\n * Provider-specific configuration field router.\n * @module provider-configure-fields\n * @internal\n */\n\nimport { STRATEGIES } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport {\n AdfsProviderForm,\n type AdfsConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form';\nimport {\n GoogleAppsProviderForm,\n type GoogleAppsConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form';\nimport {\n OidcProviderForm,\n type OidcConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form';\nimport {\n OktaProviderForm,\n type OktaConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form';\nimport {\n PingFederateProviderForm,\n type PingFederateConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form';\nimport {\n SamlpProviderForm,\n type SamlpConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form';\nimport {\n WaadProviderForm,\n type WaadConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport type ProviderConfigureFormHandle =\n | OktaConfigureFormHandle\n | GoogleAppsConfigureFormHandle\n | WaadConfigureFormHandle\n | PingFederateConfigureFormHandle\n | AdfsConfigureFormHandle\n | SamlpConfigureFormHandle\n | OidcConfigureFormHandle;\n\nexport const ProviderConfigureFields = React.forwardRef<\n ProviderConfigureFormHandle,\n ProviderConfigureFieldsProps\n>(function ProviderConfigureFields({ strategy, className, ...props }, ref) {\n const renderProviderForm = () => {\n switch (strategy) {\n case STRATEGIES.OKTA:\n return (\n } {...props} />\n );\n case STRATEGIES.GOOGLE_APPS:\n return (\n }\n {...props}\n />\n );\n case STRATEGIES.WAAD:\n return (\n } {...props} />\n );\n case STRATEGIES.PINGFEDERATE:\n return (\n }\n {...props}\n />\n );\n case STRATEGIES.ADFS:\n return (\n } {...props} />\n );\n case STRATEGIES.SAMLP:\n return (\n } {...props} />\n );\n case STRATEGIES.OIDC:\n return (\n } {...props} />\n );\n default:\n return null;\n }\n };\n\n return
{renderProviderForm()}
;\n});\n", "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": "/**\n * SSO provider configuration step container.\n * @module provider-configure\n * @internal\n */\n\nimport type { ProviderConfigureFormValues } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport {\n ProviderConfigureFields,\n type ProviderConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields';\nimport { Section } from '@/components/auth0/shared/section';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type {\n ProviderConfigureHandle,\n ProviderConfigureProps,\n} from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport const ProviderConfigure = React.forwardRef(\n function ProviderConfigure(\n {\n strategy,\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n idpConfig,\n isLoading,\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const formRef = React.useRef(null);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return (await formRef.current?.validate()) ?? false;\n },\n getData: () => {\n return formRef.current?.getData() as ProviderConfigureFormValues;\n },\n }));\n\n if (isLoading) {\n return (\n
\n \n
\n );\n }\n\n return (\n
\n
\n \n
\n
\n );\n },\n);\n\nexport default ProviderConfigure;\n", "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": "/**\n * SAML-P SSO provider configuration form.\n * @module samlp-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type SamlpConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { FileUpload } from '@/components/ui/file-upload';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Label } from '@/components/ui/label';\nimport { Link } from '@/components/ui/link';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst SAMLP_HELP_LINKS = {\n sign_request: 'domain/pem?cert=connection',\n} as const;\n\nconst SIGNATURE_ALGORITHMS = [\n { value: 'rsa-sha1', label: 'RSA-SHA1' },\n { value: 'rsa-sha256', label: 'RSA-SHA256' },\n] as const;\n\nconst DIGEST_ALGORITHMS = [\n { value: 'sha1', label: 'SHA1' },\n { value: 'sha256', label: 'SHA256' },\n] as const;\n\nconst BINDING_METHODS = [\n { value: 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect', label: 'HTTP-Redirect' },\n { value: 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST', label: 'HTTP-POST' },\n] as const;\n\nexport interface SamlpConfigureFormHandle {\n validate: () => Promise;\n getData: () => SamlpConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: SamlpConfigureFormValues) => void;\n}\n\ninterface SamlpConfigureFormProps extends Omit {}\n\nexport const SamlpProviderForm = React.forwardRef<\n SamlpConfigureFormHandle,\n SamlpConfigureFormProps\n>(function SamlpProviderForm(\n { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig },\n ref,\n) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const [uploadedFiles, setUploadedFiles] = useState([]);\n\n const samlpData = initialData as SamlpConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('samlp')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n meta_data_source: samlpData?.meta_data_source || 'meta_data_url',\n metadataUrl: samlpData?.metadataUrl || '',\n single_sign_on_login_url: samlpData?.single_sign_on_login_url || '',\n cert: samlpData?.cert || '',\n signSAMLRequest: samlpData?.signSAMLRequest || false,\n signatureAlgorithm: samlpData?.signatureAlgorithm || 'rsa-sha256',\n digestAlgorithm: samlpData?.digestAlgorithm || 'sha256',\n bindingMethod: samlpData?.bindingMethod || 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST',\n show_as_button: samlpData?.show_as_button ?? false,\n assign_membership_on_login: samlpData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const typeValue = form.watch('meta_data_source');\n const showMetadataFileField = typeValue === 'meta_data_file';\n\n const signRequestEnabled = form.watch('signSAMLRequest');\n\n const handleFileUpload = async (files: File[]) => {\n setUploadedFiles(files);\n\n const file = files[0];\n if (file) {\n try {\n const content = await file.text();\n form.setValue('cert', content);\n } catch (error) {\n console.error('Error reading file:', error);\n }\n }\n };\n\n return (\n
\n
\n (\n \n \n {t('fields.samlp.meta_data_source.label')}\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.samlp.meta_data_url.label')}\n \n \n \n \n \n \n {t('fields.samlp.meta_data_url.helper_text')}\n \n \n )}\n />\n\n {showMetadataFileField && (\n <>\n (\n \n \n {t('fields.samlp.single_sign_on_login_url.label')}\n \n \n \n \n \n \n {t('fields.samlp.single_sign_on_login_url.helper_text')}\n \n \n )}\n />\n (\n \n \n {t('fields.samlp.cert.label')}\n \n \n
\n \n
\n \n \n \n {t('fields.samlp.cert.helper_text')}\n \n \n )}\n />\n \n )}\n\n \n \n \n {t('fields.samlp.advanced_settings.title')}\n \n \n (\n \n \n \n \n
\n \n {t('fields.samlp.advanced_settings.sign_request.label')}\n \n \n <>\n {t.trans(\n typeValue === 'meta_data_url'\n ? 'fields.samlp.advanced_settings.sign_request.helper_text_metadata_url'\n : 'fields.samlp.advanced_settings.sign_request.helper_text_metadata_file',\n {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n },\n )}\n \n \n
\n \n )}\n />\n\n {signRequestEnabled && (\n <>\n (\n \n \n {t('fields.samlp.advanced_settings.sign_request_algorithm.label')}\n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.samlp.advanced_settings.sign_request_algorithm_digest.label')}\n \n \n \n \n )}\n />\n \n )}\n (\n \n \n {t('fields.samlp.advanced_settings.request_protocol_binding.label')}\n \n \n \n \n )}\n />\n \n \n \n\n \n
\n
\n );\n});\n", "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": "/**\n * Azure AD (WAAD) SSO provider configuration form.\n * @module waad-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type WaadConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface WaadConfigureFormHandle {\n validate: () => Promise;\n getData: () => WaadConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: WaadConfigureFormValues) => void;\n}\n\ninterface WaadConfigureFormProps extends Omit {}\n\nexport const WaadProviderForm = React.forwardRef(\n function WaadProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { coreClient } = useCoreClient();\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const callbackUrl = React.useMemo(() => {\n const domain = coreClient?.getDomain() || 'YOUR_DOMAIN';\n return `https://${domain}/login/callback`;\n }, [coreClient]);\n\n const waadData = initialData as WaadConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('waad')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n tenant_domain: waadData?.tenant_domain || '',\n client_id: waadData?.client_id || '',\n client_secret: waadData?.client_secret || '',\n callback_url: waadData?.callback_url || callbackUrl,\n show_as_button: waadData?.show_as_button ?? false,\n assign_membership_on_login: waadData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n (\n \n \n {t('fields.waad.tenant_domain.label')}\n \n \n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.waad.client_id.label')}\n \n \n \n \n \n \n {t('fields.waad.client_id.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.waad.client_secret.label')}\n \n \n \n \n \n \n {t('fields.waad.client_secret.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.waad.callback_url.label')}\n \n \n \n \n \n \n {t('fields.waad.callback_url.helper_text')}\n \n \n )}\n />\n\n \n
\n
\n );\n },\n);\n", "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": "/**\n * SSO provider details form step.\n * @module provider-details\n * @internal\n */\n\nimport {\n createProviderDetailsSchema,\n type ProviderDetailsFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { Section } from '@/components/auth0/shared/section';\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport type {\n ProviderDetailsFormHandle,\n ProviderDetailsProps,\n} from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport const ProviderDetails = React.forwardRef(\n function ProviderDetails(\n { initialData, mode, readOnly = false, customMessages = {}, className, onFormDirty },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_details',\n customMessages,\n );\n\n const form = useForm({\n resolver: zodResolver(createProviderDetailsSchema()),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n name: initialData?.name || '',\n display_name: initialData?.display_name || '',\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n
\n (\n \n \n {t('fields.name.label')}\n \n \n \n \n \n \n {t('fields.name.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.display_name.label')}\n \n \n \n \n \n \n {t('fields.display_name.helper_text')}\n \n \n )}\n />\n
\n
\n
\n );\n },\n);\n", "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": "/**\n * SSO provider type selection step.\n * @module provider-select\n * @internal\n */\n\nimport type { IdpStrategy } from '@auth0/universal-components-core';\nimport { STRATEGY_DISPLAY_NAMES, STRATEGIES } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport EntraIdLogo from '@/assets/icons/entraid-logo';\nimport GoogleLogo from '@/assets/icons/google-logo';\nimport MicrosoftLogo from '@/assets/icons/microsoft-logo';\nimport OidcLogo from '@/assets/icons/oidc-logo';\nimport OktaLogo from '@/assets/icons/okta-logo';\nimport PingIdLogo from '@/assets/icons/pingid-logo';\nimport SamlpLogo from '@/assets/icons/sampl-logo';\nimport { Section } from '@/components/auth0/shared/section';\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { ProviderSelectProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst STRATEGY_ICONS: Record> = {\n [STRATEGIES.OKTA]: OktaLogo,\n [STRATEGIES.GOOGLE_APPS]: GoogleLogo,\n [STRATEGIES.WAAD]: EntraIdLogo,\n [STRATEGIES.ADFS]: MicrosoftLogo,\n [STRATEGIES.PINGFEDERATE]: PingIdLogo,\n [STRATEGIES.SAMLP]: SamlpLogo,\n [STRATEGIES.OIDC]: OidcLogo,\n};\n\n/**\n * Provider selection component for SSO setup.\n * @param props - Component props.\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.strategyList - List of available strategies\n * @param props.onClickStrategy - Callback fired when a strategy is selected\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nfunction ProviderSelect({\n isLoading,\n strategyList,\n onClickStrategy,\n customMessages = {},\n className,\n}: ProviderSelectProps) {\n const { t } = useTranslator('idp_management.create_sso_provider.provider_select', customMessages);\n\n return (\n
\n
\n {isLoading ? (\n
\n \n
\n ) : (\n strategyList.map((strategyType) => {\n const IconComponent = STRATEGY_ICONS[strategyType as IdpStrategy];\n const displayName = STRATEGY_DISPLAY_NAMES[strategyType as IdpStrategy];\n return (\n onClickStrategy(strategyType)}\n >\n
\n \n
\n {displayName}\n
\n
\n \n );\n })\n )}\n
\n
\n );\n}\n\nexport { ProviderSelect };\n", "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": "/**\n * Text field with copy-to-clipboard button.\n * @module copyable-text-field\n * @internal\n */\n\nimport { Copy } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { TextField, type TextFieldProps } from '@/components/ui/text-field';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\n\nexport interface CopyableTextFieldProps extends TextFieldProps {\n onCopy?: () => void;\n copyButtonClassName?: string;\n tooltipSide?: 'top' | 'bottom' | 'left' | 'right';\n tooltipAlign?: 'start' | 'center' | 'end';\n showCopyButton?: boolean;\n}\n\nconst CopyableTextField = React.forwardRef(\n (\n {\n onCopy,\n copyButtonClassName,\n tooltipSide = 'top',\n tooltipAlign = 'end',\n readOnly = true,\n endAdornment,\n showCopyButton = true,\n ...props\n },\n ref,\n ) => {\n const { t } = useTranslator('common');\n const [tooltipText, setTooltipText] = React.useState(t('copy'));\n const [tooltipOpen, setTooltipOpen] = React.useState(false);\n\n const handleCopy = async () => {\n if (props.value) {\n await navigator.clipboard.writeText(String(props.value));\n setTooltipText(t('copied'));\n setTooltipOpen(true);\n setTimeout(() => {\n setTooltipText(t('copy'));\n setTooltipOpen(false);\n }, 1000);\n onCopy?.();\n }\n };\n\n const copyButton = (\n \n \n \n \n \n \n \n {tooltipText}\n \n \n );\n\n return (\n \n {endAdornment}\n {copyButton}\n \n ) : (\n copyButton\n )\n ) : (\n endAdornment\n )\n }\n />\n );\n },\n);\n\nCopyableTextField.displayName = 'CopyableTextField';\n\nexport { CopyableTextField };\n", "type": "registry:component", "target": "components/auth0/shared/copyable-text-field.tsx" }, { "path": "src/components/auth0/shared/form-actions.tsx", "content": "/**\n * Form action buttons component.\n * @module form-actions\n * @internal\n */\n\nimport type { ActionButton } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { cn } from '@/lib/utils';\n\nexport interface FormActionsProps {\n hasUnsavedChanges?: boolean;\n isLoading?: boolean;\n nextAction?: Partial>;\n previousAction?: Partial>;\n showPrevious?: boolean;\n showNext?: boolean;\n showUnsavedChanges?: boolean;\n align?: 'left' | 'right';\n className?: string;\n unsavedChangesText?: string;\n}\n\nconst DEFAULT_NEXT_ACTION: ActionButton = {\n type: 'submit',\n label: 'Save',\n variant: 'primary',\n onClick: () => {},\n};\n\nconst DEFAULT_PREVIOUS_ACTION: ActionButton = {\n label: 'Cancel',\n variant: 'outline',\n onClick: () => {},\n};\n\nexport const FormActions: React.FC = ({\n hasUnsavedChanges = false,\n isLoading = false,\n nextAction,\n previousAction,\n className,\n showPrevious = true,\n showNext = true,\n showUnsavedChanges = true,\n align = 'right',\n unsavedChangesText = 'Unsaved changes',\n}) => {\n const nextButtonProps = React.useMemo(\n () => ({ ...DEFAULT_NEXT_ACTION, ...nextAction }),\n [nextAction],\n );\n\n const previousButtonProps = React.useMemo(\n () => ({ ...DEFAULT_PREVIOUS_ACTION, ...previousAction }),\n [previousAction],\n );\n\n const handleNextClick = React.useCallback(\n (e: React.MouseEvent) => {\n nextButtonProps.onClick(e.nativeEvent);\n },\n [nextButtonProps.onClick],\n );\n\n const handlePreviousClick = React.useCallback(\n (e: React.MouseEvent) => {\n previousButtonProps.onClick(e.nativeEvent);\n },\n [previousButtonProps.onClick],\n );\n\n const showUnsavedIndicator = showUnsavedChanges && hasUnsavedChanges;\n const isPreviousVisible = showUnsavedChanges ? showPrevious && hasUnsavedChanges : showPrevious;\n\n return (\n \n {showUnsavedIndicator && (\n {unsavedChangesText}\n )}\n\n {showPrevious && (\n \n {previousButtonProps.label}\n \n )}\n\n {showNext && (\n \n {isLoading ? (\n \n ) : (\n <>\n {nextButtonProps.icon && (\n \n {nextButtonProps.icon as React.ReactNode}\n \n )}\n {nextButtonProps.label}\n \n )}\n \n )}\n \n );\n};\n", "type": "registry:component", "target": "components/auth0/shared/form-actions.tsx" }, { "path": "src/components/auth0/shared/gate-keeper/gate-keeper.tsx", "content": "/**\n * GateKeeper component for guarding content during loading, MFA step-up, and 5xx error states.\n * @module gate-keeper\n * @internal\n */\n\nimport {\n type ComponentStyling,\n getComponentStyles,\n getStatusCode,\n isMfaRequiredError,\n} from '@auth0/universal-components-core';\nimport { RefreshCcw } from 'lucide-react';\nimport React, { useCallback, useMemo, useState, useEffect } from 'react';\n\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardDescription, CardFooter, CardTitle } from '@/components/ui/card';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { useGateKeeperContext } from '@/providers/gate-keeper-context';\n\ninterface GateKeeperProps {\n styling?: ComponentStyling>;\n isLoading?: boolean;\n children: React.ReactNode;\n}\n\n/**\n * Blocking error fallback with retry button.\n * Shown for 5xx errors and dismissed MFA errors.\n *\n * @param props - Component props.\n * @param props.onRetry - Retry handler.\n * @returns Error fallback element.\n * @internal\n */\nfunction ErrorFallback({ onRetry, isMfa }: { onRetry: () => void; isMfa?: boolean }) {\n const { t } = useTranslator('gate_keeper');\n const key = isMfa ? 'mfa_error' : 'fallback';\n\n return (\n \n \n {t(`${key}.title`)}\n {t(`${key}.description`)}\n \n {!isMfa && (\n \n \n \n )}\n \n );\n}\n\n/**\n * Guards children from rendering during loading/error states. MFA step-up overlays\n * children without unmounting them, preserving any in-progress form state.\n * - Loading → spinner (blocks children)\n * - MFA required error → MFA step-up dialog overlaid on children\n * - 5xx error or dismissed MFA → blocking error fallback with retry\n * - No error → children\n *\n * @param props - Component props.\n * @param props.styling - Styling configuration forwarded to the styled scope.\n * @param props.isLoading - Whether content is loading.\n * @param props.children - Child elements to render on success.\n * @returns GateKeeper element.\n */\nexport function GateKeeper({ styling, isLoading, children }: GateKeeperProps) {\n const { error, onRetry } = useGateKeeperContext();\n const { coreClient } = useCoreClient();\n const { isDarkMode } = useTheme();\n const [isRetrying, setIsRetrying] = useState(false);\n\n const styles = useMemo(() => getComponentStyles(styling, isDarkMode), [styling, isDarkMode]);\n\n const handleRetry = useCallback(async () => {\n setIsRetrying(true);\n try {\n await onRetry?.();\n } finally {\n setIsRetrying(false);\n }\n }, [onRetry]);\n\n const isMfaStepUp = isMfaRequiredError(error);\n const statusCode = getStatusCode(error);\n const isSystemError = !!error && !!statusCode && statusCode >= 500;\n\n useEffect(() => {\n if (isMfaStepUp && coreClient && !coreClient.isProxyMode()) {\n console.warn(\n `🚨 [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.`,\n );\n }\n }, [isMfaStepUp, coreClient]);\n\n if (isLoading || isRetrying) {\n return (\n \n
\n \n
\n \n );\n }\n\n if (isSystemError || isMfaStepUp) {\n return (\n \n \n \n );\n }\n\n return {children};\n}\n", "type": "registry:component", "target": "components/auth0/shared/gate-keeper/gate-keeper.tsx" }, { "path": "src/components/auth0/shared/header.tsx", "content": "/**\n * Section header with actions.\n * @module header\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport { ArrowLeft } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport interface TooltipProps {\n content: React.ReactNode | string;\n}\n\nexport interface WithTooltipProps {\n trigger: React.ReactNode | string;\n tooltip: TooltipProps;\n}\n\nexport interface BaseActionProps extends Omit {\n icon?: LucideIcon;\n className?: string;\n hidden?: boolean;\n tooltip?: TooltipProps;\n}\n\nexport interface ButtonActionProps extends BaseActionProps {\n type: 'button';\n onClick: (e: React.MouseEvent) => void;\n}\n\nexport interface SwitchActionProps extends Omit {\n type: 'switch';\n checked?: boolean;\n onCheckedChange: (checked: boolean) => void;\n 'aria-label'?: string;\n}\n\nexport type ActionProps = ButtonActionProps | SwitchActionProps;\n\nexport interface HeaderProps {\n title?: string;\n description?: string;\n backButton?: {\n text?: string;\n icon?: LucideIcon;\n onClick: (e: React.MouseEvent) => void;\n };\n actions?: ActionProps[];\n isLoading?: boolean;\n className?: string;\n}\n\nconst WithTooltip: React.FC = ({ trigger, tooltip }) => (\n <>\n \n \n
{trigger}
\n \n {tooltip.content}\n \n \n);\n\nconst ButtonAction: React.FC = ({\n icon: Icon,\n className,\n label,\n onClick,\n disabled,\n variant,\n size,\n}) => (\n \n {Icon && }\n {label}\n \n);\n\nconst SwitchAction: React.FC = ({\n className,\n 'aria-label': ariaLabel,\n checked,\n onCheckedChange,\n disabled,\n}) => (\n
\n \n
\n);\n\nexport const Header = React.forwardRef<\n HTMLDivElement,\n HeaderProps & React.HTMLAttributes\n>(({ title, description, backButton, actions, isLoading, className, ...props }, ref) => {\n const BackIcon = backButton?.icon || ArrowLeft;\n\n const renderAction = (action: ActionProps, index: number) => {\n const key = `action-${index}`;\n if (isLoading) {\n return ;\n }\n if (action.hidden) {\n return null;\n }\n const actionElement =\n action.type === 'switch' ? (\n \n ) : (\n \n );\n if (action.tooltip) {\n return (\n \n );\n }\n return actionElement;\n };\n\n return (\n \n {backButton && (\n \n \n {backButton.text && {backButton.text}}\n \n )}\n\n
\n
\n {title && (\n \n {title}\n \n )}\n {description && (\n \n {description}\n

\n )}\n
\n\n {actions && actions.length > 0 && (\n
\n {actions.map(renderAction)}\n
\n )}\n
\n \n );\n});\n\nHeader.displayName = 'Header';\n", "type": "registry:component", "target": "components/auth0/shared/header.tsx" }, { "path": "src/components/auth0/shared/section.tsx", "content": "/**\n * Section layout with title and actions.\n * @module section\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { cn } from '@/lib/utils';\n\nexport interface BaseActionProps extends Omit {\n icon?: LucideIcon;\n className?: string;\n}\n\nexport interface ButtonActionProps extends BaseActionProps {\n type: 'button';\n onClick: (e: React.MouseEvent) => void;\n}\n\nexport interface ToggleActionProps extends Omit {\n type: 'toggle';\n pressed?: boolean;\n onPressedChange: (pressed: boolean) => void;\n 'aria-label': string;\n}\n\nexport type ActionProps = ButtonActionProps | ToggleActionProps;\n\ninterface SectionProps {\n title?: string;\n description?: string;\n children: React.ReactNode;\n actions?: ActionProps[];\n className?: string;\n}\n\nconst ButtonAction: React.FC = ({\n icon: Icon,\n className,\n label,\n onClick,\n disabled,\n variant,\n size,\n}) => (\n \n {Icon && }\n {label}\n \n);\n\nconst ToggleAction: React.FC = ({\n icon: Icon,\n className,\n label,\n 'aria-label': ariaLabel,\n pressed,\n onPressedChange,\n disabled,\n variant,\n size,\n}) => (\n \n {Icon && }\n {label && {label}}\n \n);\n\n/**\n *\n * @param props - Component props.\n * @param props.title - The title text\n * @param props.description - The description text\n * @param props.children - Child elements to render\n * @param props.actions - Action buttons or elements\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function Section({\n title,\n description,\n children,\n actions,\n className,\n}: SectionProps): React.JSX.Element {\n const renderAction = (action: ActionProps, index: number) => {\n const key = `action-${index}`;\n return action.type === 'toggle' ? (\n \n ) : (\n \n );\n };\n\n return (\n
\n
\n
\n {title && (\n \n {title}\n \n )}\n {description && (\n \n {description}\n

\n )}\n
\n\n {actions && actions.length > 0 && (\n
\n {actions.map(renderAction)}\n
\n )}\n
\n\n
{children}
\n
\n );\n}\n", "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": "/**\n * Auth0Scope component — CSS scope root and portal container for lib components.\n * @module auth0-scope\n * @internal\n */\n\n'use client';\n\nimport { getCoreStyles } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { ThemeContext } from '@/providers/theme-provider';\n\nexport interface StyledScopeProps {\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * CSS scope root for lib components. Handles dark-mode class and theme attribute.\n *\n * @param props - Component props.\n * @param props.children - Content to render inside the scope root.\n * @param props.style - Optional inline CSS styles\n * @returns A scoped wrapper div with dark-mode and theme attributes applied.\n * @internal\n */\nexport const StyledScope: React.FC = ({ children, style }) => {\n const { theme = 'default', isDarkMode, variables } = React.useContext(ThemeContext);\n\n const mergedStyle = React.useMemo(() => {\n const providerVars = getCoreStyles(variables, isDarkMode).variables;\n return { ...providerVars, ...style };\n }, [variables, isDarkMode, style]);\n\n return (\n \n {children}\n \n );\n};\n", "type": "registry:component", "target": "components/auth0/shared/styled-scope.tsx" }, { "path": "src/components/auth0/shared/toast.tsx", "content": "/**\n * Toast notification utilities.\n * @module toast\n * @internal\n */\n\nimport { Flag } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { toast, type ExternalToast } from 'sonner';\n\nimport { DEFAULT_TOAST_SETTINGS } from '@/types/toast-types';\nimport type { ToastOptions, ToastSettings, ToastType } from '@/types/toast-types';\n\nconst TOAST_COLOR_CLASSES: Record = {\n success: 'text-success-foreground',\n error: 'text-destructive-foreground',\n warning: 'text-warning-foreground',\n info: 'text-info-foreground',\n} as const;\n\nconst VALID_TOAST_TYPES: ToastType[] = ['success', 'error', 'warning', 'info'] as const;\n\nconst BASE_TOAST_Z_INDEX = 1000;\nlet toastZIndexCounter = 0;\nconst MAX_Z_INDEX_COUNTER = 1000;\nconst activeToastIds = new Set();\n\n/**\n * Resets the z-index counter if no active toasts remain\n */\nconst resetCounterIfEmpty = (): void => {\n if (activeToastIds.size === 0) {\n toastZIndexCounter = 0;\n }\n};\n\n/**\n * Removes a toast from tracking and resets counter if needed\n * @param toastId - The toast ID to remove, or undefined to clear all\n */\nconst removeToastFromTracking = (toastId?: string | number | unknown): void => {\n if (toastId !== undefined && toastId !== null) {\n activeToastIds.delete(toastId);\n } else {\n activeToastIds.clear();\n }\n resetCounterIfEmpty();\n};\n\nlet globalToastSettings: ToastSettings = {\n ...DEFAULT_TOAST_SETTINGS,\n};\n\n/**\n * Sets global toast configuration. Called by Auth0ComponentProvider.\n * @param settings - Settings configuration\n * @internal\n */\nexport const setGlobalToastSettings = (settings?: ToastSettings): void => {\n if (!settings) {\n globalToastSettings = {\n ...DEFAULT_TOAST_SETTINGS,\n };\n return;\n }\n\n globalToastSettings = {\n ...settings,\n };\n\n if (settings.provider === 'custom') {\n const { methods } = settings;\n const availableMethods = Object.keys(methods);\n\n if (availableMethods.length === 0) {\n console.warn(\n 'Auth0ComponentProvider: Custom toast provider specified but no custom methods provided',\n );\n }\n\n availableMethods.forEach((method) => {\n if (typeof methods[method as keyof typeof methods] !== 'function') {\n console.warn(`Auth0ComponentProvider: Custom toast method '${method}' is not a function`);\n }\n });\n }\n};\n\n/**\n * Gets the current global toast configuration.\n * @returns The current toast settings\n */\nexport const getGlobalToastSettings = (): ToastSettings => globalToastSettings;\n\n/**\n * Creates a styled message element with appropriate color classes.\n * @param type - The toast type for styling\n * @param message - The message text to style\n * @returns A React element with styled text\n */\nconst createStyledMessage = (type: ToastType, message: string): ReactNode => {\n const colorClass = TOAST_COLOR_CLASSES[type];\n return {message};\n};\n\n/**\n * Creates a default icon for the toast based on its type.\n * @param type - The toast type to create an icon for\n * @returns A React element with a styled Flag icon\n */\nconst createDefaultIcon = (type: ToastType): ReactNode => {\n const colorClass = TOAST_COLOR_CLASSES[type];\n return ;\n};\n\n/**\n * Shows a toast notification using the configured provider.\n *\n * @param options - The toast configuration options\n * @param options.type - The type of toast ('success', 'error', 'info', 'warning', 'loading')\n * @param options.message - The message to display in the toast\n * @param options.className - Optional CSS class name for custom styling\n * @param options.icon - Optional custom icon to display\n * @param options.data - Additional options passed to the toast provider\n * @returns The toast instance ID or result from custom method\n */\nexport const showToast = ({\n type,\n message,\n className,\n icon,\n data = {},\n}: ToastOptions): string | number | void => {\n if (!message?.trim()) {\n console.warn('showToast: Empty message provided');\n return;\n }\n\n if (!VALID_TOAST_TYPES.includes(type)) {\n console.error(\n `showToast: Invalid toast type '${type}'. Must be one of: ${VALID_TOAST_TYPES.join(', ')}`,\n );\n return;\n }\n\n if (globalToastSettings.provider === 'custom' && globalToastSettings.methods[type]) {\n try {\n // Custom methods only receive the message - they handle their own configuration\n return globalToastSettings.methods[type]!(message);\n } catch (error) {\n console.error(`showToast: Error in custom ${type} method:`, error);\n }\n }\n\n const styledMessage = createStyledMessage(type, message);\n const defaultIcon = icon || createDefaultIcon(type);\n\n const currentZIndex = BASE_TOAST_Z_INDEX + toastZIndexCounter;\n toastZIndexCounter += 1;\n\n if (toastZIndexCounter >= MAX_Z_INDEX_COUNTER) {\n toastZIndexCounter = 0;\n }\n\n const toastOptions: ExternalToast = {\n className,\n icon: defaultIcon,\n style: {\n zIndex: currentZIndex,\n },\n onDismiss: (toastId) => {\n removeToastFromTracking(toastId);\n },\n ...data,\n };\n\n try {\n const toastId = toast[type](styledMessage, toastOptions);\n if (toastId) {\n activeToastIds.add(toastId);\n }\n return toastId;\n } catch (error) {\n console.error(`showToast: Error showing ${type} toast:`, error);\n return toast(message);\n }\n};\n\n/**\n * Dismisses a toast notification by ID, or dismisses all toasts if no ID is provided.\n *\n * @param toastId - Optional toast ID to dismiss. If not provided, dismisses all toasts.\n */\nexport const dismissToast = (toastId?: string | number): void => {\n if (globalToastSettings.provider === 'custom' && globalToastSettings.methods.dismiss) {\n try {\n globalToastSettings.methods.dismiss(toastId?.toString());\n } catch (error) {\n console.error('dismissToast: Error in custom dismiss method:', error);\n }\n return;\n }\n\n toast.dismiss(toastId);\n\n removeToastFromTracking(toastId);\n};\n", "type": "registry:component", "target": "components/auth0/shared/toast.tsx" }, { "path": "src/components/auth0/shared/wizard-stepper.tsx", "content": "/**\n * Wizard stepper navigation component.\n * @module wizard-stepper\n * @internal\n */\n\n'use client';\n\nimport { Stepper, Step, StepTitle, StepDescription } from '@/components/ui/stepper';\n\nexport interface WizardStep {\n id?: string;\n title: string;\n description?: string;\n}\n\ninterface WizardStepperProps {\n steps: WizardStep[];\n currentStep?: number;\n onStepClick?: (stepIndex: number, stepId?: string) => void;\n className?: string;\n hideNumbers?: boolean;\n}\n\n/**\n * Wizard stepper navigation component.\n * @param props - Component props.\n * @param props.steps - Array of wizard steps\n * @param props.currentStep - Current active step index\n * @param props.onStepClick - Callback fired when a step is clicked\n * @param props.className - Optional CSS class name for styling\n * @param props.hideNumbers - Whether to hide numbers\n * @returns JSX element\n */\nfunction WizardStepper({\n steps,\n currentStep = 0,\n onStepClick,\n className,\n hideNumbers = true,\n}: WizardStepperProps) {\n return (\n \n {steps.map((step, index) => (\n \n {step.title}\n {step.description && {step.description}}\n \n ))}\n \n );\n}\n\nexport { WizardStepper };\nexport type { WizardStepperProps };\n", "type": "registry:component", "target": "components/auth0/shared/wizard-stepper.tsx" }, { "path": "src/components/auth0/shared/wizard.tsx", "content": "/**\n * Multi-step wizard component.\n * @module wizard\n * @internal\n */\n\n'use client';\n\nimport * as React from 'react';\n\nimport { FormActions } from '@/components/auth0/shared/form-actions';\nimport { WizardStepper } from '@/components/auth0/shared/wizard-stepper';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Spinner } from '@/components/ui/spinner';\nimport { cn } from '@/lib/utils';\n\nexport interface StepFormActions {\n showPrevious?: boolean;\n showNext?: boolean;\n onPreviousAction?: (stepId: string) => Promise | boolean;\n onNextAction?: (stepId: string) => Promise | boolean;\n}\n\nexport interface WizardStep {\n id: string;\n title: string;\n description?: string;\n content: React.ComponentType;\n actions?: StepFormActions;\n}\n\nexport interface StepProps {\n onPrevious?: () => void;\n onNext?: () => void;\n isLoading?: boolean;\n}\n\nexport interface FormActionLabels {\n nextButtonLabel?: string;\n previousButtonLabel?: string;\n completeButtonLabel?: string;\n}\n\nexport interface WizardProps {\n steps: WizardStep[];\n initialStep?: number;\n onComplete?: () => Promise | void;\n className?: string;\n formActionLabels?: FormActionLabels;\n hideStepperNumbers?: boolean;\n isLoading?: boolean;\n allowStepNavigation?: boolean;\n}\n\n/**\n * Multi-step wizard component.\n * @param props - Component props.\n * @param props.steps - Array of wizard steps\n * @param props.initialStep - Initial step index\n * @param props.onComplete - Callback fired when the operation completes\n * @param props.className - Optional CSS class name for styling\n * @param props.formActionLabels - Labels for form action buttons\n * @param props.hideStepperNumbers - Whether to hide step numbers\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.allowStepNavigation - Whether step navigation is allowed\n * @returns JSX element\n */\nfunction Wizard({\n steps,\n initialStep = 0,\n onComplete,\n className,\n formActionLabels,\n hideStepperNumbers = false,\n isLoading = false,\n allowStepNavigation = true,\n}: WizardProps) {\n const [activeStep, setActiveStep] = React.useState(initialStep);\n\n const currentStepConfig = steps[activeStep];\n const isFirstStep = activeStep === 0;\n const isLastStep = activeStep === steps.length - 1;\n\n const handleNext = React.useCallback(async () => {\n if (isLoading) return;\n\n const step = steps[activeStep];\n\n if (step?.actions?.onNextAction) {\n const canProceed = await step.actions.onNextAction(step.id);\n if (!canProceed) {\n return;\n }\n }\n\n if (isLastStep) {\n await onComplete?.();\n } else {\n setActiveStep((prev) => prev + 1);\n }\n }, [activeStep, isLastStep, steps, onComplete, isLoading]);\n\n const handlePrevious = React.useCallback(async () => {\n if (isFirstStep) return;\n\n const step = steps[activeStep];\n\n if (step?.actions?.onPreviousAction) {\n const canProceed = await step.actions.onPreviousAction(step.id);\n if (!canProceed) {\n return;\n }\n }\n\n setActiveStep((prev) => prev - 1);\n }, [activeStep, isFirstStep, steps]);\n\n const handleStepClick = React.useCallback(\n async (stepIndex: number) => {\n if (isLoading || !allowStepNavigation) return;\n\n // Only allow navigation to previous steps or the current step\n if (stepIndex > activeStep) return;\n\n setActiveStep(stepIndex);\n },\n [activeStep, isLoading, allowStepNavigation],\n );\n\n const CurrentStepComponent = currentStepConfig?.content;\n const showPrevious = currentStepConfig?.actions?.showPrevious !== false && !isFirstStep;\n const showNext = currentStepConfig?.actions?.showNext ?? true;\n\n const labels = {\n nextButtonLabel: 'Next',\n previousButtonLabel: 'Previous',\n completeButtonLabel: 'Submit',\n ...formActionLabels,\n };\n\n return (\n
\n \n\n \n \n {isLoading && (\n
\n \n
\n )}\n
\n {CurrentStepComponent ? (\n \n ) : null}\n
\n \n \n\n \n
\n );\n}\n\nexport { Wizard };\n", "type": "registry:component", "target": "components/auth0/shared/wizard.tsx" }, { "path": "src/components/ui/accordion.tsx", "content": "/**\n * Accordion component using Radix primitives.\n * @module accordion\n * @internal\n */\n\n'use client';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { ChevronDown } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Accordion({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:rotate-180',\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n );\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n", "type": "registry:component", "target": "components/ui/accordion.tsx" }, { "path": "src/components/ui/button.tsx", "content": "/**\n * Button component with variants.\n * @module button\n * @internal\n */\n\n'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n primary:\n \"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\",\n outline:\n \"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\",\n ghost: 'hover:bg-muted text-primary bg-transparent',\n destructive:\n \"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\",\n link: 'text-foreground underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 rounded-2xl px-4 py-2.5 has-[>svg]:px-3',\n xs: 'h-7 rounded-md px-2 py-1.5 text-xs has-[>svg]:px-2',\n sm: 'h-8 gap-1.5 rounded-xl px-3 py-2 text-xs has-[>svg]:px-2.5',\n lg: 'h-12 rounded-3xl px-6 py-3 text-base has-[>svg]:px-4',\n icon: 'size-7 rounded-xl',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'default',\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n as?: boolean;\n}\n\nfunction Button({\n className,\n variant,\n size,\n as,\n ...props\n}: React.ComponentProps<'button'> & ButtonProps) {\n const Comp = as ? Slot : 'button';\n\n return ;\n}\n\nexport { Button, buttonVariants };\n", "type": "registry:component", "target": "components/ui/button.tsx" }, { "path": "src/components/ui/card.tsx", "content": "/**\n * Card layout component.\n * @module card\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Card({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n return
;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n", "type": "registry:component", "target": "components/ui/card.tsx" }, { "path": "src/components/ui/checkbox.tsx", "content": "/**\n * Checkbox component using Radix primitives.\n * @module checkbox\n * @internal\n */\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon, MinusIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps) {\n return (\n \n \n {props.checked === 'indeterminate' ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport { Checkbox };\n", "type": "registry:component", "target": "components/ui/checkbox.tsx" }, { "path": "src/components/ui/file-upload.tsx", "content": "/**\n * File upload component with drag-drop support.\n * @module file-upload\n * @internal\n */\n\nimport { Upload, X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface FileUploadProps\n extends Omit, 'value' | 'onChange'> {\n value?: File[];\n onChange?: (files: File[]) => void;\n onInvalidFiles?: (files: File[]) => void;\n onRemove?: (file: File) => void;\n maxSize?: number;\n accept?: string;\n maxFiles?: number;\n preview?: boolean;\n className?: string;\n}\n\nexport function FileUpload({\n value = [],\n onChange,\n onInvalidFiles,\n onRemove,\n maxSize,\n accept,\n maxFiles = 1,\n preview = true,\n className,\n disabled,\n ...props\n}: FileUploadProps) {\n const inputRef = React.useRef(null);\n const [dragActive, setDragActive] = React.useState(false);\n\n const handleDrag = React.useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (e.type === 'dragenter' || e.type === 'dragover') {\n setDragActive(true);\n } else if (e.type === 'dragleave') {\n setDragActive(false);\n }\n }, []);\n\n const handleDrop = React.useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setDragActive(false);\n\n const files = Array.from(e.dataTransfer.files);\n handleFiles(files);\n }, []);\n\n const handleChange = React.useCallback((e: React.ChangeEvent) => {\n const files = Array.from(e.target.files || []);\n handleFiles(files);\n }, []);\n\n const handleFiles = React.useCallback(\n (files: File[]) => {\n if (disabled) return;\n const validFiles: File[] = [];\n const invalidFiles: File[] = [];\n\n files.forEach((file) => {\n if (maxSize && file.size > maxSize) {\n invalidFiles.push(file);\n return;\n }\n\n if (\n accept &&\n !accept.split(',').some((type) => {\n const fileType = type.trim().toLowerCase();\n const fileName = file.name.toLowerCase();\n const fileMimeType = file.type.toLowerCase();\n if (fileType.startsWith('.')) {\n return fileName.endsWith(fileType);\n }\n\n if (fileType === fileMimeType) {\n return true;\n }\n\n if (fileType.endsWith('/*')) {\n const baseType = fileType.slice(0, -2);\n return fileMimeType.startsWith(`${baseType}/`);\n }\n\n return false;\n })\n ) {\n invalidFiles.push(file);\n return;\n }\n\n validFiles.push(file);\n });\n\n if (invalidFiles.length > 0) {\n onInvalidFiles?.(invalidFiles);\n }\n\n if (maxFiles === 1) {\n onChange?.(validFiles.slice(0, 1));\n } else {\n onChange?.([...value, ...validFiles].slice(0, maxFiles));\n }\n\n if (inputRef.current) inputRef.current.value = '';\n },\n [disabled, maxSize, accept, maxFiles, onChange, onInvalidFiles, value],\n );\n\n const removeFile = React.useCallback(\n (file: File) => {\n onRemove?.(file);\n onChange?.(value.filter((f) => f !== file));\n },\n [onChange, onRemove, value],\n );\n\n return (\n
\n \n \n
\n \n

\n Drag & drop files here, or click to select files\n

\n {accept &&

Allowed files: {accept}

}\n {maxSize && (\n

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

\n )}\n
\n
\n\n {preview && value.length > 0 && (\n
\n {value.map((file, i) => (\n
\n
\n

{file.name}

\n

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

\n
\n removeFile(file)}\n className=\"hover:bg-muted shrink-0 rounded-md p-1 transition-colors\"\n disabled={disabled}\n >\n \n \n
\n ))}\n
\n )}\n
\n );\n}\n", "type": "registry:component", "target": "components/ui/file-upload.tsx" }, { "path": "src/components/ui/form.tsx", "content": "/**\n * Form components with react-hook-form integration.\n * @module form\n * @internal\n */\n\n'use client';\n\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\nimport {\n Controller,\n FormProvider,\n useFormContext,\n useFormState,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from 'react-hook-form';\n\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nconst Form: typeof FormProvider = FormProvider;\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = React.createContext({} as FormFieldContextValue);\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n>({\n ...props\n}: ControllerProps) => {\n return (\n \n {\n const { onChange, onBlur, ...rest } = field;\n return props.render({\n field: {\n ...rest,\n onChange: (...args: unknown[]) => {\n onChange(...(args as Parameters));\n },\n onBlur: (...args: unknown[]) => {\n onBlur(...(args as Parameters));\n },\n },\n fieldState,\n formState,\n });\n }}\n />\n \n );\n};\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState } = useFormContext();\n const formState = useFormState({ name: fieldContext.name });\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within ');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nconst FormItemContext = React.createContext({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n const id = React.useId();\n\n return (\n \n
\n \n );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps) {\n const { error, formItemId } = useFormField();\n\n return (\n \n );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps) {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n return (\n \n );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { formDescriptionId } = useFormField();\n\n return (\n \n );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : props.children;\n\n if (!body) {\n return null;\n }\n\n return (\n \n {body}\n

\n );\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n};\n", "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": "/**\n * Link component with variants.\n * @module link\n * @internal\n */\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst linkVariants = cva(\n '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',\n {\n variants: {\n variant: {\n destructive: 'text-destructive hover:text-destructive/90',\n muted: 'text-muted hover:text-muted/80',\n primary: 'text-primary hover:text-primary/90',\n },\n underline: {\n none: 'no-underline',\n hover: 'no-underline hover:underline',\n always: 'underline',\n },\n },\n defaultVariants: {\n variant: 'primary',\n underline: 'always',\n },\n },\n);\n\nexport interface LinkProps\n extends React.AnchorHTMLAttributes,\n VariantProps {\n /**\n * Optional ref for the link element.\n */\n ref?: React.Ref;\n}\n\nfunction Link({ ref, className, children, variant, underline, ...props }: LinkProps) {\n return (\n \n {children}\n \n );\n}\n\nexport { Link };\n", "type": "registry:component", "target": "components/ui/link.tsx" }, { "path": "src/components/ui/radio-group.tsx", "content": "/**\n * Radio group using Radix primitives.\n * @module radio-group\n * @internal\n */\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction RadioGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction RadioGroupItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n\n
{children}
\n \n );\n}\n\ninterface StepTitleProps {\n className?: string;\n children: React.ReactNode;\n}\n\nfunction StepTitle({ className, children }: StepTitleProps) {\n return (\n \n {children}\n

\n );\n}\n\ninterface StepSeparatorProps {\n className?: string;\n}\n\nfunction StepSeparator({ className }: StepSeparatorProps) {\n return (\n \n );\n}\n\ninterface StepDescriptionProps {\n className?: string;\n children: React.ReactNode;\n}\n\nfunction StepDescription({ className, children }: StepDescriptionProps) {\n return (\n \n {children}\n

\n );\n}\n\nexport { Stepper, Step, StepTitle, StepSeparator, StepDescription };\n", "type": "registry:component", "target": "components/ui/stepper.tsx" }, { "path": "src/components/ui/switch.tsx", "content": "/**\n * Toggle switch using Radix primitives.\n * @module switch\n * @internal\n */\n\n'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Switch({ className, ...props }: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nexport { Switch };\n", "type": "registry:component", "target": "components/ui/switch.tsx" }, { "path": "src/components/ui/text-field.tsx", "content": "/**\n * Text input field with variants.\n * @module text-field\n * @internal\n */\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst textFieldVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default:\n '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',\n error:\n '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',\n },\n size: {\n default: 'h-10',\n sm: 'h-9',\n lg: 'h-11',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport interface TextFieldProps extends Omit, 'size'> {\n error?: boolean;\n helperText?: string;\n size?: VariantProps['size'];\n variant?: VariantProps['variant'];\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n}\n\nconst TextField = React.forwardRef(\n (\n { className, variant, size, error, helperText, startAdornment, endAdornment, ...props },\n ref,\n ) => {\n const isDisabled = props.disabled;\n\n const WrapperComponent = props.id ? 'div' : 'label';\n\n return (\n
\n \n {startAdornment && (\n
\n {startAdornment}\n
\n )}\n \n {endAdornment && (\n
\n {endAdornment}\n
\n )}\n \n {helperText && (\n \n {helperText}\n

\n )}\n
\n );\n },\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField, textFieldVariants };\n", "type": "registry:component", "target": "components/ui/text-field.tsx" }, { "path": "src/components/ui/toggle.tsx", "content": "/**\n * Toggle button component.\n * @module toggle\n * @internal\n */\n\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst toggleVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default:\n 'hover:bg-muted data-[state=on]:bg-muted data-[state=on]:text-primary bg-transparent',\n outline:\n 'data-[state=on]:bg-muted data-[state=on]:text-primary-foreground hover:bg-accent hover:text-accent-foreground shadow-input-resting bg-transparent',\n },\n size: {\n default: 'h-9 min-w-9 px-2',\n sm: 'h-8 min-w-8 px-1.5',\n lg: 'h-10 min-w-10 px-2.5',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport interface ToggleProps extends React.ButtonHTMLAttributes {\n pressed?: boolean;\n onPressedChange?: (pressed: boolean) => void;\n variant?: 'default' | 'outline';\n size?: 'sm' | 'default' | 'lg';\n}\n\nfunction ToggleRoot({\n className,\n children,\n pressed,\n onPressedChange,\n variant = 'default',\n size = 'default',\n ...props\n}: ToggleProps) {\n return (\n onPressedChange?.(!pressed)}\n className={cn(toggleVariants({ variant, size }), className)}\n {...props}\n >\n {children}\n \n );\n}\n\nfunction Toggle(props: ToggleProps) {\n return ;\n}\n\nexport { Toggle };\n", "type": "registry:component", "target": "components/ui/toggle.tsx" }, { "path": "src/components/ui/tooltip.tsx", "content": "/**\n * Tooltip using Radix primitives.\n * @module tooltip\n * @internal\n */\n\n'use client';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/providers/portal-context';\n\nconst tooltipVariants = cva(\n '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',\n {\n variants: {\n position: {\n top: 'origin-bottom',\n bottom: 'origin-top',\n left: 'origin-left',\n right: 'origin-right',\n },\n },\n defaultVariants: {\n position: 'top',\n },\n },\n);\n\nfunction Tooltip({ children, ...props }: React.ComponentProps) {\n return (\n \n {children}\n \n );\n}\n\nfunction TooltipTrigger({\n asChild = true,\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\ninterface TooltipContentProps\n extends React.ComponentProps,\n VariantProps {}\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n TooltipContentProps\n>(({ className, side = 'top', position, sideOffset = 8, children, ...props }, ref) => {\n const portalContainer = usePortalContainer();\n return (\n \n \n {children}\n \n \n \n );\n});\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, tooltipVariants };\n", "type": "registry:component", "target": "components/ui/tooltip.tsx" }, { "path": "src/hooks/my-organization/use-config.ts", "content": "/**\n * Organization configuration hook.\n * @module use-config\n */\n\nimport {\n AVAILABLE_STRATEGY_LIST,\n hasApiErrorBody,\n type IdpStrategy,\n} from '@auth0/universal-components-core';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\n\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport type { UseConfigResult } from '@/types/my-organization/config/config-types';\n\nconst configQueryKeys = {\n all: ['config'] as const,\n details: () => [...configQueryKeys.all, 'details'] as const,\n};\n\n/**\n * Hook for fetching organization configuration.\n * @returns Config data and allowed strategies.\n */\nexport function useConfig(): UseConfigResult {\n const { coreClient } = useCoreClient();\n const queryClient = useQueryClient();\n\n const configQuery = useQuery({\n queryKey: configQueryKeys.details(),\n queryFn: () => coreClient!.getMyOrganizationApiClient().organization.configuration.get(),\n enabled: !!coreClient,\n retry: (failureCount, error) => {\n if (hasApiErrorBody(error) && error.body?.status === 404) {\n return false;\n }\n return failureCount < 3;\n },\n });\n\n const config = configQuery.data;\n const allowedStrategies = config?.allowed_strategies;\n\n const filteredStrategies: IdpStrategy[] = allowedStrategies\n ? AVAILABLE_STRATEGY_LIST.filter((s) => allowedStrategies.includes(s))\n : AVAILABLE_STRATEGY_LIST;\n\n const shouldAllowDeletion =\n config?.connection_deletion_behavior === 'allow' ||\n config?.connection_deletion_behavior === 'allow_if_empty';\n\n const isConfigValid = !!allowedStrategies?.length;\n\n return {\n config: config ?? null,\n isLoadingConfig: configQuery.isLoading,\n fetchConfig: async () => await queryClient.getQueryData(configQueryKeys.details()),\n filteredStrategies,\n shouldAllowDeletion,\n isConfigValid,\n };\n}\n", "type": "registry:component", "target": "hooks/my-organization/use-config.ts" }, { "path": "src/hooks/my-organization/use-idp-config.ts", "content": "/**\n * Identity provider configuration hook.\n * @module use-idp-config\n */\n\nimport {\n hasApiErrorBody,\n type GetIdpConfigurationResponseContent,\n type IdentityProvidersConfigStrategyBase,\n type IdpStrategy,\n} from '@auth0/universal-components-core';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\n\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport type { UseConfigIdpResult } from '@/types/my-organization/config/config-idp-types';\n\nexport const idpConfigQueryKeys = {\n all: ['idp-config'] as const,\n config: () => [...idpConfigQueryKeys.all, 'config'] as const,\n};\n\n/**\n * Mapping from IdpStrategy values to the SDK's strategy config keys.\n */\nconst STRATEGY_TO_CONFIG_KEY: Record<\n IdpStrategy,\n keyof NonNullable\n> = {\n adfs: 'adfs',\n 'google-apps': 'googleapps',\n oidc: 'oidc',\n okta: 'okta',\n pingfederate: 'pingfederate',\n samlp: 'samlp',\n waad: 'waad',\n};\n\n/**\n * Hook for fetching IDP configuration and provisioning settings.\n * @returns IDP config and provisioning utilities.\n */\nexport function useIdpConfig(): UseConfigIdpResult {\n const { coreClient } = useCoreClient();\n const queryClient = useQueryClient();\n\n const idpConfigQuery = useQuery({\n queryKey: idpConfigQueryKeys.config(),\n queryFn: async () => {\n try {\n const response = await coreClient!\n .getMyOrganizationApiClient()\n .organization.configuration.identityProviders.get();\n return response;\n } catch (error) {\n if (hasApiErrorBody(error) && error.body?.status === 404) {\n return null;\n }\n throw error;\n }\n },\n enabled: !!coreClient,\n retry: (failureCount, error) => {\n if (hasApiErrorBody(error) && error.body?.status === 404) return false;\n return failureCount < 3;\n },\n });\n\n const idpConfig = idpConfigQuery.data ?? null;\n const strategies = idpConfig?.strategies;\n\n const getStrategyFor = (\n strategy: IdpStrategy | undefined,\n ): IdentityProvidersConfigStrategyBase | undefined => {\n if (!strategy || !strategies) return undefined;\n const key = STRATEGY_TO_CONFIG_KEY[strategy];\n return strategies[key];\n };\n\n const isProvisioningEnabled = (strategy: IdpStrategy | undefined): boolean =>\n getStrategyFor(strategy)?.enabled_features.includes('provisioning') ?? false;\n\n const isProvisioningMethodEnabled = (strategy: IdpStrategy | undefined): boolean =>\n getStrategyFor(strategy)?.provisioning_methods.includes('scim') ?? false;\n\n return {\n idpConfig,\n isIdpConfigValid: !!strategies && Object.keys(strategies).length > 0,\n isLoadingIdpConfig: idpConfigQuery.isLoading,\n fetchIdpConfig: async () => await queryClient.getQueryData(idpConfigQueryKeys.config()),\n isProvisioningEnabled,\n isProvisioningMethodEnabled,\n };\n}\n", "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": "/**\n * SSO provider create logic hook.\n * @module use-sso-provider-create-logic\n * @internal\n */\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport { useConfig } from '@/hooks/my-organization/use-config';\nimport { useIdpConfig } from '@/hooks/my-organization/use-idp-config';\nimport type {\n FormState,\n ProviderConfigureHandle,\n ProviderDetailsFormHandle,\n UseSsoProviderCreateLogicOptions,\n UseSsoProviderCreateLogicResult,\n} from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\n/**\n * Hook for SSO provider create logic (form state, step actions, create handler).\n * @param params - SsoProviderCreateLogicParams\n * @returns formData, setFormData, createStepActions, handleCreate, detailsRef, configureRef\n */\nexport function useSsoProviderCreateLogic({\n onNext,\n onPrevious,\n createProvider,\n}: UseSsoProviderCreateLogicOptions): UseSsoProviderCreateLogicResult {\n const [formData, setFormData] = useState({});\n const { strategy, details, configure } = formData;\n const detailsRef = useRef(null);\n const configureRef = useRef(null);\n const { isLoadingConfig, filteredStrategies } = useConfig();\n const { isLoadingIdpConfig, idpConfig } = useIdpConfig();\n\n const createStepActions = useCallback(\n (\n stepId: 'provider_details' | 'provider_configure',\n ref: React.RefObject,\n ) => {\n const dataKey = stepId === 'provider_details' ? 'details' : 'configure';\n const handleAction = async (\n handler: typeof onNext | typeof onPrevious | undefined,\n shouldValidate = false,\n ): Promise => {\n if (shouldValidate) {\n const isValid = await ref.current?.validate();\n if (!isValid) return false;\n }\n const currentData = ref.current?.getData() ?? null;\n setFormData((prev) => ({ ...prev, [dataKey]: currentData }));\n if (!handler) return true;\n const fullPayload = { ...formData, [dataKey]: currentData };\n return handler(stepId, fullPayload);\n };\n return {\n onNextAction: () => handleAction(onNext, true),\n onPreviousAction: () => handleAction(onPrevious, false),\n };\n },\n [formData, onNext, onPrevious],\n );\n\n const handleCreate = useCallback(async () => {\n const finalConfigureData = configureRef.current?.getData();\n await createProvider({\n strategy: strategy!,\n ...details!,\n ...finalConfigureData,\n });\n }, [strategy, details, configure, createProvider]);\n\n return {\n formData,\n setFormData,\n createStepActions,\n handleCreate,\n detailsRef,\n configureRef,\n isLoadingConfig,\n filteredStrategies,\n isLoadingIdpConfig,\n idpConfig,\n };\n}\n", "type": "registry:component", "target": "hooks/my-organization/use-sso-provider-create-logic.ts" }, { "path": "src/hooks/my-organization/use-sso-provider-create.ts", "content": "/**\n * SSO provider creation hook.\n * @module use-sso-provider-create\n */\n\nimport {\n hasApiErrorBody,\n SsoProviderMappers,\n type CreateIdentityProviderRequestContent,\n type CreateIdentityProviderRequestContentPrivate,\n type IdpKnownResponse,\n} from '@auth0/universal-components-core';\nimport { ssoProviderQueryKeys } from '@auth0/universal-components-core';\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\nimport { useCallback } from 'react';\n\nimport { showToast } from '@/components/auth0/shared/toast';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useErrorHandler } from '@/hooks/shared/use-error-handler';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { UseSsoProviderCreateOptions } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\n/**\n * Extracts domain from discovery error detail.\n * @param detail - Error detail string.\n * @returns Domain string or null.\n * @internal\n */\nfunction extractDomainFromDiscoveryError(detail?: string): string | null {\n if (!detail) return null;\n const match = detail.match(/discovery failure:\\s*(.+)/i);\n return match?.[1]?.trim() ?? null;\n}\n\nexport interface UseSsoProviderCreateReturn {\n createProvider: (data: CreateIdentityProviderRequestContentPrivate) => Promise;\n isCreating: boolean;\n}\n\n/**\n * Hook for creating SSO identity providers.\n * @param options - Hook options.\n * @param options.createAction - Callback after successful creation.\n * @param options.customMessages - Custom translation messages.\n * @returns Hook state and methods\n */\nexport function useSsoProviderCreate({\n createAction,\n customMessages = {},\n}: UseSsoProviderCreateOptions = {}): UseSsoProviderCreateReturn {\n const { coreClient } = useCoreClient();\n const { t } = useTranslator('idp_management.create_sso_provider', customMessages);\n const queryClient = useQueryClient();\n const handleError = useErrorHandler();\n const createProviderMutation = useMutation({\n mutationFn: async (\n data: CreateIdentityProviderRequestContentPrivate,\n ): Promise => {\n if (!coreClient) {\n throw new Error('Core client not available');\n }\n\n const {\n strategy,\n name,\n display_name,\n show_as_button,\n assign_membership_on_login,\n ...configOptions\n } = data;\n\n const formData = {\n strategy,\n name,\n display_name,\n show_as_button,\n assign_membership_on_login,\n options: configOptions,\n };\n\n const apiRequestData: CreateIdentityProviderRequestContent =\n SsoProviderMappers.createToAPI(formData);\n\n const result: IdpKnownResponse = await coreClient\n .getMyOrganizationApiClient()\n .organization.identityProviders.create(apiRequestData);\n\n return result;\n },\n onSuccess: (result, data) => {\n showToast({\n type: 'success',\n message: t('notifications.provider_create_success', { providerName: result.name }),\n });\n\n createAction?.onAfter?.(data, result);\n\n // Invalidate the providers list to refetch with the new provider\n queryClient.invalidateQueries({ queryKey: ssoProviderQueryKeys.list() });\n },\n onError: (error, data) => {\n if (\n hasApiErrorBody(error) &&\n error.body?.status === 409 &&\n error.body?.type === 'https://auth0.com/api-errors#A0E-409-0001'\n ) {\n showToast({\n type: 'error',\n message: t('notifications.provider_create_duplicated_provider_error', {\n providerName: data.name,\n }),\n });\n return;\n }\n // Handle discovery failure error for domain\n if (hasApiErrorBody(error)) {\n const domainFromError = extractDomainFromDiscoveryError(error.body?.detail);\n if (domainFromError) {\n showToast({\n type: 'error',\n message: t('notifications.provider_create_discovery_failure', {\n domain: domainFromError,\n }),\n });\n return;\n }\n }\n\n handleError(error, { fallbackMessage: t('notifications.general_error') });\n },\n });\n\n const createProvider = useCallback(\n async (data: CreateIdentityProviderRequestContentPrivate): Promise => {\n if (!coreClient) {\n showToast({\n type: 'error',\n message: t('notifications.general_error'),\n });\n return;\n }\n\n if (createAction?.onBefore) {\n const canProceed = createAction.onBefore(data);\n if (!canProceed) {\n return;\n }\n }\n\n await createProviderMutation.mutateAsync(data);\n },\n [coreClient, createAction, createProviderMutation],\n );\n\n return {\n createProvider,\n isCreating: createProviderMutation.isPending,\n };\n}\n", "type": "registry:component", "target": "hooks/my-organization/use-sso-provider-create.ts" }, { "path": "src/hooks/shared/use-core-client-initialization.ts", "content": "/**\n * CoreClient initialization hook.\n * @module use-core-client-initialization\n * @internal\n */\n\nimport type {\n CoreClientInterface,\n AuthDetails,\n I18nInitOptions,\n} from '@auth0/universal-components-core';\nimport { createCoreClient } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\ninterface UseCoreClientInitializationProps {\n authDetails: AuthDetails;\n i18nOptions?: I18nInitOptions;\n}\n\n/**\n * @internal\n * @param props - Initialization props.\n * @returns The initialized CoreClient instance, or null while initializing.\n */\nexport const useCoreClientInitialization = ({\n authDetails,\n i18nOptions,\n}: UseCoreClientInitializationProps): CoreClientInterface | null => {\n const { authProxyUrl } = authDetails;\n const [coreClient, setCoreClient] = React.useState(null);\n\n React.useEffect(() => {\n const initializeCoreClient = async () => {\n try {\n const initializedCoreClient = await createCoreClient(authDetails, i18nOptions);\n setCoreClient(initializedCoreClient);\n } catch (error) {\n console.error(error);\n }\n };\n initializeCoreClient();\n }, [authProxyUrl, i18nOptions]);\n\n return coreClient;\n};\n", "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": "/**\n * Error handling hook with toast error.\n * @module use-error-handler\n */\n\nimport {\n isNetworkError,\n isNotifiableError,\n resolveErrorMessage,\n getStatusCode,\n hasApiErrorBody,\n ERROR_CODES,\n} from '@auth0/universal-components-core';\nimport { useCallback } from 'react';\n\nimport { showToast } from '@/components/auth0/shared/toast';\nimport { useTranslator } from '@/hooks/shared/use-translator';\n\ninterface ErrorHandlerCallOptions {\n fallbackMessage?: string;\n}\n\n/**\n * Hook for consistent error handling across the app.\n *\n * @returns Error handler function.\n *\n * @example\n * const handleError = useErrorHandler();\n *\n * // With custom message\n * onError: (error) => handleError(error, {\n * fallbackMessage: t('my_error')\n * });\n *\n * // With defaults\n * onError: handleError;\n */\nexport function useErrorHandler() {\n const { t } = useTranslator('common');\n\n return useCallback(\n (error: unknown, options: ErrorHandlerCallOptions = {}): void => {\n if (!isNotifiableError(error)) return;\n\n const getCustomErrorMessage = (err: unknown): string | undefined => {\n if (isNetworkError(err)) return t('error.network');\n const status = getStatusCode(err);\n switch (status) {\n case 400:\n return t('error.bad_request');\n case 401:\n return t('error.missing_token');\n case 403:\n return hasApiErrorBody(err) && err.body?.type?.includes(ERROR_CODES.INSUFFICIENT_SCOPE)\n ? t('error.insufficient_scope')\n : t('error.forbidden');\n case 404:\n return t('error.not_found');\n case 429:\n return t('error.rate_limit');\n default:\n return undefined;\n }\n };\n\n showToast({\n type: 'error',\n message:\n getCustomErrorMessage(error) ??\n resolveErrorMessage(error, options.fallbackMessage ?? t('error.generic')),\n });\n },\n [t],\n );\n}\n", "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": "/**\n * Toast settings management hook.\n * @module use-toast-provider\n * @internal\n */\n\nimport { useEffect, useMemo } from 'react';\n\nimport { setGlobalToastSettings } from '@/components/auth0/shared/toast';\nimport { DEFAULT_TOAST_SETTINGS, type ToastSettings } from '@/types/toast-types';\n\n/**\n * Hook to merge and apply toast settings.\n * @param toastSettings - Optional toast settings.\n * @returns Merged toast settings.\n * @internal\n */\nexport const useToastProvider = (toastSettings?: ToastSettings) => {\n const mergedToastSettings = useMemo(() => {\n if (!toastSettings) {\n return DEFAULT_TOAST_SETTINGS;\n }\n\n if (toastSettings.provider === 'custom') {\n return toastSettings;\n }\n\n const defaultSonnerSettings =\n DEFAULT_TOAST_SETTINGS.provider === 'sonner' ? DEFAULT_TOAST_SETTINGS.settings || {} : {};\n\n return {\n provider: 'sonner' as const,\n settings: {\n ...defaultSonnerSettings,\n ...(toastSettings.provider === 'sonner' ? toastSettings.settings : {}),\n },\n } satisfies ToastSettings;\n }, [toastSettings]);\n\n useEffect(() => {\n setGlobalToastSettings(mergedToastSettings);\n }, [mergedToastSettings]);\n\n return mergedToastSettings;\n};\n", "type": "registry:component", "target": "hooks/shared/use-toast-provider.ts" }, { "path": "src/hooks/shared/use-translator.ts", "content": "/**\n * i18n translator hook.\n * @module use-translator\n */\n\nimport { type EnhancedTranslationFunction } from '@auth0/universal-components-core';\nimport { useMemo, useCallback } from 'react';\n\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\n\n/**\n * Hook to access i18n translations.\n * @param namespace - Translation namespace.\n * @param overrides - Optional translation overrides.\n * @returns Translator function and language utilities.\n */\nexport function useTranslator(\n namespace: string,\n overrides?: Record,\n): {\n t: EnhancedTranslationFunction;\n changeLanguage: (language: string, fallbackLanguage?: string) => Promise;\n currentLanguage: string;\n fallbackLanguage: string | undefined;\n} {\n const { coreClient } = useCoreClient();\n\n if (!coreClient) {\n throw new Error(\n 'useTranslator must be used within Auth0ComponentProvider with initialized CoreClient',\n );\n }\n\n const translator = useMemo(() => {\n return coreClient.i18nService.translator(namespace, overrides);\n }, [coreClient, namespace, overrides]);\n\n const changeLanguage = useCallback(\n async (language: string, fallbackLanguage?: string) => {\n await coreClient.i18nService.changeLanguage(language, fallbackLanguage);\n },\n [coreClient],\n );\n\n return {\n t: translator,\n changeLanguage,\n currentLanguage: coreClient.i18nService.currentLanguage,\n fallbackLanguage: coreClient.i18nService.fallbackLanguage,\n };\n}\n", "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": "/**\n * RWA proxy provider for server-side auth.\n * @module proxy-provider\n */\n\n'use client';\n\nimport type { AuthDetails } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Toaster } from '@/components/auth0/shared/sonner';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Spinner } from '@/components/ui/spinner';\nimport { CoreClientContext } from '@/hooks/shared/use-core-client';\nimport { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization';\nimport { useToastProvider } from '@/hooks/shared/use-toast-provider';\nimport { QueryProvider } from '@/providers/query-provider';\nimport { ThemeProvider } from '@/providers/theme-provider';\nimport type { Auth0ComponentProviderProps } from '@/types/auth-types';\n\n/**\n * Auth0 provider for RWAs using backend proxy auth.\n * @param props - Provider configuration including domain, proxyConfig, i18n, themeSettings, toastSettings, cacheConfig, loader, and children.\n * @returns Provider component tree\n */\nexport const Auth0ComponentProvider = ({\n i18n,\n domain,\n proxyConfig,\n previewMode,\n themeSettings = {\n theme: 'default',\n mode: 'light',\n variables: {\n common: {},\n light: {},\n dark: {},\n },\n },\n toastSettings,\n cacheConfig,\n loader,\n children,\n}: Extract & { children: React.ReactNode }) => {\n const mergedToastSettings = useToastProvider(toastSettings);\n const { baseUrl, fetcher } = proxyConfig;\n\n const memoizedAuthDetails = React.useMemo(\n () => ({\n domain,\n authProxyUrl: baseUrl,\n fetcher,\n previewMode,\n }),\n [domain, baseUrl, fetcher, previewMode],\n );\n\n const coreClient = useCoreClientInitialization({\n authDetails: memoizedAuthDetails,\n i18nOptions: i18n,\n });\n\n const coreClientValue = React.useMemo(\n () => ({\n coreClient,\n }),\n [coreClient],\n );\n\n const fallback = loader || (\n \n
\n \n
\n \n );\n\n return (\n \n {mergedToastSettings.provider === 'sonner' && (\n \n )}\n {coreClient ? (\n \n {children}\n \n ) : (\n fallback\n )}\n \n );\n};\n\nexport default Auth0ComponentProvider;\n", "type": "registry:component", "target": "providers/proxy-provider.tsx" }, { "path": "src/providers/query-provider.tsx", "content": "'use client';\n\n/**\n * TanStack Query provider wrapper.\n * @module query-provider\n * @internal\n */\n\nimport { isMfaRequiredError, isNotifiableError } from '@auth0/universal-components-core';\nimport {\n MutationCache,\n type Query,\n QueryCache,\n QueryClient,\n QueryClientProvider as TanStackQueryClientProvider,\n} from '@tanstack/react-query';\nimport { useMemo, useState, type ReactElement, type ReactNode } from 'react';\n\nimport { GateKeeperContext } from '@/providers/gate-keeper-context';\n\n/** Query cache configuration. */\nexport interface QueryCacheConfig {\n enabled?: boolean;\n staleTime?: number;\n gcTime?: number;\n refetchOnWindowFocus?: boolean | 'always';\n}\n\n/** Default cache configuration. */\nexport const DEFAULT_CACHE_CONFIG: Readonly> = {\n enabled: true,\n staleTime: 2 * 60 * 1000,\n gcTime: 5 * 60 * 1000,\n refetchOnWindowFocus: false,\n};\n\nconst QUERY_RETRY_CONFIG = {\n maxRetries: 3,\n maxRetryDelay: 30_000,\n backoffMultiplier: 2,\n} as const;\n\nconst MUTATION_RETRY_CONFIG = {\n maxRetries: 1,\n} as const;\n\nconst DISABLED_CACHE_GC_TIME = 5 * 1000;\n\n/**\n * Merges user config with defaults.\n * @param userConfig - User-provided cache config.\n * @returns The resolved cache configuration\n * @internal\n */\nexport function resolveCacheConfig(userConfig?: QueryCacheConfig): Required {\n const merged: Required = {\n ...DEFAULT_CACHE_CONFIG,\n ...userConfig,\n };\n\n if (!merged.enabled) {\n return {\n ...merged,\n staleTime: 0,\n gcTime: DISABLED_CACHE_GC_TIME,\n };\n }\n\n return merged;\n}\n\n/**\n * Returns true if a cached query has an error that GateKeeper should handle.\n * @param query - The cached query to check.\n * @returns Whether the query error should be intercepted by GateKeeper.\n */\nfunction isGateKeeperError(query: Query): boolean {\n return !!query.state.error && !isNotifiableError(query.state.error);\n}\n\n/**\n * Creates a QueryClient with config and global GateKeeper error interception.\n * @param cacheConfig - Cache configuration.\n * @param setGateKeeperState - Setter for GateKeeper context state.\n * @returns The configured QueryClient instance\n * @internal\n */\nfunction createQueryClient(\n cacheConfig: Required,\n setGateKeeperState: (state: { error: Error; onRetry: () => Promise } | null) => void,\n): QueryClient {\n const queryClient = new QueryClient({\n queryCache: new QueryCache({\n onError: (error) => {\n if (!isNotifiableError(error)) {\n setGateKeeperState({\n error,\n onRetry: async () => {\n await queryClient.refetchQueries({ predicate: isGateKeeperError });\n const stillFailing = queryClient.getQueryCache().getAll().some(isGateKeeperError);\n if (!stillFailing) setGateKeeperState(null);\n return !stillFailing;\n },\n });\n }\n },\n }),\n mutationCache: new MutationCache({\n onError: (error, variables, _context, mutation) => {\n if (isMfaRequiredError(error)) {\n setGateKeeperState({\n error,\n onRetry: async () => {\n try {\n await mutation.execute(variables);\n setGateKeeperState(null);\n return true;\n } catch {\n return false;\n }\n },\n });\n }\n },\n }),\n defaultOptions: {\n queries: {\n staleTime: cacheConfig.staleTime,\n gcTime: cacheConfig.gcTime,\n refetchOnWindowFocus: cacheConfig.refetchOnWindowFocus,\n retry: (failureCount, error) =>\n !isMfaRequiredError(error) && failureCount < QUERY_RETRY_CONFIG.maxRetries,\n retryDelay: (attemptIndex: number) =>\n Math.min(\n 1000 * QUERY_RETRY_CONFIG.backoffMultiplier ** attemptIndex,\n QUERY_RETRY_CONFIG.maxRetryDelay,\n ),\n refetchOnReconnect: true,\n },\n mutations: {\n retry: (failureCount, error) =>\n !isMfaRequiredError(error) && failureCount < MUTATION_RETRY_CONFIG.maxRetries,\n },\n },\n });\n\n return queryClient;\n}\n\n/** Props for QueryProvider. */\nexport interface QueryProviderProps {\n children: ReactNode;\n /** Cache config, only read on mount. */\n cacheConfig?: QueryCacheConfig;\n}\n\n/**\n * Internal TanStack Query provider wrapper.\n * @param props - Component props.\n * @param props.children - Child components.\n * @param props.cacheConfig - Cache configuration.\n * @returns The context provider component\n * @internal\n */\nexport function QueryProvider({ children, cacheConfig }: QueryProviderProps): ReactElement {\n const [gateKeeperState, setGateKeeperState] = useState<{\n error: Error;\n onRetry: () => Promise;\n } | null>(null);\n const [queryClient] = useState(() =>\n createQueryClient(resolveCacheConfig(cacheConfig), setGateKeeperState),\n );\n\n const contextValue = useMemo(() => gateKeeperState ?? { error: null }, [gateKeeperState]);\n\n return (\n \n {children}\n \n );\n}\n", "type": "registry:component", "target": "providers/query-provider.tsx" }, { "path": "src/providers/spa-provider.tsx", "content": "/**\n * SPA provider using @auth0/auth0-react.\n * @module spa-provider\n */\n\n'use client';\n\nimport { useAuth0 } from '@auth0/auth0-react';\nimport type { AuthDetails, BasicAuth0ContextInterface } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Toaster } from '@/components/auth0/shared/sonner';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Spinner } from '@/components/ui/spinner';\nimport { CoreClientContext } from '@/hooks/shared/use-core-client';\nimport { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization';\nimport { useToastProvider } from '@/hooks/shared/use-toast-provider';\nimport { QueryProvider } from '@/providers/query-provider';\nimport { ThemeProvider } from '@/providers/theme-provider';\nimport type { Auth0ComponentProviderProps } from '@/types/auth-types';\n\n/**\n * Auth0 provider for SPAs. Wraps components with required contexts.\n * @param props - Provider configuration including domain, mode, authContext, i18n, themeSettings, toastSettings, cacheConfig, loader, and children.\n * @returns Provider component tree\n */\nexport const Auth0ComponentProvider = (\n props: Extract & { children: React.ReactNode },\n) => {\n const {\n i18n,\n previewMode,\n themeSettings = {\n theme: 'default',\n mode: 'light',\n variables: {\n common: {},\n light: {},\n dark: {},\n },\n },\n toastSettings,\n cacheConfig,\n loader,\n children,\n authContext,\n } = props;\n const mergedToastSettings = useToastProvider(toastSettings);\n\n const auth0ReactContext = useAuth0();\n\n const resolvedAuthContext = React.useMemo(() => {\n if (authContext) {\n return authContext;\n }\n if (auth0ReactContext && 'isAuthenticated' in auth0ReactContext) {\n return auth0ReactContext as BasicAuth0ContextInterface;\n }\n\n throw new Error(\n 'Auth0ContextInterface is not available. Make sure you wrap your app with Auth0Provider from @auth0/auth0-react, or pass authContext.',\n );\n }, [auth0ReactContext, authContext]);\n\n const memoizedAuthDetails = React.useMemo(\n () => ({\n contextInterface: resolvedAuthContext,\n previewMode,\n }),\n [resolvedAuthContext, previewMode],\n );\n\n const coreClient = useCoreClientInitialization({\n authDetails: memoizedAuthDetails,\n i18nOptions: i18n,\n });\n\n const coreClientValue = React.useMemo(\n () => ({\n coreClient,\n }),\n [coreClient],\n );\n\n const fallback = loader || (\n \n
\n \n
\n \n );\n\n return (\n \n {mergedToastSettings.provider === 'sonner' && (\n \n )}\n {coreClient ? (\n \n {children}\n \n ) : (\n fallback\n )}\n \n );\n};\n\nexport default Auth0ComponentProvider;\n", "type": "registry:component", "target": "providers/spa-provider.tsx" }, { "path": "src/providers/theme-provider.tsx", "content": "/**\n * Theme provider for styling configuration.\n * @module theme-provider\n * @internal\n */\n\n'use client';\n\nimport { applyStyleOverrides, type StylingVariables } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { PortalContext } from '@/providers/portal-context';\nimport type { ThemeContextValue, ThemeInput } from '@/types/theme-types';\n\n/** Default empty style overrides. */\nconst defaultStyleOverrides: StylingVariables = { common: {}, light: {}, dark: {} };\n\n/**\n * Theme context for accessing theme settings.\n * @internal\n * @returns The context provider component\n */\nexport const ThemeContext = React.createContext({\n isDarkMode: false,\n variables: defaultStyleOverrides,\n loader: null,\n});\n\n/**\n * Provides theme configuration to the component tree.\n * @param props - Component props.\n * @param props.themeSettings - Theme settings with mode, variables, and loader.\n * @param props.children - Child components.\n * @returns Theme provider.\n * @internal\n */\nexport const ThemeProvider: React.FC<{\n themeSettings?: ThemeInput;\n children: React.ReactNode;\n}> = ({ themeSettings, children }) => {\n const { variables, loader, mode, theme } = React.useMemo(\n () => ({\n variables: themeSettings?.variables ?? defaultStyleOverrides,\n loader: themeSettings?.loader ?? null,\n mode: themeSettings?.mode,\n theme: themeSettings?.theme ?? 'default',\n }),\n [themeSettings],\n );\n\n const [portalContainer, setPortalContainer] = React.useState(null);\n\n React.useEffect(() => {\n applyStyleOverrides(variables, mode, theme);\n }, [variables, mode, theme]);\n\n return (\n \n \n {children}\n
\n \n \n );\n};\n", "type": "registry:component", "target": "providers/theme-provider.tsx" }, { "path": "src/types/auth-types.ts", "content": "/**\n * Auth provider configuration types.\n * @module auth-types\n */\n\nimport type { AuthDetails, FetcherAuthParams } from '@auth0/universal-components-core';\nimport type * as React from 'react';\n\nimport type { QueryCacheConfig } from '@/types/cache-types';\nimport type { I18nOptions } from '@/types/i18n-types';\nimport type { ThemeSettings } from '@/types/theme-types';\nimport type { ToastSettings } from '@/types/toast-types';\n\n/** Props for Auth0ComponentProvider. */\nexport type Auth0ComponentProviderProps = (\n | {\n mode?: 'direct';\n authContext?: AuthDetails['contextInterface'];\n proxyConfig?: never;\n }\n | {\n mode: 'proxy';\n domain: string;\n proxyConfig: {\n baseUrl: string;\n fetcher?: (\n url: string,\n init?: RequestInit,\n authParams?: FetcherAuthParams,\n ) => Promise;\n };\n }\n) & {\n i18n?: I18nOptions;\n themeSettings?: ThemeSettings;\n loader?: React.ReactNode;\n toastSettings?: ToastSettings;\n /** TanStack Query cache config. Use `{ enabled: false }` to disable. */\n cacheConfig?: QueryCacheConfig;\n previewMode?: boolean;\n};\n", "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": "/**\n * SSO provider create types.\n * @module sso-provider-create-types\n */\n\nimport type {\n SharedComponentProps,\n ProviderSelectMessages,\n ProviderDetailsMessages,\n IdpStrategy,\n ProviderSelectionFormValues,\n IdpKnownResponse,\n ProviderConfigureMessages,\n ProviderConfigureFieldsMessages,\n SsoProviderCreateMessages,\n ProviderDetailsFormValues,\n ProviderConfigureFormValues,\n SsoProviderFormValues,\n SsoProviderSchema,\n ComponentAction,\n BackButton,\n CreateIdentityProviderRequestContentPrivate,\n GetIdpConfigurationResponseContent,\n} from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport type React from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\n\nexport interface ProviderConfigureHandle {\n validate: () => Promise;\n getData: () => ProviderConfigureFormValues;\n}\n\nexport interface ProviderDetailsFormHandle {\n validate: () => Promise;\n getData: () => ProviderDetailsFormValues;\n isDirty: () => boolean;\n reset: (data?: ProviderDetailsFormValues) => void;\n}\n\n/** Form mode for provider configuration. */\nexport type FormMode = 'create' | 'edit';\n\n/** CSS classes for SsoProviderCreate. */\nexport interface SsoProviderCreateClasses {\n 'SsoProviderCreate-header'?: string;\n 'SsoProviderCreate-wizard'?: string;\n 'ProviderSelect-root'?: string;\n 'ProviderDetails-root'?: string;\n 'ProviderConfigure-root'?: string;\n}\n\n/** Props for ProviderSelect component. */\nexport interface ProviderSelectProps\n extends SharedComponentProps {\n isLoading: boolean;\n strategyList: IdpStrategy[];\n onClickStrategy: (strategy: IdpStrategy) => void;\n selectedStrategy?: IdpStrategy | null;\n form?: UseFormReturn;\n className?: string;\n}\n\n/** Props for ProviderDetails component. */\nexport interface ProviderDetailsProps\n extends SharedComponentProps {\n initialData?: Partial;\n className?: string;\n hideHeader?: boolean;\n mode: 'edit' | 'create';\n onFormDirty?: (isDirty: boolean) => void;\n}\n\n/** Props for ProviderConfigure component. */\nexport interface ProviderConfigureProps\n extends SharedComponentProps {\n className?: string;\n isLoading: boolean;\n strategy: IdpStrategy;\n initialData?: Partial;\n idpConfig: GetIdpConfigurationResponseContent | null;\n}\n\nexport interface ProviderConfigureFieldsProps\n extends SharedComponentProps {\n strategy: IdpStrategy;\n initialData?: Partial;\n className?: string;\n onFormDirty?: (isDirty: boolean) => void;\n idpConfig: GetIdpConfigurationResponseContent | null;\n mode?: FormMode;\n}\n\nexport interface SsoProviderCreateBackButton extends Omit {\n icon?: LucideIcon;\n onClick: (e: React.MouseEvent) => void;\n}\nexport interface SsoProviderCreateProps\n extends SharedComponentProps<\n SsoProviderCreateMessages,\n SsoProviderCreateClasses,\n SsoProviderSchema\n > {\n createAction: ComponentAction;\n backButton?: SsoProviderCreateBackButton;\n onPrevious?: (stepId: string, values: Partial) => boolean;\n onNext?: (stepId: string, values: Partial) => boolean;\n}\n\nexport interface UseSsoProviderCreateOptions {\n createAction?: SsoProviderCreateProps['createAction'];\n customMessages?: SsoProviderCreateProps['customMessages'];\n}\n\nexport interface UseSsoProviderCreateLogicOptions {\n onNext?: SsoProviderCreateProps['onNext'];\n onPrevious?: SsoProviderCreateProps['onPrevious'];\n createProvider: (data: CreateIdentityProviderRequestContentPrivate) => Promise;\n}\n\nexport interface UseSsoProviderCreateLogicResult {\n formData: FormState;\n setFormData: React.Dispatch>;\n detailsRef: React.RefObject;\n configureRef: React.RefObject;\n handleCreate: () => Promise;\n isLoadingConfig: boolean;\n filteredStrategies: IdpStrategy[];\n isLoadingIdpConfig: boolean;\n idpConfig?: GetIdpConfigurationResponseContent | null;\n createStepActions: (\n stepId: 'provider_details' | 'provider_configure',\n ref: React.RefObject,\n ) => {\n onNextAction: () => Promise;\n onPreviousAction: () => Promise;\n };\n}\n\nexport type FormState = {\n strategy?: IdpStrategy;\n details?: ProviderDetailsFormValues | null;\n configure?: ProviderConfigureFormValues | null;\n};\n\nexport type SsoProviderCreateViewProps = {\n logic: SsoProviderCreateLogicProps;\n handlers: SsoProviderCreateHandlerProps;\n};\n\nexport interface SsoProviderCreateLogicProps {\n formData: FormState;\n strategy?: IdpStrategy;\n details?: ProviderDetailsFormValues | null;\n configure?: ProviderConfigureFormValues | null;\n isCreating: boolean;\n isLoadingConfig: boolean;\n filteredStrategies: IdpStrategy[];\n isLoadingIdpConfig: boolean;\n idpConfig?: GetIdpConfigurationResponseContent | null;\n styling?: SsoProviderCreateProps['styling'];\n customMessages?: SsoProviderCreateProps['customMessages'];\n backButton?: SsoProviderCreateProps['backButton'];\n}\n\nexport interface SsoProviderCreateHandlerProps {\n onNext: ((stepId: string, values: Partial) => boolean) | undefined;\n onPrevious: ((stepId: string, values: Partial) => boolean) | undefined;\n setFormData: React.Dispatch>;\n detailsRef: React.RefObject;\n configureRef: React.RefObject;\n handleCreate: () => Promise;\n createStepActions: (\n stepId: 'provider_details' | 'provider_configure',\n ref: React.RefObject,\n ) => {\n onNextAction: () => Promise;\n onPreviousAction: () => Promise;\n };\n}\n", "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": "/**\n * Toast notification types.\n * @module toast-types\n */\n\nimport type { ReactNode } from 'react';\nimport type { ExternalToast } from 'sonner';\n\n/** Toast notification type. */\nexport type ToastType = 'success' | 'info' | 'warning' | 'error';\n\n/** Toast position options. */\nexport type ToastPosition =\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'top-center'\n | 'bottom-center';\n\n/** Custom toast method signature. */\nexport interface CustomToastMethod {\n (message: string): void;\n}\n\n/** Custom toast methods for overriding default behavior. */\nexport interface CustomToastMethods {\n success?: CustomToastMethod;\n error?: CustomToastMethod;\n warning?: CustomToastMethod;\n info?: CustomToastMethod;\n dismiss?: (toastId?: string) => void;\n}\n\n/** Sonner toast settings. */\nexport interface SonnerSettings {\n position?: ToastPosition;\n maxToasts?: number;\n duration?: number;\n dismissible?: boolean;\n closeButton?: boolean;\n}\n\n/** Toast provider configuration. */\nexport type ToastSettings =\n | { provider?: 'sonner'; settings?: SonnerSettings }\n | { provider: 'custom'; methods: CustomToastMethods };\n\n/** Toast options for showToast. */\nexport interface ToastOptions {\n type: ToastType;\n message: string;\n className?: string;\n icon?: ReactNode;\n data?: ExternalToast;\n}\n\n/** Default toast settings. */\nexport const DEFAULT_TOAST_SETTINGS: ToastSettings = {\n provider: 'sonner',\n settings: {\n position: 'top-right',\n closeButton: true,\n },\n} as const;\n", "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" } ], "meta": { "coreVersion": "2.1.0" } }