Web での Organization メンバー管理

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

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