feat: map allowed groups to OIDC clients (#202)

frontend/src/lib/components/collapsible-card.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style';
+	import { LucideChevronDown } from 'lucide-svelte';
+	import { onMount, type Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import { Button } from './ui/button';
+	import * as Card from './ui/card';
+
+	let {
+		id,
+		title,
+		description,
+		defaultExpanded = false,
+		children
+	}: {
+		id: string;
+		title: string;
+		description?: string;
+		defaultExpanded?: boolean;
+		children: Snippet;
+	} = $props();
+
+	let expanded = $state(defaultExpanded);
+
+	function loadExpandedState() {
+		const state = JSON.parse(localStorage.getItem('collapsible-cards-expanded') || '{}');
+		expanded = state[id] || false;
+	}
+
+	function saveExpandedState() {
+		const state = JSON.parse(localStorage.getItem('collapsible-cards-expanded') || '{}');
+		state[id] = expanded;
+		localStorage.setItem('collapsible-cards-expanded', JSON.stringify(state));
+	}
+
+	function toggleExpanded() {
+		expanded = !expanded;
+		saveExpandedState();
+	}
+
+	onMount(() => {
+		if (defaultExpanded) {
+			saveExpandedState();
+		}
+		loadExpandedState();
+	});
+</script>
+
+<Card.Root>
+	<Card.Header class="cursor-pointer" onclick={toggleExpanded}>
+		<div class="flex items-center justify-between">
+			<div>
+				<Card.Title>{title}</Card.Title>
+				{#if description}
+					<Card.Description>{description}</Card.Description>
+				{/if}
+			</div>
+			<Button class="ml-10 h-8 p-3" variant="ghost" aria-label="Expand card">
+				<LucideChevronDown
+					class={cn(
+						'h-5 w-5 transition-transform duration-200',
+						expanded && 'rotate-180 transform'
+					)}
+				/>
+			</Button>
+		</div>
+	</Card.Header>
+	{#if expanded}
+		<div transition:slide={{ duration: 200 }}>
+			<Card.Content>
+				{@render children()}
+			</Card.Content>
+		</div>
+	{/if}
+</Card.Root>

frontend/src/lib/components/ui/card/card-description.svelte

@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground mt-1', className)} {...$$restProps}>
 	<slot />
 </p>

frontend/src/lib/services/oidc-service.ts

@@ -1,4 +1,9 @@
-import type { AuthorizeResponse, OidcClient, OidcClientCreate } from '$lib/types/oidc.type';
+import type {
+	AuthorizeResponse,
+	OidcClient,
+	OidcClientCreate,
+	OidcClientWithAllowedUserGroups
+} from '$lib/types/oidc.type';
 import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
 
@@ -23,24 +28,13 @@ class OidcService extends APIService {
 		return res.data as AuthorizeResponse;
 	}
 
-	async authorizeNewClient(
-		clientId: string,
-		scope: string,
-		callbackURL: string,
-		nonce?: string,
-		codeChallenge?: string,
-		codeChallengeMethod?: string
-	) {
-		const res = await this.api.post('/oidc/authorize/new-client', {
+	async isAuthorizationRequired(clientId: string, scope: string) {
+		const res = await this.api.post('/oidc/authorization-required', {
 			scope,
-			nonce,
-			callbackURL,
-			clientId,
-			codeChallenge,
-			codeChallengeMethod
+			clientId
 		});
 
-		return res.data as AuthorizeResponse;
+		return res.data.authorizationRequired as boolean;
 	}
 
 	async listClients(options?: SearchPaginationSortRequest) {
@@ -59,7 +53,7 @@ class OidcService extends APIService {
 	}
 
 	async getClient(id: string) {
-		return (await this.api.get(`/oidc/clients/${id}`)).data as OidcClient;
+		return (await this.api.get(`/oidc/clients/${id}`)).data as OidcClientWithAllowedUserGroups;
 	}
 
 	async updateClient(id: string, client: OidcClientCreate) {
@@ -88,6 +82,11 @@ class OidcService extends APIService {
 	async createClientSecret(id: string) {
 		return (await this.api.post(`/oidc/clients/${id}/secret`)).data.secret as string;
 	}
+
+	async updateAllowedUserGroups(id: string, userGroupIds: string[]) {
+		const res = await this.api.put(`/oidc/clients/${id}/allowed-user-groups`, { userGroupIds });
+		return res.data as OidcClientWithAllowedUserGroups;
+	}
 }
 
 export default OidcService;

frontend/src/lib/types/oidc.type.ts

@@ -1,3 +1,5 @@
+import type { UserGroup } from './user-group.type';
+
 export type OidcClient = {
 	id: string;
 	name: string;
@@ -8,6 +10,10 @@ export type OidcClient = {
 	pkceEnabled: boolean;
 };
 
+export type OidcClientWithAllowedUserGroups = OidcClient & {
+	allowedUserGroups: UserGroup[];
+};
+
 export type OidcClientCreate = Omit<OidcClient, 'id' | 'logoURL' | 'hasLogo'>;
 
 export type OidcClientCreateWithLogo = OidcClientCreate & {

frontend/src/routes/authorize/+page.svelte

@@ -23,6 +23,7 @@
 	let success = false;
 	let errorMessage: string | null = null;
 	let authorizationRequired = false;
+	let authorizationConfirmed = false;
 
 	export let data: PageData;
 	let { scope, nonce, client, state, callbackURL, codeChallenge, codeChallengeMethod } = data;
@@ -40,7 +41,17 @@
 			if (!$userStore?.id) {
 				const loginOptions = await webauthnService.getLoginOptions();
 				const authResponse = await startAuthentication(loginOptions);
-				await webauthnService.finishLogin(authResponse);
+				const user = await webauthnService.finishLogin(authResponse);
+				userStore.setUser(user);
+			}
+
+			if (!authorizationConfirmed) {
+				authorizationRequired = await oidService.isAuthorizationRequired(client!.id, scope);
+				if (authorizationRequired) {
+					isLoading = false;
+					authorizationConfirmed = true;
+					return;
+				}
 			}
 
 			await oidService
@@ -49,7 +60,7 @@
 					onSuccess(code, callbackURL);
 				});
 		} catch (e) {
-			if (e instanceof AxiosError && e.response?.status === 403) {
+			if (e instanceof AxiosError && e.response?.data.error === 'Missing authorization') {
 				authorizationRequired = true;
 			} else {
 				errorMessage = getWebauthnErrorMessage(e);
@@ -58,27 +69,6 @@
 		}
 	}
 
-	async function authorizeNewClient() {
-		isLoading = true;
-		try {
-			await oidService
-				.authorizeNewClient(
-					client!.id,
-					scope,
-					callbackURL,
-					nonce,
-					codeChallenge,
-					codeChallengeMethod
-				)
-				.then(async ({ code, callbackURL }) => {
-					onSuccess(code, callbackURL);
-				});
-		} catch (e) {
-			errorMessage = getWebauthnErrorMessage(e);
-			isLoading = false;
-		}
-	}
-
 	function onSuccess(code: string, callbackURL: string) {
 		success = true;
 		setTimeout(() => {
@@ -100,14 +90,14 @@
 {:else}
 	<SignInWrapper showEmailOneTimeAccessButton={$appConfigStore.emailOneTimeAccessEnabled}>
 		<ClientProviderImages {client} {success} error={!!errorMessage} />
-		<h1 class="mt-5 font-playfair text-3xl font-bold sm:text-4xl">Sign in to {client.name}</h1>
+		<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">Sign in to {client.name}</h1>
 		{#if errorMessage}
-			<p class="mb-10 mt-2 text-muted-foreground">
-				{errorMessage}. Please try again.
+			<p class="text-muted-foreground mb-10 mt-2">
+				{errorMessage}.
 			</p>
 		{/if}
 		{#if !authorizationRequired && !errorMessage}
-			<p class="mb-10 mt-2 text-muted-foreground">
+			<p class="text-muted-foreground mb-10 mt-2">
 				Do you want to sign in to <b>{client.name}</b> with your
 				<b>{$appConfigStore.appName}</b> account?
 			</p>
@@ -115,7 +105,7 @@
 			<div transition:slide={{ duration: 300 }}>
 				<Card.Root class="mb-10 mt-6">
 					<Card.Header class="pb-5">
-						<p class="text-start text-muted-foreground">
+						<p class="text-muted-foreground text-start">
 							<b>{client.name}</b> wants to access the following information:
 						</p>
 					</Card.Header>
@@ -146,13 +136,7 @@
 		<div class="flex w-full justify-stretch gap-2">
 			<Button onclick={() => history.back()} class="w-full" variant="secondary">Cancel</Button>
 			{#if !errorMessage}
-				<Button
-					class="w-full"
-					{isLoading}
-					on:click={authorizationRequired ? authorizeNewClient : authorize}
-				>
-					Sign in
-				</Button>
+				<Button class="w-full" {isLoading} on:click={authorize}>Sign in</Button>
 			{:else}
 				<Button class="w-full" on:click={() => (errorMessage = null)}>Try again</Button>
 			{/if}

frontend/src/routes/authorize/components/client-provider-images.svelte

@@ -30,7 +30,7 @@
 
 <div class="flex justify-center gap-3">
 	<div
-		class=" rounded-2xl bg-muted p-3 transition-transform duration-500 ease-in {success || error
+		class=" bg-muted transition-translate rounded-2xl p-3 duration-500 ease-in {success || error
 			? 'translate-x-[108px]'
 			: ''}"
 	>
@@ -38,10 +38,12 @@
 	</div>
 
 	<ConnectArrow
-		class="arrow-fade-out h-w-32 w-32 {success || error ? 'opacity-0' : 'opacity-100'}"
+		class="h-w-32 w-32 transition-opacity duration-500 {success || error
+			? 'opacity-0'
+			: 'opacity-100 delay-300'}"
 	/>
 	<div
-		class="rounded-2xl p-3 [transition:transform_500ms_ease-in,background-color_200ms] {success ||
+		class="rounded-2xl p-3 [transition:translate_500ms_ease-in,background-color_200ms] {success ||
 		error
 			? '-translate-x-[108px]'
 			: ''} {animationDone ? (success ? 'bg-green-200' : 'bg-red-200') : 'bg-muted'}"

frontend/src/routes/settings/admin/application-configuration/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
+	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import AppConfigService from '$lib/services/app-config-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
@@ -55,45 +55,27 @@
 	<title>Application Configuration</title>
 </svelte:head>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>General</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
-	</Card.Content>
-</Card.Root>
+<CollapsibleCard id="application-configuration-general" title="General" defaultExpanded>
+	<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
+</CollapsibleCard>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Email</Card.Title>
-		<Card.Description>
-			Enable email notifications to alert users when a login is detected from a new device or
-			location.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
-	</Card.Content>
-</Card.Root>
+<CollapsibleCard
+	id="application-configuration-email"
+	title="Email"
+	description="Enable email notifications to alert users when a login is detected from a new device or
+			location."
+>
+	<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
+</CollapsibleCard>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>LDAP</Card.Title>
-		<Card.Description>
-			Configure LDAP settings to sync users and groups from an LDAP server.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
-	</Card.Content>
-</Card.Root>
+<CollapsibleCard
+	id="application-configuration-ldap"
+	title="LDAP"
+	description="Configure LDAP settings to sync users and groups from an LDAP server."
+>
+	<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
+</CollapsibleCard>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Images</Card.Title>
-	</Card.Header>
-	<Card.Content>
-		<UpdateApplicationImages callback={updateImages} />
-	</Card.Content>
-</Card.Root>
+<CollapsibleCard id="application-configuration-images" title="Images">
+	<UpdateApplicationImages callback={updateImages} />
+</CollapsibleCard>

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { beforeNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
+	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
 	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import OidcService from '$lib/services/oidc-service';
+	import UserGroupService from '$lib/services/user-group-service';
 	import clientSecretStore from '$lib/stores/client-secret-store';
 	import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
@@ -14,12 +16,17 @@
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import OidcForm from '../oidc-client-form.svelte';
+	import UserGroupSelection from '../user-group-selection.svelte';
 
 	let { data } = $props();
-	let client = $state(data);
+	let client = $state({
+		...data,
+		allowedUserGroupIds: data.allowedUserGroups.map((g) => g.id)
+	});
 	let showAllDetails = $state(false);
 
 	const oidcService = new OidcService();
+	const userGroupService = new UserGroupService();
 
 	const setupDetails = $state({
 		'Authorization URL': `https://${$page.url.hostname}/authorize`,
@@ -74,6 +81,17 @@
 		});
 	}
 
+	async function updateUserGroupClients(allowedGroups: string[]) {
+		await oidcService
+			.updateAllowedUserGroups(client.id, allowedGroups)
+			.then(() => {
+				toast.success('Allowed user groups updated successfully');
+			})
+			.catch((e) => {
+				axiosErrorToast(e);
+			});
+	}
+
 	beforeNavigate(() => {
 		clientSecretStore.clear();
 	});
@@ -84,7 +102,7 @@
 </svelte:head>
 
 <div>
-	<a class="flex text-sm text-muted-foreground" href="/settings/admin/oidc-clients"
+	<a class="text-muted-foreground flex text-sm" href="/settings/admin/oidc-clients"
 		><LucideChevronLeft class="h-5 w-5" /> Back</a
 	>
 </div>
@@ -97,7 +115,7 @@
 			<div class="mb-2 flex">
 				<Label class="mb-0 w-44">Client ID</Label>
 				<CopyToClipboard value={client.id}>
-					<span class="text-sm text-muted-foreground" data-testid="client-id"> {client.id}</span>
+					<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
 				</CopyToClipboard>
 			</div>
 			{#if !client.isPublic}
@@ -105,12 +123,12 @@
 					<Label class="w-44">Client secret</Label>
 					{#if $clientSecretStore}
 						<CopyToClipboard value={$clientSecretStore}>
-							<span class="text-sm text-muted-foreground" data-testid="client-secret">
+							<span class="text-muted-foreground text-sm" data-testid="client-secret">
 								{$clientSecretStore}
 							</span>
 						</CopyToClipboard>
 					{:else}
-						<span class="text-sm text-muted-foreground" data-testid="client-secret"
+						<span class="text-muted-foreground text-sm" data-testid="client-secret"
 							>••••••••••••••••••••••••••••••••</span
 						>
 						<Button
@@ -129,7 +147,7 @@
 						<div class="mb-5 flex">
 							<Label class="mb-0 w-44">{key}</Label>
 							<CopyToClipboard {value}>
-								<span class="text-sm text-muted-foreground">{value}</span>
+								<span class="text-muted-foreground text-sm">{value}</span>
 							</CopyToClipboard>
 						</div>
 					{/each}
@@ -151,3 +169,15 @@
 		<OidcForm existingClient={client} callback={updateClient} />
 	</Card.Content>
 </Card.Root>
+<CollapsibleCard
+	id="allowed-user-groups"
+	title="Allowed User Groups"
+	description="Add user groups to this client to restrict access to users in these groups. If no user groups are selected, all users will have access to this client."
+>
+	{#await userGroupService.list() then groups}
+		<UserGroupSelection {groups} bind:selectedGroupIds={client.allowedUserGroupIds} />
+	{/await}
+	<div class="mt-5 flex justify-end">
+		<Button on:click={() => updateUserGroupClients(client.allowedUserGroupIds)}>Save</Button>
+	</div>
+</CollapsibleCard>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte

@@ -76,7 +76,7 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<div class="grid grid-cols-2 gap-3 sm:flex-row">
+	<div class="grid grid-cols-2 gap-x-3 gap-y-7 sm:flex-row">
 		<FormInput label="Name" class="w-full" bind:input={$inputs.name} />
 		<OidcCallbackUrlInput
 			class="w-full"

frontend/src/routes/settings/admin/oidc-clients/user-group-selection.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
+	import * as Table from '$lib/components/ui/table';
+	import UserGroupService from '$lib/services/user-group-service';
+	import type { OidcClient } from '$lib/types/oidc.type';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import type { UserGroup } from '$lib/types/user-group.type';
+
+	let {
+		groups: initialGroups,
+		selectionDisabled = false,
+		selectedGroupIds = $bindable()
+	}: {
+		groups: Paginated<UserGroup>;
+		selectionDisabled?: boolean;
+		selectedGroupIds: string[];
+	} = $props();
+
+	const userGroupService = new UserGroupService();
+
+	let groups = $state(initialGroups);
+</script>
+
+<AdvancedTable
+	items={groups}
+	onRefresh={async (o) => (groups = await userGroupService.list(o))}
+	columns={[{ label: 'Name', sortColumn: 'name' }]}
+	bind:selectedIds={selectedGroupIds}
+	{selectionDisabled}
+>
+	{#snippet rows({ item })}
+		<Table.Cell>{item.name}</Table.Cell>
+	{/snippet}
+</AdvancedTable>

frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import CustomClaimsInput from '$lib/components/custom-claims-input.svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
@@ -61,7 +62,7 @@
 </svelte:head>
 
 <div class="flex items-center justify-between">
-	<a class="flex text-sm text-muted-foreground" href="/settings/admin/user-groups"
+	<a class="text-muted-foreground flex text-sm" href="/settings/admin/user-groups"
 		><LucideChevronLeft class="h-5 w-5" /> Back</a
 	>
 	{#if !!userGroup.ldapId}
@@ -100,19 +101,13 @@
 	</Card.Content>
 </Card.Root>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Custom Claims</Card.Title>
-		<Card.Description>
-			Custom claims are key-value pairs that can be used to store additional information about a
-			user. These claims will be included in the ID token if the scope "profile" is requested.
-			Custom claims defined on the user will be prioritized if there are conflicts.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<CustomClaimsInput bind:customClaims={userGroup.customClaims} />
-		<div class="mt-5 flex justify-end">
-			<Button onclick={updateCustomClaims} type="submit">Save</Button>
-		</div>
-	</Card.Content>
-</Card.Root>
+<CollapsibleCard
+	id="user-group-custom-claims"
+	title="Custom Claims"
+	description="Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested. Custom claims defined on the user will be prioritized if there are conflicts."
+>
+	<CustomClaimsInput bind:customClaims={userGroup.customClaims} />
+	<div class="mt-5 flex justify-end">
+		<Button onclick={updateCustomClaims} type="submit">Save</Button>
+	</div>
+</CollapsibleCard>

frontend/src/routes/settings/admin/user-groups/user-group-list.svelte

@@ -32,10 +32,10 @@
 					try {
 						await userGroupService.remove(userGroup.id);
 						userGroups = await userGroupService.list(requestOptions!);
+						toast.success('User group deleted successfully');
 					} catch (e) {
 						axiosErrorToast(e);
-					}
-					toast.success('User group deleted successfully');
+					}					
 				}
 			}
 		});

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
@@ -45,7 +46,7 @@
 </svelte:head>
 
 <div class="flex items-center justify-between">
-	<a class="flex text-sm text-muted-foreground" href="/settings/admin/users"
+	<a class="text-muted-foreground flex text-sm" href="/settings/admin/users"
 		><LucideChevronLeft class="h-5 w-5" /> Back</a
 	>
 	{#if !!user.ldapId}
@@ -61,18 +62,13 @@
 	</Card.Content>
 </Card.Root>
 
-<Card.Root>
-	<Card.Header>
-		<Card.Title>Custom Claims</Card.Title>
-		<Card.Description>
-			Custom claims are key-value pairs that can be used to store additional information about a
-			user. These claims will be included in the ID token if the scope "profile" is requested.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<CustomClaimsInput bind:customClaims={user.customClaims} />
-		<div class="mt-5 flex justify-end">
-			<Button onclick={updateCustomClaims} type="submit">Save</Button>
-		</div>
-	</Card.Content>
-</Card.Root>
+<CollapsibleCard
+	id="user-custom-claims"
+	title="Custom Claims"
+	description="Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested."
+>
+	<CustomClaimsInput bind:customClaims={user.customClaims} />
+	<div class="mt-5 flex justify-end">
+		<Button onclick={updateCustomClaims} type="submit">Save</Button>
+	</div>
+</CollapsibleCard>