Rename passkey (#3189)

* Rename passkey

* Rename new component and pass always a string as text

* Rename also when "alias" not in metadata

* Do not allow to set name to empty string

* Copilot suggestions

* Refactor to agreed UX

* CR changes

* Improve code

* Bot findings

* Prevent default submit event

* CR changes

* CR changes

Author: lmuntaner

src/frontend/src/lib/components/ui/AccessMethod.svelte

@@ -9,6 +9,7 @@
   import PlaceHolder from "./PlaceHolder.svelte";
   import Ellipsis from "../utils/Ellipsis.svelte";
   import PulsatingCircleIcon from "../icons/PulsatingCircleIcon.svelte";
+  import { getAuthnMethodAlias } from "$lib/utils/webAuthn";
 
   let {
     accessMethod,
@@ -20,15 +21,6 @@
     isCurrent?: boolean;
   } = $props();
 
-  const getAuthnMethodAlias = (authnMethod: AuthnMethodData) => {
-    const metadataAlias = authnMethod.metadata.find(
-      ([key, _val]) => key === "alias",
-    )?.[1]!;
-    if (metadataAlias && "String" in metadataAlias) {
-      return metadataAlias.String;
-    }
-  };
-
   const getOpenIdCredentialName = (credential: OpenIdCredential | null) => {
     if (!credential) return null;
     const metadataName = credential.metadata.find(

src/frontend/src/lib/components/utils/error.ts

@@ -3,6 +3,7 @@ import { toaster } from "$lib/components/utils/toaster";
 import { isCanisterError } from "$lib/utils/utils";
 import type {
   AuthnMethodConfirmationError,
+  AuthnMethodMetadataReplaceError,
   CheckCaptchaError,
   CreateAccountError,
   IdRegFinishError,
@@ -37,6 +38,7 @@ export const handleError = (error: unknown) => {
       | OpenIdCredentialAddError
       | OpenIdCredentialRemoveError
       | AuthnMethodConfirmationError
+      | AuthnMethodMetadataReplaceError
     >(error)
   ) {
     switch (error.type) {
@@ -118,6 +120,16 @@ export const handleError = (error: unknown) => {
         });
         console.error(error);
         break;
+      case "AuthnMethodNotFound":
+        toaster.error({
+          title: "Authentication method not found",
+        });
+        break;
+      case "InvalidMetadata":
+        toaster.error({
+          title: `Invalid metadata. ${error.value(error.type)}`,
+        });
+        break;
       case "NameTooLong":
       case "Unauthorized":
       case "NoAuthnMethodToConfirm":

src/frontend/src/lib/components/views/AccessMethodsPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from "$lib/components/ui/Button.svelte";
   import Panel from "$lib/components/ui/Panel.svelte";
-  import { Link2OffIcon, PlusIcon, Trash2Icon } from "@lucide/svelte";
+  import { EditIcon, Link2OffIcon, PlusIcon, Trash2Icon } from "@lucide/svelte";
   import GoogleIcon from "$lib/components/icons/GoogleIcon.svelte";
   import identityInfo from "$lib/stores/identity-info.state.svelte";
   import AccessMethod from "$lib/components/ui/AccessMethod.svelte";
@@ -15,14 +15,15 @@
     OpenIdCredential,
   } from "$lib/generated/internet_identity_types";
   import RemovePasskeyDialog from "$lib/components/views/RemovePasskeyDialog.svelte";
+  import RenamePasskeyDialog from "$lib/components/views/RenamePasskeyDialog.svelte";
   import { nonNullish } from "@dfinity/utils";
   import { handleError } from "$lib/components/utils/error";
   import {
     getLastUsedAccessMethod,
     isWebAuthnMetaData,
   } from "$lib/utils/accessMethods";
-  import { authnMethodEqual } from "$lib/utils/webAuthn";
   import { AddAccessMethodWizard } from "$lib/components/wizards/addAccessMethod";
+  import { authnMethodEqual, getAuthnMethodAlias } from "$lib/utils/webAuthn";
 
   const MAX_PASSKEYS = 8;
 
@@ -92,6 +93,14 @@
       handleError(error);
     }
   };
+
+  const handleRenamePasskey = async (newName: string) => {
+    try {
+      await identityInfo.renamePasskey(newName);
+    } catch (error) {
+      handleError(error);
+    }
+  };
 </script>
 
 <Panel>
@@ -135,7 +144,14 @@
             isWebAuthnMetaData(lastUsedAccessMethod) &&
             authnMethodEqual(authnMethod, lastUsedAccessMethod)}
         />
-        <div class="flex items-center justify-center px-4">
+        <div class="flex items-center justify-end gap-2 px-4">
+          <Button
+            onclick={() => (identityInfo.renamableAuthnMethod = authnMethod)}
+            variant="tertiary"
+            iconOnly
+          >
+            <EditIcon size="1.25rem" />
+          </Button>
           {#if isRemoveAccessMethodVisible}
             <Button
               onclick={() => (identityInfo.removableAuthnMethod = authnMethod)}
@@ -166,7 +182,7 @@
             lastUsedAccessMethod.sub === credential.sub}
         />
 
-        <div class="flex items-center justify-center px-4">
+        <div class="flex items-center justify-end px-4">
           {#if isRemoveAccessMethodVisible}
             <Button
               onclick={() =>
@@ -200,6 +216,14 @@
   />
 {/if}
 
+{#if identityInfo.renamableAuthnMethod}
+  <RenamePasskeyDialog
+    currentName={getAuthnMethodAlias(identityInfo.renamableAuthnMethod)}
+    onRename={handleRenamePasskey}
+    onClose={() => (identityInfo.renamableAuthnMethod = null)}
+  />
+{/if}
+
 {#if isAddAccessMethodWizardOpen}
   {#if $ADD_ACCESS_METHOD}
     <AddAccessMethodWizard

src/frontend/src/lib/components/views/RenamePasskeyDialog.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Input from "$lib/components/ui/Input.svelte";
+  import { EditIcon } from "@lucide/svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+  import type { AuthnMethodData } from "$lib/generated/internet_identity_types";
+
+  interface Props {
+    currentName: string;
+    onRename: (newName: string) => Promise<void>;
+    onClose: () => void;
+  }
+
+  const { currentName, onRename, onClose }: Props = $props();
+
+  let inputValue = $state(currentName);
+  let isLoading = $state(false);
+  let inputElement = $state<HTMLInputElement>();
+
+  const handleSave = async (e: SubmitEvent) => {
+    e.preventDefault();
+    // Button is disabled so this shouldn't happen.
+    if (inputValue.trim() === "") {
+      return;
+    }
+
+    isLoading = true;
+
+    try {
+      await onRename(inputValue.trim());
+      onClose();
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  // Focus the input when the dialog opens and auto-select the text
+  $effect(() => {
+    if (inputElement) {
+      inputElement.select();
+    }
+  });
+</script>
+
+<Dialog onClose={isLoading ? undefined : onClose}>
+  <FeaturedIcon variant="info" size="lg" class="mb-3">
+    <EditIcon size="1.5rem" />
+  </FeaturedIcon>
+  <h1 class="text-text-primary mb-3 text-2xl font-medium">Rename passkey</h1>
+  <p class="text-text-tertiary mb-6 font-medium">
+    Give your passkey a memorable name to help you identify it.
+  </p>
+
+  <form onsubmit={handleSave} class="flex flex-col gap-6">
+    <Input
+      bind:element={inputElement}
+      bind:value={inputValue}
+      type="text"
+      disabled={isLoading}
+      class="w-full"
+      autofocus
+    />
+    <div class="flex flex-col gap-3">
+      <Button
+        type="submit"
+        variant="primary"
+        disabled={isLoading || inputValue.trim() === ""}
+      >
+        {isLoading ? "Saving..." : "Save"}
+      </Button>
+      <Button onclick={onClose} variant="tertiary" disabled={isLoading}>
+        Cancel
+      </Button>
+    </div>
+  </form>
+</Dialog>

src/frontend/src/lib/stores/identity-info.state.svelte.ts

@@ -2,6 +2,7 @@ import { get } from "svelte/store";
 import {
   AuthnMethodData,
   AuthnMethodRegistrationInfo,
+  MetadataMapV2,
   OpenIdCredential,
 } from "$lib/generated/internet_identity_types";
 import { authenticatedStore } from "./authentication.store";
@@ -19,7 +20,7 @@ import {
   lastUsedIdentityStore,
 } from "./last-used-identities.store";
 import { bufEquals } from "@dfinity/agent";
-import { authnMethodEqual } from "$lib/utils/webAuthn";
+import { authnMethodEqual, authnMethodToPublicKey } from "$lib/utils/webAuthn";
 
 const fetchIdentityInfo = async () => {
   const authenticated = get(authenticatedStore);
@@ -43,6 +44,7 @@ class IdentityInfo {
   openIdCredentials = $state<OpenIdCredential[]>([]);
   removableOpenIdCredential = $state<OpenIdCredential | null>(null);
   removableAuthnMethod = $state<AuthnMethodData | null>(null);
+  renamableAuthnMethod = $state<AuthnMethodData | null>(null);
 
   totalAccessMethods = $derived<number>(
     this.authnMethods.length + this.openIdCredentials.length,
@@ -205,6 +207,44 @@ class IdentityInfo {
     }
   }
 
+  async renamePasskey(newName: string): Promise<void> {
+    if (!this.renamableAuthnMethod)
+      throw Error("Must first select a credential to be renamed!");
+
+    const authnMethod = this.renamableAuthnMethod;
+    let renamed = false;
+    const newMetadata: MetadataMapV2 = authnMethod.metadata.map(
+      ([key, value]) => {
+        if (key === "alias") {
+          renamed = true;
+          return [key, { String: newName }];
+        }
+        return [key, value];
+      },
+    );
+    if (!renamed) {
+      newMetadata.push(["alias", { String: newName }]);
+    }
+    const { actor, identityNumber } = get(authenticatedStore);
+    await actor
+      .authn_method_metadata_replace(
+        identityNumber,
+        authnMethodToPublicKey(authnMethod),
+        newMetadata,
+      )
+      .then(throwCanisterError);
+    // Update authnMethods locally for faster feedback
+    this.authnMethods = this.authnMethods.map((value) =>
+      authnMethodEqual(value, authnMethod)
+        ? {
+            ...value,
+            metadata: newMetadata,
+          }
+        : value,
+    );
+    await this.fetch();
+  }
+
   logout = () => {
     // TODO: When we keep a session open we'll need to clean that session.
     // For now we just reload the page to make sure all the states are cleared

src/frontend/src/lib/utils/webAuthn.ts

@@ -93,3 +93,27 @@ export const authnMethodEqual = (
   }
   return false;
 };
+
+export const authnMethodToPublicKey = (
+  authnMethod: AuthnMethodData,
+): Uint8Array => {
+  if ("WebAuthn" in authnMethod.authn_method) {
+    return new Uint8Array(authnMethod.authn_method.WebAuthn.pubkey);
+  }
+  if ("PubKey" in authnMethod.authn_method) {
+    return new Uint8Array(authnMethod.authn_method.PubKey.pubkey);
+  }
+  throw new Error(
+    `Unknown authentication method: ${JSON.stringify(authnMethod.authn_method)}`,
+  );
+};
+
+export const getAuthnMethodAlias = (authnMethod: AuthnMethodData): string => {
+  const metadataAlias = authnMethod.metadata.find(
+    ([key, _val]) => key === "alias",
+  )?.[1];
+  if (metadataAlias && "String" in metadataAlias) {
+    return metadataAlias.String;
+  }
+  return "";
+};