Fix device type checks based on alias

This PR fixes checks for recovery devices and recovery phrases that
were based on the device name. This change is required because the
public endpoints no longer give information about the alias.

This PR also includes some typing improvements around the alias being
stripped on the public 'lookup'  endpoint.

Author: Frederik Rothenberger

src/frontend/src/flows/manage/deviceSettings.ts

@@ -11,6 +11,7 @@ import { unreachable } from "../../utils/utils";
 import { DeviceData } from "../../../generated/internet_identity_types";
 import { phraseRecoveryPage } from "../recovery/recoverWith/phrase";
 import { mainWindow } from "../../components/mainWindow";
+import { recoveryDeviceToLabel } from "../../utils/recoveryDeviceLabel";
 
 // The "device settings" page where users can view information about a device,
 // remove a device, make a recovery phrase protected, etc.
@@ -32,7 +33,9 @@ const deviceSettingsTemplate = ({
 }) => {
   const pageContentSlot = html` <article id="deviceSettings">
     <h1 class="t-title">
-      ${isRecovery(device) ? "" : "Device"} ${device.alias}
+      ${isRecovery(device)
+        ? recoveryDeviceToLabel(device)
+        : `Device ${device.alias}`}
     </h1>
 
     <div class="l-stack">

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

@@ -21,6 +21,7 @@ import { chooseDeviceAddFlow } from "../addDevice/manage";
 import { addLocalDevice } from "../addDevice/manage/addLocalDevice";
 import { warnBox } from "../../components/warnBox";
 import { mainWindow } from "../../components/mainWindow";
+import { recoveryDeviceToLabel } from "../../utils/recoveryDeviceLabel";
 
 /* Template for the authbox when authenticating to II */
 export const authnTemplateManage = (): AuthnTemplates => {
@@ -228,17 +229,21 @@ const recoverySection = (
   `;
 };
 
