mirror of
https://github.com/samanhappy/mcphub.git
synced 2026-01-03 21:37:43 -05:00
feat: Implement OAuth 2.0 / OIDC SSO support with configuration and routing updates
This commit is contained in:
samanhappy
@@ -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
|
||||
|
||||
|
||||
@@ -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 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"/>
|
||||
<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
|
||||
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="#00A4EF" d="M1 13h10v10H1z"/>
|
||||
<path fill="#7FBA00" d="M13 1h10v10H13z"/>
|
||||
<path fill="#FFB900" d="M13 13h10v10H13z"/>
|
||||
<path fill="#F25022" d="M1 1h10v10H1z" />
|
||||
<path fill="#00A4EF" d="M1 13h10v10H1z" />
|
||||
<path fill="#7FBA00" d="M13 1h10v10H13z" />
|
||||
<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">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 6v6l4 2"/>
|
||||
<svg
|
||||
className={className}
|
||||
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">
|
||||
|
||||
@@ -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');
|
||||
if (response.success && response.data) {
|
||||
return response.data;
|
||||
const basePath = getBasePath();
|
||||
// const response = await apiGet<{ success: boolean; data: SSOConfig }>('/auth/sso/config');
|
||||
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)}`;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 ||
|
||||
`${req.protocol}://${req.get('host')}`;
|
||||
const redirectUri = `${callbackBaseUrl}/api/auth/sso/${provider}/callback`;
|
||||
settings.systemConfig?.oauthSSO?.callbackBaseUrl || `${req.protocol}://${req.get('host')}`;
|
||||
const redirectUri = `${callbackBaseUrl}/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 ||
|
||||
`${req.protocol}://${req.get('host')}`;
|
||||
const redirectUri = `${callbackBaseUrl}/api/auth/sso/${provider}/callback`;
|
||||
settings.systemConfig?.oauthSSO?.callbackBaseUrl || `${req.protocol}://${req.get('host')}`;
|
||||
const redirectUri = `${callbackBaseUrl}/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);
|
||||
|
||||
@@ -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
|
||||
router.get('/auth/sso/:provider', initiateSSOLogin); // Initiate SSO login
|
||||
router.get('/auth/sso/:provider/callback', handleSSOCallback); // Handle OAuth callback
|
||||
app.get(`${config.basePath}/auth/sso/config`, getSSOConfig); // Get SSO configuration for frontend
|
||||
app.get(`${config.basePath}/auth/sso/:provider`, initiateSSOLogin); // Initiate SSO login
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user