Edit SSO Providers on Web

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

React
Next.js
shadcn

Setup requirements

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

Installation

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(
                `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" },
          },
        }}
      />
    </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>
        <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

backButtonType: { 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>`	Permanently delete the provider from the tenant.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Remove provider from the organization without deleting it from the tenant.

sso.updateActionType: 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.deleteActionType: ComponentAction<IdentityProvider>Controls permanent deletion of the provider from your Auth0 tenant. This action cannot be undone.Example:

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

sso.deleteFromOrganizationActionType: ComponentAction<IdentityProvider>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:

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<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.createActionType: 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.deleteActionType: 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.createScimTokenActionType: 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.deleteScimTokenActionType: 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.createActionType: 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.verifyActionType: 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.deleteActionType: ComponentAction<Domain>Controls domain deletion.Example:

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

domains.associateToProviderActionType: 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.deleteFromProviderActionType: 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.

schemaSet custom validation rules for provider and domain fields.

Available Schema Fields

All schema fields support: regex, errorMessage, minLength, maxLength, requiredprovider.*—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)",
        },
      },
    },
  }}
/>

customMessagesCustomize 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!",
    },
  }}
/>

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

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 →

Installation

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(
                `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" },
          },
        }}
      />
    </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

backButtonType: { 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>`	Permanently delete the provider from the tenant.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Remove provider from the organization without deleting it from the tenant.

sso.updateActionType: 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.deleteActionType: ComponentAction<IdentityProvider>Controls permanent deletion of the provider from your Auth0 tenant. This action cannot be undone.Example:

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

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<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: {
    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.deleteActionType: 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: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      console.log("New SCIM token generated");
    },
  },
}}

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.createActionType: 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.verifyActionType: 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.deleteActionType: ComponentAction<Domain>Controls domain deletion.Example:

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

domains.associateToProviderActionType: 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.deleteFromProviderActionType: 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.

schemaSet custom validation rules for provider and domain fields.

Available Schema Fields

All schema fields support: regex, errorMessage, minLength, maxLength, requiredprovider.*—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)",
        },
      },
    },
  }}
/>

customMessagesCustomize 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!",
    },
  }}
/>

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

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 →

Installation

Install the component via the shadcn CLI using the GitHub Registry:

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+.

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(
                `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" },
          },
        }}
      />
    </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>
        <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

backButtonType: { 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>`	Permanently delete the provider from the tenant.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Remove provider from the organization without deleting it from the tenant.

sso.updateActionType: 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.deleteActionType: ComponentAction<IdentityProvider>Controls permanent deletion of the provider from your Auth0 tenant. This action cannot be undone.Example:

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

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<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: {
    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.deleteActionType: 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: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      console.log("New SCIM token generated");
    },
  },
}}

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.createActionType: 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.verifyActionType: 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.deleteActionType: ComponentAction<Domain>Controls domain deletion.Example:

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

domains.associateToProviderActionType: 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.deleteFromProviderActionType: 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.

schemaSet custom validation rules for provider and domain fields.

Available Schema Fields

All schema fields support: regex, errorMessage, minLength, maxLength, requiredprovider.*—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)",
        },
      },
    },
  }}
/>

customMessagesCustomize 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!",
    },
  }}
/>

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

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

​Setup requirements

​Installation

​Get started

​Props

​Required props

​Display props

​Action props

​SSO tab actions

​Provisioning tab actions

​Domains tab actions

​Customization props

​Advanced customization

​Available hooks

​Setup requirements

​Installation

​Get started

​Props

​Core props

​Display props

​Action props

​SSO tab actions

​Provisioning tab actions

​Domains tab actions

​Customization props

​Advanced customization

​Available hooks

​Setup requirements

​Installation

​Get started

​Props

​Core props

​Display props

​Action props

​SSO tab actions

​Provisioning tab actions

​Domains tab actions

​Customization props

​Advanced customization

​Available hooks

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

SSO tab actions

Provisioning tab actions

Domains tab actions

Customization props

Advanced customization

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

SSO tab actions

Provisioning tab actions

Domains tab actions

Customization props

Advanced customization

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

SSO tab actions

Provisioning tab actions

Domains tab actions

Customization props

Advanced customization

Available hooks