> ## 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 メンバー管理

> タブ形式のインターフェースで org のメンバーと保留中の招待を管理し、招待のライフサイクル全体を制御できます。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  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 && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{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="読み込み中" 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" />

`OrganizationMemberManagement` コンポーネントは、[organization](/docs/ja-jp/manage-users/organizations) のメンバーと招待を一元的に管理するためのインターフェースを提供します。

<ComponentLoader componentSelector="organization-member-management" componentPreviewText="Organization Member Management コンポーネントのプレビュー" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      セットアップ要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation">
      インストール
    </h2>

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

    <h2 id="get-started">
      はじめに
    </h2>

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

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

    管理者が個々のメンバーを表示できるようにするには、`viewMemberDetailsAction` に [`OrganizationMemberDetail`](/docs/ja-jp/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="統合の完全な例">
      ```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">
      セットアップ要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      インストール
    </h2>

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

    <h2 id="get-started-2">
      はじめに
    </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="統合の完全な例">
      ```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">
      セットアップ要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      インストール
    </h2>

    GitHub Registryを使用し、shadcn CLIでコンポーネントをインストールします。

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

    これにより、React コンポーネントのソースコードが `src/components/auth0/my-organization/` にインストールされ、併せて依存関係と `@auth0/universal-components-core` もインストールされます。

    <h2 id="get-started-3">
      はじめに
    </h2>

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

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

    <Accordion title="統合の完全な例">
      ```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">
  プロップ
</h2>

<h3 id="display-props">
  表示プロップ
</h3>

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

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `hideHeader` | `boolean` | コンポーネントのヘッダーセクション (タイトルと説明) を非表示にします。デフォルト: `false` |
| `readOnly` | `boolean` | すべての変更アクション (招待、取り消し、再送信、削除、割り当て) を無効にします。デフォルト: `false` |

***

<h3 id="action-props">
  アクションプロップ
</h3>

アクションプロップはユーザー操作を処理し、メンバーや招待に関する操作を行った際の動作を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用して、アプリケーションのルーティングや分析と連携できます。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `createInvitationAction` | `ComponentAction<CreateInvitationInput, MemberInvitation>` | メンバーを招待するアクション。 |
| `revokeInvitationAction` | `ComponentAction<MemberInvitation[]>` | 招待を取り消すアクション。 |
| `resendInvitationAction` | `ComponentAction<MemberInvitation, MemberInvitation>` | 招待を再送するアクション。 |
| `viewMemberDetailsAction` | `ComponentAction<ViewMemberDetailsParams>` | メンバーの詳細を表示するアクション。 |
| `removeFromOrganizationAction` | `ComponentAction<string>` | メンバーを削除するアクション。 |
| `assignRolesAction` | `ComponentAction` | ロールを割り当てるアクション。フックは `{ userId, roleIds }` を受け取ります。 |

**createInvitationAction**

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

招待の作成を制御します (1回のリクエストで最大10人まで招待可能) 。

* `onBefore(input)` は送信前に同期的に実行されます。キャンセルするには `false` を返します。
* `onAfter(input, createdInvitation)` は招待の作成後に実行されます。

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

**招待の接続ルーティング**

招待ピッカーには、対象となるエンタープライズ SSO IDプロバイダーと、その Organization に設定され有効化されているユーザーストア / ユーザーディレクトリが一覧表示されます。

接続セレクターは、次の両方のソースに問い合わせます。

* `GET /my-org/identity-providers` (対象となるメンバーのアクセスレベルで絞り込み)
* `GET /my-org/user-stores` (`is_enabled: true` で絞り込み)

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

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

`createInvitationAction` に送信されるペイロードでは、選択した接続の種類に応じて、該当する識別子が 1 つだけ使用されます。

* **エンタープライズ SSO 接続を選択した場合:** ペイロードに `identity_provider_id` が設定されます。
* **ユーザーストア / Directory 接続を選択した場合:** ペイロードに `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;
}
```

接続のルーティングルール:

* **自動選択:** 組織に対象となる接続が1つしかない場合、その接続が既定で選択されますが、編集は可能です。
* **接続がない場合:** 対象となる接続が存在しない場合、招待のエントリポイントは無効になり、その理由を説明するフィードバックが表示されます。
* **取り消しと再送信:** 取り消しと再送信のフローでは、元の接続ルーティング元 (`user_store_id` または `identity_provider_id`) が保持されます。
* **接続の対象条件:** 招待のピッカーには、メンバーアクセスレベルが `limited` または `full` に設定された接続が表示されます。

**revokeInvitationAction**

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

招待の取り消しを制御します (単一および一括の取り消しに対応し、1バッチあたり最大10件まで取り消せます) 。

* `onBefore(invitations)` は取り消し前に確認を行います。キャンセルする場合は `false` を返します。
* `onAfter(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**

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

招待の取り消しと再送信のフローを制御します。

* `onBefore(invitation)` は再送信前に確認を行います。中止するには `false` を返します。
* `onAfter(original, newInvitation)` は新しい招待が作成された後に実行されます。

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

**viewMemberDetailsAction**

**型:** `ComponentAction<ViewMemberDetailsParams>`

メンバー行またはロールバッジを選択したときに発火します。`{ userId, tab }` を受け取ります。これをフックして `OrganizationMemberDetail` へ遷移させます。

* `onAfter({ userId, tab })` は選択時に実行されます。指定されたタブを直接開けるよう、ルーターの URL に `tab` を保持してください。

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

**removeFromOrganizationAction**

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

Organization からのメンバー削除を制御します (対象はメンバーシップのみで、Auth0 のユーザーストアからユーザープロファイルが削除されるわけではありません) 。どちらのフックも `userId` を受け取ります。

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

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

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

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

* `onBefore({ userId, roleIds })` は選択内容を検証します。キャンセルするには `false` を返します。
* `onAfter({ userId, roleIds })` はロールの割り当て後に実行されます。

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

***

<h3 id="customization-props">
  カスタマイズ用プロップ
</h3>

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberManagementMessages>` | 文言およびテキストの上書き。 |
| `styling` | `ComponentStyling<OrganizationMemberManagementClasses>` | CSS変数およびクラスのオーバーライド。 |

**customMessages**

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

<Accordion title="主なメッセージグループ">
  **header**—コンポーネントのヘッダー

  * `title`、`description`

  **tabs**—タブのラベル

  * `members`、`invitations`

  **count\_capped**—上限到達時の件数表示

  * メンバー数または招待数が1,000件を超えた場合に表示されるテキスト

  **member.table**—メンバーテーブルの表示

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

  **member.actions**—メンバー行のアクション

  * `menu_label`、`remove_from_organization`、`view_details`

  **member.assign\_roles**—ロール割り当てモーダル

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

  **member.remove\_from\_organization**—メンバー削除の確認

  * `title`、`description`
  * `confirm_button`、`cancel_button`

  **member.success / member.error**—メンバー操作のステータス

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

  **invitation.table**—招待テーブルの表示

  * `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**—招待行のアクション

  * `menu_label`、`view_details`、`copy_url`、`revoke_and_resend`、`revoke`

  **invitation.create**—招待作成モーダル

  * `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**—招待の詳細ドロワー

  * `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**—取り消しの確認

  * `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**—一括取り消しの確認

  * `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**—招待のステータスおよびアラート

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

***

**styling**

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

<Accordion title="利用可能なスタイル設定オプション">
  **Variables**—CSSカスタムプロパティ

  * `common`—すべてのテーマに適用
  * `light`—ライトテーマのみ
  * `dark`—ダークテーマのみ

  **Classes**—対象要素へのクラスのオーバーライド

  * `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">
  高度なカスタマイズ
</h2>

<h3 id="available-hooks">
  利用可能なフック
</h3>

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

| フック | 説明 |
| :- | :- |
| `useOrganizationMemberManagement` | メンバーと招待のデータ、タブおよびページネーションの状態、モーダルの状態、操作用のハンドラー。 |