Configure Verified Organization Domain

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

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) and ensure users are automatically routed to the correct SSO provider based on their email suffix (e.g., [e-mail]).

React

Setup requirements

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

Install the component

pnpm

pnpm add @auth0/universal-components-react

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

Get started

React SPA

import { DomainTable } from "@auth0/universal-components-react/spa";

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

Full integration example

import React from "react";
import { DomainTable } from "@auth0/universal-components-react/spa";
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: {
            domain: {
              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 domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

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 (e.g., 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:

<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 (e.g., to confirm DNS is configured).
• onAfter(domain) - Runs after the domain is successfully verified. Use this to show a success notification.

Example:

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

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

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

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

Available Schema Fields

create.domainUrl - Domain URL validation - regex - Custom regex pattern

• errorMessage - Custom error message

<DomainTable
  schema={{
    create: {
      domain: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

---

customMessages

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

Available Messages

header - Component header

• title, 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

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

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-createModal
• DomainTable-configureModal
• DomainTable-deleteModal

<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

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

Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom domain management interfaces. This is useful when you need to embed specific modals in different contexts or customize the table layout beyond what props allow.

Component	Description
DomainCreateModal	Modal for creating a domain
DomainVerifyModal	Modal for verification flow
DomainDeleteModal	Confirmation modal for deletion
DomainConfigureProvidersModal	Manage provider associations
DomainTableActionsColumn	Action buttons for each domain row

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)
useDomainTableLogic	UI interaction state + handlers (modals, notifications)

Next.js

Setup requirements

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

Install component

npm

npm install @auth0/universal-components-react

Running the pnpm or npm commands installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

page.tsx

import { DomainTable } from "@auth0/universal-components-react/rwa";
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");
      }}
    />
  );
}

Full integration example

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

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

  return (
    <div className="max-w-6xl mx-auto p-6">
      <DomainTable
        schema={{
          create: {
            domain: {
              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;

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 (e.g., 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:

<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 (e.g., to confirm DNS is configured).
• onAfter(domain) - Runs after the domain is successfully verified. Use this to show a success notification.

Example:

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

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

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

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

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.

Available Schema Fields

create.domain - Domain URL validation - regex - Custom regex pattern - errorMessage - Custom error message

<DomainTable
  schema={{
    create: {
      domain: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

---

customMessages

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

Available Messages

header - Component header

• title, 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

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

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-createModal
• DomainTable-configureModal
• DomainTable-deleteModal

<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

The DomainTable component is composed of smaller subcomponents and hooks. You can import them individually to build custom domain workflows.

Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom domain management interfaces. This is useful when you need to embed specific modals in different contexts or customize the table layout beyond what props allow.

Component	Description
DomainCreateModal	Modal for creating a domain
DomainVerifyModal	Modal for verification flow
DomainDeleteModal	Confirmation modal for deletion
DomainConfigureProvidersModal	Manage provider associations
DomainTableActionsColumn	Action buttons for each domain row

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)
useDomainTableLogic	UI interaction state + handlers (modals, notifications)

shadcn

Setup requirements

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

Install the component

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/domain-table.json

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

Getting Started

import { DomainTable } from "@/components/auth0/my-organization/domain-table";

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

Full integration example

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: {
            domain: {
              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 domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

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 (e.g., 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:

<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 (e.g., to confirm DNS is configured).
• onAfter(domain) - Runs after the domain is successfully verified. Use this to show a success notification.

Example:

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

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

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

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

Available Schema Fields

create.domainUrl - Domain URL validation - regex - Custom regex pattern

• errorMessage - Custom error message

<DomainTable
  schema={{
    create: {
      domain: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

---

customMessages

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

Available Messages

header - Component header

• title, 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

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

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-createModal
• DomainTable-configureModal
• DomainTable-deleteModal

<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

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

Available subcomponents

For advanced use cases, you can import individual subcomponents to build custom domain management interfaces. This is useful when you need to embed specific modals in different contexts or customize the table layout beyond what props allow.

Component	Description
DomainCreateModal	Modal for creating a domain
DomainVerifyModal	Modal for verification flow
DomainDeleteModal	Confirmation modal for deletion
DomainConfigureProvidersModal	Manage provider associations
DomainTableActionsColumn	Action buttons for each domain row

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)
useDomainTableLogic	UI interaction state + handlers (modals, notifications)