feat(examples): add passkey component into examples

examples/next-rwa/src/app/passkeys/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { UserPasskeyMgmt } from '@auth0/universal-components-react';
+
+export default function PasskeysPage() {
+  return <UserPasskeyMgmt />;
+}

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, KeyRound, Settings, Shield, User } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,6 +34,15 @@ export const Sidebar: React.FC = () => {
                     <span className="truncate">{t('sidebar.mfa')}</span>
                   </Link>
                 </li>
+                <li>
+                  <Link
+                    href="/passkeys"
+                    className="flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-accent/60 rounded-md dark:text-gray-300 dark:hover:text-white transition-colors cursor-default"
+                  >
+                    <KeyRound className="h-4 w-4 flex-shrink-0" />
+                    <span className="truncate">{t('sidebar.passkeys')}</span>
+                  </Link>
+                </li>
               </ul>
             </div>
           )}

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

@@ -22,6 +22,7 @@ i18n.use(initReactI18next).init({
         'profile.mfa-description': 'Manage your authentication factors for enhanced security.',
         'sidebar.my-account': 'My Account',
         'sidebar.mfa': 'Multi-Factor Authentication',
+        'sidebar.passkeys': 'Passkeys',
         'sidebar.my-organization': 'My Organization',
         'sidebar.organization-settings': 'Organization Settings',
         'sidebar.domains': 'Domains',

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

@@ -9,6 +9,7 @@ import { Sidebar } from './components/side-bar';
 import DomainManagementPage from './views/domain-management-page';
 import HomePage from './views/home-page';
 import MFAPage from './views/mfa-page';
+import PasskeyPage from './views/passkey-page';
 import OrganizationManagementPage from './views/organization-management-page';
 import ProfilePage from './views/profile-page';
 import SsoProviderCreatePage from './views/sso-provider-create-page';
@@ -61,6 +62,14 @@ function AppContent() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/passkeys"
+            element={
+              <ProtectedRoute>
+                <PasskeyPage />
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/organization-management"
             element={

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, KeyRound } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -30,6 +30,15 @@ export const Sidebar: React.FC = () => {
                   <span className="truncate">{t('sidebar.multi-factor-authentication')}</span>
                 </Link>
               </li>
+              <li>
+                <Link
+                  to="/passkeys"
+                  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"
+                >
+                  <KeyRound className="h-4 w-4 flex-shrink-0" />
+                  <span className="truncate">{t('sidebar.passkeys')}</span>
+                </Link>
+              </li>
             </ul>
           </div>
         )}

examples/react-spa-npm/src/locales/en.json

@@ -19,6 +19,7 @@
   "sidebar": {
     "my-account": "My Account",
     "multi-factor-authentication": "Multi-Factor Authentication",
+    "passkeys": "Passkeys",
     "my-organization": "My Organization",
     "organization-management": "Organization Management",
     "sso-provider": "SSO Provider",

examples/react-spa-npm/src/locales/ja.json

@@ -19,6 +19,7 @@
   "sidebar": {
     "my-account": "マイアカウント",
     "multi-factor-authentication": "多要素認証",
+    "passkeys": "パスキー",
     "my-organization": "マイ組織",
     "organization-management": "組織管理",
     "sso-provider": "SSOプロバイダー",

examples/react-spa-npm/src/views/mfa-page.tsx

@@ -2,7 +2,7 @@ import { UserMFAMgmt } from '@auth0/universal-components-react';
 
 const MFAPage = () => {
   return (
-    <div className="space-y-6">
+    <div className="p-6 pt-8 space-y-6">
       <UserMFAMgmt />
     </div>
   );

examples/react-spa-npm/src/views/passkey-page.tsx

@@ -0,0 +1,11 @@
+import { UserPasskeyMgmt } from '@auth0/universal-components-react';
+
+const PasskeyPage = () => {
+  return (
+    <div className="p-6 pt-8 space-y-6">
+      <UserPasskeyMgmt />
+    </div>
+  );
+};
+
+export default PasskeyPage;