Lister et configurer les fournisseurs SSO sur le Web

Affichez et gérez les fournisseurs d’identité SSO dans une interface tabulaire permettant de créer, modifier, supprimer, activer et désactiver des fournisseurs.

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

React

​

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

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

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 traiter les challenges d'authentification renforcée au moyen du popup Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props requis

Les props obligatoires sont essentiels au fonctionnement du composant. SsoProviderTable exige les deux actions de navigation afin de prendre en charge le workflow habituel de gestion des Providers.

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.

createAction

Type : ComponentAction<void>

La propriété createAction est requise, car elle détermine où les utilisateurs sont redirigés lorsqu’ils cliquent sur « Add Provider ». Sans elle, la table ne saurait pas comment amorcer le flow de création du Provider.

Propriétés :

• disabled—Désactive le bouton « Add Provider »
• onBefore()—S’exécute avant la navigation. Retournez false pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les autorisations nécessaires).
• onAfter()—S’exécute une fois que onBefore a réussi. Utilisez cette fonction pour accéder à votre page de création ou effectuer le suivi analytique.

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

---

editAction

Type : ComponentAction<IdentityProvider>

La propriété editAction est requise, car elle détermine vers où les utilisateurs sont dirigés lorsqu’ils cliquent sur la row d’un Provider. Le callback reçoit les données du Provider, ce qui vous permet de rediriger vers la bonne page de modification.

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 naviguer vers la page de modification avec les données du fournisseur.

Exemple :

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

// Suivre les données analytiques à la sélection du Provider
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.

Prop	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

---

​

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.

deleteAction

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

---

deleteFromOrganizationAction

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

---

enableProviderAction

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

---

​

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 avoir à modifier le code source.

