Edit SSO Providers on Web

Tabbed interface for editing SSO providers: SSO settings, provisioning (SCIM), and domain management

The SsoProviderEdit component provides a unified interface to edit Single Sign-On providers.

React

Setup requirements

Auth0 Configuration Required—Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

pnpm

pnpm add @auth0/universal-components-react

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

import { SsoProviderEdit } from "@auth0/universal-components-react";
import { useNavigate, useParams } from "react-router-dom";

export function EditProviderPage() {
  const { providerId } = useParams();
  const navigate = useNavigate();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => navigate("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

Full integration example

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 (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => navigate("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              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" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider domain={domain}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

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

---

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:

import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => 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<IdentityProvider, IdentityProvider>	Update provider settings.
deleteAction	ComponentAction<IdentityProvider>	Delete provider permanently.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Remove from organization.

sso.updateAction

Type: ComponentAction<IdentityProvider, IdentityProvider>

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:

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        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<IdentityProvider>

Controls permanent deletion of the provider from your Auth0 tenant.

Example:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

---

sso.removeFromOrganizationAction

Type: ComponentAction<IdentityProvider>

Controls removing the provider from the organization without deleting it. The provider remains available to be re-added later.

Example:

sso={{
  removeFromOrganizationAction: {
    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<IdentityProvider, CreateIdPProvisioningConfigResponseContent>	Enable SCIM provisioning.
deleteAction	ComponentAction<IdentityProvider>	Disable SCIM provisioning.
createScimTokenAction	ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>	Generate SCIM token.
deleteScimTokenAction	ComponentAction<IdentityProvider>	Revoke SCIM token.

provisioning.createAction

Type: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>

Enables SCIM provisioning for the provider. Once enabled, you can generate a SCIM token for your identity provider to use.

Example:

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<IdentityProvider>

Disables SCIM provisioning and removes all provisioning configuration for that identity provider.

Example:

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<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>

Generates a new SCIM bearer token for your identity provider to authenticate with Auth0.

Example:

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      console.log("New SCIM token generated");
    },
  },
}}

---

provisioning.deleteScimTokenAction

Type: ComponentAction<IdentityProvider>

Revokes the SCIM token. The identity provider will no longer be able to sync users until a new token is generated.

Example:

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<Domain>	Add a domain.
verifyAction	ComponentAction<Domain>	Verify domain ownership.
deleteAction	ComponentAction<Domain>	Delete a domain.
associateToProviderAction	ComponentAction<Domain, IdentityProvider | null>	Associate domain to provider.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Remove domain from provider.

domains.createAction

Type: ComponentAction<Domain>

Controls adding new domains to the organization from within the provider edit interface.

Example:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

---

domains.verifyAction

Type: ComponentAction<Domain>

Controls domain verification via DNS TXT record.

Example:

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<Domain>

Controls domain deletion.

Example:

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}

---

domains.associateToProviderAction

Type: ComponentAction<Domain, IdentityProvider | null>

Associates a verified domain with this SSO provider for automatic user routing.

Example:

domains={{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

---

domains.deleteFromProviderAction

Type: ComponentAction<Domain, IdentityProvider | null>

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<SsoProviderEditMessages>	i18n text overrides.
styling	ComponentStyling<SsoProviderEditClasses>	CSS variables and class overrides.

schema

Set custom validation rules for provider and domain fields.

Available Schema 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

<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>

---

customMessages

Customize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

• title, back_button_text

tabs—Tab labels

• sso, provisioning, domains

sso_tab—SSO settings tab

• title, description
• fields.*—Form field labels by strategy
• actions.save_button_text, actions.delete_button_text
• delete_modal.*, remove_modal.*

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

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

---

styling

Customize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

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
• SsoProviderEdit-ssoTab
• SsoProviderEdit-provisioningTab
• SsoProviderEdit-domainsTab

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

---

Advanced customization

The SsoProviderEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom provider editing workflows if you use shadcn.

Available subcomponents

For advanced use cases, you can import individual subcomponents to embed specific tabs or sections in different contexts.

Component	Description
SsoProviderSsoTab	SSO configuration form
SsoProviderProvisioningTab	SCIM provisioning management
SsoProviderDomainsTab	Domain association management
ProviderConfigureFields	Dynamic form fields by strategy
ScimTokenDisplay	SCIM token display with copy functionality

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
useSsoProviderProvisioning	SCIM provisioning management
useSsoProviderDomains	Domain association management

Next.js

Setup requirements

Auth0 Configuration Required—Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

npm (Recommended)

npm install @auth0/universal-components-react

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

page.tsx

import { SsoProviderEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";

export function EditProviderPage({ providerId }) {
  const router = useRouter();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => router.push("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

Full integration example

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 (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => router.push("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              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" },
          },
        }}
      />
    </div>
  );
}

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

---

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:

import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => 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<IdentityProvider, IdentityProvider>	Update provider settings.
deleteAction	ComponentAction<IdentityProvider>	Delete provider permanently.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Remove from organization.

sso.updateAction

Type: ComponentAction<IdentityProvider, IdentityProvider>

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:

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        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<IdentityProvider>

Controls permanent deletion of the provider from your Auth0 tenant.

Example:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => router.push("/providers"),
  },
}}

