jramos/cve-dashboard
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

added required code changes, components, and packages for login feature

Browse Source
This commit is contained in:
jramos
2026-01-28 14:36:33 -07:00
parent 1d2a6b2e72
commit da14c92d98
13 changed files with 1370 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -37,3 +37,6 @@ frontend.pid
# Temporary files
backend/uploads/temp/
claude.md
claude_status.md
feature_request*.md

70
backend/middleware/auth.js Normal file
View File

@@ -0,0 +1,70 @@
// Authentication Middleware
// Require authenticated user
function requireAuth(db) {
return async (req, res, next) => {
const sessionId = req.cookies?.session_id;
if (!sessionId) {
return res.status(401).json({ error: 'Authentication required' });
}
try {
const session = await new Promise((resolve, reject) => {
db.get(
`SELECT s.*, u.id as user_id, u.username, u.email, u.role, u.is_active
FROM sessions s
JOIN users u ON s.user_id = u.id
WHERE s.session_id = ? AND s.expires_at > datetime('now')`,
[sessionId],
(err, row) => {
if (err) reject(err);
else resolve(row);
}
);
});
if (!session) {
return res.status(401).json({ error: 'Session expired or invalid' });
}
if (!session.is_active) {
return res.status(401).json({ error: 'Account is disabled' });
}
// Attach user to request
req.user = {
id: session.user_id,
username: session.username,
email: session.email,
role: session.role
};
next();
} catch (err) {
console.error('Auth middleware error:', err);
return res.status(500).json({ error: 'Authentication error' });
}
};
}
// Require specific role(s)
function requireRole(...allowedRoles) {
return (req, res, next) => {
if (!req.user) {
return res.status(401).json({ error: 'Authentication required' });
}
if (!allowedRoles.includes(req.user.role)) {
return res.status(403).json({
error: 'Insufficient permissions',
required: allowedRoles,
current: req.user.role
});
}
next();
};
}
module.exports = { requireAuth, requireRole };

184
backend/routes/auth.js Normal file
View File

@@ -0,0 +1,184 @@
// Authentication Routes
const express = require('express');
const bcrypt = require('bcryptjs');
const crypto = require('crypto');
function createAuthRouter(db) {
const router = express.Router();
// Login
router.post('/login', async (req, res) => {
const { username, password } = req.body;
if (!username || !password) {
return res.status(400).json({ error: 'Username and password are required' });
}
try {
// Find user
const user = await new Promise((resolve, reject) => {
db.get(
'SELECT * FROM users WHERE username = ?',
[username],
(err, row) => {
if (err) reject(err);
else resolve(row);
}
);
});
if (!user) {
return res.status(401).json({ error: 'Invalid username or password' });
}
if (!user.is_active) {
return res.status(401).json({ error: 'Account is disabled' });
}
// Verify password
const validPassword = await bcrypt.compare(password, user.password_hash);
if (!validPassword) {
return res.status(401).json({ error: 'Invalid username or password' });
}
// Generate session ID
const sessionId = crypto.randomBytes(32).toString('hex');
const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24 hours
// Create session
await new Promise((resolve, reject) => {
db.run(
'INSERT INTO sessions (session_id, user_id, expires_at) VALUES (?, ?, ?)',
[sessionId, user.id, expiresAt.toISOString()],
(err) => {
if (err) reject(err);
else resolve();
}
);
});
// Update last login
await new Promise((resolve, reject) => {
db.run(
'UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = ?',
[user.id],
(err) => {
if (err) reject(err);
else resolve();
}
);
});
// Set cookie
res.cookie('session_id', sessionId, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
maxAge: 24 * 60 * 60 * 1000 // 24 hours
});
res.json({
message: 'Login successful',
user: {
id: user.id,
username: user.username,
email: user.email,
role: user.role
}
});
} catch (err) {
console.error('Login error:', err);
res.status(500).json({ error: 'Login failed' });
}
});
// Logout
router.post('/logout', async (req, res) => {
const sessionId = req.cookies?.session_id;
if (sessionId) {
// Delete session from database
await new Promise((resolve) => {
db.run(
'DELETE FROM sessions WHERE session_id = ?',
[sessionId],
() => resolve()
);
});
}
// Clear cookie
res.clearCookie('session_id');
res.json({ message: 'Logged out successfully' });
});
// Get current user
router.get('/me', async (req, res) => {
const sessionId = req.cookies?.session_id;
if (!sessionId) {
return res.status(401).json({ error: 'Not authenticated' });
}
try {
const session = await new Promise((resolve, reject) => {
db.get(
`SELECT s.*, u.id as user_id, u.username, u.email, u.role, u.is_active
FROM sessions s
JOIN users u ON s.user_id = u.id
WHERE s.session_id = ? AND s.expires_at > datetime('now')`,
[sessionId],
(err, row) => {
if (err) reject(err);
else resolve(row);
}
);
});
if (!session) {
res.clearCookie('session_id');
return res.status(401).json({ error: 'Session expired' });
}
if (!session.is_active) {
res.clearCookie('session_id');
return res.status(401).json({ error: 'Account is disabled' });
}
res.json({
user: {
id: session.user_id,
username: session.username,
email: session.email,
role: session.role
}
});
} catch (err) {
console.error('Get user error:', err);
res.status(500).json({ error: 'Failed to get user' });
}
});
// Clean up expired sessions (can be called periodically)
router.post('/cleanup-sessions', async (req, res) => {
try {
await new Promise((resolve, reject) => {
db.run(
"DELETE FROM sessions WHERE expires_at < datetime('now')",
(err) => {
if (err) reject(err);
else resolve();
}
);
});
res.json({ message: 'Expired sessions cleaned up' });
} catch (err) {
console.error('Session cleanup error:', err);
res.status(500).json({ error: 'Cleanup failed' });
}
});
return router;
}
module.exports = createAuthRouter;

217
backend/routes/users.js Normal file
View File

@@ -0,0 +1,217 @@
// User Management Routes (Admin only)
const express = require('express');
const bcrypt = require('bcryptjs');
function createUsersRouter(db, requireAuth, requireRole) {
const router = express.Router();
// All routes require admin role
router.use(requireAuth(db), requireRole('admin'));
// Get all users
router.get('/', async (req, res) => {
try {
const users = await new Promise((resolve, reject) => {
db.all(
`SELECT id, username, email, role, is_active, created_at, last_login
FROM users ORDER BY created_at DESC`,
(err, rows) => {
if (err) reject(err);
else resolve(rows);
}
);
});
res.json(users);
} catch (err) {
console.error('Get users error:', err);
res.status(500).json({ error: 'Failed to fetch users' });
}
});
// Get single user
router.get('/:id', async (req, res) => {
try {
const user = await new Promise((resolve, reject) => {
db.get(
`SELECT id, username, email, role, is_active, created_at, last_login
FROM users WHERE id = ?`,
[req.params.id],
(err, row) => {
if (err) reject(err);
else resolve(row);
}
);
});
if (!user) {
return res.status(404).json({ error: 'User not found' });
}
res.json(user);
} catch (err) {
console.error('Get user error:', err);
res.status(500).json({ error: 'Failed to fetch user' });
}
});
// Create new user
router.post('/', async (req, res) => {
const { username, email, password, role } = req.body;
if (!username || !email || !password) {
return res.status(400).json({ error: 'Username, email, and password are required' });
}
if (role && !['admin', 'editor', 'viewer'].includes(role)) {
return res.status(400).json({ error: 'Invalid role. Must be admin, editor, or viewer' });
}
try {
const passwordHash = await bcrypt.hash(password, 10);
const result = await new Promise((resolve, reject) => {
db.run(
`INSERT INTO users (username, email, password_hash, role)
VALUES (?, ?, ?, ?)`,
[username, email, passwordHash, role || 'viewer'],
function(err) {
if (err) reject(err);
else resolve({ id: this.lastID });
}
);
});
res.status(201).json({
message: 'User created successfully',
user: {
id: result.id,
username,
email,
role: role || 'viewer'
}
});
} catch (err) {
console.error('Create user error:', err);
if (err.message.includes('UNIQUE constraint failed')) {
return res.status(409).json({ error: 'Username or email already exists' });
}
res.status(500).json({ error: 'Failed to create user' });
}
});
// Update user
router.patch('/:id', async (req, res) => {
const { username, email, password, role, is_active } = req.body;
const userId = req.params.id;
// Prevent self-demotion from admin
if (userId == req.user.id && role && role !== 'admin') {
return res.status(400).json({ error: 'Cannot remove your own admin role' });
}
// Prevent self-deactivation
if (userId == req.user.id && is_active === false) {
return res.status(400).json({ error: 'Cannot deactivate your own account' });
}
try {
const updates = [];
const values = [];
if (username) {
updates.push('username = ?');
values.push(username);
}
if (email) {
updates.push('email = ?');
values.push(email);
}
if (password) {
const passwordHash = await bcrypt.hash(password, 10);
updates.push('password_hash = ?');
values.push(passwordHash);
}
if (role) {
if (!['admin', 'editor', 'viewer'].includes(role)) {
return res.status(400).json({ error: 'Invalid role' });
}
updates.push('role = ?');
values.push(role);
}
if (typeof is_active === 'boolean') {
updates.push('is_active = ?');
values.push(is_active ? 1 : 0);
}
if (updates.length === 0) {
return res.status(400).json({ error: 'No fields to update' });
}
values.push(userId);
await new Promise((resolve, reject) => {
db.run(
`UPDATE users SET ${updates.join(', ')} WHERE id = ?`,
values,
function(err) {
if (err) reject(err);
else resolve({ changes: this.changes });
}
);
});
// If user was deactivated, delete their sessions
if (is_active === false) {
await new Promise((resolve) => {
db.run('DELETE FROM sessions WHERE user_id = ?', [userId], () => resolve());
});
}
res.json({ message: 'User updated successfully' });
} catch (err) {
console.error('Update user error:', err);
if (err.message.includes('UNIQUE constraint failed')) {
return res.status(409).json({ error: 'Username or email already exists' });
}
res.status(500).json({ error: 'Failed to update user' });
}
});
// Delete user
router.delete('/:id', async (req, res) => {
const userId = req.params.id;
// Prevent self-deletion
if (userId == req.user.id) {
return res.status(400).json({ error: 'Cannot delete your own account' });
}
try {
// Delete sessions first (foreign key)
await new Promise((resolve) => {
db.run('DELETE FROM sessions WHERE user_id = ?', [userId], () => resolve());
});
// Delete user
const result = await new Promise((resolve, reject) => {
db.run('DELETE FROM users WHERE id = ?', [userId], function(err) {
if (err) reject(err);
else resolve({ changes: this.changes });
});
});
if (result.changes === 0) {
return res.status(404).json({ error: 'User not found' });
}
res.json({ message: 'User deleted successfully' });
} catch (err) {
console.error('Delete user error:', err);
res.status(500).json({ error: 'Failed to delete user' });
}
});
return router;
}
module.exports = createUsersRouter;

