refactor: auth manager

web/src/lib/components/VersionAnnouncement.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import OnEvents from '$lib/components/OnEvents.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
-  import { user } from '$lib/stores/user.store';
   import type { ReleaseEvent } from '$lib/types';
   import { getReleaseType, semverToName } from '$lib/utils';
   import { modalManager } from '@immich/ui';
@@ -12,7 +12,7 @@
   }>();
 
   const onReleaseEvent = async (release: ReleaseEvent) => {
-    if (!release.isAvailable || !$user.isAdmin) {
+    if (!release.isAvailable || !authManager.user.isAdmin) {
       return;
     }
 

web/src/lib/components/admin-settings/NotificationSettings.svelte

@@ -5,10 +5,10 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import { SettingInputFieldType } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { handleSystemConfigSave } from '$lib/services/system-config.service';
-  import { user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { sendTestEmailAdmin } from '@immich/sdk';
   import { Button, toastManager } from '@immich/ui';
@@ -45,7 +45,9 @@
         },
       });
 
-      toastManager.primary($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
+      toastManager.primary(
+        $t('admin.notification_email_test_email_sent', { values: { email: authManager.user.email } }),
+      );
 
       if (!disabled) {
         await handleSystemConfigSave({ notifications: configToEdit.notifications });

web/src/lib/components/admin-settings/StorageTemplateSettings.svelte

@@ -6,11 +6,11 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { Route } from '$lib/route';
   import { handleSystemConfigSave } from '$lib/services/system-config.service';
-  import { user } from '$lib/stores/user.store';
   import { getStorageTemplateOptions, type SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
   import { Heading, Link, LoadingSpinner, Text } from '@immich/ui';
   import handlebar from 'handlebars';
@@ -177,7 +177,10 @@
           <p class="text-sm">
             <FormatMessage
               key="admin.storage_template_path_length"
-              values={{ length: parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length, limit: 260 }}
+              values={{
+                length: parsedTemplate().length + authManager.user.id.length + 'UPLOAD_LOCATION'.length,
+                limit: 260,
+              }}
             >
               {#snippet children({ message })}
                 <span class="font-semibold text-primary">{message}</span>
@@ -186,7 +189,10 @@
           </p>
 
           <p class="text-sm">
-            <FormatMessage key="admin.storage_template_user_label" values={{ label: $user.storageLabel || $user.id }}>
+            <FormatMessage
+              key="admin.storage_template_user_label"
+              values={{ label: authManager.user.storageLabel || authManager.user.id }}
+            >
               {#snippet children({ message })}
                 <code class="text-primary">{message}</code>
               {/snippet}
@@ -195,7 +201,7 @@
 
           <p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
             <span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
-              >UPLOAD_LOCATION/library/{$user.storageLabel || $user.id}</span
+              >UPLOAD_LOCATION/library/{authManager.user.storageLabel || authManager.user.id}</span
             >/{parsedTemplate()}.jpg
           </p>
 

web/src/lib/components/album-page/album-card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
-  import { user } from '$lib/stores/user.store';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
   import type { AlbumResponseDto } from '@immich/sdk';
@@ -85,7 +85,7 @@
       {/if}
 
       {#if showOwner}
-        {#if $user.id === album.ownerId}
+        {#if authManager.user.id === album.ownerId}
           <p>{$t('owned')}</p>
         {:else if album.owner}
           <p>{$t('shared_by_user', { values: { user: album.owner.name } })}</p>

web/src/lib/components/album-page/albums-list.svelte

@@ -4,6 +4,7 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
   import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
   import { handleDeleteAlbum, handleDownloadAlbum } from '$lib/services/album.service';
@@ -16,7 +17,6 @@
     SortOrder,
     type AlbumViewSettings,
   } from '$lib/stores/preferences.store';
-  import { user } from '$lib/stores/user.store';
   import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import { normalizeSearchString } from '$lib/utils/string-utils';
@@ -97,7 +97,7 @@
 
     /** Group by owner */
     [AlbumGroupBy.Owner]: (order, albums): AlbumGroup[] => {
-      const currentUserId = $user.id;
+      const currentUserId = authManager.user.id;
       const groupedByOwnerIds = groupBy(albums, 'ownerId');
 
       const sortSign = order === SortOrder.Desc ? -1 : 1;
@@ -130,7 +130,7 @@
         return sharedAlbums;
       }
       default: {
-        const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== $user.id);
+        const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== authManager.user.id);
         return nonOwnedAlbums.length > 0 ? ownedAlbums.concat(nonOwnedAlbums) : ownedAlbums;
       }
     }
@@ -167,7 +167,7 @@
     albumGroupIds = groupedAlbums.map(({ id }) => id);
   });
 
-  let showFullContextMenu = $derived(allowEdit && selectedAlbum && selectedAlbum.ownerId === $user.id);
+  let showFullContextMenu = $derived(allowEdit && selectedAlbum && selectedAlbum.ownerId === authManager.user.id);
 
   onMount(async () => {
     if (allowEdit) {

web/src/lib/components/album-page/albums-table-row.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { dateFormats } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { Route } from '$lib/route';
   import { locale } from '$lib/stores/preferences.store';
-  import { user } from '$lib/stores/user.store';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
@@ -43,7 +43,7 @@
         icon={mdiShareVariantOutline}
         size="16"
         class="inline ms-1 opacity-70"
-        title={album.ownerId === $user.id
+        title={album.ownerId === authManager.user.id
           ? $t('shared_by_you')
           : $t('shared_by_user', { values: { user: album.owner.name } })}
       />

web/src/lib/components/asset-viewer/actions/rating-action.svelte

@@ -2,7 +2,7 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import type { OnAction } from '$lib/components/asset-viewer/actions/action';
   import { AssetAction } from '$lib/constants';
-  import { preferences } from '$lib/stores/user.store';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
@@ -42,7 +42,7 @@
 </script>
 
 <svelte:document
-  use:shortcuts={$preferences?.ratings.enabled
+  use:shortcuts={authManager.authenticated && authManager.preferences.ratings.enabled
     ? [
         { shortcut: { key: '0' }, onShortcut: () => rateAsset(null) },
         ...[1, 2, 3, 4, 5].map((rating) => ({

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -5,13 +5,14 @@
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { Route } from '$lib/route';
   import { locale } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl } from '$lib/utils';
   import { getAssetType } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
-  import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
+  import { ReactionType, type ActivityResponseDto, type AssetTypeEnum } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, Textarea, toastManager } from '@immich/ui';
   import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiSend, mdiThumbUp } from '@mdi/js';
   import * as luxon from 'luxon';
@@ -39,15 +40,14 @@
   };
 
   interface Props {
-    user: UserResponseDto;
     assetId?: string | undefined;
     albumId: string;
     assetType?: AssetTypeEnum | undefined;
     albumOwnerId: string;
     disabled: boolean;
   }
 
-  let { user, assetId = undefined, albumId, assetType = undefined, albumOwnerId, disabled }: Props = $props();
+  let { assetId = undefined, albumId, assetType = undefined, albumOwnerId, disabled }: Props = $props();
 
   let innerHeight: number = $state(0);
   let activityHeight: number = $state(0);
@@ -147,7 +147,7 @@
                   />
                 </a>
               {/if}
-              {#if reaction.user.id === user.id || albumOwnerId === user.id}
+              {#if reaction.user.id === authManager.user.id || albumOwnerId === authManager.user.id}
                 <div class="me-4">
                   <ButtonContextMenu
                     icon={mdiDotsVertical}
@@ -200,7 +200,7 @@
                     />
                   </a>
                 {/if}
-                {#if reaction.user.id === user.id || albumOwnerId === user.id}
+                {#if reaction.user.id === authManager.user.id || albumOwnerId === authManager.user.id}
                   <div class="me-4">
                     <ButtonContextMenu
                       icon={mdiDotsVertical}
@@ -238,7 +238,7 @@
     <div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
       <div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
         <div>
-          <UserAvatar {user} size="md" noTitle />
+          <UserAvatar user={authManager.user} size="md" noTitle />
         </div>
         <form class="flex w-full items-center max-h-56 gap-1" {onsubmit}>
           <Textarea

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -1,5 +1,5 @@
 import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
-import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { renderWithTooltips } from '$tests/helpers';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
@@ -36,16 +36,16 @@ describe('AssetViewerNavBar component', () => {
   });
 
   afterEach(() => {
-    resetSavedUser();
+    authManager.reset();
   });
 
   afterAll(() => {
     vi.restoreAllMocks();
   });
 
   it('shows back button', () => {
-    const prefs = preferencesFactory.build({ cast: { gCastEnabled: false } });
-    preferencesStore.set(prefs);
+    const preferences = preferencesFactory.build({ cast: { gCastEnabled: false } });
+    authManager.setPreferences(preferences);
 
     const asset = assetFactory.build({ isTrashed: false });
     const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
@@ -57,10 +57,10 @@ describe('AssetViewerNavBar component', () => {
       const ownerId = 'id-of-the-user';
       const user = userAdminFactory.build({ id: ownerId });
       const asset = assetFactory.build({ ownerId, isTrashed: false });
-      userStore.set(user);
+      authManager.setUser(user);
 
-      const prefs = preferencesFactory.build({ cast: { gCastEnabled: false } });
-      preferencesStore.set(prefs);
+      const preferences = preferencesFactory.build({ cast: { gCastEnabled: false } });
+      authManager.setPreferences(preferences);
 
       const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
       expect(getByLabelText('delete')).toBeInTheDocument();

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -8,7 +8,6 @@
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
   import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
-  import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
   import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
   import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
@@ -19,13 +18,14 @@
   import LoadingDots from '$lib/components/LoadingDots.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetActions } from '$lib/services/asset.service';
-  import { user } from '$lib/stores/user.store';
   import { getSharedLink, withoutIcons } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -81,8 +81,8 @@
     setPlayOriginalVideo,
   }: Props = $props();
 
-  const isOwner = $derived($user && asset.ownerId === $user?.id);
-  const isAlbumOwner = $derived($user && album?.ownerId === $user?.id);
+  const isOwner = $derived(authManager.authenticated && asset.ownerId === authManager.user.id);
+  const isAlbumOwner = $derived(authManager.authenticated && album?.ownerId === authManager.user.id);
   const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   const smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
 

web/src/lib/components/asset-viewer/asset-viewer.spec.ts

@@ -1,7 +1,7 @@
 import { getAnimateMock } from '$lib/__mocks__/animate.mock';
 import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
+import { authManager } from '$lib/managers/auth-manager.svelte';
 import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
 import { renderWithTooltips } from '$tests/helpers';
 import { updateAsset } from '@immich/sdk';
 import { assetFactory } from '@test-data/factories/asset-factory';
@@ -43,7 +43,7 @@ describe('AssetViewer', () => {
 
   afterEach(() => {
     slideshowStore.slideshowState.set(SlideshowState.None);
-    resetSavedUser();
+    authManager.reset();
     vi.clearAllMocks();
   });
 
@@ -56,8 +56,9 @@ describe('AssetViewer', () => {
     const user = userAdminFactory.build({ id: ownerId });
     const asset = assetFactory.build({ ownerId, isFavorite: false, isTrashed: false });
 
-    userStore.set(user);
-    preferencesStore.set(preferencesFactory.build({ cast: { gCastEnabled: false } }));
+    authManager.setUser(user);
+    authManager.setPreferences(preferencesFactory.build({ cast: { gCastEnabled: false } }));
+
     vi.mocked(updateAsset).mockResolvedValue({ ...asset, isFavorite: true });
 
     const { getByLabelText, queryByLabelText } = renderWithTooltips(AssetViewer, {

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -17,7 +17,6 @@
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-  import { user } from '$lib/stores/user.store';
   import { getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
@@ -629,15 +628,14 @@
     </div>
   {/if}
 
-  {#if isShared && album && assetViewerManager.isShowActivityPanel && $user}
+  {#if isShared && album && assetViewerManager.isShowActivityPanel && authManager.authenticated}
     <div
       transition:fly={{ duration: 150 }}
       id="activity-panel"
       class="row-start-1 row-span-5 w-90 md:w-115 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray"
       translate="yes"
     >
       <ActivityViewer
-        user={$user}
         disabled={!album.isActivityEnabled}
         assetType={asset.type}
         albumOwnerId={album.ownerId}

web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import StarRating, { type Rating } from '$lib/elements/StarRating.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { preferences } from '$lib/stores/user.store';
   import { handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
@@ -25,7 +24,7 @@
   };
 </script>
 
-{#if !authManager.isSharedLink && $preferences?.ratings.enabled}
+{#if !authManager.isSharedLink && authManager.authenticated && authManager.preferences.ratings.enabled}
   <section class="px-4 pt-4">
     <StarRating {rating} readOnly={!isOwner} onRating={(rating) => handlePromiseError(handleChangeRating(rating))} />
   </section>