Show 'current device' in passkey-list

packages/connect-react/src/components/CorbadoConnectDemo.tsx

@@ -31,6 +31,7 @@ const getListOfPasskeys = () => {
       authenticatorAAGUID: 'authenticatorAAGUID',
       sourceOS: 'Windows 10',
       sourceBrowser: 'Chrome',
+      createdInCurrentBrowser: true,
       lastUsed: '2024-10-03 14:45:57',
       created: '2024-10-03 14:45:57',
       status: '' as any,
@@ -59,6 +60,7 @@ const getListOfPasskeys = () => {
       lastUsed: '2024-10-03 14:45:57',
       sourceBrowser: 'Chrome',
       sourceOS: 'macOS',
+      createdInCurrentBrowser: false,
       status: 'active',
       transport: ['nfc', 'usb'],
       createdMs: 1735689600000,

packages/connect-react/src/components/passkeyList/DeleteModal.tsx

@@ -26,7 +26,7 @@ const DeleteModal = ({ onDeleteClick, hide, passkey }: Props) => (
         lastUsed={passkey.lastUsed}
         browser={passkey.sourceBrowser}
         os={passkey.sourceOS}
-        isThisDevice={false}
+        createdInCurrentBrowser={passkey.createdInCurrentBrowser}
         isSynced={passkey.backupState}
         isHybrid={passkey.transport.includes('hybrid')}
         key={passkey.id}

packages/connect-react/src/components/passkeyList/PasskeyList.tsx

@@ -63,7 +63,7 @@ const PasskeyList: FC<PasskeyListProps> = ({
             lastUsed={passkey.lastUsed}
             browser={passkey.sourceBrowser}
             os={passkey.sourceOS}
-            isThisDevice={false}
+            createdInCurrentBrowser={passkey.createdInCurrentBrowser}
             isSynced={passkey.backupState}
             isHybrid={passkey.transport.includes('hybrid')}
             key={passkey.id}

packages/connect-react/src/components/shared/PasskeyListItem.tsx

@@ -17,7 +17,7 @@ export type Props = {
   lastUsed: string | Date;
   browser: string;
   os: 'Windows' | 'macOS' | 'Android' | 'iOS' | string;
-  isThisDevice?: boolean;
+  createdInCurrentBrowser?: boolean;
   isSynced?: boolean;
   isHybrid?: boolean;
   onDeleteClick?: () => void;
@@ -33,7 +33,7 @@ export const PasskeyListItem: FC<Props> = ({
   onDeleteClick,
   isSynced,
   isHybrid,
-  isThisDevice,
+  createdInCurrentBrowser,
 }) => {
   const getTags = () => {
     const tags = [];
@@ -46,8 +46,13 @@ export const PasskeyListItem: FC<Props> = ({
       tags.push({ text: 'Hybrid', icon: (className: string) => ShieldTickIcon({ className }) });
     }
 
-    if (isThisDevice) {
-      tags.push({ text: 'Seen on this device', icon: (className: string) => EyeIcon({ className }) });
+    if (createdInCurrentBrowser) {
+      tags.push({
+        text: 'Created in this browser',
+        title:
+          'This passkey was registered from this browser. It may be stored in a password manager or on another device; this does not confirm it is still available.',
+        icon: (className: string) => EyeIcon({ className }),
+      });
     }
 
     return tags;
@@ -71,10 +76,10 @@ export const PasskeyListItem: FC<Props> = ({
         <div className='cb-passkey-list-item-header'>
           <div className='cb-passkey-list-item-title'>{name}</div>
           <div className='cb-passkey-list-item-tags'>
-            {getTags().map(({ text, icon }) => (
+            {getTags().map(({ text, title, icon }) => (
               <Tag key={text}>
                 {icon('cb-passkey-list-item-tag-icon')}
-                <span>{text}</span>
+                <span title={title}>{text}</span>
               </Tag>
             ))}
           </div>

packages/web-core/openapi/spec_v2.yaml

@@ -1859,6 +1859,12 @@ components:
           type: string
         sourceBrowser:
           type: string
+        createdInCurrentBrowser:
+          type: boolean
+          description: >-
+            Whether this passkey's recorded creation environment matches the current browser handle.
+            Omitted when no browser context is supplied. False means no matching creation record,
+            not that the passkey is unavailable. This does not verify current authenticator availability.
         lastUsed:
           type: string
           description: Timestamp of when the passkey was last used in yyyy-MM-dd'T'HH:mm:ss format

packages/web-core/src/api/v2/api.ts

@@ -2491,6 +2491,12 @@ export interface Passkey {
      * @memberof Passkey
      */
     'sourceBrowser': string;
+    /**
+     * Whether this passkey\'s recorded creation environment matches the current browser handle. Omitted when no browser context is supplied. False means no matching creation record, not that the passkey is unavailable. This does not verify current authenticator availability.
+     * @type {boolean}
+     * @memberof Passkey
+     */
+    'createdInCurrentBrowser'?: boolean;
     /**
      * Timestamp of when the passkey was last used in yyyy-MM-dd\'T\'HH:mm:ss format
      * @type {string}