SSO Provider Edit

Preview of the SSO Provider Edit component

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

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

Quick Start

import { SsoProviderEdit } from '@auth0/universal-components-react/spa';

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

While this example uses a React SPA, the prop configurations (schema, customMessages, styling, etc.) apply equally to Next.js and shadcn setups.

import React from "react";
import { SsoProviderEdit } from "@auth0/universal-components-react/spa";
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() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <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

Action props handle user interactions across the three tabs. Each tab has its own set of actions organized under sso, provisioning, and domains props.

Prop	Type	Description
`backButton`	`Object`	Back button configuration. Details
`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. Details
`deleteAction`	`ComponentAction<IdentityProvider>`	Delete provider permanently. Details
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Remove from organization. Details

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) - Called before update. Return false to cancel.
onAfter(provider, result) - Called after successful update.

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. 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 SCIM protocol.

Action	Type	Description
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	Enable SCIM provisioning. Details
`deleteAction`	`ComponentAction<IdentityProvider>`	Disable SCIM provisioning. Details
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	Generate SCIM token. Details
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	Revoke SCIM token. Details

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. 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 current 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 verified domains associated with the provider for automatic user routing.

Action	Type	Description
`createAction`	`ComponentAction<Domain>`	Add a domain. Details
`verifyAction`	`ComponentAction<Domain>`	Verify domain ownership. Details
`deleteAction`	`ComponentAction<Domain>`	Delete a domain. Details
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Associate domain to provider. Details
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Remove domain from provider. Details

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

schema

Set 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)",
        },
      },
    },
  }}
/>

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

My Organization

​Setup Requirements

​Installation

​Quick Start

​Props

​Core Props

​Display Props

​Action Props

​backButton

​SSO Tab Actions

​sso.updateAction

​sso.deleteAction

​sso.removeFromOrganizationAction

​Provisioning Tab Actions

​provisioning.createAction

​provisioning.deleteAction

​provisioning.createScimTokenAction

​provisioning.deleteScimTokenAction

​Domains Tab Actions

​domains.createAction

​domains.verifyAction

​domains.deleteAction

​domains.associateToProviderAction

​domains.deleteFromProviderAction

​Customization Props

​schema

​customMessages

​styling

​Advanced Customization

​Available Subcomponents

​Available Hooks

Setup Requirements

Installation

Quick Start

Props

Core Props

Display Props

Action Props

backButton

SSO Tab Actions

sso.updateAction

sso.deleteAction

sso.removeFromOrganizationAction

Provisioning Tab Actions

provisioning.createAction

provisioning.deleteAction

provisioning.createScimTokenAction

provisioning.deleteScimTokenAction

Domains Tab Actions

domains.createAction

domains.verifyAction

domains.deleteAction

domains.associateToProviderAction

domains.deleteFromProviderAction

Customization Props

schema

customMessages

styling

Advanced Customization

Available Subcomponents

Available Hooks