> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# List and Configure SSO Providers on Web

> Display and manage SSO identity providers in a table interface with create, edit, delete, and enable/disable capabilities.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="Loading" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>;

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

The `SsoProviderTable` component provides a unified interface to list and configure [Single Sign-On](/docs/authenticate/enterprise-connections/self-service-enterprise-configuration) providers for your organization.

<ComponentLoader componentSelector="sso-provider-table" componentPreviewText="Preview of the SSO Provider Table component" />

<Tabs>
  <Tab title="React">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the
      My Organization API. [View setup guide
      →](/docs/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    ## Installation

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Running either command also installs the @auth0/universal-components-core
      dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx wrap lines theme={null}
    import { SsoProviderTable } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

    export function ProvidersPage() {
      const navigate = useNavigate();

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => navigate("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => navigate(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { SsoProviderTable } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function ProvidersManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  navigate("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  navigate(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </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}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Required props

    Required props are fundamental to the component's operation. `SsoProviderTable` requires both navigation actions to handle the typical provider management workflow.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>Required.</strong> Navigate to create provider.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>Required.</strong> Navigate to edit provider.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<void>`

    The `createAction` prop is required because it controls where users are navigated to when they click "Add Provider". Without this, the table wouldn't know how to initiate the provider creation flow.

    **Properties:**

    * `disabled`—Disable the "Add Provider" button
    * `onBefore()`—Runs before the navigation occurs. Return `false` to prevent navigation (for example, if the user lacks permissions).
    * `onAfter()`—Runs after `onBefore` succeeds. Use this to navigate to your create page or track analytics.

    **Example:**

    ```tsx wrap lines theme={null}
    // Navigate to create page
    createAction={{
      onAfter: () => navigate("/providers/create"),
    }}

    // Check permissions before allowing create
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // Track analytics on create intent
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type:** `ComponentAction<IdentityProvider>`

    The `editAction` prop is required because it controls where users are navigated to when they click on a provider row. The callback receives the provider data so you can navigate to the correct edit page.

    **Properties:**

    * `disabled`—Disable row click navigation
    * `onBefore(provider)`—Runs before the navigation occurs. Return `false` to prevent navigation (for example, for conditional access checks).
    * `onAfter(provider)`—Runs after `onBefore` succeeds. Use this to navigate to the edit page with the provider data.

    **Example:**

    ```tsx wrap lines theme={null}
    // Navigate to edit page with provider ID
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Track analytics on provider selection
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Display props

    Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Disable all table actions. Default: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Hide the header section. Default: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Action props

    Action props handle user interactions beyond the core navigation. These control deletion, removal, and enable/disable operations.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Delete provider permanently.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Remove provider from organization.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Enable/disable provider toggle.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controls permanent deletion of an SSO provider. This is destructive—the provider is deleted from your Auth0 tenant entirely.

    **Properties:**

    * `disabled`—Disable the delete option
    * `onBefore(provider)`—Runs before the deletion. Return `false` to prevent deletion (recommended for confirmation dialogs).
    * `onAfter(provider)`—Runs after the provider is successfully deleted. Use this to track the event or show a notification.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type:** `ComponentAction<IdentityProvider>`

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

    **Properties:**

    * `disabled`—Disable the remove option
    * `onBefore(provider)`—Runs before the removal. Return `false` to prevent removal (for example, to show a confirmation).
    * `onAfter(provider)`—Runs after the provider is successfully removed from the organization.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controls the enable/disable toggle for providers. Disabled providers remain configured but users cannot authenticate through them.

    **Properties:**

    * `disabled`—Disable the toggle
    * `onBefore(provider)`—Runs before the toggle. Return `false` to prevent the state change.
    * `onAfter(provider)`—Runs after the provider is successfully enabled or disabled.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    ### Customization props

    Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            Confirmation field validation.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            i18n text overrides.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

          <td>
            CSS variables and class overrides.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Set custom validation rules for confirmation dialogs (for example, type provider name to confirm deletion).

    <Accordion title="Available Schema Fields">
      All schema fields support: `regex`, `errorMessage`

      **delete.providerName**—Confirmation for permanent deletion
      **remove.providerName**—Confirmation for removal from organization
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

    <Accordion title="Available Messages">
      **header**—Component header

      * `title`, `description`, `create_button_text`

      **table**—Table display

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal**—Delete confirmation

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal**—Remove from organization confirmation

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications**—API responses

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **styling**

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

    <Accordion title="Available Styling Options">
      **Variables**—CSS custom properties

      * `common`—Applied to all themes
      * `light`—Light theme only
      * `dark`—Dark theme only

      **Classes**—Component class overrides

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## Advanced customization

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

    ### Available subcomponents

    For advanced use cases, you can import individual subcomponents to build custom provider management interfaces. This is useful when you need to embed the table in a different layout or customize row rendering.

    <table class="table">
      <thead>
        <tr>
          <th>Component</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Individual provider row with actions</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Confirmation modal for permanent deletion</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Confirmation modal for organization removal</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Enable/disable toggle component</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Strategy icon renderer (Okta, SAML, etc.)</td>
        </tr>
      </tbody>
    </table>

    ### Available hooks

    These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Provider list fetching and management</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>UI interaction state + handlers (modals, actions)</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="Next.js">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the
      My Organization API. [View setup guide
      →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    <CodeGroup>
      ```bash npm (Recommended) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Running the npm or pnpm commands installs the @auth0/universal-components-core
      dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx page.tsx wrap lines theme={null}
    import { SsoProviderTable } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function ProvidersPage() {
      const router = useRouter();

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => router.push("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => router.push(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { SsoProviderTable } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";
      import { analytics } from "./lib/analytics";

      function ProvidersManagementPage() {
        const router = useRouter();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  router.push("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  router.push(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default ProvidersManagementPage;
      ```
    </Accordion>

    ## Props

    ### Core props

    Core props are fundamental to the component's operation. `SsoProviderTable` requires both navigation actions to handle the typical provider management workflow.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>Required.</strong> Navigate to create provider.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>Required.</strong> Navigate to edit provider.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<void>`

    The `createAction` prop is required because it controls where users are navigated to when they click "Add Provider". Without this, the table wouldn't know how to initiate the provider creation flow.

    **Properties:**

    * `disabled`—Disable the "Add Provider" button
    * `onBefore()`—Runs before the navigation occurs. Return `false` to prevent navigation (for example, if the user lacks permissions).
    * `onAfter()`—Runs after `onBefore` succeeds. Use this to navigate to your create page or track analytics.

    **Example:**

    ```tsx wrap lines theme={null}
    // Navigate to create page
    createAction={{
      onAfter: () => router.push("/providers/create"),
    }}

    // Check permissions before allowing create
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => router.push("/providers/create"),
    }}

    // Track analytics on create intent
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        router.push("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type:** `ComponentAction<IdentityProvider>`

    The `editAction` prop is required because it controls where users are navigated to when they click on a provider row. The callback receives the provider data so you can navigate to the correct edit page.

    **Properties:**

    * `disabled`—Disable row click navigation
    * `onBefore(provider)`—Runs before the navigation occurs. Return `false` to prevent navigation (for example, for conditional access checks).
    * `onAfter(provider)`—Runs after `onBefore` succeeds. Use this to navigate to the edit page with the provider data.

    **Example:**

    ```tsx wrap lines theme={null}
    // Navigate to edit page with provider ID
    editAction={{
      onAfter: (provider) => router.push(`/providers/${provider.id}`),
    }}

    // Track analytics on provider selection
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        router.push(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Display props

    Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Disable all table actions. Default: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Hide the header section. Default: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Action props

    Action props handle user interactions beyond the core navigation. These control deletion, removal, and enable/disable operations.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Delete provider permanently.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Remove provider from organization.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Enable/disable provider toggle.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controls permanent deletion of an SSO provider. This is destructive—the provider is deleted from your Auth0 tenant entirely.

    **Properties:**

    * `disabled`—Disable the delete option
    * `onBefore(provider)`—Runs before the deletion. Return `false` to prevent deletion (recommended for confirmation dialogs).
    * `onAfter(provider)`—Runs after the provider is successfully deleted. Use this to track the event or show a notification.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type:** `ComponentAction<IdentityProvider>`

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

    **Properties:**

    * `disabled`—Disable the remove option
    * `onBefore(provider)`—Runs before the removal. Return `false` to prevent removal (for example, to show a confirmation).
    * `onAfter(provider)`—Runs after the provider is successfully removed from the organization.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controls the enable/disable toggle for providers. Disabled providers remain configured but users cannot authenticate through them.

    **Properties:**

    * `disabled`—Disable the toggle
    * `onBefore(provider)`—Runs before the toggle. Return `false` to prevent the state change.
    * `onAfter(provider)`—Runs after the provider is successfully enabled or disabled.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    ### Customization props

    Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            Confirmation field validation.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            i18n text overrides.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

          <td>
            CSS variables and class overrides.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Set custom validation rules for confirmation dialogs (for example, type provider name to confirm deletion).

    <Accordion title="Available Schema Fields">
      All schema fields support: `regex`, `errorMessage`

      **delete.providerName**—Confirmation for permanent deletion
      **remove.providerName**—Confirmation for removal from organization
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

    <Accordion title="Available Messages">
      **header**—Component header

      * `title`, `description`, `create_button_text`

      **table**—Table display

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal**—Delete confirmation

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal**—Remove from organization confirmation

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications**—API responses

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **styling**

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

    <Accordion title="Available Styling Options">
      **Variables**—CSS custom properties

      * `common`—Applied to all themes
      * `light`—Light theme only
      * `dark`—Dark theme only

      **Classes**—Component class overrides

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## Advanced customization

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

    ### Available subcomponents

    For advanced use cases, you can import individual subcomponents to build custom provider management interfaces. This is useful when you need to embed the table in a different layout or customize row rendering.

    <table class="table">
      <thead>
        <tr>
          <th>Component</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Individual provider row with actions</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Confirmation modal for permanent deletion</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Confirmation modal for organization removal</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Enable/disable toggle component</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Strategy icon renderer (Okta, SAML, etc.)</td>
        </tr>
      </tbody>
    </table>

    ### Available hooks

    These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Provider list fetching and management</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>UI interaction state + handlers (modals, actions)</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the
      My Organization API. [View setup guide
      →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-table.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Running the shadcn command also installs the @auth0/universal-components-core
      dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx wrap lines theme={null}
    import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";

    export function ProvidersPage() {
      const navigate = useNavigate();

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => navigate("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => navigate(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function ProvidersManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  navigate("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  navigate(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </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}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Core props

    Core props are fundamental to the component's operation. `SsoProviderTable` requires both navigation actions to handle the typical provider management workflow.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>Required.</strong> Navigate to create provider.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>Required.</strong> Navigate to edit provider.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<void>`

    The `createAction` prop is required because it controls where users are navigated to when they click "Add Provider". Without this, the table wouldn't know how to initiate the provider creation flow.

    **Properties:**

    * `disabled`—Disable the "Add Provider" button
    * `onBefore()`—Runs before the navigation occurs. Return `false` to prevent navigation (for example, if the user lacks permissions).
    * `onAfter()`—Runs after `onBefore` succeeds. Use this to navigate to your create page or track analytics.

    **Example:**

    ```tsx wrap lines theme={null}
    // Navigate to create page
    createAction={{
      onAfter: () => navigate("/providers/create"),
    }}

    // Check permissions before allowing create
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // Track analytics on create intent
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type:** `ComponentAction<IdentityProvider>`

    The `editAction` prop is required because it controls where users are navigated to when they click on a provider row. The callback receives the provider data so you can navigate to the correct edit page.

    **Properties:**

    * `disabled`—Disable row click navigation
    * `onBefore(provider)`—Runs before the navigation occurs. Return `false` to prevent navigation (for example, for conditional access checks).
    * `onAfter(provider)`—Runs after `onBefore` succeeds. Use this to navigate to the edit page with the provider data.

    **Example:**

    ```tsx wrap lines theme={null}
    // Navigate to edit page with provider ID
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Track analytics on provider selection
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Display props

    Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Disable all table actions. Default: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Hide the header section. Default: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Action props

    Action props handle user interactions beyond the core navigation. These control deletion, removal, and enable/disable operations.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Delete provider permanently.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Remove provider from organization.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Enable/disable provider toggle.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controls permanent deletion of an SSO provider. This is destructive—the provider is deleted from your Auth0 tenant entirely.

    **Properties:**

    * `disabled`—Disable the delete option
    * `onBefore(provider)`—Runs before the deletion. Return `false` to prevent deletion (recommended for confirmation dialogs).
    * `onAfter(provider)`—Runs after the provider is successfully deleted. Use this to track the event or show a notification.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type:** `ComponentAction<IdentityProvider>`

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

    **Properties:**

    * `disabled`—Disable the remove option
    * `onBefore(provider)`—Runs before the removal. Return `false` to prevent removal (for example, to show a confirmation).
    * `onAfter(provider)`—Runs after the provider is successfully removed from the organization.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controls the enable/disable toggle for providers. Disabled providers remain configured but users cannot authenticate through them.

    **Properties:**

    * `disabled`—Disable the toggle
    * `onBefore(provider)`—Runs before the toggle. Return `false` to prevent the state change.
    * `onAfter(provider)`—Runs after the provider is successfully enabled or disabled.

    **Example:**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    ### Customization props

    Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

    <table class="table">
      <thead>
        <tr>
          <th>Prop</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            Confirmation field validation.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            i18n text overrides.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

          <td>
            CSS variables and class overrides.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Set custom validation rules for confirmation dialogs (for example, type provider name to confirm deletion).

    <Accordion title="Available Schema Fields">
      All schema fields support: `regex`, `errorMessage`

      **delete.providerName**—Confirmation for permanent deletion
      **remove.providerName**—Confirmation for removal from organization
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

    <Accordion title="Available Messages">
      **header**—Component header

      * `title`, `description`, `create_button_text`

      **table**—Table display

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal**—Delete confirmation

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal**—Remove from organization confirmation

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications**—API responses

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **styling**

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

    <Accordion title="Available Styling Options">
      **Variables**—CSS custom properties

      * `common`—Applied to all themes
      * `light`—Light theme only
      * `dark`—Dark theme only

      **Classes**—Component class overrides

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## Advanced customization

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

    ### Available subcomponents

    For advanced use cases, you can import individual subcomponents to build custom provider management interfaces. This is useful when you need to embed the table in a different layout or customize row rendering.

    <table class="table">
      <thead>
        <tr>
          <th>Component</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Individual provider row with actions</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Confirmation modal for permanent deletion</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Confirmation modal for organization removal</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Enable/disable toggle component</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Strategy icon renderer (Okta, SAML, etc.)</td>
        </tr>
      </tbody>
    </table>

    ### Available hooks

    These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Provider list fetching and management</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>UI interaction state + handlers (modals, actions)</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>