member management

examples/next-rwa/src/app/member-management/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { OrganizationMemberManagement } from '@auth0/universal-components-react/rwa';
+
+export default function MemberManagementPage() {
+  return (
+    <div className="p-6 pt-8 space-y-6">
+      <p className="text-primary">
+        Follow{' '}
+        <a
+          href="https://github.com/auth0/auth0-ui-components/tree/main/examples/next-rwa#adding-a-universal-component-to-your-app"
+          target="_blank"
+        >
+          <u>Quickstart guidance</u>
+        </a>{' '}
+        on how to add Member Management component.
+      </p>
+      <OrganizationMemberManagement />
+    </div>
+  );
+}

examples/next-rwa/src/components/navigation/side-bar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useUser } from '@auth0/nextjs-auth0';
-import { Building, Settings, Shield, User } from 'lucide-react';
+import { Building, Settings, Shield, User, Users } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -74,6 +74,15 @@ export const Sidebar: React.FC = () => {
                   <span className="truncate">{t('sidebar.identity-providers')}</span>
                 </Link>
               </li>
+              <li>
+                <Link
+                  href="/member-management"
+                  className="flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 transition-colors"
+                >
+                  <Users className="h-4 w-4 flex-shrink-0" />
+                  <span className="truncate">{t('sidebar.members')}</span>
+                </Link>
+              </li>
             </ul>
           </div>
         </div>

examples/next-rwa/src/providers/i18n-provider.tsx

@@ -26,6 +26,7 @@ i18n.use(initReactI18next).init({
         'sidebar.organization-settings': 'Organization Settings',
         'sidebar.domains': 'Domains',
         'sidebar.identity-providers': 'Identity Providers',
+        'sidebar.members': 'Members',
       },
     },
   },

examples/react-spa-npm/src/App.tsx

@@ -8,6 +8,7 @@ import { Navbar } from './components/nav-bar';
 import { Sidebar } from './components/side-bar';
 import DomainManagementPage from './views/domain-management-page';
 import HomePage from './views/home-page';
+import MemberManagementPage from './views/member-management-page';
 import MFAPage from './views/mfa-page';
 import OrganizationManagementPage from './views/organization-management-page';
 import ProfilePage from './views/profile-page';
