Lister et configurer les fournisseurs SSO sur le Web

Le composant SsoProviderTable offre une interface unifiée pour afficher et configurer les fournisseurs d’authentification unique de votre organisation.

React
Next.js
shadcn

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que l’API My Organization est configurée dans votre tenant. Voir le guide de configuration →

Installation

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

L’exécution de l’une ou l’autre de ces commandes installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration avec Auth0.

Démarrage

import { SsoProviderTable } from "@auth0/universal-components-react";
import { useNavigate } from "react-router-dom";

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

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

Exemple d’intégration complet

import React from "react";
import { SsoProviderTable } from "@auth0/universal-components-react";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

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

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

export default function App() {
  const domain = "your-domain.auth0.com";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Requis pour gérer les défis d’authentification renforcée dans la fenêtre contextuelle de connexion universelle
    >
      <Auth0ComponentProvider>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props requis

Les props requises sont fondamentales pour le fonctionnement du composant. SsoProviderTable nécessite les deux actions de navigation pour gérer le flux de gestion typique des fournisseurs.

Propriété	Type	Description
`createAction`	`ComponentAction<void>`	Obligatoire. Permet d’accéder à la création d’un fournisseur.
`editAction`	`ComponentAction<IdentityProvider>`	Obligatoire. Permet d’accéder à la modification d’un fournisseur.

createActionType : ComponentAction<void>La propriété createAction est requise parce qu’elle contrôle où les utilisateurs sont dirigés lorsqu’ils cliquent sur « Add Provider ». Sans cela, le tableau ne saurait pas comment lancer le processus de création du fournisseur.Propriétés :

disabled—Désactive le bouton “Ajouter un fournisseur”
onBefore()—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les permissions requises).
onAfter()—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à votre page de création ou suivre les données analytiques.

Exemple :

// Naviguer vers la page de création
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// Vérifier les autorisations avant d’autoriser la création
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("You don't have permission to create providers");
      return false;
    }
    return true;
  },
  onAfter: () => navigate("/providers/create"),
}}

// Effectuer un suivi analytique lors de l’intention de création
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

editActionType : ComponentAction<IdentityProvider>La propriété editAction est requise, car elle contrôle l’endroit vers lequel les utilisateurs sont dirigés lorsqu’ils cliquent sur une ligne de fournisseur. Le rappel reçoit les données du fournisseur afin que vous puissiez naviguer vers la page de modification appropriée.Propriétés :

disabled—Désactive la navigation au clic sur une ligne
onBefore(provider)—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, lors de vérifications d’accès conditionnel).
onAfter(provider)—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à la page de modification avec les données du fournisseur.

Exemple :

// Rediriger vers la page de modification avec l’ID du fournisseur
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// Effectuer un suivi analytique lors de la sélection d’un fournisseur
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu sans affecter son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactive toutes les actions du tableau. Par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`
`hideDeleteProvider`	`boolean`	Masque l’action de suppression du fournisseur. Par défaut : `false`
`hideRemoveFromOrganization`	`boolean`	Masque l’action de retrait du fournisseur de l’organisation. Par défaut : `false`

Props de l’Action

Les props d’action gèrent les interactions de l’utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait et d’activation/désactivation.

Propriété	Type	Description
`deleteAction`	`ComponentAction<IdentityProvider>`	Supprime définitivement le fournisseur.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Retire le fournisseur de l’organisation.
`enableProviderAction`	`ComponentAction<IdentityProvider>`	Bascule permettant d’activer ou de désactiver le fournisseur.

deleteActionType : ComponentAction<IdentityProvider>Contrôle la suppression définitive d’un fournisseur SSO. Cette opération est destructrice : le fournisseur est entièrement supprimé de votre tenant Auth0.Propriétés :

disabled—Désactive l’option de suppression
onBefore(provider)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
onAfter(provider)—S’exécute après la suppression réussie du fournisseur. Utilisez cette fonction pour suivre l’événement ou afficher une notification.

Exemple :

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

deleteFromOrganizationActionType : ComponentAction<IdentityProvider>Contrôle le retrait d’un fournisseur de l’Organization sans le supprimer du locataire. Le fournisseur demeure disponible et peut être ajouté de nouveau plus tard.Propriétés :

disabled—Désactive l’option de suppression
onBefore(provider)—S’exécute avant le retrait. Retournez false pour empêcher le retrait (par exemple, afin d’afficher une confirmation).
onAfter(provider)—S’exécute une fois que le fournisseur a été retiré de l’organisation.

Exemple :

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

enableProviderActionType : ComponentAction<IdentityProvider>Contrôle la bascule d’activation ou de désactivation des fournisseurs. Les fournisseurs désactivés demeurent configurés, mais les utilisateurs ne peuvent pas s’authentifier par leur intermédiaire.Propriétés :

disabled—Désactive la bascule
onBefore(provider)—S’exécute avant la bascule. Retournez false pour empêcher le changement d’état.
onAfter(provider)—S’exécute après l’activation ou la désactivation réussie du Provider.

Exemple :

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

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
`schema`	`SsoProviderTableSchema`	Validation du champ de confirmation.
`customMessages`	`Partial<SsoProviderTableMessages>`	Remplacements de texte i18n.
`styling`	`ComponentStyling<SsoProviderTableClasses>`	Variables CSS et remplacements de classes.

schemaDéfinissez des règles de validation personnalisées pour les boîtes de dialogue de confirmation (par exemple, saisir le nom du fournisseur pour confirmer la suppression).

Champs de schéma disponibles

Tous les champs du schéma prennent en charge : regex, errorMessagedelete.providerName—Confirmation de la suppression définitive remove.providerName—Confirmation du retrait de l’organisation

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

customMessagesPersonnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

title, description, create_button_text

table—Affichage du tableau

empty_message
columns.name, columns.identity_provider, columns.display_name
actions.edit_button_text, actions.delete_button_text, actions.remove_button_text, actions.enabled_tooltip, actions.disabled_tooltip

create_consent_modal—Boîte de dialogue de consentement pour créer un fournisseur

title, description
actions.cancel_button_text, actions.process_button_text

delete_modal—Confirmation de suppression

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

remove_modal—Confirmation du retrait de l’organisation

title, description
actions.cancel_button_text, actions.remove_button_text

notifications—Réponses de l’API

general_error, fetch_providers_error, fetch_domains_error
domain_create.success, domain_create.error, domain_create.on_before
domain_verify.success, domain_verify.error, domain_verify.on_before, domain_verify.verification_failed
domain_delete.success, domain_delete.error
domain_associate_provider.success, domain_associate_provider.error, domain_associate_provider.on_before
domain_delete_provider.success, domain_delete_provider.error, domain_delete_provider.on_before

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

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de mise en forme disponibles

Variables—propriétés CSS personnalisées

common—Appliqué à tous les thèmes
light—Thème clair seulement
dark—Thème sombre seulement

Classes—surcharges des classes de composants

SsoProviderTable-header
SsoProviderTable-table
SsoProviderTable-tableActions
SsoProviderTable-deleteProviderModal
SsoProviderTable-deleteProviderFromOrganizationModal

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

Personnalisation avancée

Hooks disponibles

Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration au niveau de l’API Auth0.

Hook	Description
`useSsoProviderTable`	Récupération et gestion de la liste des fournisseurs

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez le guide de configuration →

Installation

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

L’exécution des commandes npm ou pnpm installe la dépendance @auth0/universal-components-core, qui fournit des utilitaires partagés et l’intégration à Auth0.

Démarrage

page.tsx

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

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

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

Exemple d’intégration complet

import React from "react";
import { SsoProviderTable } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

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

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

export default ProvidersManagementPage;

Props

Props principales

Les props principales sont essentielles au fonctionnement du composant. SsoProviderTable nécessite les deux actions de navigation pour gérer le flux de travail typique de gestion des fournisseurs.

Propriété	Type	Description
`createAction`	`ComponentAction<void>`	Obligatoire. Permet d’accéder à la création d’un fournisseur.
`editAction`	`ComponentAction<IdentityProvider>`	Obligatoire. Permet d’accéder à la modification d’un fournisseur.

createActionType : ComponentAction<void>La propriété createAction est requise, car elle contrôle où les utilisateurs sont dirigés lorsqu’ils cliquent sur « Ajouter un fournisseur ». Sans cela, le tableau ne saurait pas comment lancer le processus de création du fournisseur.Propriétés :

disabled—Désactive le bouton “Ajouter un fournisseur”
onBefore()—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les permissions requises).
onAfter()—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à votre page de création ou suivre les données analytiques.

Exemple :

// Naviguer vers la page de création
createAction={{
  onAfter: () => router.push("/providers/create"),
}}

// Vérifier les permissions avant d'autoriser la création
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("You don't have permission to create providers");
      return false;
    }
    return true;
  },
  onAfter: () => router.push("/providers/create"),
}}

// Suivre les données analytiques à l'intention de création
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    router.push("/providers/create");
  },
}}

disabled—Désactive la navigation au clic sur une ligne
onBefore(provider)—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, lors de vérifications d’accès conditionnel).
onAfter(provider)—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à la page de modification avec les données du fournisseur.

Exemple :

// Accéder à la page de modification avec l'ID du fournisseur
editAction={{
  onAfter: (provider) => router.push(`/providers/${provider.id}`),
}}

// Effectuer un suivi analytique lors de la sélection d’un fournisseur
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    router.push(`/providers/${provider.id}`);
  },
}}

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactive toutes les actions du tableau. Par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`
`hideDeleteProvider`	`boolean`	Masque l’action de suppression du fournisseur. Par défaut : `false`
`hideRemoveFromOrganization`	`boolean`	Masque l’action de retrait du fournisseur de l’organisation. Par défaut : `false`

Props d’action

Les props d’action gèrent les interactions de l’utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait et d’activation/désactivation.

Propriété	Type	Description
`deleteAction`	`ComponentAction<IdentityProvider>`	Supprime définitivement le fournisseur.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Retire le fournisseur de l’organisation.
`enableProviderAction`	`ComponentAction<IdentityProvider>`	Bascule permettant d’activer ou de désactiver le fournisseur.

deleteActionType : ComponentAction<IdentityProvider>Contrôle la suppression définitive d’un fournisseur SSO. Cette opération est destructive : le fournisseur est entièrement supprimé de votre tenant Auth0.Propriétés :

disabled—Désactive l’option de suppression
onBefore(provider)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
onAfter(provider)—S’exécute après la suppression réussie du fournisseur. Utilisez cette fonction pour suivre l’événement ou afficher une notification.

Exemple :

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

deleteFromOrganizationActionType : ComponentAction<IdentityProvider>Contrôle le retrait d’un provider de l’organization sans le supprimer du tenant. Le provider demeure disponible et peut être rajouté plus tard.Propriétés :

disabled—Désactive l’option de suppression
onBefore(provider)—S’exécute avant le retrait. Retournez false pour empêcher le retrait (par exemple, afin d’afficher une confirmation).
onAfter(provider)—S’exécute une fois que le fournisseur a été retiré de l’organisation.

Exemple :

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

disabled—Désactive la bascule
onBefore(provider)—S’exécute avant la bascule. Retournez false pour empêcher le changement d’état.
onAfter(provider)—S’exécute après l’activation ou la désactivation réussie du Provider.

Exemple :

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

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
`schema`	`SsoProviderTableSchema`	Validation du champ de confirmation.
`customMessages`	`Partial<SsoProviderTableMessages>`	Remplacements de texte i18n.
`styling`	`ComponentStyling<SsoProviderTableClasses>`	Variables CSS et remplacements de classes.

schémaDéfinissez des règles de validation personnalisées pour les boîtes de dialogue de confirmation (par exemple, saisir le nom du fournisseur pour confirmer la suppression).

Champs de schéma disponibles

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

customMessagesPersonnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; si aucun n’est fourni, les valeurs par défaut sont utilisées.

Messages disponibles

header—En-tête du composant

title, description, create_button_text

table—Affichage du tableau

empty_message
columns.name, columns.identity_provider, columns.display_name
actions.edit_button_text, actions.delete_button_text, actions.remove_button_text, actions.enabled_tooltip, actions.disabled_tooltip

create_consent_modal—Fenêtre modale de consentement à la création d’un fournisseur

title, description
actions.cancel_button_text, actions.process_button_text

delete_modal—Confirmation de suppression

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

remove_modal—Confirmation du retrait de l’organisation

title, description
actions.cancel_button_text, actions.remove_button_text

notifications—Réponses de l’API

general_error, fetch_providers_error, fetch_domains_error
domain_create.success, domain_create.error, domain_create.on_before
domain_verify.success, domain_verify.error, domain_verify.on_before, domain_verify.verification_failed
domain_delete.success, domain_delete.error
domain_associate_provider.success, domain_associate_provider.error, domain_associate_provider.on_before
domain_delete_provider.success, domain_delete_provider.error, domain_delete_provider.on_before

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

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de mise en forme disponibles

Variables—propriétés CSS personnalisées

common—Appliqué à tous les thèmes
light—Thème clair seulement
dark—Thème sombre seulement

Classes—surcharges des classes de composants

SsoProviderTable-header
SsoProviderTable-table
SsoProviderTable-tableActions
SsoProviderTable-deleteProviderModal
SsoProviderTable-deleteProviderFromOrganizationModal

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

Personnalisation avancée

Hooks disponibles

Hook	Description
`useSsoProviderTable`	Récupération et gestion de la liste des fournisseurs

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez le guide de configuration →

Installation

Installez le composant à l’aide de la CLI shadcn en utilisant le registre GitHub :

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

Le CLI shadcn installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration avec Auth0. Nécessite shadcn CLI v2.5.0+.

Démarrage

import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";

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

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

Exemple d’intégration complet

import React from "react";
import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

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

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

export default function App() {
  const domain = "your-domain.auth0.com";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Requis pour gérer les défis d’authentification renforcée via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props principales

Les props de base sont essentielles au fonctionnement du composant. SsoProviderTable nécessite les deux actions de navigation pour gérer le flux de travail habituel de gestion des fournisseurs.

Propriété	Type	Description
`createAction`	`ComponentAction<void>`	Obligatoire. Permet d’accéder à la création d’un fournisseur.
`editAction`	`ComponentAction<IdentityProvider>`	Obligatoire. Permet d’accéder à la modification d’un fournisseur.

createActionType : ComponentAction<void>La propriété createAction est requise, car elle détermine où les utilisateurs sont dirigés lorsqu’ils cliquent sur « Ajouter un fournisseur ». Sans elle, le tableau ne saurait pas comment lancer le flux de création du fournisseur.Propriétés :

disabled—Désactive le bouton “Ajouter un fournisseur”
onBefore()—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les permissions requises).
onAfter()—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à votre page de création ou suivre les données analytiques.

Exemple :

// Naviguer vers la page de création
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// Vérifier les permissions avant d'autoriser la création
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("You don't have permission to create providers");
      return false;
    }
    return true;
  },
  onAfter: () => navigate("/providers/create"),
}}

// Suivre l'analytique au moment de l'intention de création
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

disabled—Désactive la navigation au clic sur une ligne
onBefore(provider)—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, lors de vérifications d’accès conditionnel).
onAfter(provider)—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à la page de modification avec les données du fournisseur.

Exemple :

