niko/claude-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add OIDC authentication with Authentik integration

Browse Source 
- Add OIDC login flow with Authentik provider
- Implement session-based auth with Redis store
- Add avatar display from OIDC claims
- Fix input field performance with react-textarea-autosize
- Stabilize callbacks to prevent unnecessary re-renders
- Fix history loading to skip empty session files
- Add 2-row default height for input textarea

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Support
2025-12-18 06:07:22 +01:00
parent cfee1711dc
commit 1186cb1b5e
23 changed files with 2884 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/Sidebar.jsx
View File

@@ -1,8 +1,8 @@
import { useState, useEffect, useCallback } from 'react';
import { Play, Square, Trash2, FolderOpen, ChevronRight, ChevronDown, Settings, Server, Plus, X, Folder, ArrowUp, Loader2 } from 'lucide-react';
import { Play, Square, Trash2, FolderOpen, ChevronRight, ChevronDown, Settings, Server, Plus, X, Folder, ArrowUp, Loader2, LogOut, User, Shield } from 'lucide-react';
import { useSessionManager } from '../contexts/SessionContext';
import { useAuth } from '../contexts/AuthContext';
const API_URL = import.meta.env.VITE_API_URL || 'http://100.105.142.13:3001';
const RECENT_DIRS_KEY = 'claude-webui-recent-dirs';
const MAX_RECENT_DIRS = 10;
@@ -46,6 +46,8 @@ export function Sidebar({ open, onToggle }) {
updateSessionConfig,
} = useSessionManager();
const { user, authEnabled, logout, isAdmin } = useAuth();
const [hosts, setHosts] = useState([]);
const [recentDirs, setRecentDirs] = useState([]);
const [showBrowser, setShowBrowser] = useState(false);
@@ -63,7 +65,7 @@ export function Sidebar({ open, onToggle }) {
// Fetch hosts on mount
useEffect(() => {
fetch(`${API_URL}/api/hosts`)
fetch('/api/hosts', { credentials: 'include' })
.then(res => res.json())
.then(data => {
setHosts(data.hosts || []);
@@ -107,7 +109,9 @@ export function Sidebar({ open, onToggle }) {
setBrowserError(null);
try {
const res = await fetch(`${API_URL}/api/browse?host=${currentHost}&path=${encodeURIComponent(path)}`);
const res = await fetch(`/api/browse?host=${currentHost}&path=${encodeURIComponent(path)}`, {
credentials: 'include',
});
const data = await res.json();
if (data.error) {
@@ -385,10 +389,52 @@ export function Sidebar({ open, onToggle }) {
</div>
</div>
{/* Footer */}
<div className="p-4 border-t border-dark-800 text-xs text-dark-500">
<div>Claude Code Web UI</div>
<div>Multi-Session Mode</div>
{/* User & Footer */}
<div className="border-t border-dark-800">
{/* User info */}
{authEnabled && user && (
<div className="p-4 border-b border-dark-800">
<div className="flex items-center gap-3">
{user.avatar ? (
<img
src={user.avatar}
alt={user.name || user.email}
className="w-8 h-8 rounded-full flex-shrink-0 object-cover"
onError={(e) => {
e.target.style.display = 'none';
e.target.nextSibling.style.display = 'flex';
}}
/>
) : null}
<div
className="w-8 h-8 rounded-full bg-dark-700 flex items-center justify-center flex-shrink-0"
style={{ display: user.avatar ? 'none' : 'flex' }}
>
<User className="w-4 h-4 text-dark-400" />
</div>
<div className="flex-1 min-w-0">
<div className="text-sm text-dark-200 truncate">{user.name || user.email}</div>
<div className="flex items-center gap-1 text-xs text-dark-500">
{isAdmin && <Shield className="w-3 h-3 text-orange-400" />}
<span className="truncate">{user.email}</span>
</div>
</div>
<button
onClick={logout}
className="p-2 hover:bg-dark-700 rounded-lg text-dark-400 hover:text-red-400 transition-colors"
title="Sign out"
>
<LogOut className="w-4 h-4" />
</button>
</div>
</div>
)}
{/* Footer */}
<div className="p-4 text-xs text-dark-500">
<div>Claude Code Web UI</div>
<div>Multi-Session Mode</div>
</div>
</div>
{/* Directory Browser Modal */}