Tableau des fournisseurs SSO

Affichez et gérez les fournisseurs d’identité SSO dans une interface tabulaire avec des fonctions de création, de modification, de suppression et d’activation ou de désactivation.

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

React

​

Prérequis de configuration

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

​

Installation

pnpm

pnpm add @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 Auth0.

​

Mise en route

import { SsoProviderTable } from "@auth0/universal-components-react/spa";
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/spa";
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 par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props obligatoires

Les props obligatoires sont essentielles au fonctionnement du composant. SsoProviderTable requiert 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. Redirige vers la page de création du fournisseur.
editAction	ComponentAction<IdentityProvider>	Obligatoire. Redirige vers la page de modification du fournisseur.

createAction

Type: ComponentAction<void>

La prop createAction est obligatoire, car elle détermine vers où les utilisateurs sont redirigés lorsqu’ils cliquent sur “Add Provider”. 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 que la navigation ne se produise. Renvoyez false pour empêcher la navigation (p. ex. si l’utilisateur n’a pas les autorisations nécessaires).
• onAfter() - S’exécute une fois que onBefore s’est exécuté avec succès. Utilisez-le pour rediriger vers votre page de création ou pour faire le suivi analytique.

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"),
}}

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

---

editAction

Type: ComponentAction<IdentityProvider>

La prop editAction est obligatoire, car elle détermine vers quelle page les utilisateurs sont redirigés lorsqu’ils cliquent sur une ligne de fournisseur. Le callback reçoit les données du fournisseur afin que vous puissiez accéder à la bonne page de modification.

Propriétés :

• disabled - Désactive la navigation au clic sur la ligne
• onBefore(provider) - S’exécute avant la navigation. Retournez false pour empêcher la navigation (p. ex., pour des vérifications d’accès conditionnelles).
• onAfter(provider) - S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour naviguer vers la page de modification avec les données du fournisseur.

Exemple :

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

// Suivre les données analytiques lors de la sélection du fournisseur
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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 de la table. Valeur par défaut : false
hideHeader	boolean	Masque la section d’en-tête. Valeur par défaut : false

---

​

Propriétés d’Action

Les props d’Action gèrent les interactions utilisateur au-delà de la navigation principale. Elles contrôlent les opérations de suppression, de retrait et d’activation/désactivation.

Propriété	Type	Description
deleteAction	ComponentAction<IdentityProvider>	Supprimer définitivement le fournisseur.
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	Retirer le fournisseur de l’organisation.
enableProviderAction	ComponentAction<IdentityProvider>	Bouton à bascule pour activer ou désactiver le fournisseur.

deleteAction

Type: ComponentAction<IdentityProvider>

Contrôle la suppression permanente d’un fournisseur SSO. Cette opération est destructive — le fournisseur est définitivement supprimé de votre locataire Auth0.

Propriétés :

• disabled - Désactive l’option de suppression
• onBefore(provider) - S’exécute avant la suppression. Renvoyez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
• onAfter(provider) - S’exécute une fois le fournisseur supprimé avec succès. 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");
    },
  }}
/>

---

deleteFromOrganizationAction

Type: ComponentAction<IdentityProvider>

Contrôle la suppression d’un fournisseur de l’organisation sans le supprimer du locataire. Le fournisseur reste disponible pour être rajouté ultérieurement.

Propriétés :

• disabled - Désactive l’option de suppression
• onBefore(provider) - S’exécute avant la suppression. Renvoyez false pour empêcher la suppression (p. ex. pour afficher une confirmation).
• onAfter(provider) - S’exécute une fois le fournisseur retiré de l’organisation avec succès.

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

---

enableProviderAction

Type: ComponentAction<IdentityProvider>

Contrôle le bouton d’activation/désactivation des fournisseurs. Les fournisseurs désactivés restent configurés, mais les utilisateurs ne peuvent pas s’authentifier via ceux-ci.

Propriétés :

• disabled - Désactiver le bouton de bascule
• onBefore(provider) - S’exécute avant le changement d’état. Retournez false pour l’empêcher.
• onAfter(provider) - S’exécute une fois que le fournisseur a été activé ou désactivé avec succès.

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, à vos paramètres régionaux et à vos exigences de validation sans modifier le code source.

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

schema

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

Champs de schéma disponibles

Tous les champs du schéma prennent en charge : regex, errorMessage

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

---

customMessages

Personnalisez tous les textes et traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

Messages disponibles

header - En-tête du composant

• title, description, create_button_text

