Tableau des fournisseurs SSO

Configuration requise

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

Installation

pnpm add @auth0/universal-components-react

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

Remarques rapides

import { SsoProviderTable } from '@auth0/universal-components-react/spa';

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

return (

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

Exemple d’intégration complète

Bien que cet exemple utilise une application à page unique React, les configurations des propriétés (schéma, customMessages, styles, etc.) s’appliquent également aux configurations Next.js et shadcn.

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(
              `Supprimer "${provider.display_name}"? Ceci est 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: "Fournisseurs SSO",
            description: "Gérer les fournisseurs d'identité pour votre organization",
            create_button_text: "Ajouter un nouveau fournisseur",
          },
          table: {
            empty_message:
              "Aucun fournisseur configuré. Ajoutez-en un pour activer la SSO.",
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "SsoProviderTable-header": "shadow-lg rounded-xl",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Propriétés

Propriétés essentielles

Les propriétés essentielles sont fondamentales pour le fonctionnement du composant. SsoProviderTable nécessite les deux actions de navigation pour gérer le flux de production typique de gestion des fournisseurs.

Propriété	Type	Description
`createAction`	`ComponentAction<void>`	Obligatoire. Rendez-vous dans la section Créer un fournisseur. Détails
`editAction`	`ComponentAction<IdentityProvider>`	Obligatoire. Rendez-vous dans la section Modifier un fournisseur. Détails

createAction

Type : ComponentAction<void> La propriété createAction est requise car elle détermine la page vers laquelle les utilisateurs sont redirigés lorsqu’ils cliquent sur « Ajouter un fournisseur ». Sans cela, le tableau ne saurait pas comment lancer le processus de création d’un fournisseur. Propriétés :

disabled – Désactiver le bouton « Ajouter un fournisseur »
onBefore() – S’exécute avant la navigation. Renvoie « false » pour empêcher la navigation (p. ex., si l’utilisateur ne dispose pas des autorisations nécessaires).
onAfter() – S’exécute après la réussite de onBefore. À utiliser pour accéder à votre page de création ou suivre les analyses.

Modèles courants :

// Navigate to create page
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// Check permissions before allowing create
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert(« Vous n'avez pas l'autorisation de créer des fournisseurs. »);
      return false;
    }
    return true;
  },
  onAfter: () => navigate("/providers/create"),
}}

// Track analytics on create intent
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

editAction

Type : ComponentAction<IdentityProvider> La propriété editAction est requise car elle détermine la page vers laquelle les utilisateurs sont redirigés lorsqu’ils cliquent sur une ligne fournisseur. La fonction de rappel reçoit les données du fournisseur afin que vous puissiez accéder à la page d’édition appropriée. Propriétés :

disabled – Désactiver la navigation par clic sur les lignes
onBefore(provider) – S’exécute avant la navigation. Renvoie « false » pour empêcher la navigation (p. ex., pour les vérifications d’accès conditionnel).
onAfter(provider) : s’exécute une fois que onBefore a réussi. À utiliser pour accéder à la page de modification contenant les données du fournisseur.

Modèles courants :

// Navigate to edit page with provider ID
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// Track analytics on provider selection
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 manière dont le composant s’affiche sans altérer son comportement. Veuillez les utiliser pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactiver toutes les actions sur les tableaux. Valeur par défaut : `false`
`hideHeader`	`boolean`	Masquer la section d’en-tête. Valeur par défaut : `false`

Propriétés d’action

Les propriétés d’action gèrent les interactions de l’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. Détails
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Supprimer le fournisseur de l’organization. Détails
`enableProviderAction`	`ComponentAction<IdentityProvider>`	Activer/désactiver le basculement du fournisseur. Détails

deleteAction

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

disabled – Désactiver l’option de suppression
onBefore(provider) – S’exécute avant la suppression. Renvoie « false » pour empêcher la suppression (recommandé pour les fenêtres de confirmation)
onAfter(provider) – S’exécute une fois le fournisseur supprimé avec succès. À utiliser 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(
        `Supprimer de manière permanente le fournisseur "${provider.display_name}"? Cette action est irréversible.`,
      );
    },
    onAfter: (provider) => {
      analytics.track("Provider Deleted", { name: provider.name });
      toast.success("Fournisseur supprimé.");
    },
  }}
/>

deleteFromOrganizationAction

Type : ComponentAction<IdentityProvider> Contrôle la suppression d’un fournisseur de l’organization sans le supprimer du locataire. Le fournisseur reste utilisable et peut être réajouté ultérieurement. Propriétés :

disabled – Désactiver l’option de suppression
onBefore(provider) – S’exécute avant la suppression. Renvoie « false » pour empêcher la suppression (p. ex., pour afficher une confirmation).
onAfter(provider) – S’exécute une fois que le fournisseur a été supprimé de l’organization.

Exemple :

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  deleteFromOrganizationAction={{
    onBefore: (provider) => {
      return confirm(
        `Supprimer "${provider.display_name}" de cette organization?`,
      );
    },
    onAfter: (provider) => {
      toast.success(`${provider.display_name} a été supprimé de l'organization`);
    },
  }}
