feat(react, examples): add service hook, container, and example apps

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