feat: implement OAuth 2.0 / OpenID Connect support
Some checks failed
Build & Push Docker Image / build (push) Failing after 1m12s
Some checks failed
Build & Push Docker Image / build (push) Failing after 1m12s
- Added OAuth configuration management in the admin panel. - Implemented OAuth authorization flow with PKCE for enhanced security. - Created routes for handling OAuth provider discovery, authorization, and callback. - Integrated OAuth login and registration options in the frontend. - Updated UI components to support OAuth login and registration. - Added internationalization strings for OAuth-related messages. - Implemented encryption for client secrets and secure state management. - Added error handling and user feedback for OAuth processes.
This commit is contained in:
@@ -4,7 +4,7 @@ import {
|
||||
Users, Shield, Search, Trash2, ChevronDown, Loader2,
|
||||
MoreVertical, Key, UserCheck, UserX, UserPlus, Mail, Lock, User,
|
||||
Upload, X as XIcon, Image, Type, Palette, Send, Copy, Clock, Check,
|
||||
ShieldCheck, Globe, Link as LinkIcon,
|
||||
ShieldCheck, Globe, Link as LinkIcon, LogIn,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
@@ -48,6 +48,12 @@ export default function Admin() {
|
||||
const [editPrivacyUrl, setEditPrivacyUrl] = useState('');
|
||||
const [savingPrivacyUrl, setSavingPrivacyUrl] = useState(false);
|
||||
|
||||
// OAuth state
|
||||
const [oauthConfig, setOauthConfig] = useState(null);
|
||||
const [oauthLoading, setOauthLoading] = useState(true);
|
||||
const [oauthForm, setOauthForm] = useState({ issuer: '', clientId: '', clientSecret: '', displayName: 'SSO', autoRegister: true });
|
||||
const [savingOauth, setSavingOauth] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.role !== 'admin') {
|
||||
navigate('/dashboard');
|
||||
@@ -55,6 +61,7 @@ export default function Admin() {
|
||||
}
|
||||
fetchUsers();
|
||||
fetchInvites();
|
||||
fetchOauthConfig();
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -275,6 +282,58 @@ export default function Admin() {
|
||||
}
|
||||
};
|
||||
|
||||
// ── OAuth handlers ──────────────────────────────────────────────────────
|
||||
const fetchOauthConfig = async () => {
|
||||
setOauthLoading(true);
|
||||
try {
|
||||
const res = await api.get('/admin/oauth');
|
||||
if (res.data.configured) {
|
||||
setOauthConfig(res.data.config);
|
||||
setOauthForm({
|
||||
issuer: res.data.config.issuer || '',
|
||||
clientId: res.data.config.clientId || '',
|
||||
clientSecret: '',
|
||||
displayName: res.data.config.displayName || 'SSO',
|
||||
autoRegister: res.data.config.autoRegister ?? true,
|
||||
});
|
||||
} else {
|
||||
setOauthConfig(null);
|
||||
}
|
||||
} catch {
|
||||
// silently fail
|
||||
} finally {
|
||||
setOauthLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOauthSave = async (e) => {
|
||||
e.preventDefault();
|
||||
setSavingOauth(true);
|
||||
try {
|
||||
await api.put('/admin/oauth', oauthForm);
|
||||
toast.success(t('admin.oauthSaved'));
|
||||
fetchOauthConfig();
|
||||
refreshBranding();
|
||||
} catch (err) {
|
||||
toast.error(err.response?.data?.error || t('admin.oauthSaveFailed'));
|
||||
} finally {
|
||||
setSavingOauth(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOauthRemove = async () => {
|
||||
if (!confirm(t('admin.oauthRemoveConfirm'))) return;
|
||||
try {
|
||||
await api.delete('/admin/oauth');
|
||||
toast.success(t('admin.oauthRemoved'));
|
||||
setOauthConfig(null);
|
||||
setOauthForm({ issuer: '', clientId: '', clientSecret: '', displayName: 'SSO', autoRegister: true });
|
||||
refreshBranding();
|
||||
} catch {
|
||||
toast.error(t('admin.oauthRemoveFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const filteredUsers = users.filter(u =>
|
||||
(u.display_name || u.name).toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(search.toLowerCase())
|
||||
@@ -596,6 +655,106 @@ export default function Admin() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* OAuth / SSO Configuration */}
|
||||
<div className="card p-6 mb-8">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<LogIn size={20} className="text-th-accent" />
|
||||
<h2 className="text-lg font-semibold text-th-text">{t('admin.oauthTitle')}</h2>
|
||||
</div>
|
||||
<p className="text-sm text-th-text-s mb-5">{t('admin.oauthDescription')}</p>
|
||||
|
||||
{oauthLoading ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loader2 size={20} className="animate-spin text-th-accent" />
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleOauthSave} className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthIssuer')}</label>
|
||||
<input
|
||||
type="url"
|
||||
value={oauthForm.issuer}
|
||||
onChange={e => setOauthForm(f => ({ ...f, issuer: e.target.value }))}
|
||||
className="input-field text-sm"
|
||||
placeholder="https://auth.example.com/realms/main"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-th-text-s mt-1">{t('admin.oauthIssuerHint')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientId')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={oauthForm.clientId}
|
||||
onChange={e => setOauthForm(f => ({ ...f, clientId: e.target.value }))}
|
||||
className="input-field text-sm"
|
||||
placeholder="redlight"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthClientSecret')}</label>
|
||||
<input
|
||||
type="password"
|
||||
value={oauthForm.clientSecret}
|
||||
onChange={e => setOauthForm(f => ({ ...f, clientSecret: e.target.value }))}
|
||||
className="input-field text-sm"
|
||||
placeholder={oauthConfig?.hasClientSecret ? '••••••••' : ''}
|
||||
/>
|
||||
{oauthConfig?.hasClientSecret && (
|
||||
<p className="text-xs text-th-text-s mt-1">{t('admin.oauthClientSecretHint')}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-th-text mb-1">{t('admin.oauthDisplayName')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={oauthForm.displayName}
|
||||
onChange={e => setOauthForm(f => ({ ...f, displayName: e.target.value }))}
|
||||
className="input-field text-sm"
|
||||
placeholder="Company SSO"
|
||||
maxLength={50}
|
||||
/>
|
||||
<p className="text-xs text-th-text-s mt-1">{t('admin.oauthDisplayNameHint')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={oauthForm.autoRegister}
|
||||
onChange={e => setOauthForm(f => ({ ...f, autoRegister: e.target.checked }))}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-9 h-5 bg-th-border rounded-full peer peer-checked:bg-th-accent transition-colors after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full" />
|
||||
</label>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-th-text">{t('admin.oauthAutoRegister')}</span>
|
||||
<p className="text-xs text-th-text-s">{t('admin.oauthAutoRegisterHint')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<button type="submit" disabled={savingOauth} className="btn-primary text-sm px-5">
|
||||
{savingOauth ? <Loader2 size={14} className="animate-spin" /> : null}
|
||||
{t('admin.oauthSave')}
|
||||
</button>
|
||||
{oauthConfig && (
|
||||
<button type="button" onClick={handleOauthRemove} className="btn-secondary text-sm px-5 text-red-400 hover:text-red-300">
|
||||
<Trash2 size={14} />
|
||||
{t('admin.oauthRemove')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="card p-4 mb-6">
|
||||
<div className="relative">
|
||||
|
||||
Reference in New Issue
Block a user