-const deviceListItem = (device: DeviceData) => html`
-  <div class="c-action-list__label">${device.alias}</div>
-  <button
-    type="button"
-    aria-label="settings"
-    data-action="settings"
-    class="c-action-list__action"
-  >
-    ${settingsIcon}
-  </button>
-`;
+const deviceListItem = (device: DeviceData) => {
+  const label =
+    "recovery" in device.purpose ? recoveryDeviceToLabel(device) : device.alias;
+  return html`
+    <div class="c-action-list__label">${label}</div>
+    <button
+      type="button"
+      aria-label="settings"
+      data-action="settings"
+      class="c-action-list__action"
+    >
+      ${settingsIcon}
+    </button>
+  `;
+};
 
 const recoveryNag = ({ onAddRecovery }: { onAddRecovery: () => void }) =>
   warnBox({

src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts

@@ -88,7 +88,7 @@ export const chooseRecoveryMechanism = async ({
   message,
   cancelText,
 }: {
-  devices: DeviceData[];
+  devices: Omit<DeviceData, "alias">[];
 } & ChooseRecoveryProps): Promise<RecoveryMechanism | null> => {
   return new Promise((resolve) => {
     return chooseRecoveryMechanismPage({
@@ -104,7 +104,12 @@ export const chooseRecoveryMechanism = async ({
   });
 };
 
-const hasRecoveryPhrase = (devices: DeviceData[]): boolean =>
-  devices.some((device) => device.alias === "Recovery phrase");
-const hasRecoveryKey = (devices: DeviceData[]): boolean =>
-  devices.some((device) => device.alias === "Recovery key");
+const hasRecoveryPhrase = (devices: Omit<DeviceData, "alias">[]): boolean =>
+  devices.some(
+    (device) => "seed_phrase" in device.key_type && "recovery" in device.purpose
+  );
+const hasRecoveryKey = (devices: Omit<DeviceData, "alias">[]): boolean =>
+  devices.some(
+    (device) =>
+      !("seed_phrase" in device.key_type) && "recovery" in device.purpose
+  );

src/frontend/src/flows/recovery/pickRecoveryDevice.ts

@@ -2,6 +2,7 @@ import { html, render } from "lit-html";
 import { DeviceData } from "../../../generated/internet_identity_types";
 import { mainWindow } from "../../components/mainWindow";
 import { securityKeyIcon, seedPhraseIcon } from "../../components/icons";
+import { recoveryDeviceToLabel } from "../../utils/recoveryDeviceLabel";
 
 const pageContent = () => {
   const pageContentSlot = html`
@@ -22,14 +23,16 @@ const pageContent = () => {
 };
 
 export const pickRecoveryDevice = async (
-  devices: DeviceData[]
-): Promise<DeviceData> => {
+  devices: Omit<DeviceData, "alias">[]
+): Promise<Omit<DeviceData, "alias">> => {
   const container = document.getElementById("pageContent") as HTMLElement;
   render(pageContent(), container);
   return init(devices);
 };
 
-export const init = (devices: DeviceData[]): Promise<DeviceData> =>
+export const init = (
+  devices: Omit<DeviceData, "alias">[]
+): Promise<Omit<DeviceData, "alias">> =>
   new Promise((resolve) => {
     const deviceList = document.getElementById("deviceList") as HTMLElement;
     deviceList.innerHTML = ``;
@@ -44,11 +47,11 @@ export const init = (devices: DeviceData[]): Promise<DeviceData> =>
         html`<div class="deviceItemAlias">
           <button class="c-button c-button--secondary">
             <span aria-hidden="true"
-              >${device.alias === "Recovery Phrase"
+              >${"seed_phrase" in device.key_type
                 ? seedPhraseIcon
                 : securityKeyIcon}</span
             >
-            <div class="t-strong">${device.alias}</div>
+            <div class="t-strong">${recoveryDeviceToLabel(device)}</div>
           </button>
         </div>`,
         identityElement

src/frontend/src/flows/recovery/recoverWith/device.ts

@@ -49,7 +49,7 @@ const pageContent = () => {
 export const deviceRecoveryPage = async (
   userNumber: bigint,
   connection: Connection,
-  device: DeviceData
+  device: Omit<DeviceData, "alias">
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> => {
   const container = document.getElementById("pageContent") as HTMLElement;
   render(pageContent(), container);
@@ -59,7 +59,7 @@ export const deviceRecoveryPage = async (
 const init = (
   userNumber: bigint,
   connection: Connection,
-  device: DeviceData
+  device: Omit<DeviceData, "alias">
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> =>
   new Promise((resolve) => {
     const buttonContinue = document.getElementById(

src/frontend/src/flows/recovery/recoverWith/phrase.ts

@@ -80,7 +80,7 @@ const pageContent = (userNumber: bigint, message?: string) => {
 export const phraseRecoveryPage = async (
   userNumber: bigint,
   connection: Connection,
-  device: DeviceData,
+  device: Omit<DeviceData, "alias">,
   prefilledPhrase?: string,
   message?: string
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> => {
@@ -92,7 +92,7 @@ export const phraseRecoveryPage = async (
 const init = (
   userNumber: bigint,
   connection: Connection,
-  device: DeviceData,
+  device: Omit<DeviceData, "alias">,
   prefilledPhrase?: string /* if set, prefilled as input */,
   message?: string
 ): Promise<LoginFlowSuccess | LoginFlowCanceled> =>

src/frontend/src/utils/iiConnection.ts

@@ -181,7 +181,7 @@ export class Connection {
   };
 
   login = async (userNumber: bigint): Promise<LoginResult> => {
-    let devices: DeviceData[];
+    let devices: Omit<DeviceData, "alias">[];
     try {
       devices = await this.lookupAuthenticators(userNumber);
     } catch (e: unknown) {
@@ -204,7 +204,7 @@ export class Connection {
 
   fromWebauthnDevices = async (
     userNumber: bigint,
-    devices: DeviceData[]
+    devices: Omit<DeviceData, "alias">[]
   ): Promise<LoginResult> => {
     /* Recover the Identity (i.e. key pair) used when creating the anchor.
      * If "II_DUMMY_AUTH" is set, we use a dummy identity, the same identity
@@ -262,7 +262,7 @@ export class Connection {
   };
 
   private updateKeyTypeIfNecessary(
-    devices: DeviceData[],
+    devices: Omit<DeviceData, "alias">[],
     attachmentInfo: {
       credentialId: ArrayBuffer;
       authenticatorAttachment: AuthenticatorAttachment;
@@ -320,7 +320,7 @@ export class Connection {
   fromSeedPhrase = async (
     userNumber: bigint,
     seedPhrase: string,
-    expected: DeviceData
+    expected: Omit<DeviceData, "alias">
   ): Promise<LoginResult> => {
     const identity = await fromMnemonicWithoutValidation(
       seedPhrase,
@@ -352,7 +352,9 @@ export class Connection {
     };
   };
 
-  lookupAll = async (userNumber: UserNumber): Promise<DeviceData[]> => {
+  lookupAll = async (
+    userNumber: UserNumber
+  ): Promise<Omit<DeviceData, "alias">[]> => {
     const actor = await this.createActor();
     return await actor.lookup(userNumber);
   };
@@ -366,7 +368,7 @@ export class Connection {
 
   lookupAuthenticators = async (
     userNumber: UserNumber
-  ): Promise<DeviceData[]> => {
+  ): Promise<Omit<DeviceData, "alias">[]> => {
     const actor = await this.createActor();
     const allDevices = await actor.lookup(userNumber);
     return allDevices.filter((device) => "authentication" in device.purpose);
@@ -393,7 +395,9 @@ export class Connection {
     });
   };
 
-  lookupRecovery = async (userNumber: UserNumber): Promise<DeviceData[]> => {
+  lookupRecovery = async (
+    userNumber: UserNumber
+  ): Promise<Omit<DeviceData, "alias">[]> => {
     const actor = await this.createActor();
     const allDevices = await actor.lookup(userNumber);
     return allDevices.filter((device) => "recovery" in device.purpose);
@@ -570,7 +574,7 @@ export class AuthenticatedConnection extends Connection {
 // credentials.get), see
 //  * https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API/Attestation_and_Assertion
 export const creationOptions = (
-  exclude: DeviceData[] = [],
+  exclude: Omit<DeviceData, "alias">[] = [],
   authenticatorAttachment?: AuthenticatorAttachment
 ): PublicKeyCredentialCreationOptions => {
   return {
@@ -623,10 +627,10 @@ export const bufferEqual = (buf1: ArrayBuffer, buf2: ArrayBuffer): boolean => {
   return true;
 };
 
-function findDeviceByCredentialId(
-  devices: DeviceData[],
+function findDeviceByCredentialId<T extends Omit<DeviceData, "alias">>(
+  devices: T[],
   credentialId: ArrayBuffer
-) {
+): T | undefined {
   return devices.find((device) => {
     const id = device.credential_id[0];
     if (id === undefined) {

src/frontend/src/utils/recoveryDeviceLabel.ts

@@ -0,0 +1,14 @@
+import { DeviceData } from "../../generated/internet_identity_types";
+
+export const recoveryDeviceToLabel = (
+  device: Omit<DeviceData, "alias">
+): string => {
+  if (!("recovery" in device.purpose)) {
+    throw new Error(`${device} is not a recovery device`);
+  }
+
+  if ("seed_phrase" in device.key_type) {
+    return "Recovery phrase";
+  }
+  return "Recovery key";
+};