feat: add ability to revoke passkeys of users as admin (#1386)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: jose-d <7630424+jose-d@users.noreply.github.com> Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com> Co-authored-by: Elias Schneider <login@eliasschneider.com>
2026-04-13 10:06:36 +00:00 · 2026-04-12 18:29:42 +02:00
parent 544f4e63d8
commit 33cceeafa8
17 changed files with 265 additions and 40 deletions
--- a/frontend/messages/cs.json
+++ b/frontend/messages/cs.json
@@ -117,6 +117,7 @@
 	"account_details": "Podrobnosti účtu",
 	"passkeys": "Přístupové klíče",
 	"manage_your_passkeys_that_you_can_use_to_authenticate_yourself": "Spravujte své přístupové klíče, které můžete použít pro ověření.",
+	"manage_this_users_passkeys": "Přehled a správa přístupových klíčů tohoto uživatele.",
 	"add_passkey": "Přidat přístupový klíč",
 	"create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey": "Vytvořte jednorázový přihlašovací kód pro přihlášení z jiného zařízení bez přístupového klíče.",
 	"create": "Vytvořit",
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -106,6 +106,7 @@
 	"ip_address": "IP Address",
 	"device": "Device",
 	"client": "Client",
+	"actor": "Actor",
 	"unknown": "Unknown",
 	"account_details_updated_successfully": "Account details updated successfully",
 	"profile_picture_updated_successfully": "Profile picture updated successfully. It may take a few minutes to update.",
@@ -117,6 +118,7 @@
 	"account_details": "Account Details",
 	"passkeys": "Passkeys",
 	"manage_your_passkeys_that_you_can_use_to_authenticate_yourself": "Manage your passkeys that you can use to authenticate yourself.",
+	"manage_this_users_passkeys": "Manage this user's passkeys.",
 	"add_passkey": "Add Passkey",
 	"create_a_one_time_login_code_to_sign_in_from_a_different_device_without_a_passkey": "Create a one-time login code to sign in from a different device without a passkey.",
 	"create": "Create",
@@ -521,5 +523,6 @@
 	"mark_as_verified": "Mark as verified",
 	"email_verification_sent": "Verification email sent successfully.",
 	"emails_verified_by_default": "Emails verified by default",
-	"emails_verified_by_default_description": "When enabled, users' email addresses will be marked as verified by default upon signup or when their email address is changed."
+	"emails_verified_by_default_description": "When enabled, users' email addresses will be marked as verified by default upon signup or when their email address is changed.",
+	"user_has_no_passkeys_yet": "This user has no passkeys yet."
 }
--- a/frontend/messages/it.json
+++ b/frontend/messages/it.json
@@ -106,6 +106,7 @@
 	"ip_address": "Indirizzo IP",
 	"device": "Dispositivo",
 	"client": "Client",
+	"actor": "Autore",
 	"unknown": "Sconosciuto",
 	"account_details_updated_successfully": "Dettagli dell'account aggiornati con successo",
 	"profile_picture_updated_successfully": "Immagine del profilo aggiornata con successo. Potrebbero essere necessari alcuni minuti per l'aggiornamento.",
--- a/frontend/src/lib/components/audit-log-list.svelte
+++ b/frontend/src/lib/components/audit-log-list.svelte
@@ -32,6 +32,12 @@
 			hidden: !isAdmin,
 			value: (item) => item.username ?? m.unknown()
 		},
+		{
+			label: m.actor(),
+			key: 'actorUsername',
+			hidden: !isAdmin,
+			value: (item) => item.actorUsername ?? m.unknown()
+		},
 		{
 			label: m.event(),
 			column: 'event',
--- a/frontend/src/lib/components/passkey-row.svelte
+++ b/frontend/src/lib/components/passkey-row.svelte
@@ -9,12 +9,14 @@
 		icon,
 		onRename,
 		onDelete,
+		showRenameAction = true,
 		label,
 		description
 	}: {
 		icon: typeof IconType;
-		onRename: () => void;
+		onRename?: () => void;
 		onDelete: () => void;
+		showRenameAction?: boolean;
 		description?: string;
 		label?: string;
 	} = $props();
@@ -36,22 +38,24 @@
 		{/if}
 	</Item.Content>
 	<Item.Actions>
