feat: add PKCE for non public clients

backend/internal/dto/oidc_dto.go

@@ -10,6 +10,7 @@ type OidcClientDto struct {
 	PublicOidcClientDto
 	CallbackURLs []string `json:"callbackURLs"`
 	IsPublic     bool     `json:"isPublic"`
+	PkceEnabled  bool     `json:"pkceEnabled"`
 	CreatedBy    UserDto  `json:"createdBy"`
 }
 
@@ -17,6 +18,7 @@ type OidcClientCreateDto struct {
 	Name         string   `json:"name" binding:"required,max=50"`
 	CallbackURLs []string `json:"callbackURLs" binding:"required,urlList"`
 	IsPublic     bool     `json:"isPublic"`
+	PkceEnabled  bool     `json:"pkceEnabled"`
 }
 
 type AuthorizeOidcClientRequestDto struct {

backend/internal/model/oidc.go

@@ -42,6 +42,7 @@ type OidcClient struct {
 	ImageType    *string
 	HasLogo      bool `gorm:"-"`
 	IsPublic     bool
+	PkceEnabled  bool
 
 	CreatedByID string
 	CreatedBy   User

backend/internal/service/oidc_service.go

@@ -131,8 +131,8 @@ func (s *OidcService) CreateTokens(code, grantType, clientID, clientSecret, code
 		return "", "", &common.OidcInvalidAuthorizationCodeError{}
 	}
 
-	// If the client is public, the code verifier must match the code challenge
+	// If the client is public or PKCE is enabled, the code verifier must match the code challenge
-	if client.IsPublic {
+	if client.IsPublic || client.PkceEnabled {
 		if !s.validateCodeVerifier(codeVerifier, *authorizationCodeMetaData.CodeChallenge, *authorizationCodeMetaData.CodeChallengeMethodSha256) {
 			return "", "", &common.OidcInvalidCodeVerifierError{}
 		}
@@ -189,6 +189,8 @@ func (s *OidcService) CreateClient(input dto.OidcClientCreateDto, userID string)
 		Name:         input.Name,
 		CallbackURLs: input.CallbackURLs,
 		CreatedByID:  userID,
+		IsPublic:     input.IsPublic,
+		PkceEnabled:  input.IsPublic || input.PkceEnabled,
 	}
 
 	if err := s.db.Create(&client).Error; err != nil {
@@ -207,6 +209,7 @@ func (s *OidcService) UpdateClient(clientID string, input dto.OidcClientCreateDt
 	client.Name = input.Name
 	client.CallbackURLs = input.CallbackURLs
 	client.IsPublic = input.IsPublic
+	client.PkceEnabled = input.IsPublic || input.PkceEnabled
 
 	if err := s.db.Save(&client).Error; err != nil {
 		return model.OidcClient{}, err
@@ -406,6 +409,10 @@ func (s *OidcService) createAuthorizationCode(clientID string, userID string, sc
 }
 
 func (s *OidcService) validateCodeVerifier(codeVerifier, codeChallenge string, codeChallengeMethodSha256 bool) bool {
+	if codeVerifier == "" || codeChallenge == "" {
+		return false
+	}
+
 	if !codeChallengeMethodSha256 {
 		return codeVerifier == codeChallenge
 	}

backend/resources/migrations/postgres/20250103145821_pkce_column.down.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients DROP COLUMN pkce_enabled;

backend/resources/migrations/postgres/20250103145821_pkce_column.up.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients ADD COLUMN pkce_enabled BOOLEAN DEFAULT FALSE;

backend/resources/migrations/sqlite/20250103145821_pkce_column.down.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients DROP COLUMN pkce_enabled;

backend/resources/migrations/sqlite/20250103145821_pkce_column.up.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients ADD COLUMN pkce_enabled BOOLEAN DEFAULT FALSE;

frontend/src/lib/components/checkbox-with-label.svelte

@@ -6,12 +6,26 @@
 		id,
 		checked = $bindable(),
 		label,
-		description
+		description,
-	}: { id: string; checked: boolean; label: string; description?: string } = $props();
+		disabled = false,
+		onCheckedChange
+	}: {
+		id: string;
+		checked: boolean;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+	} = $props();
 </script>
 
 <div class="items-top mt-5 flex space-x-2">
-	<Checkbox {id} bind:checked />
+	<Checkbox
+		{id}
+		{disabled}
+		onCheckedChange={(v) => onCheckedChange && onCheckedChange(v == true)}
+		bind:checked
+	/>
 	<div class="grid gap-1.5 leading-none">
 		<Label for={id} class="mb-0 text-sm font-medium leading-none">
 			{label}

frontend/src/lib/components/header/header.svelte

@@ -19,7 +19,7 @@
 	>
 		<div class="flex h-16 items-center">
 			{#if !isAuthPage}
-				<Logo class="mr-3 h-10 w-10" />
+				<Logo class="mr-3 h-8 w-8" />
 				<h1 class="text-lg font-medium" data-testid="application-name">
 					{$appConfigStore.appName}
 				</h1>

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

@@ -5,6 +5,7 @@ export type OidcClient = {
 	callbackURLs: [string, ...string[]];
 	hasLogo: boolean;
 	isPublic: boolean;
+	pkceEnabled: boolean;
 };
 
 export type OidcClientCreate = Omit<OidcClient, 'id' | 'logoURL' | 'hasLogo'>;

frontend/src/lib/utils/form-util.ts

@@ -80,11 +80,19 @@ export function createForm<T extends z.ZodType<any, any>>(schema: T, initialValu
 		});
 	}
 
+	function setValue(key: keyof z.infer<T>, value: z.infer<T>[keyof z.infer<T>]) {
+		inputsStore.update((inputs) => {
+			inputs[key].value = value;
+			return inputs;
+		});
+	}
+
 	return {
 		schema,
 		inputs: inputsStore,
 		data,
 		validate,
+		setValue,
 		reset
 	};
 }

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

@@ -10,7 +10,7 @@
 		OidcClientCreateWithLogo
 	} from '$lib/types/oidc.type';
 	import { createForm } from '$lib/utils/form-util';
-	import { z } from 'zod';
+	import { set, z } from 'zod';
 	import OidcCallbackUrlInput from './oidc-callback-url-input.svelte';
 
 	let {
@@ -30,13 +30,15 @@
 	const client: OidcClientCreate = {
 		name: existingClient?.name || '',
 		callbackURLs: existingClient?.callbackURLs || [''],
-		isPublic: existingClient?.isPublic || false
+		isPublic: existingClient?.isPublic || false,
+		pkceEnabled: existingClient?.isPublic == true || existingClient?.pkceEnabled || false
 	};
 
 	const formSchema = z.object({
 		name: z.string().min(2).max(50),
 		callbackURLs: z.array(z.string().url()).nonempty(),
-		isPublic: z.boolean()
+		isPublic: z.boolean(),
+		pkceEnabled: z.boolean()
 	});
 
 	type FormSchema = typeof formSchema;
@@ -85,8 +87,19 @@
 			id="public-client"
 			label="Public Client"
 			description="Public clients do not have a client secret and use PKCE instead. Enable this if your client is a SPA or mobile app."
+			onCheckedChange={(v) => {
+				console.log(v)
+				if (v == true) form.setValue('pkceEnabled', true);
+			}}
 			bind:checked={$inputs.isPublic.value}
 		/>
+		<CheckboxWithLabel
+			id="pkce"
+			label="PKCE"
+			description="Public Key Code Exchange is a security feature to prevent CSRF and authorization code interception attacks."
+			disabled={$inputs.isPublic.value}		
+			bind:checked={$inputs.pkceEnabled.value}
+		/>
 	</div>
 	<div class="mt-8">
 		<Label for="logo">Logo</Label>