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

# Web で Organization のメンバーを管理する

> 2 つのタブで構成されたレイアウトで、個々の organization メンバーのプロフィールと割り当てられたロールを確認・管理し、ライフサイクル全体を制御できます。

> [!WARNING]
>
> **Auth0 Universal Components機能は現在、です。**

`OrganizationMemberDetail` コンポーネントは、個々の [organization](https://auth0.com/docs/ja-jp/manage-users/organizations.md) メンバーのプロフィールと割り当て済みロールを表示・管理するための統合インターフェースを提供します。

読み込み中

Preview of the Organization Member Detail component

> [tab] React
>
> ## セットアップ要件
>
> **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## インストール
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## はじめに
>
> ルートからコンポーネントに `userId` を渡します。戻るボタンでメンバー一覧に戻るように、`onBack` をルーターに接続してください。
>
> ```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] 統合の完全な例
> >
> > ```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(`Remove member ${removedUserId} from the organization?`),
> >           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: "Back to Members",
> >               roles: { assign_button: "Assign Roles" },
> >             },
> >           },
> >         }}
> >         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
>
> ## セットアップ要件
>
> **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## インストール
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## はじめに
>
> ```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] 完全な統合例
> >
> > ```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
>
> ## セットアップ要件
>
> **Auth0の設定が必要です**—テナントで My Organization API が設定されていることを確認してください。[セットアップガイドを見る →](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## インストール
>
> GitHub Registry を利用して、shadcn CLI でコンポーネントをインストールします。
>
> ```bash wrap lines theme={null}
> npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-detail
> ```
>
> これにより、React コンポーネントのソースコードが `src/components/auth0/my-organization/` にインストールされ、依存関係と `@auth0/universal-components-core` も併せて追加されます。
>
> ## はじめに
>
> ```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] 統合の完全な例
> >
> > ```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>
> >   );
> > }
> > ```

## プロップ

### 必須プロップ

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `userId` | `string` | 表示するメンバーの Auth0 ユーザー ID (例: `auth0\|64abc...`) 。 |

***

### 表示プロップ

表示プロップは、コンポーネントの動作に影響を与えずに、レンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `hideHeader` | `boolean` | コンポーネントのヘッダーセクション(タイトルと説明)を非表示にします。現在の早期アクセスリリースでは、このプロップを指定しても Member Detail のヘッダーは非表示になりません。デフォルト: `false` |
| `readOnly` | `boolean` | ロール管理とメンバー削除の操作を無効にします。デフォルト: `false` |
| `initialTab` | `'details' \| 'roles'` | 最初に表示するタブです。ルーターのクエリパラメーターを使って、ここにディープリンクできます。デフォルト: `'details'` |

***

### アクションプロップ

アクションプロップはユーザー操作を処理します。ライフサイクルフック (`onBefore`、`onAfter`) を使って、アプリケーションのルーティングや分析と連携できます。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `onBack` | `() => void` | 戻るボタンのクリックハンドラー。 |
| `removeFromOrganizationAction` | `ComponentAction<string>` | メンバーを削除するアクション。 |
| `assignRolesAction` | `ComponentAction` | ロールを割り当てます。フックは `{ userId, roleIds }` を受け取ります。 |
| `removeRolesAction` | `ComponentAction` | ロールを削除します。フックは `{ userId, roleIds }` を受け取ります。 |

**onBack**

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

ヘッダーの戻るボタンを選択したとき、およびメンバー削除後に自動的に発火します。このコールバックをルーターに接続して、メンバー一覧に戻れるようにします。

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

**removeFromOrganizationAction**

**型:** `ComponentAction<string>`

Organization からのメンバー削除を制御します (対象はメンバーシップのみで、Auth0 のユーザーストアからユーザープロファイルを削除するわけではありません) 。メンバーシップの削除に成功すると、コンポーネントはアクションのコールバックと `onBack` を呼び出します。`onAfter` が非同期処理を行う場合は、実行順序に依存しないでください。

* `onBefore(userId)` は削除前に確認を行います。キャンセルするには `false` を返します。
* `onAfter(userId)` は削除後に実行されます。

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

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

ロールタブからロールを割り当てた後に発火します。1回の割り当てリクエストで選択できるロールは最大10個、1人のメンバーに割り当てられるロールは合計50個までです。いずれのフックも `{ userId, roleIds }` を受け取ります。

* `onBefore({ userId, roleIds })` は選択内容を検証します。キャンセルするには `false` を返します。
* `onAfter({ userId, roleIds })` は監査ログへの書き込みやロールバッジの更新を行います。

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

**removeRolesAction**

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

ロールテーブルで割り当て済みのロールを削除するときに実行されます (1回の削除リクエストで最大10個のロールに対応) 。どちらのフックも `{ userId, roleIds }` を受け取ります。

* `onBefore({ userId, roleIds })` は、ロールを削除する前に確認を行います。キャンセルするには `false` を返します。
* `onAfter({ userId, roleIds })` は、状態または監査ログを更新します。

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

***

### カスタマイズ用プロップ

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberDetailMessages>` | 文言とテキストの上書き。 |
| `styling` | `ComponentStyling<OrganizationMemberDetailClasses>` | CSS 変数とクラスの上書き。 |

**customMessages**

コンポーネントに組み込まれているテキストを上書きします。すべてのフィールドは省略可能で、省略した場合は組み込みのデフォルト値が使用されます。

> [accordion] 共通のメッセージグループ
>
> **member.detail**—主要なビューとタブ
>
> * `back_button`, `tabs.details`, `tabs.roles`
>
> **member.detail.user\_details**—プロフィール表示
>
> * `title`, `name`, `email`, `phone_number`, `created_at`, `last_login`
>
> **member.detail.actions.remove\_from\_organization**—削除操作とダイアログ
>
> * `title`, `description`, `button`
> * `modal.title`, `modal.description`, `modal.cancel_button`, `modal.confirm_button`
> * `success`
>
> **member.detail.roles**—ロールタブとテーブル
>
> * `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**—ロール割り当てモーダル
>
> * `title`, `description`
> * `roles_label`, `roles_placeholder`
> * `submit_button`, `cancel_button`, `no_roles_available`
>
> **member.detail.roles.remove\_confirm**—ロール削除の確認ダイアログ
>
> * `title`, `title_plural`, `description`, `description_plural`
> * `confirm_button`, `cancel_button`
>
> **member.detail.error**—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**

CSS変数とクラスのオーバーライドで外観をカスタマイズします。変数は`light`、`dark`、`common`のスコープに対応しています。クラスのオーバーライドは、コンポーネントツリー内の名前付きスロットを対象とします。

> [accordion] 利用可能なスタイリングオプション
>
> **Variables**—CSSカスタムプロパティ
>
> * `common`—すべてのテーマに適用
> * `light`—ライトテーマのみ
> * `dark`—ダークテーマのみ
>
> **Classes**—対象要素のクラスオーバーライド
>
> * `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",
    },
  }}
/>
```

***

## 高度なカスタマイズ

### 利用可能なフック

これらのフックは、UIを持たない基盤ロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

| フック | 説明 |
| :- | :- |
| `useOrganizationMemberDetail` | 独自のメンバー詳細インターフェイスを構築するための、メンバー、ロール、モーダル、操作の状態。 |