feat: add authentication status listener to refresh settings on user login (#518)

.github/workflows/ci.yml

@@ -76,7 +76,7 @@ jobs:
 
   #   services:
   #     postgres:
-  #       image: postgres:15
+  #       image: pgvector/pgvector:pg17
   #       env:
   #         POSTGRES_PASSWORD: postgres
   #         POSTGRES_DB: mcphub_test

docker-compose.db.yml

@@ -3,7 +3,7 @@ version: "3.8"
 services:
   # PostgreSQL database for MCPHub configuration
   postgres:
-    image: postgres:16-alpine
+    image: pgvector/pgvector:pg17-alpine
     container_name: mcphub-postgres
     environment:
       POSTGRES_DB: mcphub

docs/configuration/database-configuration.mdx

@@ -59,7 +59,7 @@ version: '3.8'
 
 services:
   postgres:
-    image: postgres:16
+    image: pgvector/pgvector:pg17
     environment:
       POSTGRES_DB: mcphub
       POSTGRES_USER: mcphub

docs/configuration/docker-setup.mdx

@@ -119,7 +119,7 @@ services:
       - mcphub-network
 
   postgres:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-postgres
     environment:
       - POSTGRES_DB=mcphub
@@ -203,7 +203,7 @@ services:
       retries: 3
 
   postgres:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-postgres
     environment:
       - POSTGRES_DB=mcphub
@@ -305,7 +305,7 @@ services:
       - mcphub-dev
 
   postgres:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-postgres-dev
     environment:
       - POSTGRES_DB=mcphub
@@ -445,7 +445,7 @@ Add backup service to your `docker-compose.yml`:
 ```yaml
 services:
   backup:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-backup
     environment:
       - PGPASSWORD=${POSTGRES_PASSWORD}

docs/features/smart-routing.mdx

@@ -78,7 +78,7 @@ Smart Routing requires additional setup compared to basic MCPHub usage:
           - ./mcp_settings.json:/app/mcp_settings.json
 
       postgres:
-        image: pgvector/pgvector:pg16
+        image: pgvector/pgvector:pg17
         environment:
           - POSTGRES_DB=mcphub
           - POSTGRES_USER=mcphub
@@ -146,7 +146,7 @@ Smart Routing requires additional setup compared to basic MCPHub usage:
         spec:
           containers:
           - name: postgres
-            image: pgvector/pgvector:pg16
+            image: pgvector/pgvector:pg17
             env:
             - name: POSTGRES_DB
               value: mcphub

docs/installation.mdx

@@ -96,7 +96,7 @@ Optional for Smart Routing:
 
       # Optional: PostgreSQL for Smart Routing
       postgres:
-        image: pgvector/pgvector:pg16
+        image: pgvector/pgvector:pg17
         environment:
           POSTGRES_DB: mcphub
           POSTGRES_USER: mcphub

docs/zh/configuration/database-configuration.mdx

@@ -59,7 +59,7 @@ version: '3.8'
 
 services:
   postgres:
-    image: postgres:16
+    image: pgvector/pgvector:pg17
     environment:
       POSTGRES_DB: mcphub
       POSTGRES_USER: mcphub

docs/zh/configuration/docker-setup.mdx

@@ -119,7 +119,7 @@ services:
       - mcphub-network
 
   postgres:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-postgres
     environment:
       - POSTGRES_DB=mcphub
@@ -203,7 +203,7 @@ services:
       retries: 3
 
   postgres:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-postgres
     environment:
       - POSTGRES_DB=mcphub
@@ -305,7 +305,7 @@ services:
       - mcphub-dev
 
   postgres:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-postgres-dev
     environment:
       - POSTGRES_DB=mcphub
@@ -445,7 +445,7 @@ secrets:
 ```yaml
 services:
   backup:
-    image: postgres:15-alpine
+    image: pgvector/pgvector:pg17
     container_name: mcphub-backup
     environment:
       - PGPASSWORD=${POSTGRES_PASSWORD}

docs/zh/installation.mdx

@@ -96,7 +96,7 @@ description: '各种平台的详细安装说明'
 
       # 可选：用于智能路由的 PostgreSQL
       postgres:
-        image: pgvector/pgvector:pg16
+        image: pgvector/pgvector:pg17
         environment:
           POSTGRES_DB: mcphub
           POSTGRES_USER: mcphub

frontend/src/contexts/AuthContext.tsx

@@ -14,14 +14,17 @@ const initialState: AuthState = {
 // Create auth context
 const AuthContext = createContext<{
   auth: AuthState;
-  login: (username: string, password: string) => Promise<{ success: boolean; isUsingDefaultPassword?: boolean }>;
+  login: (
+    username: string,
+    password: string,
+  ) => Promise<{ success: boolean; isUsingDefaultPassword?: boolean; message?: string }>;
   register: (username: string, password: string, isAdmin?: boolean) => Promise<boolean>;
   logout: () => void;
 }>({
   auth: initialState,
   login: async () => ({ success: false }),
   register: async () => false,
-  logout: () => { },
+  logout: () => {},
 });
 
 // Auth provider component
@@ -90,7 +93,10 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   }, []);
 
   // Login function
-  const login = async (username: string, password: string): Promise<{ success: boolean; isUsingDefaultPassword?: boolean }> => {
+  const login = async (
+    username: string,
+    password: string,
+  ): Promise<{ success: boolean; isUsingDefaultPassword?: boolean; message?: string }> => {
     try {
       const response = await authService.login({ username, password });
 
@@ -111,7 +117,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
           loading: false,
           error: response.message || 'Authentication failed',
         });
-        return { success: false };
+        return { success: false, message: response.message };
       }
     } catch (error) {
       setAuth({
@@ -119,7 +125,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         loading: false,
         error: 'Authentication failed',
       });
-      return { success: false };
+      return { success: false, message: error instanceof Error ? error.message : undefined };
     }
   };
 
@@ -127,7 +133,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   const register = async (
     username: string,
     password: string,
-    isAdmin = false
+    isAdmin = false,
   ): Promise<boolean> => {
     try {
       const response = await authService.register({ username, password, isAdmin });
@@ -175,4 +181,4 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 };
 
 // Custom hook to use auth context
-export const useAuth = () => useContext(AuthContext);
+export const useAuth = () => useContext(AuthContext);

frontend/src/contexts/SettingsContext.tsx

@@ -9,6 +9,7 @@ import React, {
 import { useTranslation } from 'react-i18next';
 import { ApiResponse, BearerKey } from '@/types';
 import { useToast } from '@/contexts/ToastContext';
+import { useAuth } from '@/contexts/AuthContext';
 import { apiGet, apiPut, apiPost, apiDelete } from '@/utils/fetchInterceptor';
 
 // Define types for the settings data
@@ -153,6 +154,7 @@ interface SettingsProviderProps {
 export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children }) => {
   const { t } = useTranslation();
   const { showToast } = useToast();
+  const { auth } = useAuth();
 
   const [routingConfig, setRoutingConfig] = useState<RoutingConfig>({
     enableGlobalRoute: true,
@@ -746,6 +748,15 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children })
     fetchSettings();
   }, [fetchSettings, refreshKey]);
 
+  // Watch for authentication status changes - refetch settings after login
+  useEffect(() => {
+    if (auth.isAuthenticated) {
+      console.log('[SettingsContext] User authenticated, triggering settings refresh');
+      // When user logs in, trigger a refresh to load settings
+      triggerRefresh();
+    }
+  }, [auth.isAuthenticated, triggerRefresh]);
+
   useEffect(() => {
     if (routingConfig) {
       setTempRoutingConfig({

frontend/src/pages/LoginPage.tsx

@@ -44,6 +44,24 @@ const LoginPage: React.FC = () => {
     return sanitizeReturnUrl(params.get('returnUrl'));
   }, [location.search]);
 
+  const isServerUnavailableError = useCallback((message?: string) => {
+    if (!message) return false;
+    const normalized = message.toLowerCase();
+
+    return (
+      normalized.includes('failed to fetch') ||
+      normalized.includes('networkerror') ||
+      normalized.includes('network error') ||
+      normalized.includes('connection refused') ||
+      normalized.includes('unable to connect') ||
+      normalized.includes('fetch error') ||
+      normalized.includes('econnrefused') ||
+      normalized.includes('http 500') ||
+      normalized.includes('internal server error') ||
+      normalized.includes('proxy error')
+    );
+  }, []);
+
   const buildRedirectTarget = useCallback(() => {
     if (!returnUrl) {
       return '/';
@@ -100,10 +118,20 @@ const LoginPage: React.FC = () => {
           redirectAfterLogin();
         }
       } else {
-        setError(t('auth.loginFailed'));
+        const message = result.message;
+        if (isServerUnavailableError(message)) {
+          setError(t('auth.serverUnavailable'));
+        } else {
+          setError(t('auth.loginFailed'));
+        }
       }
     } catch (err) {
-      setError(t('auth.loginError'));
+      const message = err instanceof Error ? err.message : undefined;
+      if (isServerUnavailableError(message)) {
+        setError(t('auth.serverUnavailable'));
+      } else {
+        setError(t('auth.loginError'));
+      }
     } finally {
       setLoading(false);
     }
@@ -131,13 +159,21 @@ const LoginPage: React.FC = () => {
         }}
       />
       <div className="pointer-events-none absolute inset-0 -z-10">
-        <svg className="h-full w-full opacity-[0.08] dark:opacity-[0.12]" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          className="h-full w-full opacity-[0.08] dark:opacity-[0.12]"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <defs>
             <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
               <path d="M 32 0 L 0 0 0 32" fill="none" stroke="currentColor" strokeWidth="0.5" />
             </pattern>
           </defs>
-          <rect width="100%" height="100%" fill="url(#grid)" className="text-gray-400 dark:text-gray-300" />
+          <rect
+            width="100%"
+            height="100%"
+            fill="url(#grid)"
+            className="text-gray-400 dark:text-gray-300"
+          />
         </svg>
       </div>
 

frontend/src/pages/SettingsPage.tsx

@@ -558,12 +558,6 @@ const SettingsPage: React.FC = () => {
     });
   };
 
-  const saveSmartRoutingConfig = async (
-    key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel',
-  ) => {
-    await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key]);
-  };
-
   const handleMCPRouterConfigChange = (
     key: 'apiKey' | 'referer' | 'title' | 'baseUrl',
     value: string,
@@ -705,6 +699,31 @@ const SettingsPage: React.FC = () => {
     }
   };
 
