> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-feat-member-mgmt-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Verified Domains on Web

> Learn how to manage verified and pending Organization domains in a unified table interface.

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)}>
        <div aria-label="Loading" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" 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>
      </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>;
};

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

The `DomainTable` component provides a unified interface for your customers to manage their Auth0 Organization's email domain. By verifying domain ownership, Organization administrators enable critical B2B features like [Home Realm Discovery (HRD)](/docs/authenticate/enterprise-connections/self-service-enterprise-configuration/manage-self-service-enterprise-configuration#email-domain-verification-and-pre-verified-domains) and ensure users are automatically routed to the correct SSO provider based on their email suffix (for example, `user@acme.com`).

<ComponentLoader componentSelector="domain-table-view" componentPreviewText="Preview of the Domain 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>

    ## Install the component

    <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 React SPA wrap lines theme={null}
    import { DomainTable } from "@auth0/universal-components-react";

    export function DomainsPage() {
      return <DomainTable />;
    }
    ```

    <Accordion title="Full integration example">
      ```tsx lines theme={null}
      import React from "react";
      import { DomainTable } 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";

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

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domainUrl: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                navigate(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                navigate("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-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>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Display props

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

    | Prop         | Type      | Description                                     |
    | :----------- | :-------- | :---------------------------------------------- |
    | `readOnly`   | `boolean` | Disable all domain operations. Default: `false` |
    | `hideHeader` | `boolean` | Hide the header section. Default: `false`       |

    ***

    ### Action props

    Action props handle user interactions and define what happens when users perform domain operations. Use lifecycle hooks (`onBefore`, `onAfter`) to integrate with your application's routing and analytics.

    | Prop                        | Type                                        | Description                                |
    | :-------------------------- | :------------------------------------------ | :----------------------------------------- |
    | `createAction`              | `ComponentAction<Domain>`                   | Create domain action.                      |
    | `verifyAction`              | `ComponentAction<Domain>`                   | Verify domain action.                      |
    | `deleteAction`              | `ComponentAction<Domain>`                   | Delete domain action.                      |
    | `associateToProviderAction` | `ComponentAction<Domain, IdentityProvider>` | Associate domain to provider.              |
    | `deleteFromProviderAction`  | `ComponentAction<Domain, IdentityProvider>` | Remove domain from provider.               |
    | `onOpenProvider`            | `(provider: IdentityProvider) => void`      | Navigate to provider from configure modal. |
    | `onCreateProvider`          | `() => void`                                | Navigate to create provider flow.          |

    **createAction**

    **Type:** `ComponentAction<Domain>`

    Controls the domain creation flow. Use `onAfter` to track when new domains are added.

    **Properties:**

    * `disabled`—Disable the "Add Domain" button
    * `onBefore(domain)`—Runs before the domain is created. Return `false` to prevent creation (for example, if the domain format is invalid).
    * `onAfter(domain)`—Runs after the domain is successfully created. Use this to show a notification or track the event.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // Validate domain format
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **Type:** `ComponentAction<Domain>`

    Controls the domain verification flow. Domain verification proves ownership via DNS TXT record.

    **Properties:**

    * `disabled`—Disable the verify button
    * `onBefore(domain)`—Runs before the verification attempt. Return `false` to prevent verification (for example, to confirm DNS is configured).
    * `onAfter(domain)`—Runs after the domain is successfully verified. Use this to show a success notification.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **Type:** `ComponentAction<Domain>`

    Controls domain deletion. Recommended to use `onBefore` for confirmation since this is destructive.

    **Properties:**

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

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

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

    Controls associating a verified domain with an SSO provider. Only verified domains can be associated.

    **Properties:**

    * `disabled`—Disable the associate action
    * `onBefore(domain, provider)`—Runs before the association. Return `false` to prevent the association.
    * `onAfter(domain, provider)`—Runs after the domain is successfully associated with the provider.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

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

    Controls removing a domain's association with an SSO provider.

    **Properties:**

    * `disabled`—Disable the disassociate action
    * `onBefore(domain, provider)`—Runs before the removal. Return `false` to prevent the removal.
    * `onAfter(domain, provider)`—Runs after the domain is successfully removed from the provider.

    ***

    **onOpenProvider / onCreateProvider**

    **Type:** `(provider: IdentityProvider) => void` / `() => void`

    Navigation handlers for the domain configuration modal. When users configure a domain's provider associations:

    * `onOpenProvider`—Called when user clicks on an existing provider to view/edit it
    * `onCreateProvider`—Called when user clicks to create a new provider

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        navigate(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        navigate("/providers/create");
      }}
    />
    ```

    ***

    ### Customization props

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

    | Prop             | Type                               | Description                        |
    | :--------------- | :--------------------------------- | :--------------------------------- |
    | `schema`         | `DomainTableSchema`                | Domain URL validation rules.       |
    | `customMessages` | `Partial<DomainTableMainMessages>` | i18n text overrides.               |
    | `styling`        | `ComponentStyling`                 | CSS variables and class overrides. |

    **schema**

    Set custom validation rules for domain URL input.

    <Accordion title="Available Schema Fields">
      **create.domainUrl**—Domain URL validation—`regex`—Custom regex pattern

      * `errorMessage`—Custom error message
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        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.

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

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

      **table**—Table display

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—Create domain modal

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—Verify domain modal

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—Delete confirmation

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Provider configuration

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—API responses

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

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

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-tableActions`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## 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                                                 |
    | :--------------- | :---------------------------------------------------------- |
    | `useDomainTable` | Data + API layer (fetch, create, verify, delete, associate) |
  </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>

    ## Install component

    <CodeGroup>
      ```bash npm  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 pnpm or npm 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 { DomainTable } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

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

      return (
        <DomainTable
          onOpenProvider={(provider) => {
            router.push(`/providers/${provider.id}`);
          }}
          onCreateProvider={() => {
            router.push("/providers/create");
          }}
        />
      );
    }
    ```

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

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

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domainUrl: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                router.push(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                router.push("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default DomainsManagementPage;
      ```
    </Accordion>

    ## Props

    ### 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 domain operations. 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 and define what happens when users perform domain operations. Use lifecycle hooks (`onBefore`, `onAfter`) to integrate with your application's routing and analytics.

    <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\<Domain></code>
          </td>

          <td>
            Create domain action.
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Verify domain action.
          </td>
        </tr>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Delete domain action.
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

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

          <td>
            Associate domain to provider.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

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

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

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            Navigate to provider from configure modal.
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            Navigate to create provider flow.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<Domain>`

    Controls the domain creation flow. Use `onAfter` to track when new domains are added.

    **Properties:**

    * `disabled`—Disable the "Add Domain" button
    * `onBefore(domain)`—Runs before the domain is created. Return `false` to prevent creation (for example, if the domain format is invalid).
    * `onAfter(domain)`—Runs after the domain is successfully created. Use this to show a notification or track the event.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // Validate domain format
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **Type:** `ComponentAction<Domain>`

    Controls the domain verification flow. Domain verification proves ownership via DNS TXT record.

    **Properties:**

    * `disabled`—Disable the verify button
    * `onBefore(domain)`—Runs before the verification attempt. Return `false` to prevent verification (for example, to confirm DNS is configured).
    * `onAfter(domain)`—Runs after the domain is successfully verified. Use this to show a success notification.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **Type:** `ComponentAction<Domain>`

    Controls domain deletion. Recommended to use `onBefore` for confirmation since this is destructive.

    **Properties:**

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

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

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

    Controls associating a verified domain with an SSO provider. Only verified domains can be associated.

    **Properties:**

    * `disabled`—Disable the associate action
    * `onBefore(domain, provider)`—Runs before the association. Return `false` to prevent the association.
    * `onAfter(domain, provider)`—Runs after the domain is successfully associated with the provider.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

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

    Controls removing a domain's association with an SSO provider.

    **Properties:**

    * `disabled`—Disable the disassociate action
    * `onBefore(domain, provider)`—Runs before the removal. Return `false` to prevent the removal.
    * `onAfter(domain, provider)`—Runs after the domain is successfully removed from the provider.

    ***

    **onOpenProvider / onCreateProvider**

    **Type:** `(provider: IdentityProvider) => void` / `() => void`

    Navigation handlers for the domain configuration modal. When users configure a domain's provider associations:

    * `onOpenProvider`—Called when user clicks on an existing provider to view/edit it
    * `onCreateProvider`—Called when user clicks to create a new provider

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        router.push(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        router.push("/providers/create");
      }}
    />
    ```

    ***

    ### 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>DomainTableSchema</code>
          </td>

          <td>
            Domain URL validation rules.
          </td>
        </tr>

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

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling</code>
          </td>

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

    **schema**

    Set custom validation rules for domain URL input.

    <Accordion title="Available Schema Fields">
      **create.domainUrl**—Domain URL validation—`regex`—Custom regex pattern -
      `errorMessage`—Custom error message
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        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.

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

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

      **table**—Table display

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—Create domain modal

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—Verify domain modal

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—Delete confirmation

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Provider configuration

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—API responses

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

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

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-tableActions`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

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

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

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>Data + API layer (fetch, create, verify, delete, associate)</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>

    ## Install the component

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

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/domain-table
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      The shadcn CLI also installs the `@auth0/universal-components-core`
      dependency for shared utilities and Auth0 integration.
      Requires **shadcn CLI v2.5.0+**.
    </Callout>

    <details>
      <summary>Legacy Vercel registry (deprecated)</summary>

      Existing consumers can continue using the Vercel-hosted path until **September 17, 2026**:

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

      New projects should use the GitHub Registry path above.
    </details>

    ## Get started

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

    export function DomainsPage() {
      return <DomainTable />;
    }
    ```

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

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

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domainUrl: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                navigate(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                navigate("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-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>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### 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 domain operations. 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 and define what happens when users perform domain operations. Use lifecycle hooks (`onBefore`, `onAfter`) to integrate with your application's routing and analytics.

    <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\<Domain></code>
          </td>

          <td>
            Create domain action.
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Verify domain action.
          </td>
        </tr>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Delete domain action.
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

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

          <td>
            Associate domain to provider.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

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

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

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            Navigate to provider from configure modal.
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            Navigate to create provider flow.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<Domain>`

    Controls the domain creation flow. Use `onAfter` to track when new domains are added.

    **Properties:**

    * `disabled`—Disable the "Add Domain" button
    * `onBefore(domain)`—Runs before the domain is created. Return `false` to prevent creation (for example, if the domain format is invalid).
    * `onAfter(domain)`—Runs after the domain is successfully created. Use this to show a notification or track the event.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // Validate domain format
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **Type:** `ComponentAction<Domain>`

    Controls the domain verification flow. Domain verification proves ownership via DNS TXT record.

    **Properties:**

    * `disabled`—Disable the verify button
    * `onBefore(domain)`—Runs before the verification attempt. Return `false` to prevent verification (for example, to confirm DNS is configured).
    * `onAfter(domain)`—Runs after the domain is successfully verified. Use this to show a success notification.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **Type:** `ComponentAction<Domain>`

    Controls domain deletion. Recommended to use `onBefore` for confirmation since this is destructive.

    **Properties:**

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

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

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

    Controls associating a verified domain with an SSO provider. Only verified domains can be associated.

    **Properties:**

    * `disabled`—Disable the associate action
    * `onBefore(domain, provider)`—Runs before the association. Return `false` to prevent the association.
    * `onAfter(domain, provider)`—Runs after the domain is successfully associated with the provider.

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

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

    Controls removing a domain's association with an SSO provider.

    **Properties:**

    * `disabled`—Disable the disassociate action
    * `onBefore(domain, provider)`—Runs before the removal. Return `false` to prevent the removal.
    * `onAfter(domain, provider)`—Runs after the domain is successfully removed from the provider.

    ***

    **onOpenProvider / onCreateProvider**

    **Type:** `(provider: IdentityProvider) => void` / `() => void`

    Navigation handlers for the domain configuration modal. When users configure a domain's provider associations:

    * `onOpenProvider`—Called when user clicks on an existing provider to view/edit it
    * `onCreateProvider`—Called when user clicks to create a new provider

    **Example:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        navigate(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        navigate("/providers/create");
      }}
    />
    ```

    ***

    ### 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>DomainTableSchema</code>
          </td>

          <td>
            Domain URL validation rules.
          </td>
        </tr>

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

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling</code>
          </td>

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

    **schema**

    Set custom validation rules for domain URL input.

    <Accordion title="Available Schema Fields">
      **create.domainUrl**—Domain URL validation—`regex`—Custom regex pattern

      * `errorMessage`—Custom error message
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        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.

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

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

      **table**—Table display

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—Create domain modal

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—Verify domain modal

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—Delete confirmation

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Provider configuration

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—API responses

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

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

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-tableActions`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

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

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

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>Data + API layer (fetch, create, verify, delete, associate)</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>