Remove passkeys (#3182)

* Remove passkey

* Remove passkey

* Fix length check.

* Fix lint

* Update src/frontend/src/lib/components/views/RemovePasskeyDialog.svelte

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: sea-snake

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

@@ -3,23 +3,14 @@
   import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
   import Button from "$lib/components/ui/Button.svelte";
   import { TriangleAlertIcon } from "@lucide/svelte";
-  import identityInfo from "$lib/stores/identity-info.state.svelte";
-  import { handleError } from "../utils/error";
-  import { type OpenIdCredential } from "$lib/generated/internet_identity_types";
 
-  const {
-    onClose,
-    credentialToBeRemoved,
-  }: { onClose: () => void; credentialToBeRemoved: OpenIdCredential } =
-    $props();
+  interface Props {
+    onRemove: () => void;
+    onClose: () => void;
+    isCurrentAccessMethod?: boolean;
+  }
 
-  const handleRemoveCredential = async () => {
-    try {
-      await identityInfo.removeGoogle();
-    } catch (error) {
-      handleError(error);
-    }
-  };
+  const { onRemove, onClose, isCurrentAccessMethod }: Props = $props();
 </script>
 
 <Dialog {onClose}>
@@ -31,14 +22,14 @@
     You're about to unlink your Google Account. If you proceed, you will no
     longer be able to sign-in to your identity or dapps using your Google
     Account.
-    {#if identityInfo.isCurrentAccessMethod({ openid: credentialToBeRemoved })}
+    {#if isCurrentAccessMethod}
       <br /><br />As you are currently signed in with this Account, you will be
       signed out.
     {/if}
   </p>
 
   <div class="flex w-full flex-col gap-3">
-    <Button onclick={handleRemoveCredential} variant="primary" danger>
+    <Button onclick={onRemove} variant="primary" danger>
       Unlink Google Account
     </Button>
     <Button variant="tertiary" onclick={onClose}>Keep linked</Button>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import { TriangleAlertIcon } from "@lucide/svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+
+  interface Props {
+    onRemove: () => void;
+    onClose: () => void;
+    isCurrentAccessMethod?: boolean;
+  }
+
+  const { onRemove, onClose, isCurrentAccessMethod = false }: Props = $props();
+</script>
+
+<Dialog {onClose}>
+  <FeaturedIcon variant="warning" size="lg" class="mb-3">
+    <TriangleAlertIcon size="1.5rem" />
+  </FeaturedIcon>
+  <h1 class="text-text-primary mb-3 text-2xl font-medium">Are you sure?</h1>
+  <p class="text-text-tertiary mb-8 font-medium">
+    Removing this passkey means you won't be able to use it to sign in anymore.
+    You can always add a new one later.
+    {#if isCurrentAccessMethod}
+      <br /><br />
+      As you are currently signed in with this passkey, you will be signed out.
+    {/if}
+  </p>
+  <Button onclick={onRemove} variant="primary" danger class="mb-3">
+    Remove passkey
+  </Button>
+  <Button onclick={onClose} variant="tertiary">Cancel</Button>
+</Dialog>

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

@@ -18,6 +18,8 @@ import {
   lastUsedIdentitiesStore,
   lastUsedIdentityStore,
 } from "./last-used-identities.store";
+import { bufEquals } from "@dfinity/agent";
+import { authnMethodEqual } from "$lib/utils/webAuthn";
 
 const fetchIdentityInfo = async () => {
   const authenticated = get(authenticatedStore);
@@ -40,6 +42,7 @@ class IdentityInfo {
 
   openIdCredentials = $state<OpenIdCredential[]>([]);
   removableOpenIdCredential = $state<OpenIdCredential | null>(null);
+  removableAuthnMethod = $state<AuthnMethodData | null>(null);
 
   totalAccessMethods = $derived<number>(
     this.authnMethods.length + this.openIdCredentials.length,
@@ -160,6 +163,48 @@ class IdentityInfo {
     await throwCanisterError(googleRemoveResult);
   };
 
+  async removePasskey(): Promise<void> {
+    const { actor, identityNumber } = get(authenticatedStore);
+    if (isNullish(this.removableAuthnMethod)) {
+      throw new Error("No passkey to remove");
+    }
+    const authnMethod = this.removableAuthnMethod;
+    const publicKey = new Uint8Array(
+      "WebAuthn" in authnMethod.authn_method
+        ? authnMethod.authn_method.WebAuthn.pubkey
+        : authnMethod.authn_method.PubKey.pubkey,
+    );
+    this.removableAuthnMethod = null;
+    const index = this.authnMethods.findIndex((value) =>
+      authnMethodEqual(value, authnMethod),
+    );
+    this.authnMethods.splice(index, 1);
+    try {
+      await actor
+        .authn_method_remove(identityNumber, publicKey)
+        .then(throwCanisterError);
+
+      if (
+        "WebAuthn" in authnMethod.authn_method &&
+        this.isCurrentAccessMethod({
+          passkey: {
+            credentialId: new Uint8Array(
+              authnMethod.authn_method.WebAuthn.credential_id,
+            ),
+          },
+        })
+      ) {
+        lastUsedIdentitiesStore.removeIdentity(identityNumber);
+        this.logout();
+        return;
+      }
+      await this.fetch();
+    } catch (error) {
+      this.authnMethods.splice(index, 0, authnMethod);
+      throw error;
+    }
+  }
+
   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
@@ -173,21 +218,24 @@ class IdentityInfo {
   ) => {
     const lastUsedAuthMethod = get(lastUsedIdentityStore)?.authMethod;
     if (
-      lastUsedAuthMethod &&
+      nonNullish(lastUsedAuthMethod) &&
       "openid" in lastUsedAuthMethod &&
-      "openid" in accessMethod &&
-      lastUsedAuthMethod.openid.sub === accessMethod.openid.sub
+      "openid" in accessMethod
     ) {
-      return true;
+      return (
+        lastUsedAuthMethod.openid.iss === accessMethod.openid.iss &&
+        lastUsedAuthMethod.openid.sub === accessMethod.openid.sub
+      );
     }
     if (
-      lastUsedAuthMethod &&
+      nonNullish(lastUsedAuthMethod) &&
       "passkey" in lastUsedAuthMethod &&
-      "passkey" in accessMethod &&
-      lastUsedAuthMethod.passkey.credentialId ===
-        accessMethod.passkey.credentialId
+      "passkey" in accessMethod
     ) {
-      return true;
+      return bufEquals(
+        lastUsedAuthMethod.passkey.credentialId,
+        accessMethod.passkey.credentialId,
+      );
     }
     return false;
   };

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

@@ -1,4 +1,7 @@
-import type { DeviceData } from "$lib/generated/internet_identity_types";
+import type {
+  AuthnMethodData,
+  DeviceData,
+} from "$lib/generated/internet_identity_types";
 import { features } from "$lib/legacy/features";
 import {
   DummyIdentity,
@@ -7,6 +10,7 @@ import {
 } from "$lib/utils/iiConnection";
 import { diagnosticInfo, unknownToString } from "$lib/utils/utils";
 import { WebAuthnIdentity } from "./webAuthnIdentity";
+import { bufEquals } from "@dfinity/agent";
 
 export const constructIdentity = async ({
   devices,
@@ -67,3 +71,25 @@ export const lookupAAGUID = async (
   ).default;
   return knownList[aaguid as keyof typeof knownList];
 };
+
+/**
+ * Check if two `AuthnMethodData` values are equal to one another
+ */
+export const authnMethodEqual = (
+  a: AuthnMethodData,
+  b: AuthnMethodData,
+): boolean => {
+  if ("WebAuthn" in a.authn_method && "WebAuthn" in b.authn_method) {
+    return bufEquals(
+      new Uint8Array(a.authn_method.WebAuthn.pubkey),
+      new Uint8Array(b.authn_method.WebAuthn.pubkey),
+    );
+  }
+  if ("PubKey" in a.authn_method && "PubKey" in b.authn_method) {
+    return bufEquals(
+      new Uint8Array(a.authn_method.PubKey.pubkey),
+      new Uint8Array(b.authn_method.PubKey.pubkey),
+    );
+  }
+  return false;
+};

src/frontend/src/routes/(new-styling)/manage/(authenticated)/security/+page.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 { Link2Off, Plus } from "@lucide/svelte";
+  import { 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";
@@ -14,6 +14,9 @@
     AuthnMethodData,
     OpenIdCredential,
   } from "$lib/generated/internet_identity_types";
+  import RemovePasskeyDialog from "$lib/components/views/RemovePasskeyDialog.svelte";
+  import { nonNullish } from "@dfinity/utils";
+  import { handleError } from "$lib/components/utils/error";
   import AddAccessMethodWizard from "$lib/components/wizards/AddAccessMethodWizard.svelte";
 
   const MAX_PASSKEYS = 8;
@@ -25,6 +28,7 @@
   const isMaxOpenIdCredentialsReached = $derived(
     identityInfo.openIdCredentials.length >= 1,
   );
+
   const isMaxPasskeysReached = $derived(
     identityInfo.authnMethods.length >= MAX_PASSKEYS,
   );
@@ -34,6 +38,26 @@
       ? !isMaxOpenIdCredentialsReached || !isMaxPasskeysReached
       : !isMaxOpenIdCredentialsReached,
   );
+  const isRemoveAccessMethodVisible = $derived(
+    authnMethods.length + openIdCredentials.length > 1,
+  );
+  const isRemovableAuthnMethodCurrentAccessMethod = $derived(
+    nonNullish(identityInfo.removableAuthnMethod) &&
+      "WebAuthn" in identityInfo.removableAuthnMethod.authn_method &&
+      identityInfo.isCurrentAccessMethod({
+        passkey: {
+          credentialId: new Uint8Array(
+            identityInfo.removableAuthnMethod.authn_method.WebAuthn.credential_id,
+          ),
+        },
+      }),
+  );
+  const isRemovableOpenIdCredentialCurrentAccessMethod = $derived(
+    nonNullish(identityInfo.removableOpenIdCredential) &&
+      identityInfo.isCurrentAccessMethod({
+        openid: identityInfo.removableOpenIdCredential,
+      }),
+  );
 
   const handleGoogleLinked = (credential: OpenIdCredential) => {
     openIdCredentials.push(credential);
@@ -43,6 +67,20 @@
     authnMethods.push(authnMethod);
     invalidateAll();
   };
+  const handleRemoveOpenIdCredential = async () => {
+    try {
+      await identityInfo.removeGoogle();
+    } catch (error) {
+      handleError(error);
+    }
+  };
+  const handleRemovePasskey = async () => {
+    try {
+      await identityInfo.removePasskey();
+    } catch (error) {
+      handleError(error);
+    }
+  };
 </script>
 
 <h1 class="text-text-primary mb-4 text-3xl font-semibold">Security</h1>
@@ -67,15 +105,15 @@
           class="max-md:w-full"
         >
           <span>Add</span>
-          <Plus size="1.25rem" />
+          <PlusIcon size="1.25rem" />
         </Button>
       </div>
     {/if}
   </div>
   <div
     class={`grid grid-cols-[min-content_1fr_min-content] grid-rows-[${identityInfo.totalAccessMethods}]`}
   >
-    {#each identityInfo.authnMethods as authnMethod}
+    {#each authnMethods as authnMethod}
       <div
         class="border-border-tertiary col-span-3 grid grid-cols-subgrid border-t py-4"
       >
@@ -85,9 +123,18 @@
           <PasskeyIcon />
         </div>
         <AccessMethod accessMethod={authnMethod} />
-        <!-- for layout consistency -->
-        <!-- TODO: this is where we would add interactions like removal -->
-        <div class="min-h-10 min-w-[52px]"></div>
+        <div class="flex items-center justify-center pr-4">
+          {#if isRemoveAccessMethodVisible}
+            <Button
+              onclick={() => (identityInfo.removableAuthnMethod = authnMethod)}
+              variant="tertiary"
+              iconOnly
+              class="!text-fg-error-secondary"
+            >
+              <Trash2Icon size="1.25rem" />
+            </Button>
+          {/if}
+        </div>
       </div>
     {/each}
     {#each openIdCredentials as credential}
@@ -103,14 +150,15 @@
         <AccessMethod accessMethod={credential} />
 
         <div class="flex items-center justify-center pr-4">
-          {#if identityInfo.totalAccessMethods > 1}
+          {#if isRemoveAccessMethodVisible}
             <Button
-              variant="tertiary"
-              iconOnly={true}
               onclick={() =>
                 (identityInfo.removableOpenIdCredential = credential)}
+              variant="tertiary"
+              iconOnly
+              class="!text-fg-error-secondary"
             >
-              <Link2Off class="stroke-fg-error-secondary" />
+              <Link2OffIcon size="1.25rem" />
             </Button>
           {/if}
         </div>
@@ -121,8 +169,17 @@
 
 {#if identityInfo.removableOpenIdCredential}
   <RemoveOpenIdCredential
-    credentialToBeRemoved={identityInfo.removableOpenIdCredential}
+    onRemove={handleRemoveOpenIdCredential}
     onClose={() => (identityInfo.removableOpenIdCredential = null)}
+    isCurrentAccessMethod={isRemovableOpenIdCredentialCurrentAccessMethod}
+  />
+{/if}
+
+{#if identityInfo.removableAuthnMethod}
+  <RemovePasskeyDialog
+    onRemove={handleRemovePasskey}
+    onClose={() => (identityInfo.removableAuthnMethod = null)}
+    isCurrentAccessMethod={isRemovableAuthnMethodCurrentAccessMethod}
   />
 {/if}