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

OrganizationMemberDetail コンポーネントは、個々の organization メンバーのプロフィールと割り当て済みロールを表示・管理するための統合インターフェースを提供します。

React
Next.js
shadcn

セットアップ要件

Auth0の設定が必要です—テナントでMy Organization APIが設定されていることを確認してください。セットアップガイドを見る →

インストール

pnpm

pnpm add @auth0/universal-components-react

はじめに

ルートからコンポーネントに userId を渡します。戻るボタンでメンバー一覧に戻るように、onBack をルーターに接続してください。

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

統合の完全な例

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

セットアップ要件

Auth0の設定が必要です—テナントでMy Organization APIが設定されていることを確認してください。セットアップガイドを見る →

インストール

pnpm

pnpm add @auth0/universal-components-react

はじめに

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

完全な統合例

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

セットアップ要件

Auth0の設定が必要です—テナントで My Organization API が設定されていることを確認してください。セットアップガイドを見る →

インストール

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

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-detail

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

はじめに

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

統合の完全な例

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

<OrganizationMemberDetail userId={userId} onBack={() => navigate("/members")} />

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

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

<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 }) は監査ログへの書き込みやロールバッジの更新を行います。

<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 }) は、状態または監査ログを更新します。

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

共通のメッセージグループ

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

<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のスコープに対応しています。クラスのオーバーライドは、コンポーネントツリー内の名前付きスロットを対象とします。

利用可能なスタイリングオプション

Variables—CSSカスタムプロパティ

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

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

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

高度なカスタマイズ

利用可能なフック

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

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

Webコンポーネント

iOSコンポーネント

Androidコンポーネント

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

セットアップ要件

インストール

はじめに

セットアップ要件

インストール

はじめに

セットアップ要件

インストール

はじめに

プロップ

必須プロップ

表示プロップ

アクションプロップ

カスタマイズ用プロップ

高度なカスタマイズ

利用可能なフック

​セットアップ要件

​インストール

​はじめに

​セットアップ要件

​インストール

​はじめに

​セットアップ要件

​インストール

​はじめに

​プロップ

​必須プロップ

​表示プロップ

​アクションプロップ

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

​高度なカスタマイズ

​利用可能なフック

セットアップ要件

インストール

はじめに

セットアップ要件

インストール

はじめに

セットアップ要件

インストール

はじめに

プロップ

必須プロップ

表示プロップ

アクションプロップ

カスタマイズ用プロップ

高度なカスタマイズ

利用可能なフック