Suggest old passkey cleanup if passkeys are found across multiple dom…

…ains.

src/frontend/src/flows/manage/authenticatorsSection.json

@@ -0,0 +1,7 @@
+{
+  "en": {
+    "some_passkeys_may_be_outdated_and": "Some of your passkeys may be outdated, and",
+    "safely_cleaning_them_up": "safely cleaning them up",
+    "can_improve_sign_in": "can improve your sign-in experience."
+  }
+}

src/frontend/src/flows/manage/authenticatorsSection.ts

@@ -1,4 +1,6 @@
+import { i18n } from "$showcase/i18n";
 import { infoIcon, warningIcon } from "$src/components/icons";
+import copyJson from "$src/flows/manage/authenticatorsSection.json";
 import { formatLastUsage } from "$src/utils/time";
 import { isNullish, nonNullish } from "@dfinity/utils";
 import { TemplateResult, html } from "lit-html";
@@ -11,6 +13,9 @@ import { Authenticator } from "./types";
 // which leaves room for 8 authenticator devices.
 const MAX_AUTHENTICATORS = 8;
 
+const MANAGE_PASSKEYS_SUPPORT_URL =
+  "https://identitysupport.dfinity.org/hc/en-us/articles/32301362727188";
+
 // A device with extra information about whether another device (earlier in the list)
 // has the same name.
 export type DedupAuthenticator = Authenticator & { dupCount?: number };
@@ -35,11 +40,14 @@ export const authenticatorsSection = ({
   authenticators: authenticators_,
   onAddDevice,
   warnNoPasskeys,
+  cleanupRecommended,
 }: {
   authenticators: Authenticator[];
   onAddDevice: () => void;
   warnNoPasskeys: boolean;
+  cleanupRecommended: boolean;
 }): TemplateResult => {
+  const copy = i18n.i18n(copyJson);
   const wrapClasses = [
     "l-stack",
     "c-card",
@@ -104,8 +112,20 @@ export const authenticatorsSection = ({
               <span>Add new Passkey</span>
             </button>
           </div>
-
         </div>
+        ${
+          cleanupRecommended
+            ? html`<div>
+                <p class="l-stack--small">
+                  ${copy.some_passkeys_may_be_outdated_and} ${" "}
+                  <a target="_blank" href="${MANAGE_PASSKEYS_SUPPORT_URL}">
+                    ${copy.safely_cleaning_them_up}
+                  </a>
+                  ${" "} ${copy.can_improve_sign_in}
+                </p>
+              </div>`
+            : undefined
+        }
     </aside>`;
 };
 

src/frontend/src/flows/manage/index.ts

@@ -197,9 +197,13 @@ const displayManageTemplate = ({
   identityBackground: PreLoadImage;
   tempKeysWarning?: TempKeyWarningAction;
 }): TemplateResult => {
+  const i18n = new I18n();
   // Nudge the user to add a passkey if there is none
   const warnNoPasskeys = authenticators.length === 0;
-  const i18n = new I18n();
+  // Recommend the user to clean up passkeys if there are multiple domains
+  const cleanupRecommended = authenticators.some((authenticator) =>
+    nonNullish(authenticator.rpId)
+  );
 
   const pageContentSlot = html` <section data-role="identity-management">
     <hgroup>
@@ -216,6 +220,7 @@ const displayManageTemplate = ({
       authenticators,
       onAddDevice,
       warnNoPasskeys,
+      cleanupRecommended,
     })}
     ${OPENID_AUTHENTICATION.isEnabled()
       ? linkedAccountsSection({