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

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.

React
Next.js
shadcn

Exigences de configuration

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

Installation

pnpm

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.

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

Exemple d'intégration complet

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

Exigences de configuration

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

Installation

pnpm

pnpm add @auth0/universal-components-react

Commencer

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

Exemple d’intégration complet

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

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

Exigences de configuration

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

Installation

Installez le composant avec la CLI shadcn à partir du GitHub Registry :

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

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

Exemple complet d’intégration

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.

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

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

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

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

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

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

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

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

Composants Web

Composants iOS

Composants Android

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

Exigences de configuration

Installation

Pour commencer

Exigences de configuration

Installation

Commencer

Exigences de configuration

Installation

Démarrage

Props

Props requis

Props d’affichage

Props d’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Exigences de configuration

​Installation

​Commencer

​Exigences de configuration

​Installation

​Démarrage

​Props

​Props requis

​Props d’affichage

​Props d’action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Exigences de configuration

Installation

Commencer

Exigences de configuration

Installation

Démarrage

Props

Props requis

Props d’affichage

Props d’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles