feat(web): logout of all tabs (#12407)

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import { clickOutside } from '$lib/actions/click-outside';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { resetSavedUser, user } from '$lib/stores/user.store';
-  import { clickOutside } from '$lib/actions/click-outside';
+  import { user } from '$lib/stores/user.store';
+  import { handleLogout } from '$lib/utils/auth';
   import { logout } from '@immich/sdk';
   import { mdiCog, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { fade, fly } from 'svelte/transition';
   import { AppRoute } from '../../../constants';
   import ImmichLogo from '../immich-logo.svelte';
@@ -17,9 +19,6 @@
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { t } from 'svelte-i18n';
-  import { foldersStore } from '$lib/stores/folders.store';
 
   export let showUploadButton = true;
 
@@ -30,16 +29,9 @@
     uploadClicked: void;
   }>();
 
-  const logOut = async () => {
+  const onLogout = async () => {
     const { redirectUri } = await logout();
-
-    if (redirectUri.startsWith('/')) {
-      await goto(redirectUri);
-    } else {
-      window.location.href = redirectUri;
-    }
-    resetSavedUser();
-    foldersStore.clearCache();
+    await handleLogout(redirectUri);
   };
 </script>
 
@@ -153,7 +145,7 @@
           {/if}
 
           {#if shouldShowAccountInfoPanel}
-            <AccountInfoPanel on:logout={logOut} />
+            <AccountInfoPanel on:logout={onLogout} />
           {/if}
         </div>
       </section>

web/src/lib/stores/websocket.ts

@@ -1,3 +1,5 @@
+import { AppRoute } from '$lib/constants';
+import { handleLogout } from '$lib/utils/auth';
 import { createEventEmitter } from '$lib/utils/eventemitter';
 import type { AssetResponseDto, ServerVersionResponseDto } from '@immich/sdk';
 import { io, type Socket } from 'socket.io-client';
@@ -24,6 +26,7 @@ export interface Events {
   on_server_version: (serverVersion: ServerVersionResponseDto) => void;
   on_config_update: () => void;
   on_new_release: (newRelase: ReleaseEvent) => void;
+  on_session_delete: (sessionId: string) => void;
 }
 
 const websocket: Socket<Events> = io({
@@ -47,6 +50,7 @@ websocket
   .on('disconnect', () => websocketStore.connected.set(false))
   .on('on_server_version', (serverVersion) => websocketStore.serverVersion.set(serverVersion))
   .on('on_new_release', (releaseVersion) => websocketStore.release.set(releaseVersion))
+  .on('on_session_delete', () => handleLogout(AppRoute.AUTH_LOGIN))
   .on('connect_error', (e) => console.log('Websocket Connect Error', e));
 
 export const openWebsocketConnection = () => {

web/src/lib/utils/auth.ts

@@ -1,7 +1,9 @@
 import { browser } from '$app/environment';
+import { goto } from '$app/navigation';
+import { foldersStore } from '$lib/stores/folders.store';
 import { purchaseStore } from '$lib/stores/purchase.store';
 import { serverInfo } from '$lib/stores/server-info.store';
-import { preferences as preferences$, user as user$ } from '$lib/stores/user.store';
+import { preferences as preferences$, resetSavedUser, user as user$ } from '$lib/stores/user.store';
 import { getAboutInfo, getMyPreferences, getMyUser, getStorage } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
 import { DateTime } from 'luxon';
@@ -87,3 +89,16 @@ export const getAccountAge = (): number => {
 
   return Number(accountAge);
 };
+
+export const handleLogout = async (redirectUri: string) => {
+  try {
+    if (redirectUri.startsWith('/')) {
+      await goto(redirectUri);
+    } else {
+      window.location.href = redirectUri;
+    }
+  } finally {
+    resetSavedUser();
+    foldersStore.clearCache();
+  }
+};