> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-automated-sdk-version-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Gérer les membres de l’Organization sur le Web

> Gérez les membres de l’Organization et les invitations en attente dans une interface à onglets offrant des options complètes de gestion du cycle de vie des invitations.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const detectTheme = () => {
    if (typeof document === "undefined") return "light";
    const html = document.documentElement;
    const colorScheme = html.style.colorScheme || window.getComputedStyle(html).colorScheme;
    if (colorScheme) return colorScheme === "dark" ? "dark" : "light";
    const isDarkMode = window?.localStorage?.getItem?.("isDarkMode");
    const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
    const shouldBeDark = isDarkMode === "dark" || isDarkMode !== "light" && prefersDark;
    return shouldBeDark ? "dark" : "light";
  };
  const [theme, setTheme] = useState(detectTheme);
  useEffect(() => {
    if (typeof document === "undefined") return;
    setTheme(detectTheme());
    const observer = new MutationObserver(() => setTheme(detectTheme()));
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["style", "class", "data-theme", "data-theme-preference"]
    });
    return () => observer.disconnect();
  }, []);
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="Chargement" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "#ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Le composant `OrganizationMemberManagement` offre une interface unifiée pour gérer les membres et les invitations de votre [Organization](/docs/fr-ca/manage-users/organizations).

<ComponentLoader componentSelector="organization-member-management" componentPreviewText="Aperçu du composant de gestion des membres de l’Organization" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      Prérequis de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration Auth0 requise**—Assurez-vous que votre locataire est configuré avec l’API My Organization. [Consultez le guide de configuration →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation">
      Installation
    </h2>

    ```bash pnpm wrap lines theme={null}
    pnpm add @auth0/universal-components-react
    ```

    <h2 id="get-started">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationMemberManagement } from "@auth0/universal-components-react";

    export function MembersPage() {
      return <OrganizationMemberManagement />;
    }
    ```

    Pour permettre aux administrateurs d’afficher les détails d’un membre, associez `viewMemberDetailsAction` à la route qui héberge [`OrganizationMemberDetail`](/docs/fr-ca/get-started/universal-components/web/components/organization-member-detail) :

    ```tsx wrap lines theme={null}
    import { OrganizationMemberManagement } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

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

      return (
        <OrganizationMemberManagement
          viewMemberDetailsAction={{
            onAfter: ({ userId, tab }) =>
              navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      import React from "react";
      import { useNavigate } from "react-router-dom";
      import { OrganizationMemberManagement } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { auditLog } from "./lib/audit-log";

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

        return (
          <div className="max-w-5xl mx-auto p-6">
            <OrganizationMemberManagement
              createInvitationAction={{
                onBefore: (input) => {
                  const email = input.invitees[0]?.email ?? "";
                  return email.endsWith("@example.com");
                },
                onAfter: (input, createdInvitation) => {
                  auditLog.record({
                    action: "invitation_created",
                    email: input.invitees[0]?.email,
                    invitationId: createdInvitation.id,
                  });
                },
              }}
              revokeInvitationAction={{
                onBefore: (invitations) =>
                  window.confirm(`Revoke ${invitations.length} invitation(s)?`),
                onAfter: (invitations) => {
                  auditLog.record({
                    action: "invitations_revoked",
                    count: invitations.length,
                  });
                },
              }}
              resendInvitationAction={{
                onAfter: (original, newInvitation) => {
                  auditLog.record({
                    action: "invitation_resent",
                    originalId: original.id,
                    newId: newInvitation.id,
                  });
                },
              }}
              viewMemberDetailsAction={{
                onAfter: ({ userId, tab }) =>
                  navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
              }}
              removeFromOrganizationAction={{
                onBefore: (userId) =>
                  window.confirm(`Remove member ${userId} from the organization?`),
                onAfter: (userId) => {
                  auditLog.record({ action: "member_removed", userId });
                },
              }}
              assignRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_assigned", userId, roleIds });
                },
              }}
              customMessages={{
                header: { title: "Team Members" },
                tabs: { invitations: "Pending Invites" },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
          >
            <Auth0ComponentProvider>
              <MembersPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      Prérequis de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre locataire est configuré avec l’API My Organization. [Consultez le guide de configuration →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      Installation
    </h2>

    ```bash pnpm wrap lines theme={null}
    pnpm add @auth0/universal-components-react
    ```

    <h2 id="get-started-2">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    // app/members/page.tsx
    "use client";

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

    export default function MembersPage() {
      return <OrganizationMemberManagement />;
    }
    ```

    <Accordion title="Exemple d'intégration complet">
      ```tsx lines theme={null}
      // app/layout.tsx
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

      export default function RootLayout({ children }: { children: React.ReactNode }) {
        return (
          <html lang="en">
            <body>
              <Auth0ComponentProvider
                mode="proxy"
                domain="YOUR_TENANT.auth0.com"
                proxyConfig={{ baseUrl: "/api/auth" }}
              >
                {children}
              </Auth0ComponentProvider>
            </body>
          </html>
        );
      }
      ```

      ```tsx lines theme={null}
      // app/members/page.tsx
      "use client";

      import React from "react";
      import { OrganizationMemberManagement } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";
      import { auditLog } from "@/lib/audit-log";

      export default function MembersPage() {
        const router = useRouter();

        return (
          <div className="max-w-5xl mx-auto p-6">
            <OrganizationMemberManagement
              createInvitationAction={{
                onBefore: (input) => {
                  const email = input.invitees[0]?.email ?? "";
                  return email.endsWith("@example.com");
                },
                onAfter: (input, createdInvitation) => {
                  auditLog.record({
                    action: "invitation_created",
                    email: input.invitees[0]?.email,
                    invitationId: createdInvitation.id,
                  });
                },
              }}
              viewMemberDetailsAction={{
                onAfter: ({ userId, tab }) =>
                  router.push(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
              }}
              removeFromOrganizationAction={{
                onBefore: (userId) =>
                  window.confirm(`Remove member ${userId} from the organization?`),
                onAfter: (userId) => {
                  auditLog.record({ action: "member_removed", userId });
                  router.refresh();
                },
              }}
              assignRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_assigned", userId, roleIds });
                },
              }}
              customMessages={{ header: { title: "Team Members" } }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration Auth0 requise** — Assurez-vous que votre locataire est configuré avec l'API My Organization. [Consulter le guide de configuration →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      Installation
    </h2>

    Installez le composant avec l'interface de ligne de commande shadcn à partir du registre GitHub :

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-management
    ```

    Cette commande installe le code source du composant React dans `src/components/auth0/my-organization/`, ainsi que les dépendances et `@auth0/universal-components-core`.

    <h2 id="get-started-3">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";

    export function MembersPage() {
      return <OrganizationMemberManagement />;
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { auditLog } from "./lib/audit-log";

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

        return (
          <OrganizationMemberManagement
            createInvitationAction={{
              onBefore: (input) => {
                const email = input.invitees[0]?.email ?? "";
                return email.endsWith("@example.com");
              },
              onAfter: (input, createdInvitation) => {
                auditLog.record({
                  action: "invitation_created",
                  email: input.invitees[0]?.email,
                  invitationId: createdInvitation.id,
                });
              },
            }}
            viewMemberDetailsAction={{
              onAfter: ({ userId, tab }) =>
                navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
            }}
            removeFromOrganizationAction={{
              onBefore: (userId) =>
                window.confirm(`Remove member ${userId} from the organization?`),
              onAfter: (userId) => {
                auditLog.record({ action: "member_removed", userId });
                navigate("/members");
              },
            }}
            assignRolesAction={{
              onAfter: ({ userId, roleIds }) => {
                auditLog.record({ action: "roles_assigned", userId, roleIds });
              },
            }}
            customMessages={{ header: { title: "Team Members" } }}
            styling={{
              variables: {
                light: { "--color-primary": "#4f46e5" },
                dark: { "--color-primary": "#818cf8" },
              },
            }}
          />
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
          >
            <Auth0ComponentProvider>
              <MembersPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>
</Tabs>

<h2 id="props">
  Props
</h2>

<h3 id="display-props">
  Props d'affichage
</h3>

Les props d'affichage déterminent le rendu du composant sans en modifier le comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

| Prop | Type | Description |
| :- | :- | :- |
| `hideHeader` | `boolean` | Masquer la section d'en-tête du composant (titre et description). Valeur par défaut : `false` |
| `readOnly` | `boolean` | Désactiver toutes les actions de mutation (inviter, révoquer, renvoyer, retirer, assigner). Valeur par défaut : `false` |

***

<h3 id="action-props">
  Props d’action
</h3>

Les props d’action gèrent les interactions utilisateur et définissent ce qui se passe lorsque les utilisateurs effectuent des opérations sur les membres et les invitations. Utilisez les hooks de cycle de vie (`onBefore`, `onAfter`) pour intégrer le routage et les analyses de votre application.

| Prop | Type | Description |
| :- | :- | :- |
| `createInvitationAction` | `ComponentAction<CreateInvitationInput, MemberInvitation>` | Action d’invitation de membres. |
| `revokeInvitationAction` | `ComponentAction<MemberInvitation[]>` | Action de révocation d’une invitation. |
| `resendInvitationAction` | `ComponentAction<MemberInvitation, MemberInvitation>` | Action de renvoi d’une invitation. |
| `viewMemberDetailsAction` | `ComponentAction<ViewMemberDetailsParams>` | Action d’affichage des détails d’un membre. |
| `removeFromOrganizationAction` | `ComponentAction<string>` | Action de suppression d’un membre. |
| `assignRolesAction` | `ComponentAction` | Attribution de rôles. Les hooks reçoivent `{ userId, roleIds }`. |

**createInvitationAction**

**Type :** `ComponentAction<CreateInvitationInput, MemberInvitation>`

Contrôle la création d’invitations (jusqu’à 10 destinataires par demande).

* `onBefore(input)` s’exécute de façon synchrone avant l’envoi. Retournez `false` pour annuler.
* `onAfter(input, createdInvitation)` s’exécute après la création de l’invitation.

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  createInvitationAction={{
    onBefore: (input) => {
      const email = input.invitees[0]?.email ?? "";
      return email.endsWith("@example.com");
    },
    onAfter: (input, createdInvitation) => {
      auditLog.record({
        action: "invitation_created",
        email: input.invitees[0]?.email,
        invitationId: createdInvitation.id,
      });
    },
  }}
/>
```

**Routage des connexions d’invitation**

Le sélecteur d’invitations répertorie les fournisseurs d’identité SSO Entreprise admissibles ainsi que les magasins d’utilisateurs et répertoires d’utilisateurs activés configurés pour l’Organization.

Le sélecteur de connexion interroge les deux sources :

* `GET /my-org/identity-providers` (filtre selon les niveaux d’accès aux membres admissibles)
* `GET /my-org/user-stores` (filtre selon `is_enabled: true`)

```ts theme={null}
type ConnectionOptionType = 'identity_provider' | 'user_store';

interface ConnectionOption {
  id: string;
  name: string;
  type: ConnectionOptionType;
}
```

La charge utile envoyée à `createInvitationAction` est acheminée à l’aide d’un seul identifiant, selon le type de connexion sélectionné :

* **Connexion SSO Entreprise sélectionnée :** la charge utile renseigne `identity_provider_id`.
* **Connexion Magasin d'utilisateurs / Directory sélectionnée :** la charge utile renseigne `user_store_id`.

```ts theme={null}
interface CreateInvitationInput {
  invitees: Array<{
    email: string;
    roles?: string[];
  }>;
  inviter?: {
    name?: string;
  };
  identity_provider_id?: string;
  user_store_id?: string;
  ttl_sec?: number;
}
```

Règles de routage des connexions :

* **Sélection automatique :** si une Organization ne compte qu'une seule connexion admissible, celle-ci est sélectionnée par défaut et demeure modifiable.
* **Aucune connexion :** s'il n'existe aucune connexion admissible, le point d'entrée d'invitation est désactivé et affiche un message explicatif.
* **Révocation et renvoi :** le flux de révocation et de renvoi conserve la source de routage de connexion d'origine (`user_store_id` ou `identity_provider_id`).
* **Admissibilité des connexions :** le sélecteur d'invitation inclut les connexions configurées avec un niveau d'accès de membre `limited` ou `full`.

**revokeInvitationAction**

**Type :** `ComponentAction<MemberInvitation[]>`

Contrôle la révocation des invitations (prend en charge les révocations individuelles et en lot, jusqu'à 10 invitations par lot).

* `onBefore(invitations)` demande une confirmation avant la révocation. Retournez `false` pour annuler.
* `onAfter(invitations)` s'exécute après la révocation des invitations.

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  revokeInvitationAction={{
    onBefore: (invitations) =>
      window.confirm(`Revoke ${invitations.length} invitation(s)?`),
    onAfter: (invitations) => {
      auditLog.record({
        action: "invitations_revoked",
        count: invitations.length,
      });
    },
  }}
/>
```

**resendInvitationAction**

**Type :** `ComponentAction<MemberInvitation, MemberInvitation>`

Contrôle le flux de révocation et de renvoi.

* `onBefore(invitation)` demande une confirmation avant le renvoi. Retournez `false` pour annuler.
* `onAfter(original, newInvitation)` s’exécute après la création d’une nouvelle invitation.

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  resendInvitationAction={{
    onAfter: (original, newInvitation) => {
      auditLog.record({
        action: "invitation_resent",
        originalId: original.id,
        newId: newInvitation.id,
      });
    },
  }}
/>
```

**viewMemberDetailsAction**

**Type :** `ComponentAction<ViewMemberDetailsParams>`

Se déclenche lorsqu’une ligne de membre ou un badge de rôles est sélectionné. Reçoit `{ userId, tab }`. Connectez ceci pour naviguer vers `OrganizationMemberDetail`.

* `onAfter({ userId, tab })` s’exécute lors de la sélection. Conservez `tab` dans l’URL de votre routeur afin d’ouvrir directement l’onglet demandé.

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  viewMemberDetailsAction={{
    onAfter: ({ userId, tab }) =>
      navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
  }}
/>
```

**removeFromOrganizationAction**

**Type :** `ComponentAction<string>`

Contrôle le retrait d’un membre de l’Organization (adhésion seulement ; ne supprime pas le profil utilisateur du magasin d'utilisateurs Auth0). Les deux hooks reçoivent le `userId`.

* `onBefore(userId)` demande une confirmation avant le retrait. Retournez `false` pour annuler.
* `onAfter(userId)` s’exécute après le retrait.

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  removeFromOrganizationAction={{
    onBefore: (userId) =>
      window.confirm(`Remove member ${userId} from the organization?`),
    onAfter: (userId) => {
      auditLog.record({ action: "member_removed", userId });
    },
  }}
/>
```

**assignRolesAction**

**Type :** `ComponentAction<{ userId: string; roleIds: string[] }>`

Se déclenche après l’attribution de rôles dans la fenêtre modale de la ligne. Le nombre de rôles sélectionnés est limité à 10 par demande d’attribution, et un membre peut avoir jusqu’à 50 rôles au total. Les deux hooks reçoivent `{ userId, roleIds }`.

* `onBefore({ userId, roleIds })` valide la sélection. Retournez `false` pour annuler.
* `onAfter({ userId, roleIds })` s’exécute après l’attribution des rôles.

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  assignRolesAction={{
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, roleIds });
    },
  }}
/>
```

***

<h3 id="customization-props">
  Props de personnalisation
</h3>

| Prop | Type | Description |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberManagementMessages>` | Remplacements de libellés et de texte. |
| `styling` | `ComponentStyling<OrganizationMemberManagementClasses>` | Variables CSS et remplacements de classes. |

**customMessages**

Remplacez les textes fournis avec le composant. Chaque champ est facultatif et utilise la valeur par défaut intégrée.

<Accordion title="Groupes de messages courants">
  **header**—En-tête du composant

  * `title`, `description`

  **tabs**—Libellés des onglets

  * `members`, `invitations`

  **count\_capped**—Indicateur de nombre plafonné

  * Texte affiché lorsque le nombre de membres ou d’invitations dépasse 1 000 éléments

  **member.table**—Affichage du tableau des membres

  * `columns.name`, `columns.roles`, `columns.last_login`
  * `empty_message`, `search_placeholder`

  **member.actions**—Actions associées aux lignes des membres

  * `menu_label`, `remove_from_organization`, `view_details`

  **member.assign\_roles**—Fenêtre modale d’attribution de rôles

  * `title`, `description`
  * `roles_label`, `roles_placeholder`
  * `submit_button`, `cancel_button`, `no_roles_available`

  **member.remove\_from\_organization**—Confirmation de suppression d’un membre

  * `title`, `description`
  * `confirm_button`, `cancel_button`

  **member.success / member.error**—États des actions sur les membres

  * `success.removed_from_organization`, `success.role_assigned`
  * `error.fetch_failed`, `error.assign_roles_failed`, `error.remove_from_organization_failed`

  **invitation.table**—Affichage du tableau des invitations

  * `columns.email`, `columns.status`, `columns.inviter`
  * `columns.created_at`, `columns.expires_at`, `columns.roles`
  * `empty_message`, `search_placeholder`, `showing_results`
  * `status_pending`, `status_expired`

  **invitation.actions**—Actions associées aux lignes des invitations

  * `menu_label`, `view_details`, `copy_url`, `revoke_and_resend`, `revoke`

  **invitation.create**—Fenêtre modale de création d’une invitation

  * `title`, `description`
  * `email_label`, `email_placeholder`, `email_helper`
  * `email_limit_error`, `email_invalid_error`, `email_duplicate_error`, `email_required_error`
  * `roles_label`, `roles_placeholder`, `roles_max_selection_message`, `roles_searching_message`
  * `connection_label`, `connection_placeholder`, `connection_helper`
  * `connection_group_user_store`, `connection_group_identity_provider`
  * `submit_button`, `creating`, `cancel_button`

  **invitation.details**—Panneau de détails de l’invitation

  * `title`, `email_label`, `status_label`
  * `roles_label`, `connection_label`
  * `created_at_label`, `expires_at_label`, `invited_by_label`, `invitation_url_label`
  * `copy_url_button`, `close_button`, `revoke_button`, `resend_button`

  **invitation.revoke / invitation.revoke\_resend**—Confirmations de révocation

  * `revoke.title`, `revoke.description`, `revoke.confirm_button`, `revoke.cancel_button`
  * `revoke_resend.title`, `revoke_resend.description`, `revoke_resend.confirm_button`, `revoke_resend.cancel_button`

  **invitation.bulk\_revoke**—Confirmation de révocation en masse

  * `button`, `button_plural`, `count`, `count_plural`, `success`, `max_selection_message`
  * `confirm.title`, `confirm.title_plural`, `confirm.description`, `confirm.description_plural`
  * `confirm.confirm_button`, `confirm.confirm_button_plural`, `confirm.cancel_button`

  **invitation.error / invitation.success**—États et alertes des invitations

  * `success.url_copied`, `success.invitation_resent`
  * `error.fetch_failed`, `error.fetch_roles_failed`, `error.create_failed`
  * `error.revoke_failed`, `error.resend_failed`, `error.revoke_resend_failed`
  * `error.bulk_revoke_failed`, `error.connection_required`, `error.copy_url_failed`
</Accordion>

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  customMessages={{
    header: {
      title: "Team Members",
      description: "Manage who has access to your organization",
    },
    tabs: { members: "Members", invitations: "Pending Invites" },
    member: {
      table: {
        empty_message: "No members yet.",
        search_placeholder: "Search by name or email...",
      },
      actions: {
        remove_from_organization: "Remove",
      },
    },
    invitation: {
      table: { empty_message: "No pending invitations." },
      create: { title: "Invite a team member", submit_button: "Send Invite" },
    },
  }}
/>
```

***

**style**

Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Les variables prennent en charge les permissions `light`, `dark` et `common`. Les surcharges de classes ciblent des emplacements nommés dans l’arborescence des composants.

<Accordion title="Options de style disponibles">
  **Variables**—Propriétés personnalisées CSS

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

  **Classes**—Surcharges de classes d’éléments ciblés

  * `OrganizationMemberManagement-root`
  * `OrganizationMemberManagement-header`
  * `OrganizationMemberManagement-tabs`
  * `OrganizationInvitationTab-root`
  * `OrganizationInvitationTab-table`
  * `OrganizationInvitationTab-createModal`
  * `OrganizationInvitationTab-detailsModal`
  * `OrganizationInvitationTab-revokeModal`
  * `OrganizationInvitationTab-revokeResendModal`
  * `OrganizationInvitationTab-bulkRevokeModal`
  * `OrganizationInvitationTab-searchInput`
  * `OrganizationInvitationTab-filterDropdown`
  * `OrganizationInvitationTab-pagination`
</Accordion>

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberManagement-root": "rounded-xl border shadow-sm",
      "OrganizationMemberManagement-header": "mb-4",
      "OrganizationInvitationTab-table": "mt-4",
    },
  }}
/>
```

***

<h2 id="advanced-customization">
  Personnalisation avancée
</h2>

<h3 id="available-hooks">
  Hooks disponibles
</h3>

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 |
| :- | :- |
| `useOrganizationMemberManagement` | Données sur les membres et les invitations, état des onglets, de la pagination et des fenêtres modales, et gestionnaires d’interactions. |