table - Affichage en tableau

• empty_message
• columns.name, columns.strategy, columns.status
• actions.edit_button_text, actions.delete_button_text, actions.remove_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

• provider_delete_success, provider_delete_error
• provider_remove_success, provider_enable_success, provider_disable_success

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

---

styling

Personnalisez l’apparence à l’aide de variables CSS et de substitutions de classes. Prend en charge le style adapté au thème.

Options de style disponibles

Variables - propriétés CSS personnalisées

• common - S’applique à tous les thèmes
• light - Thème clair uniquement
• dark - Thème sombre uniquement

Classes - substitutions de classe du composant

• SsoProviderTable-header
• SsoProviderTable-table
• SsoProviderTable-row
• SsoProviderTable-deleteModal
• SsoProviderTable-removeModal

<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

Le composant SsoProviderTable est composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de gestion de fournisseurs personnalisés si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces de gestion de fournisseurs personnalisées. Cela est utile lorsque vous devez intégrer le tableau dans une mise en page différente ou personnaliser le rendu des rangées.

Composant	Description
ProviderRow	Ligne de fournisseur avec actions
ProviderDeleteModal	Fenêtre modale de confirmation pour la suppression permanente
ProviderRemoveModal	Fenêtre modale de confirmation pour le retrait de l’organisation
ProviderStatusToggle	Composant d’activation/désactivation
ProviderStrategyIcon	Composant d’affichage de l’icône de stratégie (Okta, SAML, etc.)

​

Hooks disponibles

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

Hook	Description
useSsoProviderTable	Récupération et gestion de la liste des fournisseurs
useSsoProviderTableLogic	État d’interaction de l’interface utilisateur et gestionnaires (fenêtres modales, actions)

Next.js

​

Exigences de configuration

Configuration Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. Voir le guide de configuration →

​

Installation

npm (Recommended)

npm install @auth0/universal-components-react

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

​

Mise en route

page.tsx

import { SsoProviderTable } from "@auth0/universal-components-react/rwa";
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 complet d’intégration

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

​

Propriétés principales

Les props de base sont essentielles au fonctionnement du composant. SsoProviderTable requiert 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 du fournisseur d’identité.
editAction	ComponentAction<IdentityProvider>	Obligatoire. Permet d’accéder à la modification du fournisseur d’identité.

createAction

Type: ComponentAction<void>

La prop createAction est obligatoire, car elle détermine vers où les utilisateurs sont redirigés lorsqu’ils cliquent sur “Add Provider”. 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 l’empêcher (par ex., si l’utilisateur n’a pas les autorisations nécessaires).
• onAfter() - S’exécute une fois que onBefore a réussi. Utilisez-le pour accéder à votre page de création ou effectuer le suivi analytique.

Exemple :

// Naviguer vers la page de création
createAction={{
  onAfter: () => router.push("/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: () => router.push("/providers/create"),
}}

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

---

editAction

Type: ComponentAction<IdentityProvider>

La prop editAction est obligatoire, car elle détermine vers quelle page les utilisateurs sont redirigés lorsqu’ils cliquent sur une ligne de fournisseur. Le callback reçoit les données du fournisseur afin que vous puissiez accéder à la bonne page de modification.

Propriétés :

• disabled - Désactive la navigation au clic sur la ligne
• onBefore(provider) - S’exécute avant la navigation. Retournez false pour l’empêcher (p. ex., pour des contrôles d’accès conditionnels).
• onAfter(provider) - S’exécute une fois que onBefore a réussi. Utilisez ceci pour naviguer vers la page de modification avec les données du fournisseur.

Exemple :

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

// Suivre les données analytiques lors de la sélection du fournisseur
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    router.push(`/providers/${provider.id}`);
  },
}}

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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 de la table. Par défaut : false
hideHeader	boolean	Masque l’en-tête. Par défaut : false

---

​

Propriétés d’Action

Les props d’Action gèrent les interactions utilisateur au-delà de la navigation principale. Elles contrôlent les opérations de suppression, de retrait et d’activation/désactivation.

Propriété	Type	Description
deleteAction	ComponentAction<IdentityProvider>	Supprimer définitivement le fournisseur.
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	Retirer le fournisseur de l’organisation.
enableProviderAction	ComponentAction<IdentityProvider>	Bouton bascule pour activer ou désactiver le fournisseur.

deleteAction

Type: ComponentAction<IdentityProvider>

Contrôle la suppression permanente d’un fournisseur SSO. Cette opération est destructive — le fournisseur est définitivement supprimé de votre locataire Auth0.

Propriétés :

• disabled - Désactiver l’option de suppression
• onBefore(provider) - S’exécute avant la suppression. Renvoyez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
• onAfter(provider) - S’exécute une fois que le fournisseur a été supprimé avec succès. 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");
    },
  }}
/>

---

deleteFromOrganizationAction

Type: ComponentAction<IdentityProvider>

Contrôle la suppression d’un fournisseur de l’organisation sans le supprimer du locataire. Le fournisseur demeure disponible pour être rajouté ultérieurement.

Propriétés :

• disabled - Désactive l’option de suppression
• onBefore(provider) - S’exécute avant la suppression. Renvoyez false pour empêcher la suppression (p. ex., pour afficher une demande de confirmation).
• onAfter(provider) - S’exécute après la suppression réussie du fournisseur 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`);
    },
  }}
/>

---

enableProviderAction

Type: ComponentAction<IdentityProvider>

Contrôle le bouton d’activation/désactivation des fournisseurs. Les fournisseurs désactivés restent configurés, mais les utilisateurs ne peuvent pas s’authentifier via ceux-ci.

Propriétés :

• disabled - Désactive le bouton bascule
• onBefore(provider) - S’exécute avant le basculement. Retournez false pour empêcher le changement d’état.
• onAfter(provider) - S’exécute une fois que le fournisseur a été activé ou désactivé avec succès.

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

---

​

Propriétés de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre brand, à vos paramètres régionaux et à vos exigences de validation sans modifier le code source.

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

schema

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

Champs du schéma disponibles

Tous les champs du schéma prennent en charge : regex, errorMessage

delete.providerName - Confirmation de la suppression permanente remove.providerName - Confirmation du retrait de l’organisation

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

---

customMessages

Personnalisez tous les textes et traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

Messages disponibles

en-tête - En-tête du composant

• title, description, create_button_text

tableau - Affichage en tableau

• empty_message
• columns.name, columns.strategy, columns.status
• actions.edit_button_text, actions.delete_button_text, actions.remove_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

• provider_delete_success, provider_delete_error
• provider_remove_success, provider_enable_success, provider_disable_success

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

---

styling

Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge la stylisation adaptée au thème.

Options de style disponibles

Variables - propriétés CSS personnalisées

• common - S’applique à tous les thèmes
• light - Thème clair uniquement
• dark - Thème sombre uniquement

Classes - redéfinitions des classes du composant

• SsoProviderTable-header
• SsoProviderTable-table
• SsoProviderTable-row
• SsoProviderTable-deleteModal
• SsoProviderTable-removeModal

<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

Le composant SsoProviderTable est composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows de gestion de fournisseurs personnalisés.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces de gestion de fournisseurs personnalisées. Cela est utile lorsque vous devez intégrer le tableau dans une mise en page différente ou personnaliser le rendu des lignes.

Composant	Description
ProviderRow	Ligne de fournisseur avec actions
ProviderDeleteModal	Fenêtre modale de confirmation pour la suppression permanente
ProviderRemoveModal	Fenêtre modale de confirmation pour le retrait de l’organisation
ProviderStatusToggle	Composant d’activation ou de désactivation
ProviderStrategyIcon	Composant de rendu d’icône de stratégie (Okta, SAML, etc.)

​

Hooks disponibles

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

Hook	Description
useSsoProviderTable	Récupération et gestion de la liste des fournisseurs SSO
useSsoProviderTableLogic	État des interactions de l’interface utilisateur + gestionnaires (fenêtres modales, actions)

shadcn

​

Prérequis de configuration

Configuration d’Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. Voir le guide de configuration →

​

Installation

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

L’exécution de la commande shadcn installe également la dépendance @auth0/universal-components-core pour les utilitaires communs et l’intégration Auth0.

​

Mise en route

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 complet d’intégration

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 par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Propriétés de base

Les props de base sont essentielles au fonctionnement du composant. SsoProviderTable requiert 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 d’identité.
editAction	ComponentAction<IdentityProvider>	Obligatoire. Permet d’accéder à la modification d’un fournisseur d’identité.

createAction

Type: ComponentAction<void>

La prop createAction est obligatoire, car elle détermine vers où les utilisateurs sont redirigés lorsqu’ils cliquent sur “Add Provider”. 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. Renvoyez false pour l’empêcher (par exemple, si l’utilisateur n’a pas les autorisations requises).
• onAfter() - S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à votre page de création ou pour effectuer le suivi analytique.

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"),
}}

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

---

editAction

Type: ComponentAction<IdentityProvider>

La prop editAction est obligatoire, car elle détermine vers quelle page les utilisateurs sont redirigés lorsqu’ils cliquent sur une ligne de fournisseur. Le callback reçoit les données du fournisseur afin que vous puissiez accéder à la bonne page de modification.

Propriétés :

• disabled - Désactiver la navigation par clic sur la ligne
• onBefore(provider) - S’exécute avant que la navigation ne se produise. Retournez false pour empêcher la navigation (p. ex., pour des contrôles d’accès conditionnels).
• onAfter(provider) - S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à la page de modification à l’aide des données du fournisseur.

Exemple :

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

// Suivre les données analytiques lors de la sélection du fournisseur
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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 de la table. Par défaut : false
hideHeader	boolean	Masque l’en-tête. Par défaut : false

---

​

Propriétés d’Action

Les props d’Action gèrent les interactions utilisateur au-delà de la navigation principale. Elles contrôlent 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>	Active ou désactive le fournisseur.

deleteAction

Type: ComponentAction<IdentityProvider>

Contrôle la suppression permanente d’un fournisseur SSO. Cette opération est destructive — le fournisseur est définitivement supprimé de votre locataire Auth0.

Propriétés :

• disabled - Désactiver l’option de suppression
• onBefore(provider) - S’exécute avant la suppression. Renvoyez 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 consigner 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");
    },
  }}
/>

---

deleteFromOrganizationAction

Type: ComponentAction<IdentityProvider>

Contrôle la suppression d’un fournisseur de l’organisation sans le supprimer du locataire. Le fournisseur reste disponible pour être rajouté ultérieurement.

Propriétés :

• disabled - Désactive l’option de suppression
• onBefore(provider) - S’exécute avant la suppression. Renvoyez false pour empêcher la suppression (p. ex., pour afficher une confirmation).
• onAfter(provider) - S’exécute après la suppression réussie du fournisseur 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`);
    },
  }}
