feat: configure token endpoint auth method (#17968)

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { type SystemConfigDto } from '@immich/sdk';
+  import { SettingInputFieldType } from '$lib/constants';
+  import { OAuthTokenEndpointAuthMethod, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
-  import { t } from 'svelte-i18n';
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
 
   interface Props {
     savedConfig: SystemConfigDto;
@@ -108,7 +109,7 @@
               <hr />
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_issuer_url').toUpperCase()}
+                label="ISSUER_URL"
                 bind:value={config.oauth.issuerUrl}
                 required={true}
                 disabled={disabled || !config.oauth.enabled}
@@ -117,7 +118,7 @@
 
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_client_id').toUpperCase()}
+                label="CLIENT_ID"
                 bind:value={config.oauth.clientId}
                 required={true}
                 disabled={disabled || !config.oauth.enabled}
@@ -126,16 +127,30 @@
 
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_client_secret').toUpperCase()}
+                label="CLIENT_SECRET"
+                description={$t('admin.oauth_client_secret_description')}
                 bind:value={config.oauth.clientSecret}
-                required={true}
                 disabled={disabled || !config.oauth.enabled}
                 isEdited={!(config.oauth.clientSecret == savedConfig.oauth.clientSecret)}
               />
 
+              {#if config.oauth.clientSecret}
+                <SettingSelect
+                  label="TOKEN_ENDPOINT_AUTH_METHOD"
+                  bind:value={config.oauth.tokenEndpointAuthMethod}
+                  disabled={disabled || !config.oauth.enabled || !config.oauth.clientSecret}
+                  isEdited={!(config.oauth.tokenEndpointAuthMethod == savedConfig.oauth.tokenEndpointAuthMethod)}
+                  options={[
+                    { value: OAuthTokenEndpointAuthMethod.ClientSecretPost, text: 'client_secret_post' },
+                    { value: OAuthTokenEndpointAuthMethod.ClientSecretBasic, text: 'client_secret_basic' },
+                  ]}
+                  name="tokenEndpointAuthMethod"
+                />
+              {/if}
+
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_scope').toUpperCase()}
+                label="SCOPE"
                 bind:value={config.oauth.scope}
                 required={true}
                 disabled={disabled || !config.oauth.enabled}
@@ -144,7 +159,7 @@
 
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_signing_algorithm').toUpperCase()}
+                label="ID_TOKEN_SIGNED_RESPONSE_ALG"
                 bind:value={config.oauth.signingAlgorithm}
                 required={true}
                 disabled={disabled || !config.oauth.enabled}
@@ -153,14 +168,23 @@
 
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_profile_signing_algorithm').toUpperCase()}
-                description={$t('admin.oauth_profile_signing_algorithm_description')}
+                label="USERINFO_SIGNED_RESPONSE_ALG"
                 bind:value={config.oauth.profileSigningAlgorithm}
                 required={true}
                 disabled={disabled || !config.oauth.enabled}
                 isEdited={!(config.oauth.profileSigningAlgorithm == savedConfig.oauth.profileSigningAlgorithm)}
               />
 
+              <SettingInputField
+                inputType={SettingInputFieldType.TEXT}
+                label={$t('admin.oauth_timeout').toUpperCase()}
+                description={$t('admin.oauth_timeout_description')}
+                required={true}
+                bind:value={config.oauth.timeout}
+                disabled={disabled || !config.oauth.enabled}
+                isEdited={!(config.oauth.timeout == savedConfig.oauth.timeout)}
+              />
+
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
                 label={$t('admin.oauth_storage_label_claim').toUpperCase()}

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
+  import { SettingInputFieldType } from '$lib/constants';
+  import { onMount, tick, type Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import type { FormEventHandler } from 'svelte/elements';
   import { fly } from 'svelte/transition';
   import PasswordField from '../password-field.svelte';
-  import { t } from 'svelte-i18n';
-  import { onMount, tick, type Snippet } from 'svelte';
-  import { SettingInputFieldType } from '$lib/constants';
 
   interface Props {
     inputType: SettingInputFieldType;
-    value: string | number;
+    value: string | number | undefined;
     min?: number;
     max?: number;
     step?: string;
@@ -147,7 +147,7 @@
       name={label}
       autocomplete={passwordAutocomplete}
       {required}
-      password={value.toString()}
+      password={(value || '').toString()}
       onInput={(passwordValue) => (value = passwordValue)}
       {disabled}
       {title}

web/src/lib/components/shared-components/settings/setting-select.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { quintOut } from 'svelte/easing';
-  import { fly } from 'svelte/transition';
-  import { t } from 'svelte-i18n';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiChevronDown } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
 
   interface Props {
-    value: string | number;
+    value: string | number | undefined;
     options: { value: string | number; text: string }[];
     label?: string;
     desc?: string;