+  const handleSaveSmartRoutingConfig = async () => {
+    const updates: any = {};
+
+    if (tempSmartRoutingConfig.dbUrl !== smartRoutingConfig.dbUrl) {
+      updates.dbUrl = tempSmartRoutingConfig.dbUrl;
+    }
+    if (tempSmartRoutingConfig.openaiApiBaseUrl !== smartRoutingConfig.openaiApiBaseUrl) {
+      updates.openaiApiBaseUrl = tempSmartRoutingConfig.openaiApiBaseUrl;
+    }
+    if (tempSmartRoutingConfig.openaiApiKey !== smartRoutingConfig.openaiApiKey) {
+      updates.openaiApiKey = tempSmartRoutingConfig.openaiApiKey;
+    }
+    if (
+      tempSmartRoutingConfig.openaiApiEmbeddingModel !== smartRoutingConfig.openaiApiEmbeddingModel
+    ) {
+      updates.openaiApiEmbeddingModel = tempSmartRoutingConfig.openaiApiEmbeddingModel;
+    }
+
+    if (Object.keys(updates).length > 0) {
+      await updateSmartRoutingConfigBatch(updates);
+    } else {
+      showToast(t('settings.noChanges') || 'No changes to save', 'info');
+    }
+  };
+
   const handlePasswordChangeSuccess = () => {
     setTimeout(() => {
       navigate('/');
@@ -1230,13 +1249,6 @@ const SettingsPage: React.FC = () => {
                     className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 form-input"
                     disabled={loading}
                   />
-                  <button
-                    onClick={() => saveSmartRoutingConfig('dbUrl')}
-                    disabled={loading}
-                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
-                  >
-                    {t('common.save')}
-                  </button>
                 </div>
               </div>
 
@@ -1256,13 +1268,6 @@ const SettingsPage: React.FC = () => {
                     className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300"
                     disabled={loading}
                   />
-                  <button
-                    onClick={() => saveSmartRoutingConfig('openaiApiKey')}
-                    disabled={loading}
-                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
-                  >
-                    {t('common.save')}
-                  </button>
                 </div>
               </div>
 
@@ -1281,13 +1286,6 @@ const SettingsPage: React.FC = () => {
                     className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                     disabled={loading}
                   />
-                  <button
-                    onClick={() => saveSmartRoutingConfig('openaiApiBaseUrl')}
-                    disabled={loading}
-                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
-                  >
-                    {t('common.save')}
-                  </button>
                 </div>
               </div>
 
@@ -1308,15 +1306,18 @@ const SettingsPage: React.FC = () => {
                     className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                     disabled={loading}
                   />
-                  <button
-                    onClick={() => saveSmartRoutingConfig('openaiApiEmbeddingModel')}
-                    disabled={loading}
-                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
-                  >
-                    {t('common.save')}
-                  </button>
                 </div>
               </div>
+
+              <div className="flex justify-end pt-2">
+                <button
+                  onClick={handleSaveSmartRoutingConfig}
+                  disabled={loading}
+                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                >
+                  {t('common.save')}
+                </button>
+              </div>
             </div>
           )}
         </div>

frontend/src/services/authService.ts

@@ -29,7 +29,7 @@ export const login = async (credentials: LoginCredentials): Promise<AuthResponse
     console.error('Login error:', error);
     return {
       success: false,
-      message: 'An error occurred during login',
+      message: error instanceof Error ? error.message : 'An error occurred during login',
     };
   }
 };

locales/en.json

@@ -61,6 +61,7 @@
     "emptyFields": "Username and password cannot be empty",
     "loginFailed": "Login failed, please check your username and password",
     "loginError": "An error occurred during login",
+    "serverUnavailable": "Unable to connect to the server. Please check your network connection or try again later",
     "currentPassword": "Current Password",
     "newPassword": "New Password",
     "confirmPassword": "Confirm Password",

locales/fr.json

@@ -61,6 +61,7 @@
     "emptyFields": "Le nom d'utilisateur et le mot de passe ne peuvent pas être vides",
     "loginFailed": "Échec de la connexion, veuillez vérifier votre nom d'utilisateur et votre mot de passe",
     "loginError": "Une erreur est survenue lors de la connexion",
+    "serverUnavailable": "Impossible de se connecter au serveur. Veuillez vérifier votre connexion réseau ou réessayer plus tard",
     "currentPassword": "Mot de passe actuel",
     "newPassword": "Nouveau mot de passe",
     "confirmPassword": "Confirmer le mot de passe",

locales/tr.json

@@ -61,6 +61,7 @@
     "emptyFields": "Kullanıcı adı ve şifre boş olamaz",
     "loginFailed": "Giriş başarısız, lütfen kullanıcı adınızı ve şifrenizi kontrol edin",
     "loginError": "Giriş sırasında bir hata oluştu",
+    "serverUnavailable": "Sunucuya bağlanılamıyor. Lütfen ağ bağlantınızı kontrol edin veya daha sonra tekrar deneyin",
     "currentPassword": "Mevcut Şifre",
     "newPassword": "Yeni Şifre",
     "confirmPassword": "Şifreyi Onayla",

locales/zh.json

@@ -61,6 +61,7 @@
     "emptyFields": "用户名和密码不能为空",
     "loginFailed": "登录失败，请检查用户名和密码",
     "loginError": "登录过程中出现错误",
+    "serverUnavailable": "无法连接到服务器，请检查网络连接或稍后再试",
     "currentPassword": "当前密码",
     "newPassword": "新密码",
     "confirmPassword": "确认密码",

src/services/mcpOAuthProvider.ts

@@ -325,7 +325,7 @@ export class MCPHubOAuthProvider implements OAuthClientProvider {
       return;
     }
 
-    console.log(`Saving OAuth tokens for server: ${this.serverName}`);
+    console.log(`Saving OAuth tokens: ${JSON.stringify(tokens)} for server: ${this.serverName}`);
 
     const updatedConfig = await persistTokens(this.serverName, {
       accessToken: tokens.access_token,

src/services/mcpService.ts

@@ -241,6 +241,8 @@ const callToolWithReconnect = async (
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
       const result = await serverInfo.client.callTool(toolParams, undefined, options || {});
+      // Check auth error
+      checkAuthError(result);
       return result;
     } catch (error: any) {
       // Check if error message starts with "Error POSTing to endpoint (HTTP 40"
@@ -830,6 +832,25 @@ export const addOrUpdateServer = async (
   }
 };
 
+// Check for authentication error in tool call result
+function checkAuthError(result: any) {
+  if (Array.isArray(result.content) && result.content.length > 0) {
+    const text = result.content[0]?.text;
+    if (typeof text === 'string') {
+      let errorContent;
+      try {
+        errorContent = JSON.parse(text);
+      } catch (e) {
+        // Ignore JSON parse errors and continue
+        return;
+      }
+      if (errorContent.code === 401) {
+        throw new Error('Error POSTing to endpoint (HTTP 401 Unauthorized)');
+      }
+    }
+  }
+}
+
 // Close server client and transport
 function closeServer(name: string) {
   const serverInfo = serverInfos.find((serverInfo) => serverInfo.name === name);