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>

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',

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>

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!);

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;
 };

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()}

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
 	};
 };

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>