> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Gérer un membre d'une Organization sur le Web

> Consultez et gérez le profil d'un membre d'une Organization ainsi que les rôles qui lui sont attribués, dans une interface à deux onglets offrant une gestion complète du cycle de vie.

> [!WARNING]
>
> **La fonctionnalité Auth0 Universal Components est en .**

Le composant `OrganizationMemberDetail` offre une interface unifiée pour consulter et gérer le profil et les rôles attribués d'un membre d'une [organization](https://auth0.com/docs/fr-ca/manage-users/organizations.md).

Chargement

Aperçu du composant Organization Member Detail

> [tab] React
>
> ## Exigences de configuration
>
> **Configuration Auth0 requise** — Assurez-vous que votre locataire est configuré avec l'API My Organization. [Consulter le guide de configuration →](https://auth0.com/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## Installation
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## Pour commencer
>
> Transmettez un `userId` de votre route au composant. Reliez `onBack` à votre routeur afin que le bouton de retour ramène à la liste des membres.
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberDetail } from "@auth0/universal-components-react";
> import { useNavigate, useParams } from "react-router-dom";
>
> export function MemberDetailPage() {
>   const { userId } = useParams<{ userId: string }>();
>   const navigate = useNavigate();
>
>   return (
>     <OrganizationMemberDetail
>       userId={userId!}
>       onBack={() => navigate("/members")}
>     />
>   );
> }
> ```
>
> > [accordion] Exemple d'intégration complet
> >
> > ```tsx lines theme={null}
> > import React from "react";
> > import { OrganizationMemberDetail } from "@auth0/universal-components-react";
> > import { Auth0Provider } from "@auth0/auth0-react";
> > import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
> > import { useNavigate, useParams, useSearchParams } from "react-router-dom";
> > import { auditLog } from "./lib/audit-log";
> >
> > function MemberDetailPage() {
> >   const { userId } = useParams<{ userId: string }>();
> >   const [searchParams] = useSearchParams();
> >   const navigate = useNavigate();
> >   const initialTab = searchParams.get("tab") === "roles" ? "roles" : "details";
> >
> >   return (
> >     <div className="max-w-3xl mx-auto p-6">
> >       <OrganizationMemberDetail
> >         userId={userId!}
> >         initialTab={initialTab}
> >         onBack={() => navigate("/members")}
> >         removeFromOrganizationAction={{
> >           onBefore: (removedUserId) =>
> >             window.confirm(`Retirer le membre ${removedUserId} de l'organisation ?`),
> >           onAfter: (removedUserId) => {
> >             auditLog.record({ action: "member_removed", userId: removedUserId });
> >           },
> >         }}
> >         assignRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_assigned", userId, roleIds });
> >           },
> >         }}
> >         removeRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_removed", userId, roleIds });
> >           },
> >         }}
> >         customMessages={{
> >           member: {
> >             detail: {
> >               back_button: "Retour aux membres",
> >               roles: { assign_button: "Attribuer des rôles" },
> >             },
> >           },
> >         }}
> >         styling={{
> >           variables: {
> >             light: { "--color-primary": "#4f46e5" },
> >             dark: { "--color-primary": "#818cf8" },
> >           },
> >           classes: {
> >             "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
> >           },
> >         }}
> >       />
> >     </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>
> >         <MemberDetailPage />
> >       </Auth0ComponentProvider>
> >     </Auth0Provider>
> >   );
> > }
> > ```

> [tab] Next.js
>
> ## Exigences de configuration
>
> **Configuration Auth0 requise** — Assurez-vous que votre locataire est configuré avec l'API My Organization. [Consulter le guide de configuration →](https://auth0.com/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## Installation
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## Commencer
>
> ```tsx wrap lines theme={null}
> // app/members/[userId]/page.tsx
> "use client";
>
> import { OrganizationMemberDetail } from "@auth0/universal-components-react";
> import { useRouter, useParams } from "next/navigation";
>
> export default function MemberDetailPage() {
>   const { userId } = useParams<{ userId: string }>();
>   const router = useRouter();
>
>   return (
>     <OrganizationMemberDetail
>       userId={userId}
>       onBack={() => router.push("/members")}
>     />
>   );
> }
> ```
>
> > [accordion] 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/[userId]/page.tsx
> > "use client";
> >
> > import React from "react";
> > import { OrganizationMemberDetail } from "@auth0/universal-components-react";
> > import { useRouter, useParams, useSearchParams } from "next/navigation";
> > import { auditLog } from "@/lib/audit-log";
> >
> > export default function MemberDetailPage() {
> >   const { userId } = useParams<{ userId: string }>();
> >   const searchParams = useSearchParams();
> >   const router = useRouter();
> >   const initialTab = searchParams.get("tab") === "roles" ? "roles" : "details";
> >
> >   return (
> >     <div className="max-w-3xl mx-auto p-6">
> >       <OrganizationMemberDetail
> >         userId={userId}
> >         initialTab={initialTab}
> >         onBack={() => router.push("/members")}
> >         removeFromOrganizationAction={{
> >           onBefore: (memberId) =>
> >             window.confirm(`Remove member ${memberId} from the organization?`),
> >           onAfter: (memberId) => {
> >             auditLog.record({ action: "member_removed", userId: memberId });
> >             router.push("/members");
> >           },
> >         }}
> >         assignRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_assigned", userId, roleIds });
> >           },
> >         }}
> >         removeRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_removed", userId, roleIds });
> >           },
> >         }}
> >         customMessages={{
> >           member: {
> >             detail: {
> >               back_button: "Back to Members",
> >               roles: { assign_button: "Assign Roles" },
> >             },
> >           },
> >         }}
> >         styling={{
> >           variables: {
> >             light: { "--color-primary": "#4f46e5" },
> >             dark: { "--color-primary": "#818cf8" },
> >           },
> >         }}
> >       />
> >     </div>
> >   );
> > }
> > ```

> [tab] shadcn
>
> ## Exigences de configuration
>
> **Configuration Auth0 requise** — Assurez-vous que votre locataire est configuré avec l'API My Organization. [Voir le guide de configuration →](https://auth0.com/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## Installation
>
> Installez le composant avec la CLI shadcn à partir du GitHub Registry :
>
> ```bash wrap lines theme={null}
> npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-detail
> ```
>
> 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`.
>
> ## Démarrage
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberDetail } from "@/components/auth0/my-organization/organization-member-detail";
> import { useNavigate, useParams } from "react-router-dom";
>
> export function MemberDetailPage() {
>   const { userId } = useParams<{ userId: string }>();
>   const navigate = useNavigate();
>
>   return (
>     <OrganizationMemberDetail
>       userId={userId!}
>       onBack={() => navigate("/members")}
>     />
>   );
> }
> ```
>
> > [accordion] Exemple complet d’intégration
> >
> > ```tsx lines theme={null}
> > import React from "react";
> > import { OrganizationMemberDetail } from "@/components/auth0/my-organization/organization-member-detail";
> > import { Auth0Provider } from "@auth0/auth0-react";
> > import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
> > import { useNavigate, useParams, useSearchParams } from "react-router-dom";
> > import { auditLog } from "./lib/audit-log";
> >
> > function MemberDetailPage() {
> >   const { userId } = useParams<{ userId: string }>();
> >   const [searchParams] = useSearchParams();
> >   const navigate = useNavigate();
> >   const initialTab = searchParams.get("tab") === "roles" ? "roles" : "details";
> >
> >   return (
> >     <div className="max-w-3xl mx-auto p-6">
> >       <OrganizationMemberDetail
> >         userId={userId!}
> >         initialTab={initialTab}
> >         onBack={() => navigate("/members")}
> >         removeFromOrganizationAction={{
> >           onBefore: (removedUserId) =>
> >             window.confirm(`Remove member ${removedUserId} from the organization?`),
> >           onAfter: (removedUserId) => {
> >             auditLog.record({ action: "member_removed", userId: removedUserId });
> >             navigate("/members");
> >           },
> >         }}
> >         assignRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_assigned", userId, roleIds });
> >           },
> >         }}
> >         removeRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_removed", userId, roleIds });
> >           },
> >         }}
> >         customMessages={{
> >           member: {
> >             detail: {
> >               back_button: "Back to Members",
> >               roles: { assign_button: "Assign Roles" },
> >             },
> >           },
> >         }}
> >         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>
> >         <MemberDetailPage />
> >       </Auth0ComponentProvider>
> >     </Auth0Provider>
> >   );
> > }
> > ```