/>

---

enableProviderAction

Type: ComponentAction<IdentityProvider>

Contrôle le bouton d’activation/désactivation des fournisseurs. Les fournisseurs désactivés restent configurés, mais les utilisateurs ne peuvent pas s’authentifier via ceux-ci.

Propriétés :

• disabled - Désactive le bouton bascule
• onBefore(provider) - Est exécuté avant le basculement. Retournez false pour empêcher le changement d’état.
• onAfter(provider) - S’exécute une fois le fournisseur activé ou désactivé avec succès.

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, à vos paramètres régionaux 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.

schema

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

Champs du schéma disponibles

Tous les champs du schéma prennent en charge : regex, errorMessage

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

---

customMessages

Personnalisez tous les textes et traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

Messages disponibles

header - En-tête du composant

• title, description, create_button_text

table - Affichage en tableau

• empty_message
• columns.name, columns.strategy, columns.status
• actions.edit_button_text, actions.delete_button_text, actions.remove_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

• provider_delete_success, provider_delete_error
• provider_remove_success, provider_enable_success, provider_disable_success

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

---

styling

Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge le style adapté au thème.

Options de style offertes

Variables - Propriétés CSS personnalisées

• common - Appliqué à tous les thèmes
• light - Thème clair uniquement
• dark - Thème sombre uniquement

Classes - Surcharges de classes du composant

• SsoProviderTable-header
• SsoProviderTable-table
• SsoProviderTable-row
• SsoProviderTable-deleteModal
• SsoProviderTable-removeModal

<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

Le composant SsoProviderTable est composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows de gestion de fournisseurs personnalisés si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces de gestion de fournisseurs personnalisées. Cela est utile lorsque vous devez intégrer le tableau dans une mise en page différente ou personnaliser le rendu des lignes.

Composant	Description
ProviderRow	Ligne de fournisseur avec actions
ProviderDeleteModal	Fenêtre modale de confirmation pour la suppression permanente
ProviderRemoveModal	Fenêtre modale de confirmation pour le retrait de l’organisation
ProviderStatusToggle	Composant d’activation/désactivation
ProviderStrategyIcon	Composant affichant l’icône de stratégie (Okta, SAML, etc.)

​

Hooks disponibles

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

Hook	Description
useSsoProviderTable	Récupération et gestion de la liste des fournisseurs
useSsoProviderTableLogic	État des interactions de l’interface utilisateur + gestionnaires (fenêtres modales, actions)