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>

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}

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) {

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) {

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)

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