/>

enableProviderAction

Type : ComponentAction<IdentityProvider> Contrôle l’activation ou la 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 basculement
onBefore(provider) – S’exécute avant le basculement. Renvoie « false » pour empêcher le changement d’état.
onAfter(provider) – S’exécute après l’activation ou la désactivation réussie du fournisseur.

Exemple :

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  enableProviderAction={{
    onBefore: (provider) => {
      if (!provider.is_enabled) {
        return confirm(`Activer"${provider.display_name}" pour l'authentification?`);
      }
      return confirm(
        `Désactiver "${provider.display_name}"? Les utilisateurs ne pourront pas s'authentifier.`,
      );
    },
    onAfter: (provider) => {
      analytics.track(
        provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
        {
          name: provider.name,
        },
      );
    },
  }}
/>

Propriétés de personnalisation

Les propriétés de personnalisation vous permettent d’adapter le composant à votre marque, à votre région et à vos exigences de validation sans modifier le code source.

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

schéma

Définir des règles de validation personnalisées pour les fenêtres 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, errorMessagedelete.providerName – Confirmation de la suppression définitive remove.providerName – Confirmation de la suppression de l’organization

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  schema={{
    delete: {
      providerName: {
        regex: /^.+$/,
        errorMessage: "Veuillez saisir le nom du fournisseur pour confimer.",
      },
    },
  }}
/>

customMessages

Personaliser tous les textes et toutes les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut s’ils ne sont pas renseignés.

Messages disponibles

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

title, description, create_button_text

tableau – 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 la suppression

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

remove.modal – Confirmation de la suppression de l’organization

title, description
actions.cancel_button_text, actions.remove_button_text

notifications – Réponses 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: « Fournisseurs d'identité »,
      description: « Gérer les connexions SSO pour votre organization »,
      create_button_text: « Ajouter un fournisseur »,
    },
    table: {
      empty_message:
        « Aucun fournisseur SSO n'est configuré. Ajoutez-en un pour activer l'authentification unique. »,
    },
    notifications: {
      provider_delete_success: « Fournisseur supprimé avec succès! »,
    },
  }}
/>

style

Personnaliser l’apparence à l’aide de variables CSS et de remplacements de classe. Prend en charge les styles adaptés aux thèmes.

Options de styles disponibles

Variables – Propriétés personnalisées CSS – common – Appliqué à tous les thèmes – light – Thème clair uniquement – dark – Thème sombre uniquementClasses – Remplacements de classes des 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 SsoProviderTableest constitué de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de production de gestion des fournisseurs personnalisés si vous utilisez shadcn.

Sous-composants disponibles

Pour les cas d’utilisation avancés, il est possible d’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 l’affichage des lignes.

Composant	Description
`ProviderRow`	Ligne de fournisseur individuel avec actions
`ProviderDeleteModal`	Fenêtre modale de confirmation pour la suppression définitive
`ProviderRemoveModal`	Fenêtre modale de confirmation pour la suppression d’une organization
`ProviderStatusToggle`	Activer/désactiver le composant de basculement
`ProviderStrategyIcon`	Rendu d’icône selon la stratégie (Okta, SAML, etc.)

Hooks disponibles

Ces hooks fournissent la logique sous-jacente sans aucune interface utilisateur. Veuillez les utiliser pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration de 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)

My Organization

​Configuration requise

​Installation

​Remarques rapides

​Propriétés

​Propriétés essentielles

​createAction

​editAction

​Propriétés d’affichage

​Propriétés d’action

​deleteAction

​deleteFromOrganizationAction

​enableProviderAction

​Propriétés de personnalisation

​schéma

​customMessages

​style

​Personnalisation avancée

​Sous-composants disponibles

​Hooks disponibles

Configuration requise

Installation

Remarques rapides

Propriétés

Propriétés essentielles

createAction

editAction

Propriétés d’affichage

Propriétés d’action

deleteAction

deleteFromOrganizationAction

enableProviderAction

Propriétés de personnalisation

schéma

customMessages

style

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles