fix(web): websocket reconnect (#7234)

* fix(web): websocket reconnect

* reset store after navigation completes

* remove loggedOut check

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

@@ -29,13 +29,13 @@
   }>();
 
   const logOut = async () => {
-    resetSavedUser();
     const { redirectUri } = await logout();
     if (redirectUri.startsWith('/')) {
-      goto(redirectUri);
+      await goto(redirectUri);
     } else {
       window.location.href = redirectUri;
     }
+    resetSavedUser();
   };
 </script>
 

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

@@ -1,8 +1,12 @@
 import type { UserResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
 
-export let user = writable<UserResponseDto>();
+export const user = writable<UserResponseDto>();
 
+/**
+ * Reset the store to its initial undefined value. Make sure to
+ * only do this _after_ redirecting to an unauthenticated page.
+ */
 export const resetSavedUser = () => {
-  user = writable<UserResponseDto>();
+  user.set(undefined as unknown as UserResponseDto);
 };

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) {
+    openWebsocketConnection();
+  } else {
+    closeWebsocketConnection();
+  }
+
   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) {