refactor(web,server): use feature flags for oauth (#3928)

* refactor: oauth to use feature flags

* chore: open api

* chore: e2e test for authorize endpoint

web/src/lib/components/forms/login-form.svelte

@@ -2,8 +2,9 @@
   import { goto } from '$app/navigation';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { AppRoute } from '$lib/constants';
+  import { featureFlags } from '$lib/stores/feature-flags.store';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
-  import { OAuthConfigResponseDto, api, oauth } from '@api';
+  import { api, oauth } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
@@ -11,14 +12,18 @@
   let errorMessage: string;
   let email = '';
   let password = '';
-  let oauthError: string;
-  export let authConfig: OAuthConfigResponseDto;
+  let oauthError = '';
   let loading = false;
   let oauthLoading = true;
 
   const dispatch = createEventDispatcher();
 
   onMount(async () => {
+    if (!$featureFlags.oauth) {
+      oauthLoading = false;
+      return;
+    }
+
     if (oauth.isCallback(window.location)) {
       try {
         await oauth.login(window.location);
@@ -26,25 +31,18 @@
         return;
       } catch (e) {
         console.error('Error [login-form] [oauth.callback]', e);
-        oauthError = 'Unable to complete OAuth login';
-      } finally {
+        oauthError = (await getServerErrorMessage(e)) || 'Unable to complete OAuth login';
         oauthLoading = false;
       }
     }
 
     try {
-      const { data } = await oauth.getConfig(window.location);
-      authConfig = data;
-
-      const { enabled, url, autoLaunch } = authConfig;
-
-      if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
+      if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
         await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
-        await goto(url);
+        await oauth.authorize(window.location);
         return;
       }
     } catch (error) {
-      authConfig.passwordLoginEnabled = true;
       await handleError(error, 'Unable to connect!');
     }
 
@@ -76,9 +74,15 @@
       return;
     }
   };
+
+  const handleOAuthLogin = async () => {
+    oauthLoading = true;
+    oauthError = '';
+    await oauth.authorize(window.location);
+  };
 </script>
 
-{#if authConfig.passwordLoginEnabled}
+{#if !oauthLoading && $featureFlags.passwordLogin}
   <form on:submit|preventDefault={login} class="mt-5 flex flex-col gap-5">
     {#if errorMessage}
       <p class="text-red-400" transition:fade>
@@ -113,7 +117,7 @@
     </div>
 
     <div class="my-5 flex w-full">
-      <Button type="submit" size="lg" fullwidth disabled={loading || oauthLoading}>
+      <Button type="submit" size="lg" fullwidth disabled={loading}>
         {#if loading}
           <span class="h-6">
             <LoadingSpinner />
@@ -126,8 +130,8 @@
   </form>
 {/if}
 
-{#if authConfig.enabled}
-  {#if authConfig.passwordLoginEnabled}
+{#if $featureFlags.oauth}
+  {#if $featureFlags.passwordLogin}
     <div class="inline-flex w-full items-center justify-center">
       <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
       <span
@@ -139,28 +143,27 @@
   {/if}
   <div class="my-5 flex flex-col gap-5">
     {#if oauthError}
-      <p class="text-red-400" transition:fade>{oauthError}</p>
+      <p class="text-center text-red-400" transition:fade>{oauthError}</p>
     {/if}
-    <a href={authConfig.url} class="flex w-full">
-      <Button
-        type="button"
-        disabled={loading || oauthLoading}
-        size="lg"
-        fullwidth
-        color={authConfig.passwordLoginEnabled ? 'secondary' : 'primary'}
-      >
-        {#if oauthLoading}
-          <span class="h-6">
-            <LoadingSpinner />
-          </span>
-        {:else}
-          {authConfig.buttonText || 'Login with OAuth'}
-        {/if}
-      </Button>
-    </a>
+    <Button
+      type="button"
+      disabled={loading || oauthLoading}
+      size="lg"
+      fullwidth
+      color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
+      on:click={handleOAuthLogin}
+    >
+      {#if oauthLoading}
+        <span class="h-6">
+          <LoadingSpinner />
+        </span>
+      {:else}
+        {$featureFlags.passwordLogin ? 'Login with OAuth' : 'Login'}
+      {/if}
+    </Button>
   </div>
 {/if}
 
-{#if !authConfig.enabled && !authConfig.passwordLoginEnabled}
+{#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
   <p class="p-4 text-center dark:text-immich-dark-fg">Login has been disabled.</p>
 {/if}

web/src/lib/components/shared-components/fullscreen-container.svelte

@@ -5,7 +5,7 @@
   export let showMessage = $$slots.message;
 </script>
 
-<section class="flex min-h-screen w-screen place-content-center place-items-center p-4">
+<section class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
   <div
     class="flex w-full max-w-lg flex-col gap-4 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   >

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { oauth, OAuthConfigResponseDto, UserResponseDto } from '@api';
+  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { oauth, UserResponseDto } from '@api';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import Button from '../elements/buttons/button.svelte';
 
   export let user: UserResponseDto;
 
-  let config: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: true };
   let loading = true;
 
   onMount(async () => {
@@ -32,13 +32,6 @@
       }
     }
 
-    try {
-      const { data } = await oauth.getConfig(window.location);
-      config = data;
-    } catch (error) {
-      handleError(error, 'Unable to load OAuth config');
-    }
-
     loading = false;
   });
 
@@ -63,13 +56,11 @@
         <div class="flex place-content-center place-items-center">
           <LoadingSpinner />
         </div>
-      {:else if config.enabled}
+      {:else if $featureFlags.oauth}
         {#if user.oauthId}
           <Button size="sm" on:click={() => handleUnlink()}>Unlink Oauth</Button>
         {:else}
-          <a href={config.url}>
-            <Button size="sm" on:click={() => handleUnlink()}>Link to OAuth</Button>
-          </a>
+          <Button size="sm" on:click={() => oauth.authorize(window.location)}>Link to OAuth</Button>
         {/if}
       {/if}
     </div>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
   import { page } from '$app/stores';
+  import { featureFlags } from '$lib/stores/feature-flags.store';
   import { APIKeyResponseDto, AuthDeviceResponseDto, oauth, UserResponseDto } from '@api';
   import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
@@ -9,7 +11,6 @@
   import PartnerSettings from './partner-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
-  import { onMount } from 'svelte';
 
   export let user: UserResponseDto;
 
@@ -17,18 +18,10 @@
   export let devices: AuthDeviceResponseDto[] = [];
   export let partners: UserResponseDto[] = [];
 
-  let oauthEnabled = false;
   let oauthOpen = false;
-
-  onMount(async () => {
+  if (browser) {
     oauthOpen = oauth.isCallback(window.location);
-    try {
-      const { data } = await oauth.getConfig(window.location);
-      oauthEnabled = data.enabled;
-    } catch {
-      // noop
-    }
-  });
+  }
 </script>
 
 <SettingAccordion title="Account" subtitle="Manage your account">
@@ -47,7 +40,7 @@
   <MemoriesSettings {user} />
 </SettingAccordion>
 
-{#if oauthEnabled}
+{#if $featureFlags.loaded && $featureFlags.oauth}
   <SettingAccordion
     title="OAuth"
     subtitle="Manage your OAuth connection"