feat: Implement OAuth 2.0 / OIDC SSO support with configuration and routing updates

docs/configuration/oauth-sso.mdx

@@ -63,7 +63,7 @@ Add the `oauthSSO` section to your `mcp_settings.json` under `systemConfig`:
 2. Create a new project or select existing one
 3. Navigate to "APIs & Services" → "Credentials"
 4. Create OAuth 2.0 Client ID (Web application)
-5. Add authorized redirect URI: `https://your-domain/api/auth/sso/google/callback`
+5. Add authorized redirect URI: `https://your-domain/auth/sso/google/callback`
 6. Copy Client ID and Client Secret
 
 ```json
@@ -80,7 +80,7 @@ Add the `oauthSSO` section to your `mcp_settings.json` under `systemConfig`:
 
 1. Go to [GitHub Developer Settings](https://github.com/settings/developers)
 2. Click "New OAuth App"
-3. Set Authorization callback URL: `https://your-domain/api/auth/sso/github/callback`
+3. Set Authorization callback URL: `https://your-domain/auth/sso/github/callback`
 4. Copy Client ID and generate Client Secret
 
 ```json
@@ -97,7 +97,7 @@ Add the `oauthSSO` section to your `mcp_settings.json` under `systemConfig`:
 
 1. Go to [Azure Portal](https://portal.azure.com/) → Azure Active Directory
 2. Navigate to "App registrations" → "New registration"
-3. Add redirect URI: `https://your-domain/api/auth/sso/microsoft/callback`
+3. Add redirect URI: `https://your-domain/auth/sso/microsoft/callback`
 4. Under "Certificates & secrets", create a new client secret
 5. Copy Application (client) ID and client secret value
 

frontend/src/pages/LoginPage.tsx

@@ -31,38 +31,59 @@ const sanitizeReturnUrl = (value: string | null): string | null => {
 };
 
 // Provider icons (SVG)
-const ProviderIcon: React.FC<{ type: string; className?: string }> = ({ type, className = 'w-5 h-5' }) => {
+const ProviderIcon: React.FC<{ type: string; className?: string }> = ({
+  type,
+  className = 'w-5 h-5',
+}) => {
   switch (type) {
     case 'google':
       return (
         <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+          <path
-          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+            fill="#4285F4"
-          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+          />
+          <path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+          />
+          <path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+          />
         </svg>
       );
     case 'github':
       return (
         <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
         </svg>
       );
     case 'microsoft':
       return (
         <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-          <path fill="#F25022" d="M1 1h10v10H1z"/>
+          <path fill="#F25022" d="M1 1h10v10H1z" />
-          <path fill="#00A4EF" d="M1 13h10v10H1z"/>
+          <path fill="#00A4EF" d="M1 13h10v10H1z" />
-          <path fill="#7FBA00" d="M13 1h10v10H13z"/>
+          <path fill="#7FBA00" d="M13 1h10v10H13z" />
-          <path fill="#FFB900" d="M13 13h10v10H13z"/>
+          <path fill="#FFB900" d="M13 13h10v10H13z" />
         </svg>
       );
     default:
       // Generic OAuth/OIDC icon
       return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg
-          <circle cx="12" cy="12" r="10"/>
+          className={className}
-          <path d="M12 6v6l4 2"/>
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 6v6l4 2" />
         </svg>
       );
   }
@@ -251,37 +272,6 @@ const LoginPage: React.FC = () => {
             <div className="absolute -top-24 right-12 h-40 w-40 -translate-y-6 rounded-full bg-indigo-500/30 blur-3xl" />
             <div className="absolute -bottom-24 -left-12 h-40 w-40 translate-y-6 rounded-full bg-cyan-500/20 blur-3xl" />
 
-            {/* SSO Buttons */}
-            {ssoEnabled && ssoProviders.length > 0 && (
-              <div className="space-y-3 mb-6">
-                {ssoProviders.map((provider) => (
-                  <button
-                    key={provider.id}
-                    type="button"
-                    onClick={() => handleSSOLogin(provider.id)}
-                    className="sso-button group relative flex w-full items-center justify-center gap-3 rounded-md border border-gray-300/60 bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:border-gray-400/60 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600/60 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700/80"
-                  >
-                    <ProviderIcon type={provider.type} />
-                    <span>{t('auth.continueWith', { provider: provider.name })}</span>
-                  </button>
-                ))}
-                
-                {/* Divider - only show if local auth is also allowed */}
-                {allowLocalAuth && (
-                  <div className="relative my-4">
-                    <div className="absolute inset-0 flex items-center">
-                      <div className="w-full border-t border-gray-300/60 dark:border-gray-600/60" />
-                    </div>
-                    <div className="relative flex justify-center text-sm">
-                      <span className="px-2 bg-white/60 text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
-                        {t('auth.orContinueWith')}
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
             {/* Local auth form - only show if allowed */}
             {allowLocalAuth && (
               <form className="mt-4 space-y-4" onSubmit={handleSubmit}>
@@ -338,6 +328,34 @@ const LoginPage: React.FC = () => {
               </form>
             )}
 
+            {/* SSO Buttons */}
+            {ssoEnabled && ssoProviders.length > 0 && (
+              <div className="space-y-3 mb-6">
+                {/* Divider */}
+                <div className="relative my-4">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-gray-300/60 dark:border-gray-600/60" />
+                  </div>
+                  <div className="relative flex justify-center text-sm">
+                    <span className="px-2 bg-white/60 text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
+                      {t('auth.orContinueWith')}
+                    </span>
+                  </div>
+                </div>
+                {ssoProviders.map((provider) => (
+                  <button
+                    key={provider.id}
+                    type="button"
+                    onClick={() => handleSSOLogin(provider.id)}
+                    className="sso-button group relative flex w-full items-center justify-center gap-3 rounded-md border border-gray-300/60 bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:border-gray-400/60 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600/60 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700/80"
+                  >
+                    <ProviderIcon type={provider.type} />
+                    <span>{t('auth.continueWith', { provider: provider.name })}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+
             {/* Show message if only SSO is available and no providers configured */}
             {!allowLocalAuth && ssoProviders.length === 0 && (
               <div className="text-center text-gray-500 dark:text-gray-400">

frontend/src/services/authService.ts

@@ -1,3 +1,4 @@
+import { getBasePath } from '@/utils/runtime';
 import {
   AuthResponse,
   LoginCredentials,
@@ -5,7 +6,7 @@ import {
   ChangePasswordCredentials,
   SSOConfig,
 } from '../types';
-import { apiPost, apiGet } from '../utils/fetchInterceptor';
+import { apiPost, apiGet, fetchWithInterceptors } from '../utils/fetchInterceptor';
 import { getToken, setToken, removeToken } from '../utils/interceptors';
 
 // Export token management functions
@@ -14,9 +15,17 @@ export { getToken, setToken, removeToken };
 // Get SSO configuration
 export const getSSOConfig = async (): Promise<SSOConfig> => {
   try {
-    const response = await apiGet<{ success: boolean; data: SSOConfig }>('/auth/sso/config');
+    const basePath = getBasePath();
-    if (response.success && response.data) {
+    // const response = await apiGet<{ success: boolean; data: SSOConfig }>('/auth/sso/config');
-      return response.data;
+    const response = await fetchWithInterceptors(`${basePath}/auth/sso/config`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (response.ok) {
+      const data: { success: boolean; data: SSOConfig } = await response.json();
+      return data.data;
     }
     return { enabled: false, providers: [], allowLocalAuth: true };
   } catch (error) {
@@ -28,7 +37,7 @@ export const getSSOConfig = async (): Promise<SSOConfig> => {
 // Initiate SSO login (redirects to provider)
 export const initiateSSOLogin = (providerId: string, returnUrl?: string): void => {
   const basePath = import.meta.env.VITE_API_BASE_PATH || '';
-  let url = `${basePath}/api/auth/sso/${providerId}`;
+  let url = `${basePath}/auth/sso/${providerId}`;
   if (returnUrl) {
     url += `?returnUrl=${encodeURIComponent(returnUrl)}`;
   }

mcp_settings.json

@@ -43,6 +43,34 @@
     }
   ],
   "systemConfig": {
+    "oauthSSO": {
+      "enabled": true,
+      "allowLocalAuth": true,
+      "callbackBaseUrl": "https://your-mcphub-domain.com",
+      "providers": [
+        {
+          "id": "google",
+          "name": "Google",
+          "type": "google",
+          "clientId": "your-google-client-id",
+          "clientSecret": "your-google-client-secret"
+        },
+        {
+          "id": "github",
+          "name": "GitHub",
+          "type": "github",
+          "clientId": "your-github-client-id",
+          "clientSecret": "your-github-client-secret"
+        },
+        {
+          "id": "microsoft",
+          "name": "Microsoft",
+          "type": "microsoft",
+          "clientId": "your-microsoft-client-id",
+          "clientSecret": "your-microsoft-client-secret"
+        }
+      ]
+    },
     "oauthServer": {
       "enabled": true,
       "accessTokenLifetime": 3600,

src/controllers/oauthSSOController.ts

@@ -66,9 +66,8 @@ export const initiateSSOLogin = async (req: Request, res: Response): Promise<voi
     // Build redirect URI
     const settings = loadSettings();
     const callbackBaseUrl =
-      settings.systemConfig?.oauthSSO?.callbackBaseUrl ||
+      settings.systemConfig?.oauthSSO?.callbackBaseUrl || `${req.protocol}://${req.get('host')}`;
-      `${req.protocol}://${req.get('host')}`;
+    const redirectUri = `${callbackBaseUrl}/auth/sso/${provider}/callback`;
-    const redirectUri = `${callbackBaseUrl}/api/auth/sso/${provider}/callback`;
 
     // Generate authorization URL
     const result = generateAuthorizationUrl(provider, redirectUri);
@@ -105,7 +104,7 @@ export const initiateSSOLogin = async (req: Request, res: Response): Promise<voi
 /**
  * Handle OAuth callback from provider
  * Exchanges code for tokens, gets user info, creates/updates user, returns JWT
- * 
+ *
  * Note: OAuth callback data (code, state) is received via query parameters as per OAuth 2.0 spec.
  * This is secure because:
  * - The authorization code is single-use and tied to a specific state
@@ -134,9 +133,8 @@ export const handleSSOCallback = async (req: Request, res: Response): Promise<vo
     // Build redirect URI (must match the one used in initiation)
     const settings = loadSettings();
     const callbackBaseUrl =
-      settings.systemConfig?.oauthSSO?.callbackBaseUrl ||
+      settings.systemConfig?.oauthSSO?.callbackBaseUrl || `${req.protocol}://${req.get('host')}`;
-      `${req.protocol}://${req.get('host')}`;
+    const redirectUri = `${callbackBaseUrl}/auth/sso/${provider}/callback`;
-    const redirectUri = `${callbackBaseUrl}/api/auth/sso/${provider}/callback`;
 
     // Handle the callback
     const result = await handleCallback(String(state), String(code), redirectUri);
@@ -162,7 +160,9 @@ export const handleSSOCallback = async (req: Request, res: Response): Promise<vo
       res.redirect(redirectUrl.pathname + redirectUrl.search);
     } else {
       // For normal login, redirect to a special callback page that handles the token
-      res.redirect(`/sso-callback?token=${encodeURIComponent(result.token!)}&returnUrl=${encodeURIComponent(returnUrl)}`);
+      res.redirect(
+        `/sso-callback?token=${encodeURIComponent(result.token!)}&returnUrl=${encodeURIComponent(returnUrl)}`,
+      );
     }
   } catch (error) {
     console.error(`Error handling SSO callback for ${provider}:`, error);

src/routes/index.ts

@@ -279,9 +279,9 @@ export const initRoutes = (app: express.Application): void => {
   );
 
   // OAuth SSO routes (no auth required - public endpoints)
-  router.get('/auth/sso/config', getSSOConfig); // Get SSO configuration for frontend
+  app.get(`${config.basePath}/auth/sso/config`, getSSOConfig); // Get SSO configuration for frontend
-  router.get('/auth/sso/:provider', initiateSSOLogin); // Initiate SSO login
+  app.get(`${config.basePath}/auth/sso/:provider`, initiateSSOLogin); // Initiate SSO login
-  router.get('/auth/sso/:provider/callback', handleSSOCallback); // Handle OAuth callback
+  app.get(`${config.basePath}/auth/sso/:provider/callback`, handleSSOCallback); // Handle OAuth callback
 
   // Runtime configuration endpoint (no auth required for frontend initialization)
   app.get(`${config.basePath}/config`, getRuntimeConfig);