// Rediriger vers la page de modification avec l’ID du fournisseur
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// Effectuer un suivi analytique lors de la sélection d’un fournisseur
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactive toutes les actions du tableau. Par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`
`hideDeleteProvider`	`boolean`	Masque l’action de suppression du fournisseur. Par défaut : `false`
`hideRemoveFromOrganization`	`boolean`	Masque l’action de retrait du fournisseur de l’organisation. Par défaut : `false`

Props de l’Action

Les props d’action gèrent les interactions de l’utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait et d’activation/désactivation.

Propriété	Type	Description
`deleteAction`	`ComponentAction<IdentityProvider>`	Supprime définitivement le fournisseur.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Retire le fournisseur de l’organisation.
`enableProviderAction`	`ComponentAction<IdentityProvider>`	Bascule permettant d’activer ou de désactiver le fournisseur.

disabled—Désactive l’option de suppression
onBefore(provider)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
onAfter(provider)—S’exécute une fois le Provider supprimé. Utilisez cette fonction pour suivre l’événement ou afficher une notification.

Exemple :

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

deleteFromOrganizationActionType : ComponentAction<IdentityProvider>Contrôle le retrait d’un fournisseur de l’Organization sans le supprimer du locataire. Le fournisseur demeure disponible et peut être ajouté de nouveau plus tard.Propriétés :

disabled—Désactive l’option de suppression
onBefore(provider)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (par exemple, afin d’afficher une confirmation).
onAfter(provider)—S’exécute une fois que le fournisseur a été supprimé de l’organisation.

Exemple :

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

disabled—Désactive la bascule
onBefore(provider)—S’exécute avant la bascule. Retournez false pour empêcher le changement d’état.
onAfter(provider)—S’exécute après l’activation ou la désactivation réussie du Provider.

Exemple :

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

Propriétés de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
`schema`	`SsoProviderTableSchema`	Validation du champ de confirmation.
`customMessages`	`Partial<SsoProviderTableMessages>`	Remplacements de texte i18n.
`styling`	`ComponentStyling<SsoProviderTableClasses>`	Variables CSS et remplacements de classes.

schemaDéfinissez des règles de validation personnalisées pour les boîtes de dialogue de confirmation (par exemple, saisir le nom du fournisseur pour confirmer la suppression).

Champs de schéma disponibles

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

customMessagesPersonnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

title, description, create_button_text

table—Affichage du tableau

empty_message
columns.name, columns.identity_provider, columns.display_name
actions.edit_button_text, actions.delete_button_text, actions.remove_button_text, actions.enabled_tooltip, actions.disabled_tooltip

create_consent_modal—Fenêtre modale de consentement pour créer un fournisseur

title, description
actions.cancel_button_text, actions.process_button_text

delete_modal—Confirmation de suppression

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

remove_modal—Confirmation du retrait de l’organisation

title, description
actions.cancel_button_text, actions.remove_button_text

notifications—Réponses de l’API

general_error, fetch_providers_error, fetch_domains_error
domain_create.success, domain_create.error, domain_create.on_before
domain_verify.success, domain_verify.error, domain_verify.on_before, domain_verify.verification_failed
domain_delete.success, domain_delete.error
domain_associate_provider.success, domain_associate_provider.error, domain_associate_provider.on_before
domain_delete_provider.success, domain_delete_provider.error, domain_delete_provider.on_before

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

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de mise en forme disponibles

Variables—propriétés CSS personnalisées

common—Appliqué à tous les thèmes
light—Thème clair seulement
dark—Thème sombre seulement

Classes—surcharges des classes de composants

SsoProviderTable-header
SsoProviderTable-table
SsoProviderTable-tableActions
SsoProviderTable-deleteProviderModal
SsoProviderTable-deleteProviderFromOrganizationModal

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

Personnalisation avancée

Hooks disponibles

Hook	Description
`useSsoProviderTable`	Récupération et gestion de la liste des fournisseurs

Web Components

iOS Components

Android Components

Lister et configurer les fournisseurs SSO sur le Web

Exigences de configuration

Installation

Démarrage

Props

Props requis

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Démarrage

Props

Props principales

Props d’affichage

Props d’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Démarrage

Props

Props principales

Props d’affichage

Props de l’Action

Propriétés de personnalisation

Personnalisation avancée

Hooks disponibles

​Exigences de configuration

​Installation

​Démarrage

​Props

​Props requis

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installation

​Démarrage

​Props

​Props principales

​Props d’affichage

​Props d’action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installation

​Démarrage

​Props

​Props principales

​Props d’affichage

​Props de l’Action

​Propriétés de personnalisation

​Personnalisation avancée

​Hooks disponibles

Exigences de configuration

Installation

Démarrage

Props

Props requis

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Démarrage

Props

Props principales

Props d’affichage

Props d’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Démarrage

Props

Props principales

Props d’affichage

Props de l’Action

Propriétés de personnalisation

Personnalisation avancée

Hooks disponibles