@@ -101,6 +102,14 @@ function AppContent() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/member-management"
+            element={
+              <ProtectedRoute>
+                <MemberManagementPage />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
       </main>
     </div>

examples/react-spa-npm/src/components/side-bar.tsx

@@ -1,4 +1,4 @@
-import { User, Building, Settings, Shield } from 'lucide-react';
+import { User, Building, Settings, Shield, Users } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -70,6 +70,15 @@ export const Sidebar: React.FC = () => {
                 <span className="truncate">{t('sidebar.domain-management')}</span>
               </Link>
             </li>
+            <li>
+              <Link
+                to="/member-management"
+                className="flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-accent/90 rounded-md dark:text-gray-300 dark:hover:text-white transition-colors cursor-default"
+              >
+                <Users className="h-4 w-4 flex-shrink-0" />
+                <span className="truncate">{t('sidebar.member-management')}</span>
+              </Link>
+            </li>
           </ul>
         </div>
       </div>

examples/react-spa-npm/src/views/member-management-page.tsx

@@ -0,0 +1,21 @@
+// import { OrganizationMemberManagement } from '@auth0/universal-components-react/spa';
+
+const MemberManagementPage = () => {
+  return (
+    <div className="p-6 pt-8 space-y-6">
+      <p className="text-primary">
+        Follow{' '}
+        <a
+          href="https://github.com/auth0/auth0-ui-components/tree/main/examples/react-spa-npm#adding-a-universal-component-to-your-app"
+          target="_blank"
+        >
+          <u>Quickstart guidance</u>
+        </a>{' '}
+        on how to add Member Management component.
+      </p>
+      {/* <OrganizationMemberManagement /> */}
+    </div>
+  );
+};
+
+export default MemberManagementPage;

examples/react-spa-shadcn/src/App.tsx

@@ -10,6 +10,7 @@ import { Sidebar } from './components/side-bar';
 import { config } from './config/env';
 // import { useDarkMode } from './hooks/use-dark-mode';
 import DomainManagement from './pages/DomainManagement';
+import MemberManagement from './pages/MemberManagement';
 import IdentityProviderManagement from './pages/IdentityProviderManagement';
 import IdentityProviderManagementCreate from './pages/IdentityProviderManagementCreate';
 import IdentityProviderManagementEdit from './pages/IdentityProviderManagementEdit';
@@ -136,6 +137,14 @@ const App = () => {
                     </ProtectedRoute>
                   }
                 />
+                <Route
+                  path="/member-management"
+                  element={
+                    <ProtectedRoute>
+                      <MemberManagement />
+                    </ProtectedRoute>
+                  }
+                />
               </Routes>
             </AppLayout>
             {/* </Auth0ComponentProvider> */}

examples/react-spa-shadcn/src/components/side-bar.tsx

@@ -1,4 +1,4 @@
-import { User, Building, Shield, Settings } from 'lucide-react';
+import { User, Building, Shield, Settings, Users } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -70,6 +70,15 @@ export const Sidebar: React.FC = () => {
                 <span className="truncate">{t('sidebar.domain-management')}</span>
               </Link>
             </li>
+            <li>
+              <Link
+                to="/member-management"
+                className="flex items-center gap-3 px-3 py-2 text-sm text-primary hover:bg-accent/60 rounded-md transition-colors cursor-default"
+              >
+                <Users className="h-4 w-4 flex-shrink-0" />
+                <span className="truncate">{t('sidebar.member-management')}</span>
+              </Link>
+            </li>
           </ul>
         </div>
       </div>

examples/react-spa-shadcn/src/pages/MemberManagement.tsx

@@ -0,0 +1,23 @@
+// import { OrganizationMemberManagement } from '@auth0/universal-components-react/spa';
+
+const MemberManagement = () => {
+  return (
+    <div className="p-6">
+      <p className="text-primary">
+        Follow{' '}
+        <a
+          href="https://github.com/auth0/auth0-ui-components/tree/main/examples/react-spa-shadcn#adding-a-universal-component-with-shadcn"
+          target="_blank"
+        >
+          <u>Quickstart guidance</u>
+        </a>{' '}
+        on how to add Member Management component.
+      </p>
+      <div className="bg-background rounded-lg shadow p-6">
+        {/* <OrganizationMemberManagement /> */}
+      </div>
+    </div>
+  );
+};
+
+export default MemberManagement;

examples/scripts/utils/env-writer.mjs

@@ -72,6 +72,8 @@ const MYORG_SCOPES = [
   "delete:my_org:domains",
   "create:my_org:domains",
   "update:my_org:domains",
+  "read:my_org:member_invitations",
+  "delete:my_org:member_invitations"
 ]
 
 // My Account API scopes

examples/scripts/utils/resource-servers.mjs

@@ -26,6 +26,8 @@ export const MYORG_API_SCOPES = [
 "read:my_org:identity_providers_provisioning",
 "delete:my_org:identity_providers_provisioning",
 "read:my_org:configuration",
+"read:my_org:member_invitations",
+"delete:my_org:member_invitations"
 ]
 
 // My Account API Scopes - desired scopes for MFA management

packages/core/package.json

@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@auth0/myaccount-js": "1.0.0-beta.0",
-    "@auth0/myorganization-js": "1.0.0-beta.6",
+    "@auth0/myorganization-js": "../../auth0-myorganization-js-1.0.0-beta.5.tgz",
     "zod": "^3.22.4"
   }
 }

packages/core/src/i18n/custom-messages/my-organization/index.ts

@@ -7,3 +7,5 @@
 export * from './idp-management';
 export * from './organization-management';
 export * from './domain-management';
+export * from './member-management/invitation-tab-types';
+export * from './member-management/member-management-types';

packages/core/src/i18n/custom-messages/my-organization/member-management/invitation-tab-types.ts

@@ -0,0 +1,90 @@
+/**
+ * Custom message type definitions for invitation tab.
+ * @module invitation-tab-types
+ * @internal
+ */
+
+export interface OrganizationInvitationTabMessages {
+  table?: {
+    columns?: {
+      email?: string;
+      status?: string;
+      inviter?: string;
+      created_at?: string;
+      expires_at?: string;
+      roles?: string;
+    };
+    empty_message?: string;
+    search_placeholder?: string;
+    filter_by_role?: string;
+    all_roles?: string;
+    reset_filter?: string;
+    showing_results?: string;
+    status_pending?: string;
+    status_expired?: string;
+  };
+  actions?: {
+    menu_label?: string;
+    view_details?: string;
+    copy_url?: string;
+    revoke_and_resend?: string;
+    revoke?: string;
+  };
+  create?: {
+    title?: string;
+    description?: string;
+    email_label?: string;
+    email_placeholder?: string;
+    email_helper?: string;
+    email_limit_error?: string;
+    email_invalid_error?: string;
+    email_duplicate_error?: string;
+    email_required_error?: string;
+    roles_label?: string;
+    roles_placeholder?: string;
+    provider_label?: string;
+    provider_placeholder?: string;
+    submit_button?: string;
+    creating?: string;
+    cancel_button?: string;
+  };
+  details?: {
+    title?: string;
+    email_label?: string;
+    status_label?: string;
+    roles_label?: string;
+    provider_label?: string;
+    created_at_label?: string;
+    expires_at_label?: string;
+    invited_by_label?: string;
+    invitation_url_label?: string;
+    copy_url_button?: string;
+    close_button?: string;
+    revoke_button?: string;
+    resend_button?: string;
+  };
+  revoke?: {
+    title?: string;
+    description?: string;
+    confirm_button?: string;
+    cancel_button?: string;
+  };
+  revoke_resend?: {
+    title?: string;
+    description?: string;
+    confirm_button?: string;
+    cancel_button?: string;
+  };
+  success?: {
+    url_copied?: string;
+    invitation_resent?: string;
+  };
+  error?: {
+    fetch_failed?: string;
+    create_failed?: string;
+    revoke_failed?: string;
+    resend_failed?: string;
+    revoke_resend_failed?: string;
+    copy_url_failed?: string;
+  };
+}

packages/core/src/i18n/custom-messages/my-organization/member-management/member-management-types.ts

@@ -0,0 +1,19 @@
+/**
+ * Custom message type definitions for member management.
+ * @module member-management-types
+ * @internal
+ */
+
+import type { OrganizationInvitationTabMessages } from './invitation-tab-types';
+
+export interface OrganizationMemberManagementMessages {
+  header?: {
+    title?: string;
+    description?: string;
+  };
+  tabs?: {
+    members?: string;
+    invitations?: string;
+  };
+  invitation?: OrganizationInvitationTabMessages;
+}