Configure Verified Domains on Web

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 (for example, user@acme.com).

React
Next.js
shadcn

Setup requirements

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

Install the component

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

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

Get started

React SPA

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

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

Full integration example

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>
  );
}

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.

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

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

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

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

deleteActionType: 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 });
    },
  }}
/>

associateToProviderActionType: 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}`);
    },
  }}
/>

deleteFromProviderActionType: 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 / onCreateProviderType: (provider: IdentityProvider) => void / () => voidNavigation 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.

schemaSet 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: {
      domainUrl: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

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

Available Messages

header—Component header

title, description, create_button_text

table—Table display

empty_message
columns.domain, columns.status
actions.configure_button_text, actions.view_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.delete_button_text

configure.modal—Provider configuration

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

notifications—API responses

fetch_providers_error, fetch_domains_error
domain_create_success, domain_create_error
domain_verify_success, domain_verify_error, domain_verify_verification_failed
domain_delete_success, domain_delete_error
domain_associate_provider_success, domain_associate_provider_error
domain_delete_provider_success, domain_delete_provider_error

shared—Shared messages

domain_statuses.pending, domain_statuses.verified, domain_statuses.failed

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

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

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

DomainTable-header
DomainTable-table
DomainTable-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

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

Setup requirements

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

Install component

npm install @auth0/universal-components-react

pnpm add @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";
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";
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;

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

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.

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

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

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

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

deleteActionType: 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 });
    },
  }}
/>

associateToProviderActionType: 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}`);
    },
  }}
/>

deleteFromProviderActionType: 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—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.

schemaSet 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: {
      domainUrl: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

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

Available Messages

header—Component header

title, description, create_button_text

table—Table display

empty_message
columns.domain, columns.status
actions.configure_button_text, actions.view_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.delete_button_text

configure.modal—Provider configuration

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

notifications—API responses

fetch_providers_error, fetch_domains_error
domain_create_success, domain_create_error
domain_verify_success, domain_verify_error, domain_verify_verification_failed
domain_delete_success, domain_delete_error
domain_associate_provider_success, domain_associate_provider_error
domain_delete_provider_success, domain_delete_provider_error

shared—Shared messages

domain_statuses.pending, domain_statuses.verified, domain_statuses.failed

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

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

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

DomainTable-header
DomainTable-table
DomainTable-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

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

Setup requirements

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

Install the component

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

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/domain-table

The shadcn CLI also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration. Requires shadcn CLI v2.5.0+.

Legacy Vercel registry retired: The Vercel-hosted registry (https://auth0-universal-components.vercel.app/r/...) was retired on September 17, 2026. Use the GitHub Registry path above.

Get 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: {
            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>
  );
}

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

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.

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

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

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

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

deleteActionType: 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 });
    },
  }}
/>

associateToProviderActionType: 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}`);
    },
  }}
/>

deleteFromProviderActionType: 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—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.

schemaSet 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: {
      domainUrl: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

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

Available Messages

header—Component header

title, description, create_button_text

table—Table display

empty_message
columns.domain, columns.status
actions.configure_button_text, actions.view_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.delete_button_text

configure.modal—Provider configuration

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

notifications—API responses

fetch_providers_error, fetch_domains_error
domain_create_success, domain_create_error
domain_verify_success, domain_verify_error, domain_verify_verification_failed
domain_delete_success, domain_delete_error
domain_associate_provider_success, domain_associate_provider_error
domain_delete_provider_success, domain_delete_provider_error

shared—Shared messages

domain_statuses.pending, domain_statuses.verified, domain_statuses.failed

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

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

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

DomainTable-header
DomainTable-table
DomainTable-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

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

Web Components

iOS Components

Android Components

Configure Verified Domains on Web

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Install component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks

​Setup requirements

​Install the component

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

​Setup requirements

​Install component

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

​Setup requirements

​Install the component

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Install component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks