handle Navidrome login loop error

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -62,7 +62,8 @@ const ActionRequiredRoute = () => {
                     </Group>
                     <Stack mt="2rem">
                         {canReturnHome && <Navigate to={AppRoute.HOME} />}
-                        {!displayedCheck && (
+                        {/* This should be displayed if a credential is required */}
+                        {isCredentialRequired && (
                             <Group
                                 justify="center"
                                 wrap="nowrap"

src/renderer/hooks/use-server-authenticated.ts

@@ -1,20 +1,26 @@
+import isElectron from 'is-electron';
 import { debounce } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { api } from '/@/renderer/api';
-import { useCurrentServer } from '/@/renderer/store';
+import { useAuthStoreActions, useCurrentServer } from '/@/renderer/store';
 import { toast } from '/@/shared/components/toast/toast';
 import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { AuthState, ServerListItem, ServerType } from '/@/shared/types/types';
 
+const localSettings = isElectron() ? window.api.localSettings : null;
+
 export const useServerAuthenticated = () => {
     const priorServerId = useRef<string | undefined>(undefined);
     const server = useCurrentServer();
     const [ready, setReady] = useState(
-        server?.type === ServerType.NAVIDROME ? AuthState.LOADING : AuthState.VALID,
+        server?.type === ServerType.NAVIDROME ? AuthState.VALID : AuthState.VALID,
     );
 
-    const authenticateNavidrome = useCallback(async (server: ServerListItem) => {
+    const { updateServer } = useAuthStoreActions();
+
+    const authenticateNavidrome = useCallback(
+        async (server: ServerListItem) => {
             // This trick works because navidrome-api.ts will internally check for authentication
             // failures and try to log in again (where available). So, all that's necessary is
             // making one request first
@@ -31,10 +37,21 @@ export const useServerAuthenticated = () => {
 
                 setReady(AuthState.VALID);
             } catch (error) {
+                // Clear server credentials (and saved password).
+                if (server.savePassword && localSettings) {
+                    localSettings.passwordRemove(server.id);
+                }
+
+                server.credential = '';
+                updateServer(server.id, server);
+
                 toast.error({ message: (error as Error).message });
+
                 setReady(AuthState.INVALID);
             }
-    }, []);
+        },
+        [updateServer],
+    );
 
     const debouncedAuth = debounce((server: ServerListItem) => {
         authenticateNavidrome(server).catch(console.error);

src/renderer/router/app-outlet.tsx

@@ -19,6 +19,8 @@ export const AppOutlet = () => {
     const setFallback = useSetPlayerFallback();
     const authState = useServerAuthenticated();
 
+    console.log(authState);
+
     const isActionsRequired = useMemo(() => {
         const isServerRequired = !currentServer;
 
@@ -55,6 +57,7 @@ export const AppOutlet = () => {
     }
 
     if (isActionsRequired || authState === AuthState.INVALID) {
+        console.log('required', isActionsRequired);
         return (
             <Navigate
                 replace