feat: add option to OIDC client to require re-authentication (#747)

Co-authored-by: Kyle Mendell <kmendell@ofkm.us>
Co-authored-by: Elias Schneider <login@eliasschneider.com>

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

@@ -36,7 +36,8 @@
 		[m.userinfo_url()]: `https://${page.url.hostname}/api/oidc/userinfo`,
 		[m.logout_url()]: `https://${page.url.hostname}/api/oidc/end-session`,
 		[m.certificate_url()]: `https://${page.url.hostname}/.well-known/jwks.json`,
-		[m.pkce()]: client.pkceEnabled ? m.enabled() : m.disabled()
+		[m.pkce()]: client.pkceEnabled ? m.enabled() : m.disabled(),
+		[m.requires_reauthentication()]: client.requiresReauthentication ? m.enabled() : m.disabled()
 	});
 
 	async function updateClient(updatedClient: OidcClientCreateWithLogo) {
@@ -49,6 +50,9 @@
 
 		client.isPublic = updatedClient.isPublic;
 		setupDetails[m.pkce()] = updatedClient.pkceEnabled ? m.enabled() : m.disabled();
+		setupDetails[m.requires_reauthentication()] = updatedClient.requiresReauthentication
+			? m.enabled()
+			: m.disabled();
 
 		await Promise.all([dataPromise, imagePromise])
 			.then(() => {
@@ -120,14 +124,14 @@
 	<Card.Content>
 		<div class="flex flex-col">
 			<div class="mb-2 flex flex-col sm:flex-row sm:items-center">
-				<Label class="mb-0 w-44">{m.client_id()}</Label>
+				<Label class="mb-0 w-50">{m.client_id()}</Label>
 				<CopyToClipboard value={client.id}>
 					<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
 				</CopyToClipboard>
 			</div>
 			{#if !client.isPublic}
 				<div class="mt-1 mb-2 flex flex-col sm:flex-row sm:items-center">
-					<Label class="mb-0 w-44">{m.client_secret()}</Label>
+					<Label class="mb-0 w-50">{m.client_secret()}</Label>
 					{#if $clientSecretStore}
 						<CopyToClipboard value={$clientSecretStore}>
 							<span class="text-muted-foreground text-sm" data-testid="client-secret">
@@ -154,7 +158,7 @@
 				<div transition:slide>
 					{#each Object.entries(setupDetails) as [key, value]}
 						<div class="mb-5 flex flex-col sm:flex-row sm:items-center">
-							<Label class="mb-0 w-44">{key}</Label>
+							<Label class="mb-0 w-50">{key}</Label>
 							<CopyToClipboard {value}>
 								<span class="text-muted-foreground text-sm">{value}</span>
 							</CopyToClipboard>

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

@@ -39,6 +39,7 @@
 		logoutCallbackURLs: existingClient?.logoutCallbackURLs || [],
 		isPublic: existingClient?.isPublic || false,
 		pkceEnabled: existingClient?.pkceEnabled || false,
+		requiresReauthentication: existingClient?.requiresReauthentication || false,
 		launchURL: existingClient?.launchURL || '',
 		credentials: {
 			federatedIdentities: existingClient?.credentials?.federatedIdentities || []
@@ -51,6 +52,7 @@
 		logoutCallbackURLs: z.array(z.string().nonempty()),
 		isPublic: z.boolean(),
 		pkceEnabled: z.boolean(),
+		requiresReauthentication: z.boolean(),
 		launchURL: optionalUrl,
 		credentials: z.object({
 			federatedIdentities: z.array(
@@ -147,6 +149,12 @@
 			description={m.public_key_code_exchange_is_a_security_feature_to_prevent_csrf_and_authorization_code_interception_attacks()}
 			bind:checked={$inputs.pkceEnabled.value}
 		/>
+		<SwitchWithLabel
+			id="requires-reauthentication"
+			label={m.requires_reauthentication()}
+			description={m.requires_users_to_authenticate_again_on_each_authorization()}
+			bind:checked={$inputs.requiresReauthentication.value}
+		/>
 	</div>
 	<div class="mt-8">
 		<Label for="logo">{m.logo()}</Label>