Propriété	Type	Description
schema	SsoProviderTableSchema	Validation du champ de confirmation.
customMessages	Partial<SsoProviderTableMessages>	Remplacements des textes d’internationalisation.
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 (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 et 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 l’ensemble des textes et des 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.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 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ées à tous les thèmes
• light—Thème clair uniquement
• dark—Thème sombre uniquement

Classes—surcharges de classes de composants

• 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 se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de gestion des fournisseurs si vous utilisez shadcn.

​

Sous-composants disponibles

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

Composant	Description
ProviderRow	Ligne d’un fournisseur avec actions
ProviderDeleteModal	Fenêtre modale de confirmation de suppression définitive
ProviderRemoveModal	Fenêtre modale de confirmation du retrait de l’organisation
ProviderStatusToggle	Composant de bascule 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 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
useSsoProviderTableLogic	État de l’interface et gestionnaires d’interaction (modales, actions)

Next.js

​

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

npm install @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.

​

Pour commencer

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 de base sont essentielles au fonctionnement du composant. SsoProviderTable exige les deux actions de navigation afin de prendre en charge le workflow habituel de gestion des Providers.

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.

createAction

Type : ComponentAction<void>

La propriété createAction est requise, car elle détermine vers quelle page les utilisateurs sont dirigés lorsqu’ils cliquent sur “Add Provider”. Sans elle, la table ne saurait pas comment amorcer le flow de création du Provider.

Propriétés :

• disabled—Désactive le bouton “Ajouter un Provider”
• 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 effectuer un suivi analytique.

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

---

editAction

Type : ComponentAction<IdentityProvider>

La propriété editAction est requise, car elle détermine vers quelle page les utilisateurs sont dirigés lorsqu’ils cliquent sur la ligne d’un fournisseur. Le callback reçoit les données du fournisseur, ce qui vous permet de rediriger vers la bonne page de modification.

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 :

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

// Suivre les données analytiques à 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 influer sur 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

---

​

Props de l’Action

Les props d’action gèrent les interactions de l’utilisateur au-delà de la navigation de base. Ce sont elles qui 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.

deleteAction

Type : 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 Delete
• 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 Provider. 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 le retrait d’un provider de l’organization sans le supprimer du tenant. Le provider demeure disponible et pourra ê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 bien été supprimé 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 la bascule d’activation/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: () => 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 textes i18n.
styling	ComponentStyling<SsoProviderTableClasses>	Variables CSS et substitutions de classes.

schema

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

Champs disponibles du schéma

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: () => 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 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.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 remplacements de classes. Prend en charge un style adapté au thème.

Options de mise en forme offertes

Variables—propriétés CSS personnalisées

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

Classes—surcharges de classes de composants

• 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 se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement afin de créer des workflows personnalisés de gestion des fournisseurs.

​

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 des fournisseurs personnalisées. C’est utile lorsque vous devez intégrer la table dans une autre mise en page ou personnaliser le rendu des lignes.

Composant	Description
ProviderRow	Ligne individuelle de fournisseur avec actions
ProviderDeleteModal	Fenêtre modale de confirmation de suppression définitive
ProviderRemoveModal	Fenêtre modale de confirmation du retrait d’une organisation
ProviderStatusToggle	Composant de bascule d’activation et de désactivation
ProviderStrategyIcon	Composant d’affichage d’icônes de stratégie (Okta, SAML, etc.)

​

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 Provider
useSsoProviderTableLogic	État des interactions de l’interface utilisateur et handlers (modales, actions)

shadcn

​

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter 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 qui fournit des utilitaires partagés et l’intégration à Auth0.

​

Commencer

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 traiter les challenges d'authentification renforcée par le popup Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props principaux

Les props principales sont essentielles au fonctionnement du composant. SsoProviderTable exige les deux actions de navigation afin de prendre en charge le workflow habituel de gestion des Providers.

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

createAction

Type : ComponentAction<void>

La propriété createAction est requise, car elle détermine vers où les utilisateurs sont dirigés lorsqu’ils cliquent sur “Add Provider”. Sans elle, la table ne saurait pas comment amorcer le flow de création du Provider.

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 les données analytiques à l'intention de création
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

---

editAction

Type : ComponentAction<IdentityProvider>

La propriété editAction est obligatoire, car elle détermine vers quelle page les utilisateurs sont dirigés lorsqu’ils cliquent sur la row d’un Provider. Le callback reçoit les données du Provider, ce qui vous permet de rediriger vers la bonne page de modification.

Propriétés :

• disabled—Désactive la navigation lorsqu’on clique 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 après l’exécution réussie de onBefore. 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 Provider
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// Suivre les données analytiques à la sélection du Provider
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 en modifier le 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 la section d’en-tête. 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 ainsi que d’activation et de 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.

deleteAction

Type : 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 Supprimer
• 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");
    },
  }}
/>

---

deleteFromOrganizationAction

Type : ComponentAction<IdentityProvider>

Contrôle le retrait d’un Provider de l’organization sans le supprimer du tenant. Le Provider 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, 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: () => 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 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 entremise.

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.

schema

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

Champs disponibles du schéma

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 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.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 de 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 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-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 se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de gestion des fournisseurs si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer les sous-composants individuellement afin de créer des interfaces de gestion des fournisseurs sur mesure. C’est utile lorsque vous devez intégrer la table dans un autre layout ou personnaliser le rendu des rows.

Composant	Description
ProviderRow	Ligne d’un fournisseur avec actions
ProviderDeleteModal	Fenêtre de confirmation de la suppression définitive
ProviderRemoveModal	Fenêtre de confirmation du retrait de l’organisation
ProviderStatusToggle	Composant de bascule d’activation et de désactivation
ProviderStrategyIcon	Composant d’affichage des icônes de stratégie (Okta, SAML, etc.)

​

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 profitant de l’intégration au niveau de l’API Auth0.

Hook	Description
useSsoProviderTable	Récupération et gestion de la liste des fournisseurs
useSsoProviderTableLogic	État des interactions de l’interface utilisateur et handlers (boîtes de dialogue, actions)