56
backend/server.js
View File

@@ -1,5 +1,5 @@
// CVE Management Backend API
// Install: npm install express sqlite3 multer cors dotenv
// Install: npm install express sqlite3 multer cors dotenv bcryptjs cookie-parser
require('dotenv').config();
@@ -7,12 +7,19 @@ const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const multer = require('multer');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const path = require('path');
const fs = require('fs');
// Auth imports
const { requireAuth, requireRole } = require('./middleware/auth');
const createAuthRouter = require('./routes/auth');
const createUsersRouter = require('./routes/users');
const app = express();
const PORT = process.env.PORT || 3001;
const API_HOST = process.env.API_HOST || 'localhost';
const SESSION_SECRET = process.env.SESSION_SECRET || 'default-secret-change-me';
const CORS_ORIGINS = process.env.CORS_ORIGINS
? process.env.CORS_ORIGINS.split(',')
: ['http://localhost:3000'];
@@ -29,6 +36,7 @@ app.use(cors({
credentials: true
}));
app.use(express.json());
app.use(cookieParser());
app.use('/uploads', express.static('uploads'));
// Database connection
@@ -37,6 +45,12 @@ const db = new sqlite3.Database('./cve_database.db', (err) => {
else console.log('Connected to CVE database');
});
// Auth routes (public)
app.use('/api/auth', createAuthRouter(db));
// User management routes (admin only)
app.use('/api/users', createUsersRouter(db, requireAuth, requireRole));
// Simple storage - upload to temp directory first
const storage = multer.diskStorage({
destination: (req, file, cb) => {
@@ -59,8 +73,8 @@ const upload = multer({
// ========== CVE ENDPOINTS ==========
// Get all CVEs with optional filters
app.get('/api/cves', (req, res) => {
// Get all CVEs with optional filters (authenticated users)
app.get('/api/cves', requireAuth(db), (req, res) => {
const { search, vendor, severity, status } = req.query;
let query = `
@@ -106,8 +120,8 @@ app.get('/api/cves', (req, res) => {
});
});
// Check if CVE exists and get its status - UPDATED FOR MULTI-VENDOR
app.get('/api/cves/check/:cveId', (req, res) => {
// Check if CVE exists and get its status - UPDATED FOR MULTI-VENDOR (authenticated users)
app.get('/api/cves/check/:cveId', requireAuth(db), (req, res) => {
const { cveId } = req.params;
const query = `
@@ -153,8 +167,8 @@ app.get('/api/cves/check/:cveId', (req, res) => {
});
});
// NEW ENDPOINT: Get all vendors for a specific CVE
app.get('/api/cves/:cveId/vendors', (req, res) => {
// NEW ENDPOINT: Get all vendors for a specific CVE (authenticated users)
app.get('/api/cves/:cveId/vendors', requireAuth(db), (req, res) => {
const { cveId } = req.params;
const query = `
@@ -173,8 +187,8 @@ app.get('/api/cves/:cveId/vendors', (req, res) => {
});
// Create new CVE entry - ALLOW MULTIPLE VENDORS
app.post('/api/cves', (req, res) => {
// Create new CVE entry - ALLOW MULTIPLE VENDORS (editor or admin)
app.post('/api/cves', requireAuth(db), requireRole('editor', 'admin'), (req, res) => {
console.log('=== ADD CVE REQUEST ===');
console.log('Body:', req.body);
console.log('=======================');
@@ -210,8 +224,8 @@ app.post('/api/cves', (req, res) => {
});
// Update CVE status
app.patch('/api/cves/:cveId/status', (req, res) => {
// Update CVE status (editor or admin)
app.patch('/api/cves/:cveId/status', requireAuth(db), requireRole('editor', 'admin'), (req, res) => {
const { cveId } = req.params;
const { status } = req.body;
@@ -228,8 +242,8 @@ app.patch('/api/cves/:cveId/status', (req, res) => {
// ========== DOCUMENT ENDPOINTS ==========
// Get documents for a CVE - FILTER BY VENDOR
app.get('/api/cves/:cveId/documents', (req, res) => {
// Get documents for a CVE - FILTER BY VENDOR (authenticated users)
app.get('/api/cves/:cveId/documents', requireAuth(db), (req, res) => {
const { cveId } = req.params;
const { vendor } = req.query; // NEW: Optional vendor filter
@@ -251,8 +265,8 @@ app.get('/api/cves/:cveId/documents', (req, res) => {
});
});
// Upload document - ADD ERROR HANDLING FOR MULTER
app.post('/api/cves/:cveId/documents', (req, res, next) => {
// Upload document - ADD ERROR HANDLING FOR MULTER (editor or admin)
app.post('/api/cves/:cveId/documents', requireAuth(db), requireRole('editor', 'admin'), (req, res, next) => {
upload.single('file')(req, res, (err) => {
if (err) {
console.error('MULTER ERROR:', err);
@@ -327,8 +341,8 @@ app.post('/api/cves/:cveId/documents', (req, res, next) => {
});
});
});
// Delete document
app.delete('/api/documents/:id', (req, res) => {
// Delete document (admin only)
app.delete('/api/documents/:id', requireAuth(db), requireRole('admin'), (req, res) => {
const { id } = req.params;
// First get the file path to delete the actual file
@@ -352,8 +366,8 @@ app.delete('/api/documents/:id', (req, res) => {
// ========== UTILITY ENDPOINTS ==========
// Get all vendors
app.get('/api/vendors', (req, res) => {
// Get all vendors (authenticated users)
app.get('/api/vendors', requireAuth(db), (req, res) => {
const query = `SELECT DISTINCT vendor FROM cves ORDER BY vendor`;
db.all(query, [], (err, rows) => {
@@ -364,8 +378,8 @@ app.get('/api/vendors', (req, res) => {
});
});
// Get statistics
app.get('/api/stats', (req, res) => {
// Get statistics (authenticated users)
app.get('/api/stats', requireAuth(db), (req, res) => {
const query = `
SELECT
COUNT(DISTINCT c.id) as total_cves,

74
backend/setup.js
View File

@@ -2,6 +2,7 @@
// This creates a fresh database with multi-vendor support built-in
const sqlite3 = require('sqlite3').verbose();
const bcrypt = require('bcryptjs');
const fs = require('fs');
const path = require('path');
@@ -59,6 +60,34 @@ function initializeDatabase() {
CREATE INDEX IF NOT EXISTS idx_doc_vendor ON documents(vendor);
CREATE INDEX IF NOT EXISTS idx_doc_type ON documents(type);
-- Users table for authentication
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
role VARCHAR(20) NOT NULL DEFAULT 'viewer',
is_active BOOLEAN DEFAULT 1,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
last_login TIMESTAMP,
CHECK (role IN ('admin', 'editor', 'viewer'))
);
-- Sessions table for session management
CREATE TABLE IF NOT EXISTS sessions (
id INTEGER PRIMARY KEY AUTOINCREMENT,
session_id VARCHAR(255) UNIQUE NOT NULL,
user_id INTEGER NOT NULL,
expires_at TIMESTAMP NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_sessions_session_id ON sessions(session_id);
CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
CREATE INDEX IF NOT EXISTS idx_sessions_expires ON sessions(expires_at);
CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
INSERT OR IGNORE INTO required_documents (vendor, document_type, is_mandatory, description) VALUES
('Microsoft', 'advisory', 1, 'Official Microsoft Security Advisory'),
('Microsoft', 'screenshot', 0, 'Proof of patch application'),
@@ -109,6 +138,42 @@ function createUploadsDirectory() {
}
}
// Create default admin user
async function createDefaultAdmin(db) {
return new Promise((resolve, reject) => {
// Check if admin already exists
db.get('SELECT id FROM users WHERE username = ?', ['admin'], async (err, row) => {
if (err) {
reject(err);
return;
}
if (row) {
console.log('✓ Default admin user already exists');
resolve();
return;
}
// Create admin user with password 'admin123'
const passwordHash = await bcrypt.hash('admin123', 10);
db.run(
`INSERT INTO users (username, email, password_hash, role, is_active)
VALUES (?, ?, ?, ?, ?)`,
['admin', 'admin@localhost', passwordHash, 'admin', 1],
(err) => {
if (err) {
reject(err);
} else {
console.log('✓ Created default admin user (admin/admin123)');
resolve();
}
}
);
});
});
}
// Add sample CVE data (optional - for testing)
async function addSampleData(db) {
console.log('\n📝 Adding sample CVE data for testing...');
@@ -179,12 +244,14 @@ function displaySummary() {
console.log('╚════════════════════════════════════════════════════════╝');
console.log('\n📊 What was created:');
console.log(' ✓ SQLite database (cve_database.db)');
console.log(' ✓ Tables: cves, documents, required_documents');
console.log(' ✓ Tables: cves, documents, required_documents, users, sessions');
console.log(' ✓ Multi-vendor support with UNIQUE(cve_id, vendor)');
console.log(' ✓ Vendor column in documents table');
console.log(' ✓ User authentication with session-based auth');
console.log(' ✓ Indexes for fast queries');
console.log(' ✓ Document compliance view');
console.log(' ✓ Uploads directory for file storage');
console.log(' ✓ Default admin user (admin/admin123)');
console.log('\n📁 File structure will be:');
console.log(' uploads/');
console.log(' └── CVE-XXXX-XXXX/');
@@ -219,7 +286,10 @@ async function main() {
// Initialize database
const db = await initializeDatabase();
// Create default admin user
await createDefaultAdmin(db);
// Add sample data
await addSampleData(db);

129
frontend/src/App.js
View File

@@ -1,5 +1,9 @@
import React, { useState, useEffect } from 'react';
import { Search, FileText, AlertCircle, Download, Upload, Eye, Filter, CheckCircle, XCircle, Loader, Trash2, Plus } from 'lucide-react';
import { useAuth } from './contexts/AuthContext';
import LoginForm from './components/LoginForm';
import UserMenu from './components/UserMenu';
import UserManagement from './components/UserManagement';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:3001';
@@ -7,6 +11,7 @@ const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:3001';
const severityLevels = ['All Severities', 'Critical', 'High', 'Medium', 'Low'];
export default function App() {
const { isAuthenticated, loading: authLoading, canWrite, isAdmin } = useAuth();
const [searchQuery, setSearchQuery] = useState('');
const [selectedVendor, setSelectedVendor] = useState('All Vendors');
const [selectedSeverity, setSelectedSeverity] = useState('All Severities');
@@ -21,6 +26,7 @@ export default function App() {
const [quickCheckCVE, setQuickCheckCVE] = useState('');
const [quickCheckResult, setQuickCheckResult] = useState(null);
const [showAddCVE, setShowAddCVE] = useState(false);
const [showUserManagement, setShowUserManagement] = useState(false);
const [newCVE, setNewCVE] = useState({
cve_id: '',
vendor: '',
@@ -30,19 +36,6 @@ export default function App() {
});
const [uploadingFile, setUploadingFile] = useState(false);
// Fetch CVEs from API
useEffect(() => {
fetchCVEs();
fetchVendors();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Refetch when filters change
useEffect(() => {
fetchCVEs();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchQuery, selectedVendor, selectedSeverity]);
const fetchCVEs = async () => {
setLoading(true);
setError(null);
@@ -52,7 +45,9 @@ export default function App() {
if (selectedVendor !== 'All Vendors') params.append('vendor', selectedVendor);
if (selectedSeverity !== 'All Severities') params.append('severity', selectedSeverity);
const response = await fetch(`${API_BASE}/cves?${params}`);
const response = await fetch(`${API_BASE}/cves?${params}`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch CVEs');
const data = await response.json();
setCves(data);
@@ -66,7 +61,9 @@ export default function App() {
const fetchVendors = async () => {
try {
const response = await fetch(`${API_BASE}/vendors`);
const response = await fetch(`${API_BASE}/vendors`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch vendors');
const data = await response.json();
setVendors(['All Vendors', ...data]);
@@ -78,9 +75,11 @@ export default function App() {
const fetchDocuments = async (cveId, vendor) => {
const key = `${cveId}-${vendor}`;
if (cveDocuments[key]) return;
try {
const response = await fetch(`${API_BASE}/cves/${cveId}/documents?vendor=${vendor}`);
const response = await fetch(`${API_BASE}/cves/${cveId}/documents?vendor=${vendor}`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch documents');
const data = await response.json();
setCveDocuments(prev => ({ ...prev, [key]: data }));
@@ -91,9 +90,11 @@ export default function App() {
const quickCheckCVEStatus = async () => {
if (!quickCheckCVE.trim()) return;
try {
const response = await fetch(`${API_BASE}/cves/check/${quickCheckCVE.trim()}`);
const response = await fetch(`${API_BASE}/cves/check/${quickCheckCVE.trim()}`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to check CVE');
const data = await response.json();
setQuickCheckResult(data);
@@ -104,7 +105,6 @@ export default function App() {
};
const handleViewDocuments = async (cveId, vendor) => {
const key = `${cveId}-${vendor}`;
if (selectedCVE === cveId && selectedVendorView === vendor) {
setSelectedCVE(null);
setSelectedVendorView(null);
@@ -143,6 +143,7 @@ export default function App() {
const response = await fetch(`${API_BASE}/cves`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(newCVE)
});
@@ -195,6 +196,7 @@ export default function App() {
try {
const response = await fetch(`${API_BASE}/cves/${cveId}/documents`, {
method: 'POST',
credentials: 'include',
body: formData
});
@@ -219,14 +221,15 @@ export default function App() {
if (!window.confirm('Are you sure you want to delete this document?')) {
return;
}
try {
const response = await fetch(`${API_BASE}/documents/${docId}`, {
method: 'DELETE'
method: 'DELETE',
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to delete document');
alert('Document deleted successfully!');
const key = `${cveId}-${vendor}`;
delete cveDocuments[key];
@@ -237,6 +240,40 @@ export default function App() {
}
};
// Fetch CVEs from API when authenticated
useEffect(() => {
if (isAuthenticated) {
fetchCVEs();
fetchVendors();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated]);
// Refetch when filters change
useEffect(() => {
if (isAuthenticated) {
fetchCVEs();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchQuery, selectedVendor, selectedSeverity]);
// Show loading while checking auth
if (authLoading) {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="text-center">
<Loader className="w-12 h-12 text-[#0476D9] mx-auto animate-spin" />
<p className="text-gray-600 mt-4">Loading...</p>
</div>
</div>
);
}
// Show login if not authenticated
if (!isAuthenticated) {
return <LoginForm />;
}
// Group CVEs by CVE ID
const groupedCVEs = cves.reduce((acc, cve) => {
if (!acc[cve.cve_id]) {
@@ -257,15 +294,25 @@ export default function App() {
<h1 className="text-3xl font-bold text-gray-900 mb-2">CVE Dashboard</h1>
<p className="text-gray-600">Query vulnerabilities, manage vendors, and attach documentation</p>
</div>
<button
onClick={() => setShowAddCVE(true)}
className="px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors flex items-center gap-2 shadow-md"
>
<Plus className="w-5 h-5" />
Add CVE/Vendor
</button>
<div className="flex items-center gap-4">
{canWrite() && (
<button
onClick={() => setShowAddCVE(true)}
className="px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors flex items-center gap-2 shadow-md"
>
<Plus className="w-5 h-5" />
Add CVE/Vendor
</button>
)}
<UserMenu onManageUsers={() => setShowUserManagement(true)} />
</div>
</div>
{/* User Management Modal */}
{showUserManagement && (
<UserManagement onClose={() => setShowUserManagement(false)} />
)}
{/* Add CVE Modal */}
{showAddCVE && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
@@ -634,6 +681,7 @@ export default function App() {
>
View
</a>
{isAdmin() && (
<button
onClick={() => handleDeleteDocument(doc.id, cve.cve_id, cve.vendor)}
className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded transition-colors border border-red-600 flex items-center gap-1"
@@ -641,6 +689,7 @@ export default function App() {
<Trash2 className="w-3 h-3" />
Delete
</button>
)}
</div>
</div>
))}
@@ -648,14 +697,16 @@ export default function App() {
) : (
<p className="text-sm text-gray-500 italic">No documents attached yet</p>
)}
<button
onClick={() => handleFileUpload(cve.cve_id, cve.vendor)}
disabled={uploadingFile}
className="mt-3 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2 disabled:opacity-50 border border-gray-300"
>
<Upload className="w-4 h-4" />
{uploadingFile ? 'Uploading...' : 'Upload Document'}
</button>
{canWrite() && (
<button
onClick={() => handleFileUpload(cve.cve_id, cve.vendor)}
disabled={uploadingFile}
className="mt-3 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2 disabled:opacity-50 border border-gray-300"
>
<Upload className="w-4 h-4" />
{uploadingFile ? 'Uploading...' : 'Upload Document'}
</button>
)}
</div>
)}
</div>

107
frontend/src/components/LoginForm.js Normal file
View File

@@ -0,0 +1,107 @@
import React, { useState } from 'react';
import { Loader, AlertCircle, Lock, User } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
export default function LoginForm() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const { login } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
setLoading(true);
const result = await login(username, password);
if (!result.success) {
setError(result.error);
}
setLoading(false);
};
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-8">
<div className="text-center mb-8">
<div className="w-16 h-16 bg-[#0476D9] rounded-full flex items-center justify-center mx-auto mb-4">
<Lock className="w-8 h-8 text-white" />
</div>
<h1 className="text-2xl font-bold text-gray-900">CVE Dashboard</h1>
<p className="text-gray-600 mt-2">Sign in to access the dashboard</p>
</div>
{error && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
<p className="text-sm text-red-700">{error}</p>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
Username
</label>
<div className="relative">
<User className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<input
id="username"
type="text"
required
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
placeholder="Enter your username"
disabled={loading}
/>
</div>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
Password
</label>
<div className="relative">
<Lock className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<input
id="password"
type="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
placeholder="Enter your password"
disabled={loading}
/>
</div>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-3 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors font-medium shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
{loading ? (
<>
<Loader className="w-5 h-5 animate-spin" />
Signing in...
</>
) : (
'Sign In'
)}
</button>
</form>
<div className="mt-6 pt-6 border-t border-gray-200">
<p className="text-sm text-gray-500 text-center">
Default admin credentials: admin / admin123
</p>
</div>
</div>
</div>
);
}

380
frontend/src/components/UserManagement.js Normal file
View File

@@ -0,0 +1,380 @@
import React, { useState, useEffect } from 'react';
import { X, Plus, Edit2, Trash2, Loader, AlertCircle, CheckCircle, User, Mail, Shield } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
export default function UserManagement({ onClose }) {
const { user: currentUser } = useAuth();
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [showAddUser, setShowAddUser] = useState(false);
const [editingUser, setEditingUser] = useState(null);
const [formData, setFormData] = useState({
username: '',
email: '',
password: '',
role: 'viewer'
});
const [formError, setFormError] = useState('');
const [formSuccess, setFormSuccess] = useState('');
useEffect(() => {
fetchUsers();
}, []);
const fetchUsers = async () => {
try {
const response = await fetch(`${API_BASE}/users`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch users');
const data = await response.json();
setUsers(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const handleSubmit = async (e) => {
e.preventDefault();
setFormError('');
setFormSuccess('');
try {
const url = editingUser
? `${API_BASE}/users/${editingUser.id}`
: `${API_BASE}/users`;
const method = editingUser ? 'PATCH' : 'POST';
const body = { ...formData };
if (editingUser && !body.password) {
delete body.password;
}
const response = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(body)
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Operation failed');
}
setFormSuccess(editingUser ? 'User updated successfully' : 'User created successfully');
fetchUsers();
setTimeout(() => {
setShowAddUser(false);
setEditingUser(null);
setFormData({ username: '', email: '', password: '', role: 'viewer' });
setFormSuccess('');
}, 1500);
} catch (err) {
setFormError(err.message);
}
};
const handleEdit = (user) => {
setEditingUser(user);
setFormData({
username: user.username,
email: user.email,
password: '',
role: user.role
});
setShowAddUser(true);
setFormError('');
setFormSuccess('');
};
const handleDelete = async (userId) => {
if (!window.confirm('Are you sure you want to delete this user?')) {
return;
}
try {
const response = await fetch(`${API_BASE}/users/${userId}`, {
method: 'DELETE',
credentials: 'include'
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Delete failed');
}
fetchUsers();
} catch (err) {
alert(err.message);
}
};
const handleToggleActive = async (user) => {
try {
const response = await fetch(`${API_BASE}/users/${user.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({ is_active: !user.is_active })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Update failed');
}
fetchUsers();
} catch (err) {
alert(err.message);
}
};
const getRoleBadgeColor = (role) => {
switch (role) {
case 'admin':
return 'bg-red-100 text-red-800';
case 'editor':
return 'bg-blue-100 text-blue-800';
default:
return 'bg-gray-100 text-gray-800';
}
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<div className="p-6 border-b border-gray-200 flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold text-gray-900">User Management</h2>
<p className="text-gray-600">Manage user accounts and permissions</p>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 p-2"
>
<X className="w-6 h-6" />
</button>
</div>
<div className="p-6 overflow-y-auto flex-1">
{!showAddUser && (
<button
onClick={() => {
setShowAddUser(true);
setEditingUser(null);
setFormData({ username: '', email: '', password: '', role: 'viewer' });
setFormError('');
setFormSuccess('');
}}
className="mb-6 px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors flex items-center gap-2 shadow-md"
>
<Plus className="w-5 h-5" />
Add User
</button>
)}
{showAddUser && (
<div className="mb-6 p-6 bg-gray-50 rounded-lg border border-gray-200">
<h3 className="text-lg font-semibold mb-4">
{editingUser ? 'Edit User' : 'Add New User'}
</h3>
{formError && (
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
<AlertCircle className="w-5 h-5 text-red-600" />
<span className="text-sm text-red-700">{formError}</span>
</div>
)}
{formSuccess && (
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
<CheckCircle className="w-5 h-5 text-green-600" />
<span className="text-sm text-green-700">{formSuccess}</span>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Username *
</label>
<div className="relative">
<User className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<input
type="text"
required
value={formData.username}
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Email *
</label>
<div className="relative">
<Mail className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<input
type="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Password {editingUser ? '(leave blank to keep current)' : '*'}
</label>
<input
type="password"
required={!editingUser}
value={formData.password}
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Role *
</label>
<div className="relative">
<Shield className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
<select
value={formData.role}
onChange={(e) => setFormData({ ...formData, role: e.target.value })}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
>
<option value="viewer">Viewer (read-only)</option>
<option value="editor">Editor (can add CVEs, upload docs)</option>
<option value="admin">Admin (full access)</option>
</select>
</div>
</div>
</div>
<div className="flex gap-3 pt-2">
<button
type="submit"
className="px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors"
>
{editingUser ? 'Update User' : 'Create User'}
</button>
<button
type="button"
onClick={() => {
setShowAddUser(false);
setEditingUser(null);
}}
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
>
Cancel
</button>
</div>
</form>
</div>
)}
{loading ? (
<div className="text-center py-12">
<Loader className="w-8 h-8 text-[#0476D9] mx-auto animate-spin" />
<p className="text-gray-600 mt-2">Loading users...</p>
</div>
) : error ? (
<div className="text-center py-12">
<AlertCircle className="w-8 h-8 text-red-500 mx-auto" />
<p className="text-red-600 mt-2">{error}</p>
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200">
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">User</th>
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Role</th>
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Status</th>
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700">Last Login</th>
<th className="text-right py-3 px-4 text-sm font-medium text-gray-700">Actions</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id} className="border-b border-gray-100 hover:bg-gray-50">
<td className="py-3 px-4">
<div>
<p className="font-medium text-gray-900">{user.username}</p>
<p className="text-sm text-gray-500">{user.email}</p>
</div>
</td>
<td className="py-3 px-4">
<span className={`px-2 py-1 rounded text-xs font-medium ${getRoleBadgeColor(user.role)}`}>
{user.role.charAt(0).toUpperCase() + user.role.slice(1)}
</span>
</td>
<td className="py-3 px-4">
<button
onClick={() => handleToggleActive(user)}
disabled={user.id === currentUser.id}
className={`px-2 py-1 rounded text-xs font-medium ${
user.is_active
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
} ${user.id === currentUser.id ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:opacity-80'}`}
>
{user.is_active ? 'Active' : 'Inactive'}
</button>
</td>
<td className="py-3 px-4 text-sm text-gray-500">
{user.last_login
? new Date(user.last_login).toLocaleString()
: 'Never'}
</td>
<td className="py-3 px-4">
<div className="flex justify-end gap-2">
<button
onClick={() => handleEdit(user)}
className="p-2 text-gray-600 hover:bg-gray-100 rounded"
title="Edit user"
>
<Edit2 className="w-4 h-4" />
</button>
<button
onClick={() => handleDelete(user.id)}
disabled={user.id === currentUser.id}
className={`p-2 text-red-600 hover:bg-red-50 rounded ${
user.id === currentUser.id ? 'opacity-50 cursor-not-allowed' : ''
}`}
title="Delete user"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>
);
}

94
frontend/src/components/UserMenu.js Normal file
View File

@@ -0,0 +1,94 @@
import React, { useState, useRef, useEffect } from 'react';
import { User, LogOut, ChevronDown, Shield } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
export default function UserMenu({ onManageUsers }) {
const { user, logout, isAdmin } = useAuth();
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef(null);
// Close menu when clicking outside
useEffect(() => {
function handleClickOutside(event) {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setIsOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const getRoleBadgeColor = (role) => {
switch (role) {
case 'admin':
return 'bg-red-100 text-red-800';
case 'editor':
return 'bg-blue-100 text-blue-800';
default:
return 'bg-gray-100 text-gray-800';
}
};
const handleLogout = async () => {
setIsOpen(false);
await logout();
};
const handleManageUsers = () => {
setIsOpen(false);
if (onManageUsers) {
onManageUsers();
}
};
if (!user) return null;
return (
<div className="relative" ref={menuRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
>
<div className="w-8 h-8 bg-[#0476D9] rounded-full flex items-center justify-center">
<User className="w-4 h-4 text-white" />
</div>
<div className="text-left hidden sm:block">
<p className="text-sm font-medium text-gray-900">{user.username}</p>
<p className="text-xs text-gray-500 capitalize">{user.role}</p>
</div>
<ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{isOpen && (
<div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
<div className="px-4 py-3 border-b border-gray-100">
<p className="text-sm font-medium text-gray-900">{user.username}</p>
<p className="text-sm text-gray-500">{user.email}</p>
<span className={`inline-block mt-2 px-2 py-1 rounded text-xs font-medium ${getRoleBadgeColor(user.role)}`}>
{user.role.charAt(0).toUpperCase() + user.role.slice(1)}
</span>
</div>
{isAdmin() && (
<button
onClick={handleManageUsers}
className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-3"
>
<Shield className="w-4 h-4" />
Manage Users
</button>
)}
<button
onClick={handleLogout}
className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-3"
>
<LogOut className="w-4 h-4" />
Sign Out
</button>
</div>
)}
</div>
);
}

112
frontend/src/contexts/AuthContext.js Normal file
View File

@@ -0,0 +1,112 @@
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const AuthContext = createContext(null);
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Check if user is authenticated on mount
const checkAuth = useCallback(async () => {
try {
const response = await fetch(`${API_BASE}/auth/me`, {
credentials: 'include'
});
if (response.ok) {
const data = await response.json();
setUser(data.user);
} else {
setUser(null);
}
} catch (err) {
console.error('Auth check error:', err);
setUser(null);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
checkAuth();
}, [checkAuth]);
// Login function
const login = async (username, password) => {
setError(null);
try {
const response = await fetch(`${API_BASE}/auth/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({ username, password })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Login failed');
}
setUser(data.user);
return { success: true };
} catch (err) {
setError(err.message);
return { success: false, error: err.message };
}
};
// Logout function
const logout = async () => {
try {
await fetch(`${API_BASE}/auth/logout`, {
method: 'POST',
credentials: 'include'
});
} catch (err) {
console.error('Logout error:', err);
}
setUser(null);
};
// Check if user has a specific role
const hasRole = (...roles) => {
return user && roles.includes(user.role);
};
// Check if user can perform write operations (editor or admin)
const canWrite = () => hasRole('editor', 'admin');
// Check if user is admin
const isAdmin = () => hasRole('admin');
const value = {
user,
loading,
error,
login,
logout,
checkAuth,
hasRole,
canWrite,
isAdmin,
isAuthenticated: !!user
};
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
}

5
frontend/src/index.js
View File

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { AuthProvider } from './contexts/AuthContext';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>
);

2
package.json
View File

@@ -10,6 +10,8 @@
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^3.0.3",
"cookie-parser": "^1.4.7",
"cors": "^2.8.6",
"dotenv": "^16.6.1",
"express": "^5.2.1",