From cfd42f2385899698414c8d66b1117b5957014e5d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sat, 7 Mar 2026 19:51:38 +0100
Subject: [PATCH] fix: remove $bindable() fallback values causing
 props_invalid_value error in oauth settings (#8265)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
---
 .../src/lib/components/AzureOauthSettings.svelte    | 13 ++++---------
 frontend/src/lib/components/CustomOauth.svelte      |  9 +--------
 frontend/src/lib/components/CustomSso.svelte        | 10 +---------
 frontend/src/lib/components/OauthExtraParams.svelte | 10 ++++++++--
 frontend/src/lib/components/OauthScopes.svelte      | 10 ++++++++--
 5 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/AzureOauthSettings.svelte b/frontend/src/lib/components/AzureOauthSettings.svelte
index 3c1d24c770..99f5f6ab1b 100644
--- a/frontend/src/lib/components/AzureOauthSettings.svelte
+++ b/frontend/src/lib/components/AzureOauthSettings.svelte
@@ -15,14 +15,7 @@
 	};
 	}
 
-	let { connect_config = $bindable({
-		scopes: ['offline_access'],
-		auth_url: '',
-		token_url: '',
-		req_body_auth: true,
-		extra_params: { tenant_id: '' },
-		extra_params_callback: {}
-	}) }: Props = $props();
+	let { connect_config = $bindable() }: Props = $props();
 
 	run(() => {
 		if (!connect_config) {
@@ -38,13 +31,14 @@
 	});
 
 	run(() => {
-		if (connect_config.extra_params.tenant_id) {
+		if (connect_config?.extra_params?.tenant_id) {
 			connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`
 			connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`
 		}
 	});
 </script>
 
+{#if connect_config}
 <label class="flex flex-col gap-1" for="tenant-id">
 	<span class="text-primary font-semibold text-xs flex gap-2 items-center"> Azure tenant id </span>
 	<span class="text-secondary font-normal text-xs">
@@ -73,3 +67,4 @@
 		<OauthScopes bind:scopes={connect_config.scopes} />
 	</div>
 </label>
+{/if}
diff --git a/frontend/src/lib/components/CustomOauth.svelte b/frontend/src/lib/components/CustomOauth.svelte
index bbc020d794..432a02152b 100644
--- a/frontend/src/lib/components/CustomOauth.svelte
+++ b/frontend/src/lib/components/CustomOauth.svelte
@@ -6,14 +6,7 @@
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	let { connect_config = $bindable({
-		scopes: [],
-		auth_url: '',
-		token_url: '',
-		req_body_auth: false,
-		extra_params: {},
-		extra_params_callback: {}
-	}) } = $props();
+	let { connect_config = $bindable() } = $props();
 
 	run(() => {
 		if (!connect_config) {
diff --git a/frontend/src/lib/components/CustomSso.svelte b/frontend/src/lib/components/CustomSso.svelte
index 5c36e1c57e..4de203357a 100644
--- a/frontend/src/lib/components/CustomSso.svelte
+++ b/frontend/src/lib/components/CustomSso.svelte
@@ -6,15 +6,7 @@
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	let { login_config = $bindable({
-		scopes: [],
-		auth_url: '',
-		token_url: '',
-		userinfo_url: '',
-		req_body_auth: false,
-		extra_params: {},
-		extra_params_callback: {}
-	}) } = $props();
+	let { login_config = $bindable() } = $props();
 
 	run(() => {
 		if (!login_config) {
diff --git a/frontend/src/lib/components/OauthExtraParams.svelte b/frontend/src/lib/components/OauthExtraParams.svelte
index eec9cd47b8..a2a5ae9749 100644
--- a/frontend/src/lib/components/OauthExtraParams.svelte
+++ b/frontend/src/lib/components/OauthExtraParams.svelte
@@ -6,9 +6,15 @@
 		extra_params?: Record<string, string>;
 	}
 
-	let { extra_params = $bindable({}) }: Props = $props();
+	let { extra_params = $bindable() }: Props = $props();
 
-	let extra_params_vec: [string, string][] = $state(Object.entries(extra_params))
+	$effect.pre(() => {
+		if (!extra_params) {
+			extra_params = {}
+		}
+	})
+
+	let extra_params_vec: [string, string][] = $state(Object.entries(extra_params ?? {}))
 
 	function sync() {
 		extra_params = Object.fromEntries(extra_params_vec)
diff --git a/frontend/src/lib/components/OauthScopes.svelte b/frontend/src/lib/components/OauthScopes.svelte
index 545471d0dc..4ec17c6e2a 100644
--- a/frontend/src/lib/components/OauthScopes.svelte
+++ b/frontend/src/lib/components/OauthScopes.svelte
@@ -6,7 +6,13 @@
 		scopes?: string[]
 	}
 
-	let { scopes = $bindable([]) }: Props = $props()
+	let { scopes = $bindable() }: Props = $props()
+
+	$effect.pre(() => {
+		if (!scopes) {
+			scopes = []
+		}
+	})
 </script>
 
 {#if scopes && Array.isArray(scopes)}
@@ -18,7 +24,7 @@
 				size="xs"
 				btnClasses="mx-6"
 				on:click={() => {
-					scopes = scopes.filter((el) => el != v)
+					scopes = scopes?.filter((el) => el != v)
 				}}
 				startIcon={{ icon: Minus }}
 				iconOnly