## Props

### Props requis

| Prop | Type | Description |
| :- | :- | :- |
| `userId` | `string` | Identifiant utilisateur Auth0 du membre à afficher (par exemple, `auth0\|64abc...`). |

***

### Props d'affichage

Les props d'affichage contrôlent 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` | Masque la section d'en-tête du composant (titre et description). Dans la version d'accès anticipé actuelle, cette prop ne masque pas l'en-tête du détail du membre. Valeur par défaut : `false` |
| `readOnly` | `boolean` | Désactive la gestion des rôles et les actions de retrait de membres. Valeur par défaut : `false` |
| `initialTab` | `'details' \| 'roles'` | L'onglet affiché au départ. Créez un lien profond vers cet onglet à l'aide des paramètres de requête du routeur. Valeur par défaut : `'details'` |

***

### Props d’action

Les props d’action gèrent les interactions de l’utilisateur. Utilisez les hooks de cycle de vie (`onBefore`, `onAfter`) pour les intégrer au routage et aux outils d’analytique de votre application.

| Prop | Type | Description |
| :- | :- | :- |
| `onBack` | `() => void` | Gestionnaire de clic du bouton Retour. |
| `removeFromOrganizationAction` | `ComponentAction<string>` | Action de suppression d’un membre. |
| `assignRolesAction` | `ComponentAction` | Attribue des rôles. Les hooks reçoivent `{ userId, roleIds }`. |
| `removeRolesAction` | `ComponentAction` | Supprime des rôles. Les hooks reçoivent `{ userId, roleIds }`. |

**onBack**

**Type :** `() => void`

Se déclenche lorsque l’utilisateur sélectionne le bouton Retour dans l’en-tête, ainsi qu’automatiquement après la suppression d’un membre. Connectez ce rappel à votre routeur pour revenir à la liste des membres.

```tsx wrap lines theme={null}
<OrganizationMemberDetail userId={userId} onBack={() => navigate("/members")} />
```

**removeFromOrganizationAction**

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

