> ## 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.

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 `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](/docs/fr-ca/manage-users/organizations).

<ComponentLoader componentSelector="organization-member-detail" componentPreviewText="Aperçu du composant Organization Member Detail" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      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">
      Installation
    </h2>

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

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

    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 title="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>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      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-2">
      Installation
    </h2>

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

    <h2 id="get-started-2">
      Commencer
    </h2>

    ```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 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/[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>
        );
      }
      ```
    </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. [Voir 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 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`.

    <h2 id="get-started-3">
      Démarrage
    </h2>

    ```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 title="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>
        );
      }
      ```
    </Accordion>
  </Tab>
</Tabs>

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

<h3 id="required-props">
  Props requis
</h3>

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

***

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

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'` |

***

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

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

***

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

| 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 title="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`
</Accordion>

```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 title="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`
</Accordion>

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

***

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

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

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. |