---

sso.removeFromOrganizationAction

Type: ComponentAction<IdentityProvider>

Controls removing the provider from the organization without deleting it. The provider remains available to be re-added later.

Example:

sso={{
  removeFromOrganizationAction: {
    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<IdentityProvider, CreateIdPProvisioningConfigResponseContent>	Enable SCIM provisioning.
deleteAction	ComponentAction<IdentityProvider>	Disable SCIM provisioning.
createScimTokenAction	ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>	Generate SCIM token.
deleteScimTokenAction	ComponentAction<IdentityProvider>	Revoke SCIM token.

provisioning.createAction

Type: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>

Enables SCIM provisioning for the provider. Once enabled, you can generate a SCIM token for your identity provider to use.

Example:

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<IdentityProvider>

Disables SCIM provisioning and removes all provisioning configuration for that identity provider.

Example:

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<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>

Generates a new SCIM bearer token for your identity provider to authenticate with Auth0.

Example:

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      console.log("New SCIM token generated");
    },
  },
}}

---

provisioning.deleteScimTokenAction

Type: ComponentAction<IdentityProvider>

Revokes the SCIM token. The identity provider will no longer be able to sync users until a new token is generated.

Example:

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<Domain>	Add a domain.
verifyAction	ComponentAction<Domain>	Verify domain ownership.
deleteAction	ComponentAction<Domain>	Delete a domain.
associateToProviderAction	ComponentAction<Domain, IdentityProvider | null>	Associate domain to provider.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Remove domain from provider.

domains.createAction

Type: ComponentAction<Domain>

Controls adding new domains to the organization from within the provider edit interface.

Example:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

---

domains.verifyAction

Type: ComponentAction<Domain>

Controls domain verification via DNS TXT record.

Example:

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<Domain>

Controls domain deletion.

Example:

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}

---

domains.associateToProviderAction

Type: ComponentAction<Domain, IdentityProvider | null>

Associates a verified domain with this SSO provider for automatic user routing.

Example:

domains{{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

---

domains.deleteFromProviderAction

Type: ComponentAction<Domain, IdentityProvider | null>

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<SsoProviderEditMessages>	i18n text overrides.
styling	ComponentStyling<SsoProviderEditClasses>	CSS variables and class overrides.

schema

Set custom validation rules for provider and domain fields.

Available Schema 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

<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>

---

customMessages

Customize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

• title, back_button_text

tabs—Tab labels

• sso, provisioning, domains

sso_tab—SSO settings tab

• title, description
• fields.*—Form field labels by strategy
• actions.save_button_text, actions.delete_button_text
• delete_modal.*, remove_modal.*

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

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

---

styling

Customize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

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
• SsoProviderEdit-ssoTab
• SsoProviderEdit-provisioningTab
• SsoProviderEdit-domainsTab

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

---

Advanced customization

The SsoProviderEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom provider editing workflows.

Available subcomponents

For advanced use cases, you can import individual subcomponents to embed specific tabs or sections in different contexts.

Component	Description
SsoProviderSsoTab	SSO configuration form
SsoProviderProvisioningTab	SCIM provisioning management
SsoProviderDomainsTab	Domain association management
ProviderConfigureFields	Dynamic form fields by strategy
ScimTokenDisplay	SCIM token display with copy functionality

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
useSsoProviderProvisioning	SCIM provisioning management
useSsoProviderDomains	Domain association management

shadcn

Setup requirements

Auth0 Configuration Required—Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-edit.json

Running the shadcn command also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit";

export function EditProviderPage({ providerId }) {
  const navigate = useNavigate();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => navigate("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

Full integration example

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 (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => navigate("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              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" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider domain={domain}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

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

---

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:

import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => 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<IdentityProvider, IdentityProvider>	Update provider settings.
deleteAction	ComponentAction<IdentityProvider>	Delete provider permanently.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Remove from organization.

sso.updateAction

Type: ComponentAction<IdentityProvider, IdentityProvider>

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:

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        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<IdentityProvider>

Controls permanent deletion of the provider from your Auth0 tenant.

Example:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

---

sso.removeFromOrganizationAction

Type: ComponentAction<IdentityProvider>

Controls removing the provider from the organization without deleting it. The provider remains available to be re-added later.

Example:

sso={{
  removeFromOrganizationAction: {
    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<IdentityProvider, CreateIdPProvisioningConfigResponseContent>	Enable SCIM provisioning.
deleteAction	ComponentAction<IdentityProvider>	Disable SCIM provisioning.
createScimTokenAction	ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>	Generate SCIM token.
deleteScimTokenAction	ComponentAction<IdentityProvider>	Revoke SCIM token.

provisioning.createAction

Type: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>

Enables SCIM provisioning for the provider. Once enabled, you can generate a SCIM token for your identity provider to use.

Example:

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<IdentityProvider>

Disables SCIM provisioning and removes all provisioning configuration for that identity provider.

Example:

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<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>

Generates a new SCIM bearer token for your identity provider to authenticate with Auth0.

Example:

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      console.log("New SCIM token generated");
    },
  },
}}

---

provisioning.deleteScimTokenAction

Type: ComponentAction<IdentityProvider>

Revokes the SCIM token. The identity provider will no longer be able to sync users until a new token is generated.

Example:

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<Domain>	Add a domain.
verifyAction	ComponentAction<Domain>	Verify domain ownership.
deleteAction	ComponentAction<Domain>	Delete a domain.
associateToProviderAction	ComponentAction<Domain, IdentityProvider | null>	Associate domain to provider.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Remove domain from provider.

domains.createAction

Type: ComponentAction<Domain>

Controls adding new domains to the organization from within the provider edit interface.

Example:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

---

domains.verifyAction

Type: ComponentAction<Domain>

Controls domain verification via DNS TXT record.

Example:

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<Domain>

Controls domain deletion.

Example:

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}

---

domains.associateToProviderAction

Type: ComponentAction<Domain, IdentityProvider | null>

Associates a verified domain with this SSO provider for automatic user routing.

Example:

domains={{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

---

domains.deleteFromProviderAction

Type: ComponentAction<Domain, IdentityProvider | null>

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<SsoProviderEditMessages>	i18n text overrides.
styling	ComponentStyling<SsoProviderEditClasses>	CSS variables and class overrides.

schema

Set custom validation rules for provider and domain fields.

Available Schema 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

<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>

---

customMessages

Customize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

• title, back_button_text

tabs—Tab labels

• sso, provisioning, domains

sso_tab—SSO settings tab

• title, description
• fields.*—Form field labels by strategy
• actions.save_button_text, actions.delete_button_text
• delete_modal.*, remove_modal.*

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

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

---

styling

Customize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

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
• SsoProviderEdit-ssoTab
• SsoProviderEdit-provisioningTab
• SsoProviderEdit-domainsTab

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

---

Advanced customization

The SsoProviderEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom SSO provider management workflows if you use shadcn.

Available subcomponents

For advanced use cases, you can import individual tab components to build custom provider editing interfaces.

Component	Description
SsoProviderEditTabs	Tab container and navigation
SsoTab	SSO settings configuration tab
ProvisioningTab	SCIM provisioning tab
DomainsTab	Domain associations tab

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
useSsoProviderEditLogic	Tab state and action handlers