> ## Documentation Index > Fetch the complete documentation index at: https://docs-staging-automated-sdk-version-update.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Edit SSO Providers on Web > Tabbed interface for editing SSO providers: SSO settings, provisioning (SCIM), and domain management export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => { const stageTextMap = { "beta": "Beta", "ea": "Early Access" }; const stageText = stageTextMap[stage] || "a product release stage"; const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages"; const linkify = (text, url) => { return {text}; }; const includeDetails = (plans, contact, terms) => { const hasDetails = terms || plans || contact; if (!hasDetails) return null; return {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. } {contact && "To participate, contact " + contact + ". "} {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.} ; }; return The {feature} feature is in {linkify(stageText, prsLink)}. {includeDetails(plans, contact, terms)} ; }; export const ComponentLoader = props => { const themePref = window?.localStorage?.getItem?.("isDarkMode"); const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; const lang = { i18n: { currentLanguage: props.lang || "en-US" } }; return
{props.componentPreviewText}
; }; The `SsoProviderEdit` component provides a unified interface to edit [Single Sign-On](/docs/authenticate/enterprise-connections/self-service-enterprise-configuration) providers. ## Third-party application access and Cross App Access These controls are shown only when the organization has full access to the SSO connection. For connections with restricted access, both fields are hidden. **`use_for_third_party_client_access`** enables the connection to be used by third-party applications. When the organization's `third_party_client_access` policy is set to `"block"`, this checkbox remains visible but is disabled — an explanatory message is shown asking the administrator to first enable third-party access at the organization level. **`cross_app_access_resource_app`** configures Cross App Access (XAA). It is available for OIDC and Okta connections directly, and for SAML connections via an OIDC discovery URL that must be provided first. Availability is controlled by `GET /my-org/config/identity-providers` — when the strategy's `cross_app_access_resource_app` configuration is absent, the section is not shown. XAA is a separate authorization route and bypasses both third-party access gates: the organization-level `third_party_client_access` policy and the connection-level `use_for_third_party_client_access` setting. ## Setup requirements **Auth0 Configuration Required**—Ensure your tenant is configured with the My Organization API. [View setup guide →](/docs/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api) ## Installation ```bash pnpm wrap lines theme={null} pnpm add @auth0/universal-components-react ``` ```bash npm wrap lines theme={null} npm install @auth0/universal-components-react ``` Running either command also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration. ## Get started ```tsx wrap lines theme={null} import { SsoProviderEdit } from "@auth0/universal-components-react"; import { useNavigate, useParams } from "react-router-dom"; export function EditProviderPage() { const { providerId } = useParams(); const navigate = useNavigate(); return ( navigate("/providers"), }} sso={{ updateAction: { onAfter: () => console.log("Provider updated"), }, }} /> ); } ``` ```tsx lines theme={null} import React from "react"; import { SsoProviderEdit } from "@auth0/universal-components-react"; import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa"; import { useNavigate, useParams } from "react-router-dom"; import { analytics } from "./lib/analytics"; function EditProviderPage() { const { providerId } = useParams(); const navigate = useNavigate(); return (
navigate("/providers"), }} sso={{ updateAction: { onAfter: (provider) => { analytics.track("Provider Updated", { name: provider.name }); toast.success("Provider configuration saved"); }, }, deleteAction: { onBefore: (provider) => { return confirm( `Permanently delete "${provider.display_name}"? This cannot be undone.`, ); }, }, deleteFromOrganizationAction: { onBefore: (provider) => { return confirm( `Remove "${provider.display_name}" from this organization?`, ); }, onAfter: () => { toast.success("Provider removed from organization"); navigate("/providers"); }, }, }} provisioning={{ createAction: { onAfter: () => toast.success("SCIM provisioning enabled"), }, createScimTokenAction: { onAfter: () => toast.info("Copy your SCIM token - it won't be shown again"), }, }} domains={{ verifyAction: { onAfter: (domain) => { toast.success(`${domain.domain} verified`); }, }, deleteAction: { onBefore: (domain) => confirm(`Delete ${domain.domain}?`), }, }} customMessages={{ tabs: { sso: "Configuration", provisioning: "User Sync (SCIM)", domains: "Linked Domains", }, }} styling={{ variables: { common: { "--color-primary": "#059669" }, }, }} />
); } export default function App() { const domain = "your-domain.auth0.com"; return ( ); } ``` ## Props ### Required props Required props are fundamental to the component's operation. `SsoProviderEdit` requires the provider ID to load and edit the correct provider.
Prop Type Description
providerId string Required. The SSO provider ID to edit.
*** ### Display props Display props control how the component renders without affecting its behavior.
Prop Type Description
hideHeader boolean Hide the header section. Default: false
hideProvisioningTab boolean Hide the Provisioning (SCIM) tab. Default: false
hideDeleteProvider boolean Hide the delete provider action. Default: false
hideRemoveFromOrganization boolean Hide the remove from organization action. Default: false
hideAttributeMappings boolean Hide the attribute mappings section. Default: false
*** ### Action props User interactions across the three tabs are handled by several action props that are organized under the respective tab's name (`sso`, `provisioning`, and `domains`).
Prop Type Description
backButton Object Back button configuration.
sso SsoProviderTabEditProps SSO tab actions. Details
provisioning SsoProvisioningTabEditProps Provisioning tab actions. Details
domains SsoDomainsTabEditProps Domains tab actions. Details
**backButton** **Type:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }` Configures the back button in the component header. Use this to navigate back to your providers list. **Properties:** * `icon`—Custom Lucide icon component (optional, defaults to ArrowLeft) * `onClick`—Click handler for navigation **Example:** ```tsx wrap lines theme={null} import { ChevronLeft } from "lucide-react"; navigate("/providers"), }} />; ``` *** ### SSO tab actions The `sso` prop configures actions for the SSO settings tab. This tab manages the provider's authentication configuration.
Action Type Description
updateAction ComponentAction\ Update provider settings.
deleteAction ComponentAction\ Permanently delete the provider from the tenant.
deleteFromOrganizationAction ComponentAction\ Remove provider from the organization without deleting it from the tenant.
**sso.updateAction** **Type:** `ComponentAction` Controls saving changes to provider configuration (client ID, secrets, certificates, etc.). **Properties:** * `disabled`—Disable the save button * `onBefore(provider)`—Runs before the update. Return `false` to prevent saving (for example, to show a confirmation dialog). * `onAfter(provider, result)`—Runs after the provider is successfully updated. Use this to show a notification or track the event. **Example:** ```tsx wrap lines theme={null} { return confirm("Save changes to provider configuration?"); }, onAfter: (provider) => { toast.success("Provider configuration saved"); analytics.track("Provider Updated", { name: provider.name }); }, }, }} /> ``` *** **sso.deleteAction** **Type:** `ComponentAction` Controls permanent deletion of the provider from your Auth0 tenant. This action cannot be undone. **Example:** ```tsx wrap lines theme={null} sso={{ deleteAction: { onBefore: (provider) => { return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`); }, onAfter: () => navigate("/providers"), }, }} ``` *** **sso.deleteFromOrganizationAction** **Type:** `ComponentAction` Controls removing the provider from the organization. The provider is detached from the organization but remains in the tenant and can be re-added later. **Example:** ```tsx wrap lines theme={null} sso={{ deleteFromOrganizationAction: { onBefore: (provider) => { return confirm(`Remove "${provider.display_name}" from this organization?`); }, onAfter: () => navigate("/providers"), }, }} ``` *** ### Provisioning tab actions The `provisioning` prop configures actions for the SCIM provisioning tab. This tab manages automated user provisioning via the SCIM protocol.
Action Type Description
createAction ComponentAction\ Enable SCIM provisioning.
deleteAction ComponentAction\ Disable SCIM provisioning.
createScimTokenAction ComponentAction\ Generate SCIM token.
deleteScimTokenAction ComponentAction\ Revoke SCIM token.
**provisioning.createAction** **Type:** `ComponentAction` Enables SCIM provisioning for the provider. Once enabled, you can generate a SCIM token for your identity provider to use. **Example:** ```tsx wrap lines theme={null} provisioning={{ createAction: { onBefore: (provider) => { return confirm("Enable SCIM provisioning for this provider?"); }, onAfter: (provider, config) => { toast.success("SCIM provisioning enabled"); console.log("SCIM endpoint:", config.scim_endpoint); }, }, }} ``` *** **provisioning.deleteAction** **Type:** `ComponentAction` Disables SCIM provisioning and removes all provisioning configuration for that identity provider. **Example:** ```tsx wrap lines theme={null} provisioning={{ deleteAction: { onBefore: (provider) => { return confirm("Disable SCIM provisioning? This will stop automatic user sync."); }, onAfter: () => toast.success("SCIM provisioning disabled"), }, }} ``` *** **provisioning.createScimTokenAction** **Type:** `ComponentAction` Generates a new SCIM bearer token for your identity provider to authenticate with Auth0. **Example:** ```tsx wrap lines theme={null} provisioning={{ createScimTokenAction: { onAfter: (provider, tokenResponse) => { // Token is shown once - user should copy it immediately console.log("New SCIM token generated"); }, }, }} ``` *** **provisioning.deleteScimTokenAction** **Type:** `ComponentAction` Revokes the SCIM token. The identity provider will no longer be able to sync users until a new token is generated. **Example:** ```tsx wrap lines theme={null} provisioning={{ deleteScimTokenAction: { onBefore: () => { return confirm("Revoke SCIM token? Your identity provider will lose access immediately."); }, }, }} ``` *** ### Domains tab actions The `domains` prop configures actions for the domains tab. This tab manages domains associated with the provider for automatic user routing.
Action Type Description
createAction ComponentAction\ Add a domain.
verifyAction ComponentAction\ Verify domain ownership.
deleteAction ComponentAction\ Delete a domain.
associateToProviderAction ComponentAction\ Associate domain to provider.
deleteFromProviderAction ComponentAction\ Remove domain from provider.
**domains.createAction** **Type:** `ComponentAction` Controls adding new domains to the organization from within the provider edit interface. **Example:** ```tsx wrap lines theme={null} domains={{ createAction: { onAfter: (domain) => { toast.success(`Domain ${domain.domain} added`); }, }, }} ``` *** **domains.verifyAction** **Type:** `ComponentAction` Controls domain verification via DNS TXT record. **Example:** ```tsx wrap lines theme={null} domains={{ verifyAction: { onBefore: (domain) => { return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`); }, onAfter: (domain) => { toast.success(`${domain.domain} verified successfully`); }, }, }} ``` *** **domains.deleteAction** **Type:** `ComponentAction` Controls domain deletion. **Example:** ```tsx wrap lines theme={null} domains={{ deleteAction: { onBefore: (domain) => { return confirm(`Delete ${domain.domain}?`); }, }, }} ``` *** **domains.associateToProviderAction** **Type:** `ComponentAction` Associates a verified domain with this SSO provider for automatic user routing. **Example:** ```tsx wrap lines theme={null} domains={{ associateToProviderAction: { onAfter: (domain, provider) => { console.log(`${domain.domain} now routes to ${provider?.name}`); }, }, }} ``` *** **domains.deleteFromProviderAction** **Type:** `ComponentAction` Removes a domain's association with this provider. *** ### Customization props Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
Prop Type Description
schema SsoProviderEditSchema Field validation rules.
customMessages Partial\ i18n text overrides.
styling ComponentStyling\ CSS variables and class overrides.
**schema** Set custom validation rules for provider and domain fields. All schema fields support: `regex`, `errorMessage`, `minLength`, `maxLength`, `required` **provider.\***—Provider configuration fields by strategy * Common: `name`, `displayName` * Strategy-specific fields (same as SsoProviderCreate) **domains.create.domainUrl**—Domain URL validation ```tsx wrap lines theme={null} ``` *** **customMessages** Customize all text and translations. All fields are optional and use defaults if not provided. **header**—Component header * `title`, `back_button_text` **tabs**—Tab labels and content * `tabs.sso.name`—SSO tab label * `tabs.sso.content`—SSO tab messages * `details.third_party_access`—`title`, `label`, `helper_text` * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper` * `title`, `description` * `fields.*`—Form field labels by strategy * `actions.save_button_text`, `actions.delete_button_text` * `delete_modal.*`, `remove_modal.*` * `tabs.provisioning.name`—Provisioning tab label * `tabs.domains.name`—Domains tab label **provisioning\_tab**—Provisioning tab * `title`, `description` * `scim_endpoint.label`, `scim_token.label` * `actions.enable_button_text`, `actions.disable_button_text` * `actions.generate_token_button_text`, `actions.revoke_token_button_text` **domains\_tab**—Domains tab * `title`, `description` * Same structure as DomainTable messages **notifications**—API responses * `provider_update_success`, `provider_delete_success` * `provisioning_enable_success`, `provisioning_disable_success` * `scim_token_create_success`, `scim_token_delete_success` * Domain-related notifications ```tsx wrap lines theme={null} ``` *** **styling** Customize appearance with CSS variables and class overrides. Supports theme-aware styling. **Variables**—CSS custom properties * `common`—Applied to all themes * `light`—Light theme only * `dark`—Dark theme only **Classes**—Component class overrides * `SsoProviderEdit-header` * `SsoProviderEdit-tabs` * `ProviderConfigure-ThirdPartyAccess` * `ProviderConfigure-CrossAppAccess` ```tsx wrap lines theme={null} ``` *** ## Advanced customization ### Available hooks These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.
Hook Description
useSsoProviderEdit Provider loading and update logic
useSsoDomainTab Domain association management
## Setup requirements **Auth0 Configuration Required**—Ensure your tenant is configured with the My Organization API. [View setup guide →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard) ## Installation ```bash npm (Recommended) wrap lines theme={null} npm install @auth0/universal-components-react ``` ```bash pnpm wrap lines theme={null} pnpm add @auth0/universal-components-react ``` Running the npm or pnpm commands installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration. ## Get started ```tsx page.tsx wrap lines theme={null} import { SsoProviderEdit } from "@auth0/universal-components-react"; import { useRouter } from "next/navigation"; export function EditProviderPage({ providerId }) { const router = useRouter(); return ( router.push("/providers"), }} sso={{ updateAction: { onAfter: () => console.log("Provider updated"), }, }} /> ); } ``` ```tsx lines theme={null} import React from "react"; import { SsoProviderEdit } from "@auth0/universal-components-react"; import { useRouter, useSearchParams } from "next/navigation"; import { analytics } from "./lib/analytics"; function EditProviderPage() { const router = useRouter(); const searchParams = useSearchParams(); const providerId = searchParams.get("id"); return (
router.push("/providers"), }} sso={{ updateAction: { onAfter: (provider) => { analytics.track("Provider Updated", { name: provider.name }); toast.success("Provider configuration saved"); }, }, deleteAction: { onBefore: (provider) => { return confirm( `Permanently delete "${provider.display_name}"? This cannot be undone.`, ); }, }, deleteFromOrganizationAction: { onBefore: (provider) => { return confirm( `Remove "${provider.display_name}" from this organization?`, ); }, onAfter: () => { toast.success("Provider removed from organization"); router.push("/providers"); }, }, }} provisioning={{ createAction: { onAfter: () => toast.success("SCIM provisioning enabled"), }, createScimTokenAction: { onAfter: () => toast.info("Copy your SCIM token - it won't be shown again"), }, }} domains={{ verifyAction: { onAfter: (domain) => { toast.success(`${domain.domain} verified`); }, }, deleteAction: { onBefore: (domain) => confirm(`Delete ${domain.domain}?`), }, }} customMessages={{ tabs: { sso: "Configuration", provisioning: "User Sync (SCIM)", domains: "Linked Domains", }, }} styling={{ variables: { common: { "--color-primary": "#059669" }, }, }} />
); } export default EditProviderPage; ``` ## Props ### Core props Core props are fundamental to the component's operation. `SsoProviderEdit` requires the provider ID to load and edit the correct provider.
Prop Type Description
providerId string Required. The SSO provider ID to edit.
*** ### Display props Display props control how the component renders without affecting its behavior.
Prop Type Description
hideHeader boolean Hide the header section. Default: false
hideProvisioningTab boolean Hide the Provisioning (SCIM) tab. Default: false
hideDeleteProvider boolean Hide the delete provider action. Default: false
hideRemoveFromOrganization boolean Hide the remove from organization action. Default: false
hideAttributeMappings boolean Hide the attribute mappings section. Default: false
*** ### Action props User interactions across the three tabs are handled by several action props that are organized under the respective tab's name (`sso`, `provisioning`, and `domains`).
Prop Type Description
backButton Object Back button configuration.
sso SsoProviderTabEditProps SSO tab actions. Details
provisioning SsoProvisioningTabEditProps Provisioning tab actions. Details
domains SsoDomainsTabEditProps Domains tab actions. Details
**backButton** **Type:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }` Configures the back button in the component header. Use this to navigate back to your providers list. **Properties:** * `icon`—Custom Lucide icon component (optional, defaults to ArrowLeft) * `onClick`—Click handler for navigation **Example:** ```tsx wrap lines theme={null} import { ChevronLeft } from "lucide-react"; router.push("/providers"), }} />; ``` *** ### SSO tab actions The `sso` prop configures actions for the SSO settings tab. This tab manages the provider's authentication configuration.
Action Type Description
updateAction ComponentAction\ Update provider settings.
deleteAction ComponentAction\ Permanently delete the provider from the tenant.
deleteFromOrganizationAction ComponentAction\ Remove provider from the organization without deleting it from the tenant.
**sso.updateAction** **Type:** `ComponentAction` Controls saving changes to provider configuration (client ID, secrets, certificates, etc.). **Properties:** * `disabled`—Disable the save button * `onBefore(provider)`—Runs before the update. Return `false` to prevent saving (for example, to show a confirmation dialog). * `onAfter(provider, result)`—Runs after the provider is successfully updated. Use this to show a notification or track the event. **Example:** ```tsx wrap lines theme={null} { return confirm("Save changes to provider configuration?"); }, onAfter: (provider) => { toast.success("Provider configuration saved"); analytics.track("Provider Updated", { name: provider.name }); }, }, }} /> ``` *** **sso.deleteAction** **Type:** `ComponentAction` Controls permanent deletion of the provider from your Auth0 tenant. This action cannot be undone. **Example:** ```tsx wrap lines theme={null} sso={{ deleteAction: { onBefore: (provider) => { return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`); }, onAfter: () => router.push("/providers"), }, }} ``` *** **sso.deleteFromOrganizationAction** **Type:** `ComponentAction` Controls removing the provider from the organization. The provider is detached from the organization but remains in the tenant and can be re-added later. **Example:** ```tsx wrap lines theme={null} sso={{ deleteFromOrganizationAction: { onBefore: (provider) => { return confirm(`Remove "${provider.display_name}" from this organization?`); }, onAfter: () => router.push("/providers"), }, }} ``` *** ### Provisioning tab actions The `provisioning` prop configures actions for the SCIM provisioning tab. This tab manages automated user provisioning via the SCIM protocol.
Action Type Description
createAction ComponentAction\ Enable SCIM provisioning.
deleteAction ComponentAction\ Disable SCIM provisioning.
createScimTokenAction ComponentAction\ Generate SCIM token.
deleteScimTokenAction ComponentAction\ Revoke SCIM token.
**provisioning.createAction** **Type:** `ComponentAction` Enables SCIM provisioning for the provider. Once enabled, you can generate a SCIM token for your identity provider to use. **Example:** ```tsx wrap lines theme={null} provisioning={{ createAction: { onBefore: (provider) => { return confirm("Enable SCIM provisioning for this provider?"); }, onAfter: (provider, config) => { toast.success("SCIM provisioning enabled"); console.log("SCIM endpoint:", config.scim_endpoint); }, }, }} ``` *** **provisioning.deleteAction** **Type:** `ComponentAction` Disables SCIM provisioning and removes all provisioning configuration for that identity provider. **Example:** ```tsx wrap lines theme={null} provisioning={{ deleteAction: { onBefore: (provider) => { return confirm("Disable SCIM provisioning? This will stop automatic user sync."); }, onAfter: () => toast.success("SCIM provisioning disabled"), }, }} ``` *** **provisioning.createScimTokenAction** **Type:** `ComponentAction` Generates a new SCIM bearer token for your identity provider to authenticate with Auth0. **Example:** ```tsx wrap lines theme={null} provisioning={{ createScimTokenAction: { onAfter: (provider, tokenResponse) => { // Token is shown once - user should copy it immediately console.log("New SCIM token generated"); }, }, }} ``` *** **provisioning.deleteScimTokenAction** **Type:** `ComponentAction` Revokes the SCIM token. The identity provider will no longer be able to sync users until a new token is generated. **Example:** ```tsx wrap lines theme={null} provisioning={{ deleteScimTokenAction: { onBefore: () => { return confirm("Revoke SCIM token? Your identity provider will lose access immediately."); }, }, }} ``` *** ### Domains tab actions The `domains` prop configures actions for the domains tab. This tab manages domains associated with the provider for automatic user routing.
Action Type Description
createAction ComponentAction\ Add a domain.
verifyAction ComponentAction\ Verify domain ownership.
deleteAction ComponentAction\ Delete a domain.
associateToProviderAction ComponentAction\ Associate domain to provider.
deleteFromProviderAction ComponentAction\ Remove domain from provider.
**domains.createAction** **Type:** `ComponentAction` Controls adding new domains to the organization from within the provider edit interface. **Example:** ```tsx wrap lines theme={null} domains={{ createAction: { onAfter: (domain) => { toast.success(`Domain ${domain.domain} added`); }, }, }} ``` *** **domains.verifyAction** **Type:** `ComponentAction` Controls domain verification via DNS TXT record. **Example:** ```tsx wrap lines theme={null} domains={{ verifyAction: { onBefore: (domain) => { return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`); }, onAfter: (domain) => { toast.success(`${domain.domain} verified successfully`); }, }, }} ``` *** **domains.deleteAction** **Type:** `ComponentAction` Controls domain deletion. **Example:** ```tsx wrap lines theme={null} domains={{ deleteAction: { onBefore: (domain) => { return confirm(`Delete ${domain.domain}?`); }, }, }} ``` *** **domains.associateToProviderAction** **Type:** `ComponentAction` Associates a verified domain with this SSO provider for automatic user routing. **Example:** ```tsx wrap lines theme={null} domains{{ associateToProviderAction: { onAfter: (domain, provider) => { console.log(`${domain.domain} now routes to ${provider?.name}`); }, }, }} ``` *** **domains.deleteFromProviderAction** **Type:** `ComponentAction` Removes a domain's association with this provider. *** ### Customization props Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
Prop Type Description
schema SsoProviderEditSchema Field validation rules.
customMessages Partial\ i18n text overrides.
styling ComponentStyling\ CSS variables and class overrides.
**schema** Set custom validation rules for provider and domain fields. All schema fields support: `regex`, `errorMessage`, `minLength`, `maxLength`, `required` **provider.\***—Provider configuration fields by strategy * Common: `name`, `displayName` * Strategy-specific fields (same as SsoProviderCreate) **domains.create.domainUrl**—Domain URL validation ```tsx wrap lines theme={null} ``` *** **customMessages** Customize all text and translations. All fields are optional and use defaults if not provided. **header**—Component header * `title`, `back_button_text` **tabs**—Tab labels and content * `tabs.sso.name`—SSO tab label * `tabs.sso.content`—SSO tab messages * `details.third_party_access`—`title`, `label`, `helper_text` * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper` * `title`, `description` * `fields.*`—Form field labels by strategy * `actions.save_button_text`, `actions.delete_button_text` * `delete_modal.*`, `remove_modal.*` * `tabs.provisioning.name`—Provisioning tab label * `tabs.domains.name`—Domains tab label **provisioning\_tab**—Provisioning tab * `title`, `description` * `scim_endpoint.label`, `scim_token.label` * `actions.enable_button_text`, `actions.disable_button_text` * `actions.generate_token_button_text`, `actions.revoke_token_button_text` **domains\_tab**—Domains tab * `title`, `description` * Same structure as DomainTable messages **notifications**—API responses * `provider_update_success`, `provider_delete_success` * `provisioning_enable_success`, `provisioning_disable_success` * `scim_token_create_success`, `scim_token_delete_success` * Domain-related notifications ```tsx wrap lines theme={null} ``` *** **styling** Customize appearance with CSS variables and class overrides. Supports theme-aware styling. **Variables**—CSS custom properties * `common`—Applied to all themes * `light`—Light theme only * `dark`—Dark theme only **Classes**—Component class overrides * `SsoProviderEdit-header` * `SsoProviderEdit-tabs` * `ProviderConfigure-ThirdPartyAccess` * `ProviderConfigure-CrossAppAccess` ```tsx wrap lines theme={null} ``` *** ## Advanced customization ### Available hooks These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.
Hook Description
useSsoProviderEdit Provider loading and update logic
useSsoDomainTab Domain association management
## Setup requirements **Auth0 Configuration Required**—Ensure your tenant is configured with the My Organization API. [View setup guide →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard) ## Installation Install the component via the shadcn CLI using the GitHub Registry: ```bash wrap lines theme={null} npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-edit ``` The shadcn CLI also installs the `@auth0/universal-components-core` dependency for shared utilities and Auth0 integration. Requires **shadcn CLI v2.5.0+**.
Legacy Vercel registry (deprecated) Existing consumers can continue using the Vercel-hosted path until **September 17, 2026**: ```bash wrap lines theme={null} npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-edit.json ``` New projects should use the GitHub Registry path above.
## Get started ```tsx wrap lines theme={null} import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit"; export function EditProviderPage({ providerId }) { const navigate = useNavigate(); return ( navigate("/providers"), }} sso={{ updateAction: { onAfter: () => console.log("Provider updated"), }, }} /> ); } ``` ```tsx lines theme={null} import React from "react"; import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit"; import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa"; import { useNavigate, useParams } from "react-router-dom"; import { analytics } from "./lib/analytics"; function EditProviderPage() { const { providerId } = useParams(); const navigate = useNavigate(); return (
navigate("/providers"), }} sso={{ updateAction: { onAfter: (provider) => { analytics.track("Provider Updated", { name: provider.name }); toast.success("Provider configuration saved"); }, }, deleteAction: { onBefore: (provider) => { return confirm( `Permanently delete "${provider.display_name}"? This cannot be undone.`, ); }, }, deleteFromOrganizationAction: { onBefore: (provider) => { return confirm( `Remove "${provider.display_name}" from this organization?`, ); }, onAfter: () => { toast.success("Provider removed from organization"); navigate("/providers"); }, }, }} provisioning={{ createAction: { onAfter: () => toast.success("SCIM provisioning enabled"), }, createScimTokenAction: { onAfter: () => toast.info("Copy your SCIM token - it won't be shown again"), }, }} domains={{ verifyAction: { onAfter: (domain) => { toast.success(`${domain.domain} verified`); }, }, deleteAction: { onBefore: (domain) => confirm(`Delete ${domain.domain}?`), }, }} customMessages={{ tabs: { sso: "Configuration", provisioning: "User Sync (SCIM)", domains: "Linked Domains", }, }} styling={{ variables: { common: { "--color-primary": "#059669" }, }, }} />
); } export default function App() { const domain = "your-domain.auth0.com"; return ( ); } ``` ## Props ### Core props Core props are fundamental to the component's operation. `SsoProviderEdit` requires the provider ID to load and edit the correct provider.
Prop Type Description
providerId string Required. The SSO provider ID to edit.
*** ### Display props Display props control how the component renders without affecting its behavior.
Prop Type Description
hideHeader boolean Hide the header section. Default: false
hideProvisioningTab boolean Hide the Provisioning (SCIM) tab. Default: false
hideDeleteProvider boolean Hide the delete provider action. Default: false
hideRemoveFromOrganization boolean Hide the remove from organization action. Default: false
hideAttributeMappings boolean Hide the attribute mappings section. Default: false
*** ### Action props User interactions across the three tabs are handled by several action props that are organized under the respective tab's name (`sso`, `provisioning`, and `domains`).
Prop Type Description
backButton Object Back button configuration.
sso SsoProviderTabEditProps SSO tab actions. Details
provisioning SsoProvisioningTabEditProps Provisioning tab actions. Details
domains SsoDomainsTabEditProps Domains tab actions. Details
**backButton** **Type:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }` Configures the back button in the component header. Use this to navigate back to your providers list. **Properties:** * `icon`—Custom Lucide icon component (optional, defaults to ArrowLeft) * `onClick`—Click handler for navigation **Example:** ```tsx wrap lines theme={null} import { ChevronLeft } from "lucide-react"; navigate("/providers"), }} />; ``` *** ### SSO tab actions The `sso` prop configures actions for the SSO settings tab. This tab manages the provider's authentication configuration.
Action Type Description
updateAction ComponentAction\ Update provider settings.
deleteAction ComponentAction\ Permanently delete the provider from the tenant.
deleteFromOrganizationAction ComponentAction\ Remove provider from the organization without deleting it from the tenant.
**sso.updateAction** **Type:** `ComponentAction` Controls saving changes to provider configuration (client ID, secrets, certificates, etc.). **Properties:** * `disabled`—Disable the save button * `onBefore(provider)`—Runs before the update. Return `false` to prevent saving (for example, to show a confirmation dialog). * `onAfter(provider, result)`—Runs after the provider is successfully updated. Use this to show a notification or track the event. **Example:** ```tsx wrap lines theme={null} { return confirm("Save changes to provider configuration?"); }, onAfter: (provider) => { toast.success("Provider configuration saved"); analytics.track("Provider Updated", { name: provider.name }); }, }, }} /> ``` *** **sso.deleteAction** **Type:** `ComponentAction` Controls permanent deletion of the provider from your Auth0 tenant. This action cannot be undone. **Example:** ```tsx wrap lines theme={null} sso={{ deleteAction: { onBefore: (provider) => { return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`); }, onAfter: () => navigate("/providers"), }, }} ``` *** **sso.deleteFromOrganizationAction** **Type:** `ComponentAction` Controls removing the provider from the organization. The provider is detached from the organization but remains in the tenant and can be re-added later. **Example:** ```tsx wrap lines theme={null} sso={{ deleteFromOrganizationAction: { onBefore: (provider) => { return confirm(`Remove "${provider.display_name}" from this organization?`); }, onAfter: () => navigate("/providers"), }, }} ``` *** ### Provisioning tab actions The `provisioning` prop configures actions for the SCIM provisioning tab. This tab manages automated user provisioning via the SCIM protocol.
Action Type Description
createAction ComponentAction\ Enable SCIM provisioning.
deleteAction ComponentAction\ Disable SCIM provisioning.
createScimTokenAction ComponentAction\ Generate SCIM token.
deleteScimTokenAction ComponentAction\ Revoke SCIM token.
**provisioning.createAction** **Type:** `ComponentAction` Enables SCIM provisioning for the provider. Once enabled, you can generate a SCIM token for your identity provider to use. **Example:** ```tsx wrap lines theme={null} provisioning={{ createAction: { onBefore: (provider) => { return confirm("Enable SCIM provisioning for this provider?"); }, onAfter: (provider, config) => { toast.success("SCIM provisioning enabled"); console.log("SCIM endpoint:", config.scim_endpoint); }, }, }} ``` *** **provisioning.deleteAction** **Type:** `ComponentAction` Disables SCIM provisioning and removes all provisioning configuration for that identity provider. **Example:** ```tsx wrap lines theme={null} provisioning={{ deleteAction: { onBefore: (provider) => { return confirm("Disable SCIM provisioning? This will stop automatic user sync."); }, onAfter: () => toast.success("SCIM provisioning disabled"), }, }} ``` *** **provisioning.createScimTokenAction** **Type:** `ComponentAction` Generates a new SCIM bearer token for your identity provider to authenticate with Auth0. **Example:** ```tsx wrap lines theme={null} provisioning={{ createScimTokenAction: { onAfter: (provider, tokenResponse) => { // Token is shown once - user should copy it immediately console.log("New SCIM token generated"); }, }, }} ``` *** **provisioning.deleteScimTokenAction** **Type:** `ComponentAction` Revokes the SCIM token. The identity provider will no longer be able to sync users until a new token is generated. **Example:** ```tsx wrap lines theme={null} provisioning={{ deleteScimTokenAction: { onBefore: () => { return confirm("Revoke SCIM token? Your identity provider will lose access immediately."); }, }, }} ``` *** ### Domains tab actions The `domains` prop configures actions for the domains tab. This tab manages domains associated with the provider for automatic user routing.
Action Type Description
createAction ComponentAction\ Add a domain.
verifyAction ComponentAction\ Verify domain ownership.
deleteAction ComponentAction\ Delete a domain.
associateToProviderAction ComponentAction\ Associate domain to provider.
deleteFromProviderAction ComponentAction\ Remove domain from provider.
**domains.createAction** **Type:** `ComponentAction` Controls adding new domains to the organization from within the provider edit interface. **Example:** ```tsx wrap lines theme={null} domains={{ createAction: { onAfter: (domain) => { toast.success(`Domain ${domain.domain} added`); }, }, }} ``` *** **domains.verifyAction** **Type:** `ComponentAction` Controls domain verification via DNS TXT record. **Example:** ```tsx wrap lines theme={null} domains={{ verifyAction: { onBefore: (domain) => { return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`); }, onAfter: (domain) => { toast.success(`${domain.domain} verified successfully`); }, }, }} ``` *** **domains.deleteAction** **Type:** `ComponentAction` Controls domain deletion. **Example:** ```tsx wrap lines theme={null} domains={{ deleteAction: { onBefore: (domain) => { return confirm(`Delete ${domain.domain}?`); }, }, }} ``` *** **domains.associateToProviderAction** **Type:** `ComponentAction` Associates a verified domain with this SSO provider for automatic user routing. **Example:** ```tsx wrap lines theme={null} domains={{ associateToProviderAction: { onAfter: (domain, provider) => { console.log(`${domain.domain} now routes to ${provider?.name}`); }, }, }} ``` *** **domains.deleteFromProviderAction** **Type:** `ComponentAction` Removes a domain's association with this provider. *** ### Customization props Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
Prop Type Description
schema SsoProviderEditSchema Field validation rules.
customMessages Partial\ i18n text overrides.
styling ComponentStyling\ CSS variables and class overrides.
**schema** Set custom validation rules for provider and domain fields. All schema fields support: `regex`, `errorMessage`, `minLength`, `maxLength`, `required` **provider.\***—Provider configuration fields by strategy * Common: `name`, `displayName` * Strategy-specific fields (same as SsoProviderCreate) **domains.create.domainUrl**—Domain URL validation ```tsx wrap lines theme={null} ``` *** **customMessages** Customize all text and translations. All fields are optional and use defaults if not provided. **header**—Component header * `title`, `back_button_text` **tabs**—Tab labels and content * `tabs.sso.name`—SSO tab label * `tabs.sso.content`—SSO tab messages * `details.third_party_access`—`title`, `label`, `helper_text` * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper` * `title`, `description` * `fields.*`—Form field labels by strategy * `actions.save_button_text`, `actions.delete_button_text` * `delete_modal.*`, `remove_modal.*` * `tabs.provisioning.name`—Provisioning tab label * `tabs.domains.name`—Domains tab label **provisioning\_tab**—Provisioning tab * `title`, `description` * `scim_endpoint.label`, `scim_token.label` * `actions.enable_button_text`, `actions.disable_button_text` * `actions.generate_token_button_text`, `actions.revoke_token_button_text` **domains\_tab**—Domains tab * `title`, `description` * Same structure as DomainTable messages **notifications**—API responses * `provider_update_success`, `provider_delete_success` * `provisioning_enable_success`, `provisioning_disable_success` * `scim_token_create_success`, `scim_token_delete_success` * Domain-related notifications ```tsx wrap lines theme={null} ``` *** **styling** Customize appearance with CSS variables and class overrides. Supports theme-aware styling. **Variables**—CSS custom properties * `common`—Applied to all themes * `light`—Light theme only * `dark`—Dark theme only **Classes**—Component class overrides * `SsoProviderEdit-header` * `SsoProviderEdit-tabs` * `ProviderConfigure-ThirdPartyAccess` * `ProviderConfigure-CrossAppAccess` ```tsx wrap lines theme={null} ``` *** ## Advanced customization ### Available hooks These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.
Hook Description
useSsoProviderEdit Provider fetching and editing logic
useSsoDomainTab Domain association management