-		<Tooltip.Provider>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Button
-						onclick={onRename}
-						size="icon"
-						variant="ghost"
-						class="size-8"
-						aria-label={m.rename()}
-					>
-						<LucidePencil class="size-4" />
-					</Button>
-				</Tooltip.Trigger>
-				<Tooltip.Content>{m.rename()}</Tooltip.Content>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+		{#if showRenameAction && onRename}
+			<Tooltip.Provider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<Button
+							onclick={onRename}
+							size="icon"
+							variant="ghost"
+							class="size-8"
+							aria-label={m.rename()}
+						>
+							<LucidePencil class="size-4" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content>{m.rename()}</Tooltip.Content>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		{/if}

 		<Tooltip.Provider>
 			<Tooltip.Root>
--- a/frontend/src/lib/services/user-service.ts
+++ b/frontend/src/lib/services/user-service.ts
@@ -1,5 +1,6 @@
 import userStore from '$lib/stores/user-store';
 import type { ListRequestOptions, Paginated } from '$lib/types/list-request.type';
+import type { Passkey } from '$lib/types/passkey.type';
 import type { SignupToken } from '$lib/types/signup-token.type';
 import type { UserGroup } from '$lib/types/user-group.type';
 import type { AccountUpdate, User, UserCreate, UserSignUp } from '$lib/types/user.type';
@@ -33,6 +34,11 @@ export default class UserService extends APIService {
 		return res.data as UserGroup[];
 	};

+	listUserPasskeys = async (userId: string) => {
+		const res = await this.api.get(`/users/${userId}/webauthn-credentials`);
+		return res.data as Passkey[];
+	};
+
 	update = async (id: string, user: UserCreate) => {
 		const res = await this.api.put(`/users/${id}`, user);
 		return res.data as User;
@@ -47,6 +53,10 @@ export default class UserService extends APIService {
 		await this.api.delete(`/users/${id}`);
 	};

+	removeUserPasskey = async (userId: string, passkeyId: string) => {
+		await this.api.delete(`/users/${userId}/webauthn-credentials/${passkeyId}`);
+	};
+
 	updateProfilePicture = async (userId: string, image: File) => {
 		const formData = new FormData();
 		formData.append('file', image!);
--- a/frontend/src/lib/types/audit-log.type.ts
+++ b/frontend/src/lib/types/audit-log.type.ts
@@ -7,6 +7,7 @@ export type AuditLog = {
 	device: string;
 	userId: string;
 	username?: string;
+	actorUsername?: string;
 	createdAt: string;
 	data: any;
 };
--- a/frontend/src/routes/settings/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/settings/admin/users/[id]/+page.svelte
@@ -5,23 +5,27 @@
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import * as Item from '$lib/components/ui/item/index.js';
 	import UserGroupSelection from '$lib/components/user-group-selection.svelte';
 	import { m } from '$lib/paraglide/messages';
 	import CustomClaimService from '$lib/services/custom-claim-service';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
+	import type { Passkey } from '$lib/types/passkey.type';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideChevronLeft } from '@lucide/svelte';
+	import { KeyRound, LucideChevronLeft } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { backNavigate } from '../navigate-back-util';
 	import UserForm from '../user-form.svelte';
+	import AdminPasskeyList from './admin-passkey-list.svelte';

 	let { data } = $props();
 	let user = $state({
 		...data.user,
 		userGroupIds: data.user.userGroups.map((g) => g.id)
 	});
+	let passkeys: Passkey[] = $state(data.passkeys);

 	const userService = new UserService();
 	const customClaimService = new CustomClaimService();
@@ -128,6 +132,21 @@
 	</div>
 </CollapsibleCard>

+<Item.Group class="bg-card rounded-xl border p-4 shadow-sm">
+	<Item.Root class="border-none bg-transparent p-0">
+		<Item.Media class="text-primary/80">
+			<KeyRound class="size-5" />
+		</Item.Media>
+		<Item.Content class="min-w-52">
+			<Item.Title class="text-xl font-semibold">{m.passkeys()}</Item.Title>
+			<Item.Description>{passkeys.length > 0 ? m.manage_this_users_passkeys() : m.user_has_no_passkeys_yet()}</Item.Description>
+		</Item.Content>
+	</Item.Root>
+	{#if passkeys.length > 0}
+		<AdminPasskeyList userId={user.id} bind:passkeys />
+	{/if}
+</Item.Group>
+
 <CollapsibleCard
 	id="user-custom-claims"
 	title={m.custom_claims()}
--- a/frontend/src/routes/settings/admin/users/[id]/+page.ts
+++ b/frontend/src/routes/settings/admin/users/[id]/+page.ts
@@ -3,9 +3,13 @@ import type { PageLoad } from './$types';

 export const load: PageLoad = async ({ params }) => {
 	const userService = new UserService();
-	const user = await userService.get(params.id);
+	const [user, passkeys] = await Promise.all([
+		userService.get(params.id),
+		userService.listUserPasskeys(params.id)
+	]);

 	return {
-		user
+		user,
+		passkeys
 	};
 };
--- a/frontend/src/routes/settings/admin/users/[id]/admin-passkey-list.svelte
+++ b/frontend/src/routes/settings/admin/users/[id]/admin-passkey-list.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { openConfirmDialog } from '$lib/components/confirm-dialog';
+	import PasskeyRow from '$lib/components/passkey-row.svelte';
+	import * as Item from '$lib/components/ui/item/index.js';
+	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
+	import type { Passkey } from '$lib/types/passkey.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideKeyRound } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		userId,
+		passkeys = $bindable()
+	}: {
+		userId: string;
+		passkeys: Passkey[];
+	} = $props();
+
+	const userService = new UserService();
+
+	async function refreshPasskeys() {
+		passkeys = await userService.listUserPasskeys(userId);
+	}
+
+	function deletePasskey(passkey: Passkey) {
+		openConfirmDialog({
+			title: m.delete_passkey_name({ passkeyName: passkey.name }),
+			message: m.are_you_sure_you_want_to_delete_this_passkey(),
+			confirm: {
+				label: m.delete(),
+				destructive: true,
+				action: async () => {
+					try {
+						await userService.removeUserPasskey(userId, passkey.id);
+						await refreshPasskeys();
+						toast.success(m.passkey_deleted_successfully());
+					} catch (e) {
+						axiosErrorToast(e);
+					}
+				}
+			}
+		});
+	}
+</script>
+
+<Item.Group class="mt-3">
+	{#each [...passkeys].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) as passkey}
+		<PasskeyRow
+			label={passkey.name}
+			description={m.added_on() + ' ' + new Date(passkey.createdAt).toLocaleDateString()}
+			icon={LucideKeyRound}
+			showRenameAction={false}
+			onDelete={() => deletePasskey(passkey)}
+		/>
+	{/each}
+</Item.Group>