Contrôle le retrait d'un membre de l'organization (l'adhésion seulement; le profil utilisateur n'est pas supprimé du magasin d'utilisateurs Auth0). Une fois le retrait effectué, le composant appelle le rappel d'action ainsi que `onBack`. Ne vous fiez pas à l'ordre d'exécution si `onAfter` effectue des opérations asynchrones.

* `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}
<OrganizationMemberDetail
  userId={userId}
  onBack={() => navigate("/members")}
  removeFromOrganizationAction={{
    onBefore: (memberId) =>
      window.confirm(`Remove member ${memberId} from the organization?`),
    onAfter: (memberId) => {
      auditLog.record({ action: "member_removed", userId: memberId });
    },
  }}
/>
```

**assignRolesAction**

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

Se déclenche après l'attribution de rôles depuis l'onglet des rôles. Le nombre de rôles sélectionnés est limité à 10 par demande d'attribution, et un même membre peut se voir attribuer 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 })` écrit dans un journal d'audit ou actualise les badges de rôles.

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

**removeRolesAction**

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

Se déclenche lors du retrait de rôles attribués dans le tableau des rôles (prend en charge jusqu'à 10 rôles par demande de retrait). Les deux hooks reçoivent `{ userId, roleIds }`.

* `onBefore({ userId, roleIds })` demande une confirmation avant le retrait des rôles. Retournez `false` pour annuler.
* `onAfter({ userId, roleIds })` actualise l'état ou les journaux d'audit.

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  removeRolesAction={{
    onBefore: ({ roleIds }) =>
      window.confirm(`Remove ${roleIds.length} role(s)?`),
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_removed", userId, roleIds });
    },
  }}
/>
```

***

### Props de personnalisation

| Prop | Type | Description |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberDetailMessages>` | Remplacements des textes et des libellés. |
| `styling` | `ComponentStyling<OrganizationMemberDetailClasses>` | Remplacements des variables CSS et des classes. |

**customMessages**

Remplacez les textes fournis avec le composant. Chaque champ est facultatif et utilise la valeur par défaut intégrée s'il n'est pas défini.

> [accordion] Groupes de messages courants
>
> **member.detail** — Vues et onglets principaux
>
> * `back_button`, `tabs.details`, `tabs.roles`
>
> **member.detail.user\_details** — Affichage du profil
>
> * `title`, `name`, `email`, `phone_number`, `created_at`, `last_login`
>
> **member.detail.actions.remove\_from\_organization** — Action et boîte de dialogue de retrait
>
> * `title`, `description`, `button`
> * `modal.title`, `modal.description`, `modal.cancel_button`, `modal.confirm_button`
> * `success`
>
> **member.detail.roles** — Onglet et tableau des rôles
>
> * `title`, `description`, `assign_button`
> * `roles_selected`, `roles_selected_plural`, `max_selection_message`, `searching_message`
> * `table.name`, `table.description`, `table.empty_message`, `table.remove_button_label`
>
> **member.detail.roles.assign\_modal** — Fenêtre modale d'attribution de rôle
>
> * `title`, `description`
> * `roles_label`, `roles_placeholder`
> * `submit_button`, `cancel_button`, `no_roles_available`
>
> **member.detail.roles.remove\_confirm** — Boîte de dialogue de confirmation du retrait de rôle
>
> * `title`, `title_plural`, `description`, `description_plural`
> * `confirm_button`, `cancel_button`
>
> **member.detail.error** — Erreurs d'API
>
> * `fetch_failed`, `fetch_roles_failed`, `remove_from_organization_failed`, `assign_role_failed`, `remove_role_failed`

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  customMessages={{
    member: {
      detail: {
        back_button: "Back to Members",
        tabs: { details: "Profile", roles: "Permissions" },
        roles: {
          assign_button: "Add Permission",
          table: { empty_message: "No permissions assigned yet." },
        },
        actions: {
          remove_from_organization: {
            title: "Remove from Organization",
            button: "Remove",
            modal: {
              title: "Remove Member",
              confirm_button: "Yes, Remove",
            },
          },
        },
      },
    },
  }}
/>
```

***

**styling**

Personnalisez l'apparence à l'aide de variables CSS et de remplacements de classes. Les variables prennent en charge les portées `light`, `dark` et `common`. Les remplacements de classes ciblent des emplacements nommés dans l'arborescence du composant.

> [accordion] Options de personnalisation disponibles
>
> **Variables**—propriétés CSS personnalisées
>
> * `common`—appliquées à tous les thèmes
> * `light`—thème clair seulement
> * `dark`—thème sombre seulement
>
> **Classes**—remplacements de classes sur des éléments ciblés
>
> * `OrganizationMemberDetail-root`
> * `OrganizationMemberDetail-header`
> * `OrganizationMemberDetail-tabs`
> * `OrganizationMemberDetail-detailsTab`
> * `OrganizationMemberDetail-rolesTab`
> * `MemberRemoveFromOrgModal-dialogContent`
> * `OrganizationMemberRemoveRoleModal-dialogContent`
> * `OrganizationMemberAssignRolesModal-dialogContent`

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
      "OrganizationMemberDetail-header": "mb-6",
      "OrganizationMemberDetail-rolesTab": "mt-4",
    },
  }}
/>
```

***

## Personnalisation avancée

### Hooks disponibles

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

| Hook | Description |
| :- | :- |
| `useOrganizationMemberDetail` | État du membre, du rôle, de la fenêtre modale et des interactions, pour créer une interface personnalisée de détail des membres. |