fix(web): websocket reconnect

web/src/lib/stores/user.store.ts

@@ -1,8 +1,13 @@
 import type { UserResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
 
-export let user = writable<UserResponseDto>();
+export const user = writable<UserResponseDto & { loggedOut?: true }>();
 
 export const resetSavedUser = () => {
-  user = writable<UserResponseDto>();
+  user.update((value) => {
+    if (value) {
+      value.loggedOut = true;
+    }
+    return value;
+  });
 };

web/src/lib/utils/auth.ts

@@ -14,7 +14,7 @@ export interface AuthOptions {
 export const loadUser = async () => {
   try {
     let loaded = get(user);
-    if (!loaded && hasAuthCookie()) {
+    if ((!loaded || loaded?.loggedOut) && hasAuthCookie()) {
       loaded = await getMyUserInfo();
       user.set(loaded);
     }

web/src/routes/+layout.svelte

@@ -22,10 +22,15 @@
   let albumId: string | undefined;
 
   const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
-  const isAuthRoute = (route?: string) => route?.startsWith('/auth');
 
   $: changeTheme($colorTheme);
 
+  $: if (!$user || $user?.loggedOut) {
+    closeWebsocketConnection();
+  } else if ($user) {
+    openWebsocketConnection();
+  }
+
   const changeTheme = (theme: ThemeSetting) => {
     if (theme.system) {
       theme.value =
@@ -58,18 +63,7 @@
     setKey($page.params.key);
   }
 
-  beforeNavigate(({ from, to }) => {
-    const fromRoute = from?.route?.id || '';
-    const toRoute = to?.route?.id || '';
-
-    if (isAuthRoute(fromRoute) && !isAuthRoute(toRoute)) {
-      openWebsocketConnection();
-    }
-
-    if (!isAuthRoute(fromRoute) && isAuthRoute(toRoute)) {
-      closeWebsocketConnection();
-    }
-
+  beforeNavigate(() => {
     showNavigationLoadingBar = true;
   });
 
@@ -78,10 +72,6 @@
   });
 
   onMount(async () => {
-    if ($page.route.id?.startsWith('/auth') === false) {
-      openWebsocketConnection();
-    }
-
     try {
       await loadConfig();
     } catch (error) {