Merge branch 'feat/passkey-management-components' into feat/passkey-internal-docs

Author: NaveenChand755

packages/core/src/i18n/custom-messages/my-account/passkey/passkey-types.ts

@@ -4,17 +4,6 @@
  * @internal
  */
 
-/**
- * Interface for passkey messages that can be used in the UI.
- */
-export interface PasskeyRenameModalMessages {
-  title?: string;
-  label?: string;
-  placeholder?: string;
-  cancel?: string;
-  update?: string;
-}
-
 export interface PasskeyRevokeModalMessages {
   title?: string;
   consent?: string;
@@ -29,21 +18,19 @@ export interface PasskeyMessages {
   };
   section_title?: string;
   enabled?: string;
+  passkey_name?: string;
   created_at?: string;
   last_used?: string;
   no_passkeys?: string;
   add_passkey?: string;
   actions?: {
-    rename?: string;
     revoke?: string;
   };
   success?: {
     add?: string;
-    rename?: string;
     revoke?: string;
   };
   modals?: {
-    rename?: PasskeyRenameModalMessages;
     revoke?: PasskeyRevokeModalMessages;
   };
 }

packages/core/src/i18n/translations/en-US.json

@@ -1195,29 +1195,21 @@
       "title": "Log-in methods",
       "description": "Ways you can sign in to your account. You can use one of these or combine them for flexibility."
     },
-    "section_title": "Passkey",
+    "section_title": "Passkeys",
     "enabled": "enabled",
     "created_at": "Created on ${date}",
     "last_used": "Last used ${date}",
+    "passkey_name": "Passkey ${index}",
     "no_passkeys": "No passkeys have been added to your account.",
     "add_passkey": "Add passkey",
     "actions": {
-      "rename": "Rename",
       "revoke": "Revoke"
     },
     "success": {
       "add": "Passkey added successfully.",
-      "rename": "Passkey renamed successfully.",
       "revoke": "Passkey revoked successfully."
     },
     "modals": {
-      "rename": {
-        "title": "Rename passkey",
-        "label": "Passkey name",
-        "placeholder": "Enter passkey name",
-        "cancel": "Cancel",
-        "update": "Update Passkey"
-      },
       "revoke": {
         "title": "Revoke passkey",
         "consent": "This will revoke the passkey - <bold>${name}</bold> from your account.",

packages/react/src/components/auth0/my-account/__tests__/user-passkey-management.test.tsx

@@ -56,7 +56,7 @@ describe('UserPasskeyMgmt', () => {
       ],
     });
     renderWithProviders(<UserPasskeyMgmt />);
-    await screen.findByText('Passkey 1');
+    await screen.findByText('passkey_name');
     expect(screen.getByText('enabled')).toBeInTheDocument();
   });
 
@@ -91,7 +91,7 @@ describe('UserPasskeyMgmt', () => {
     });
 
     const openRevokeModal = async (user: ReturnType<typeof userEvent.setup>) => {
-      await user.click(await screen.findByRole('button', { name: 'Passkey 1' }));
+      await user.click(await screen.findByRole('button', { name: 'passkey_name' }));
       await user.click(await screen.findByRole('menuitem', { name: /actions\.revoke/i }));
     };
 
@@ -132,8 +132,8 @@ describe('UserPasskeyMgmt', () => {
 
     it('hides revoke dropdown when revokeAction.disabled is true', async () => {
       renderWithProviders(<UserPasskeyMgmt revokeAction={{ disabled: true }} />);
-      await screen.findByText('Passkey 1');
-      expect(screen.queryByRole('button', { name: 'Passkey 1' })).not.toBeInTheDocument();
+      await screen.findByText('passkey_name');
+      expect(screen.queryByRole('button', { name: 'passkey_name' })).not.toBeInTheDocument();
     });
   });
 });

packages/react/src/hooks/my-account/shared/services/__tests__/use-user-passkey-service.test.tsx

@@ -4,7 +4,13 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useUserPasskeyService } from '@/hooks/my-account/shared/services/use-user-passkey-service';
 import * as useCoreClientModule from '@/hooks/shared/use-core-client';
-import { mockCore, setupMockUseCoreClient, createQueryClientWrapper } from '@/tests/utils';
+import * as useTranslatorModule from '@/hooks/shared/use-translator';
+import {
+  mockCore,
+  setupMockUseCoreClient,
+  setupMockUseTranslator,
+  createQueryClientWrapper,
+} from '@/tests/utils';
 
 vi.mock('@auth0/universal-components-core', async (importOriginal) => {
   const actual = await importOriginal();
@@ -43,6 +49,7 @@ describe('useUserPasskeyService', () => {
     mockCoreClient = initMockCoreClient();
     apiClient = mockCoreClient.getMyAccountApiClient();
     setupMockUseCoreClient(mockCoreClient, useCoreClientModule);
+    setupMockUseTranslator(useTranslatorModule);
   });
 
   describe('passkeysQuery', () => {
@@ -62,7 +69,7 @@ describe('useUserPasskeyService', () => {
       const { result } = await renderAndWait();
 
       expect(result.current.passkeysQuery.data).toEqual([
-        expect.objectContaining({ id: 'pk-1', name: 'Passkey 1', createdAt: '2024-01-01' }),
+        expect.objectContaining({ id: 'pk-1', name: 'passkey_name', createdAt: '2024-01-01' }),
       ]);
     });
 

packages/react/src/hooks/my-account/shared/services/use-user-passkey-service.ts

@@ -9,6 +9,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { useCoreClient } from '@/hooks/shared/use-core-client';
+import { useTranslator } from '@/hooks/shared/use-translator';
 import type {
   Passkey,
   UseUserPasskeyServiceResult,
@@ -22,6 +23,7 @@ import type {
 export function useUserPasskeyService(): UseUserPasskeyServiceResult {
   const { coreClient } = useCoreClient();
   const queryClient = useQueryClient();
+  const { t } = useTranslator('passkey');
 
   const passkeysQuery = useQuery<Passkey[]>({
     queryKey: passkeyQueryKeys.list(),
@@ -34,7 +36,7 @@ export function useUserPasskeyService(): UseUserPasskeyServiceResult {
           const passkey = m as PasskeyAuthMethodResponse;
           return {
             id: passkey.id,
-            name: `Passkey ${index + 1}`,
+            name: t('passkey_name', { index: index + 1 }),
             createdAt: passkey.created_at,
             lastUsedAt: passkey.last_auth_at,
             deviceInfo: parseUserAgent(passkey.user_agent),