first commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+.vscode

Backend/db.js

@@ -0,0 +1,10 @@
+const { Pool } = require('pg');
+require('dotenv').config();
+
+const pool = new Pool({
+    connectionString: process.env.DATABASE_URL,
+});
+
+module.exports = {
+    query: (text, params) => pool.query(text, params),
+};

Backend/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "pg": "^8.16.3",
+    "redis": "^5.10.0",
+    "socket.io": "^4.8.3"
+  }
+}

Backend/redis.js

@@ -0,0 +1,15 @@
+const { createClient } = require('redis');
+require('dotenv').config();
+
+const client = createClient({
+    url: process.env.REDIS_URL
+});
+
+client.on('error', (err) => console.log('Redis Client Error', err));
+
+(async () => {
+    await client.connect();
+    console.log('Redis connected');
+})();
+
+module.exports = client;

Backend/routes/auth.js

@@ -0,0 +1,80 @@
+const express = require('express');
+const router = express.Router();
+const db = require('../db');
+const crypto = require('crypto');
+
+// Helper to generate fake salt for user privacy
+function generateFakeSalt(username) {
+    return crypto.createHmac('sha256', 'SERVER_SECRET_KEY') // In prod, use env var
+        .update(username)
+        .digest('hex');
+}
+
+router.post('/register', async (req, res) => {
+    const { username, salt, encryptedMK, hak, publicKey, signingKey, encryptedPrivateKeys } = req.body;
+    try {
+        const result = await db.query(
+            `INSERT INTO users (username, client_salt, encrypted_master_key, hashed_auth_key, public_identity_key, public_signing_key, encrypted_private_keys)
+             VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING id`,
+            [username, salt, encryptedMK, hak, publicKey, signingKey, encryptedPrivateKeys]
+        );
+        res.json({ success: true, userId: result.rows[0].id });
+    } catch (err) {
+        console.error(err);
+        if (err.code === '23505') { // Unique violation
+            res.status(400).json({ error: 'Username taken' });
+        } else {
+            res.status(500).json({ error: 'Server error' });
+        }
+    }
+});
+
+router.post('/login/salt', async (req, res) => {
+    const { username } = req.body;
+    try {
+        const result = await db.query('SELECT client_salt FROM users WHERE username = $1', [username]);
+        if (result.rows.length > 0) {
+            res.json({ salt: result.rows[0].client_salt });
+        } else {
+            // Return fake salt to prevent enumeration
+            res.json({ salt: generateFakeSalt(username) });
+        }
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Server error' });
+    }
+});
+
+router.post('/login/verify', async (req, res) => {
+    const { username, dak } = req.body;
+
+    try {
+        const result = await db.query(
+            'SELECT hashed_auth_key, encrypted_master_key, encrypted_private_keys FROM users WHERE username = $1',
+            [username]
+        );
+
+        if (result.rows.length === 0) {
+            return res.status(401).json({ error: 'Invalid credentials' });
+        }
+
+        const user = result.rows[0];
+        const hashedDAK = crypto.createHash('sha256').update(dak).digest('hex');
+
+        if (hashedDAK === user.hashed_auth_key) {
+            res.json({
+                success: true,
+                userId: user.id,
+                encryptedMK: user.encrypted_master_key,
+                encryptedPrivateKeys: user.encrypted_private_keys
+            });
+        } else {
+            res.status(401).json({ error: 'Invalid credentials' });
+        }
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Server error' });
+    }
+});
+
+module.exports = router;

Backend/routes/channels.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const router = express.Router();
+const db = require('../db');
+
+router.get('/', async (req, res) => {
+    try {
+        const result = await db.query('SELECT * FROM channels ORDER BY name ASC');
+        res.json(result.rows);
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Server error' });
+    }
+});
+
+module.exports = router;

Backend/schema.sql

@@ -0,0 +1,46 @@
+CREATE EXTENSION IF NOT EXISTS "pgcrypto";
+
+CREATE TABLE IF NOT EXISTS users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    username TEXT UNIQUE NOT NULL,
+    client_salt TEXT NOT NULL,
+    encrypted_master_key TEXT NOT NULL,
+    hashed_auth_key TEXT NOT NULL,
+    public_identity_key TEXT NOT NULL,
+    public_signing_key TEXT NOT NULL,
+    encrypted_private_keys TEXT NOT NULL, -- Added this column
+    is_admin BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE TABLE IF NOT EXISTS channels (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name TEXT UNIQUE NOT NULL,
+    type TEXT DEFAULT 'text',
+    created_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE TABLE IF NOT EXISTS roles (
+    id SERIAL PRIMARY KEY,
+    name TEXT NOT NULL,
+    permissions JSONB
+);
+
+CREATE TABLE IF NOT EXISTS channel_keys (
+    channel_id UUID NOT NULL,
+    user_id UUID NOT NULL,
+    encrypted_key_bundle TEXT NOT NULL,
+    key_version INTEGER DEFAULT 1,
+    PRIMARY KEY (channel_id, user_id)
+);
+
+CREATE TABLE IF NOT EXISTS messages (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    channel_id UUID NOT NULL,
+    sender_id UUID NOT NULL,
+    ciphertext TEXT NOT NULL,
+    nonce TEXT NOT NULL,
+    signature TEXT NOT NULL,
+    key_version INTEGER NOT NULL,
+    created_at TIMESTAMP DEFAULT NOW()
+);

Backend/scripts/init-db.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+const db = require('../db');
+
+async function initDb() {
+    try {
+        const schemaPath = path.join(__dirname, '../schema.sql');
+        const schemaSql = fs.readFileSync(schemaPath, 'utf8');
+
+        console.log('Applying schema...');
+        await db.query(schemaSql);
+
+        // Seed Channels
+        const channels = ['general', 'random'];
+        for (const name of channels) {
+            await db.query(
+                `INSERT INTO channels (name) VALUES ($1) ON CONFLICT (name) DO NOTHING`,
+                [name]
+            );
+        }
+        console.log('Channels seeded.');
+
+        console.log('Schema applied successfully.');
+        process.exit(0);
+    } catch (err) {
+        console.error('Error applying schema:', err);
+        process.exit(1);
+    }
+}
+
+initDb();

Backend/server.js

@@ -0,0 +1,97 @@
+const express = require('express');
+const http = require('http');
+const { Server } = require('socket.io');
+const cors = require('cors');
+require('dotenv').config();
+
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server, {
+    cors: {
+        origin: '*',
+        methods: ['GET', 'POST']
+    }
+});
+
+const authRoutes = require('./routes/auth');
+const channelRoutes = require('./routes/channels');
+
+app.use(cors());
+app.use(express.json());
+
+app.use('/api/auth', authRoutes);
+app.use('/api/channels', channelRoutes);
+
+app.get('/', (req, res) => {
+    res.send('Secure Chat Backend Running');
+});
+
+const redisClient = require('./redis');
+const db = require('./db');
+
+io.on('connection', (socket) => {
+    console.log('User connected:', socket.id);
+
+    socket.on('join_channel', async (channelId) => {
+        socket.join(channelId);
+        console.log(`User ${socket.id} joined channel ${channelId}`);
+        // Load recent messages
+        try {
+            const result = await db.query(
+                `SELECT m.*, u.username 
+                 FROM messages m 
+                 JOIN users u ON m.sender_id = u.id 
+                 WHERE m.channel_id = $1 
+                 ORDER BY m.created_at DESC LIMIT 50`,
+                [channelId]
+            );
+            socket.emit('recent_messages', result.rows.reverse());
+        } catch (err) {
+            console.error('Error fetching messages:', err);
+        }
+    });
+
+    socket.on('send_message', async (data) => {
+        // data: { channelId, senderId, ciphertext, nonce, signature, keyVersion }
+        const { channelId, senderId, ciphertext, nonce, signature, keyVersion } = data;
+
+        try {
+            // Store in DB
+            const result = await db.query(
+                `INSERT INTO messages (channel_id, sender_id, ciphertext, nonce, signature, key_version)
+                 VALUES ($1, $2, $3, $4, $5, $6) RETURNING id, created_at`,
+                [channelId, senderId, ciphertext, nonce, signature, keyVersion]
+            );
+
+            const message = {
+                id: result.rows[0].id,
+                created_at: result.rows[0].created_at,
+                ...data
+            };
+
+            // Get username for display
+            const userRes = await db.query('SELECT username FROM users WHERE id = $1', [senderId]);
+            if (userRes.rows.length > 0) {
+                message.username = userRes.rows[0].username;
+            }
+
+            // Broadcast to channel
+            io.to(channelId).emit('new_message', message);
+        } catch (err) {
+            console.error('Error saving message:', err);
+        }
+    });
+
+    socket.on('typing', (data) => {
+        socket.to(data.channelId).emit('user_typing', { username: data.username });
+    });
+
+    socket.on('disconnect', () => {
+        console.log('User disconnected:', socket.id);
+    });
+});
+
+const PORT = process.env.PORT || 3000;
+server.listen(PORT, () => {
+    console.log(`Server running on port ${PORT}`);
+});

Frontend/Electron/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Frontend/Electron/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

Frontend/Electron/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

Frontend/Electron/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>discord</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

Frontend/Electron/main.js

@@ -0,0 +1,101 @@
+import { app, BrowserWindow, ipcMain } from 'electron';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import crypto from 'node:crypto';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+function createWindow() {
+    const win = new BrowserWindow({
+        width: 1200,
+        height: 800,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.cjs'),
+            contextIsolation: true,
+            sandbox: true,
+            nodeIntegration: false,
+        },
+    });
+
+    if (process.env.NODE_ENV === 'development' || process.argv.includes('--dev')) {
+        win.loadURL('http://localhost:5173');
+        win.webContents.openDevTools();
+    } else {
+        win.loadFile(path.join(__dirname, 'dist', 'index.html'));
+    }
+}
+
+app.whenReady().then(() => {
+    // Crypto IPC Handlers
+    ipcMain.handle('crypto:deriveAuthKeys', async (_, password, salt) => {
+        return new Promise((resolve, reject) => {
+            crypto.pbkdf2(password, salt, 100000, 32, 'sha512', (err, derived) => {
+                if (err) reject(err);
+                resolve({
+                    dek: derived.slice(0, 16).toString('hex'),
+                    dak: derived.slice(16, 32).toString('hex')
+                });
+            });
+        });
+    });
+
+    ipcMain.handle('crypto:encryptData', (_, plaintext, keyHex, ivHex) => {
+        const key = Buffer.from(keyHex, 'hex');
+        const iv = ivHex ? Buffer.from(ivHex, 'hex') : crypto.randomBytes(12);
+        const cipher = crypto.createCipheriv('aes-128-gcm', key, iv);
+        let encrypted = cipher.update(plaintext, 'utf8', 'hex');
+        encrypted += cipher.final('hex');
+        return {
+            content: encrypted,
+            tag: cipher.getAuthTag().toString('hex'),
+            iv: iv.toString('hex')
+        };
+    });
+
+    ipcMain.handle('crypto:decryptData', (_, ciphertext, keyHex, ivHex, tagHex) => {
+        const key = Buffer.from(keyHex, 'hex');
+        const iv = Buffer.from(ivHex, 'hex');
+        const tag = Buffer.from(tagHex, 'hex');
+        const decipher = crypto.createDecipheriv('aes-128-gcm', key, iv);
+        decipher.setAuthTag(tag);
+        let decrypted = decipher.update(ciphertext, 'hex', 'utf8');
+        decrypted += decipher.final('utf8');
+        return decrypted;
+    });
+
+    ipcMain.handle('crypto:generateKeys', async () => {
+        const { publicKey: rsaPub, privateKey: rsaPriv } = crypto.generateKeyPairSync('rsa', {
+            modulusLength: 2048,
+            publicKeyEncoding: { type: 'spki', format: 'pem' },
+            privateKeyEncoding: { type: 'pkcs8', format: 'pem' }
+        });
+        const { publicKey: edPub, privateKey: edPriv } = crypto.generateKeyPairSync('ed25519', {
+            publicKeyEncoding: { type: 'spki', format: 'pem' },
+            privateKeyEncoding: { type: 'pkcs8', format: 'pem' }
+        });
+        return { rsaPub, rsaPriv, edPub, edPriv };
+    });
+
+    ipcMain.handle('crypto:randomBytes', (_, size) => {
+        return crypto.randomBytes(size).toString('hex');
+    });
+
+    ipcMain.handle('crypto:sha256', (_, data) => {
+        return crypto.createHash('sha256').update(data).digest('hex');
+    });
+
+    createWindow();
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});

Frontend/Electron/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "discord",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "main.js",
+  "homepage": "./",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "electron:dev": "concurrently \"vite\" \"wait-on tcp:5173 && electron . --dev\"",
+    "electron:build": "vite build && electron-builder"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.11.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
+    "socket.io-client": "^4.8.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "concurrently": "^9.1.2",
+    "electron": "^33.2.1",
+    "electron-builder": "^25.1.8",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.2.4",
+    "wait-on": "^8.0.1"
+  }
+}

Frontend/Electron/preload.cjs

@@ -0,0 +1,10 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('cryptoAPI', {
+    deriveAuthKeys: (password, salt) => ipcRenderer.invoke('crypto:deriveAuthKeys', password, salt),
+    encryptData: (plaintext, keyHex, ivHex) => ipcRenderer.invoke('crypto:encryptData', plaintext, keyHex, ivHex),
+    decryptData: (ciphertext, keyHex, ivHex, tagHex) => ipcRenderer.invoke('crypto:decryptData', ciphertext, keyHex, ivHex, tagHex),
+    generateKeys: () => ipcRenderer.invoke('crypto:generateKeys'),
+    randomBytes: (size) => ipcRenderer.invoke('crypto:randomBytes', size),
+    sha256: (data) => ipcRenderer.invoke('crypto:sha256', data)
+});

Frontend/Electron/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Frontend/Electron/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

Frontend/Electron/src/App.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Chat from './pages/Chat';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route path="/chat" element={<Chat />} />
+    </Routes>
+  );
+}
+
+export default App;

Frontend/Electron/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

Frontend/Electron/src/components/ChatArea.jsx

@@ -0,0 +1,160 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { io } from 'socket.io-client';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const ChatArea = ({ channelId, username }) => {
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState('');
+    const [socket, setSocket] = useState(null);
+    const messagesEndRef = useRef(null);
+
+    // Mock Key for demo (In real app, derive from Channel Key Bundle)
+    const DEMO_CHANNEL_KEY = '000102030405060708090a0b0c0d0e0f';
+
+    // Helper to decrypt message
+    const decryptMessage = async (msg) => {
+        try {
+            // Check if ciphertext has appended tag
+            // Tag is 16 bytes = 32 hex chars
+            const TAG_LENGTH = 32;
+            if (!msg.ciphertext || msg.ciphertext.length < TAG_LENGTH) {
+                // Try decrypting without tag if it was legacy (though we just started)
+                // Or maybe it's just raw text if not encrypted? No, we always encrypt.
+                console.warn('Message missing tag, trying raw decrypt or fail');
+                return '[Invalid Encrypted Message]';
+            }
+
+            const tag = msg.ciphertext.slice(-TAG_LENGTH);
+            const content = msg.ciphertext.slice(0, -TAG_LENGTH);
+
+            const decrypted = await window.cryptoAPI.decryptData(content, DEMO_CHANNEL_KEY, msg.nonce, tag);
+            return decrypted;
+        } catch (e) {
+            console.error('Decryption failed for msg:', msg.id, e);
+            return '[Decryption Error]';
+        }
+    };
+
+    useEffect(() => {
+        const newSocket = io('http://localhost:3000');
+        setSocket(newSocket);
+
+        newSocket.emit('join_channel', channelId);
+
+        newSocket.on('recent_messages', async (msgs) => {
+            const decryptedMessages = await Promise.all(msgs.map(async (msg) => {
+                const content = await decryptMessage(msg);
+                return { ...msg, content };
+            }));
+            setMessages(decryptedMessages);
+        });
+
+        newSocket.on('new_message', async (msg) => {
+            const content = await decryptMessage(msg);
+            setMessages(prev => [...prev, { ...msg, content }]);
+        });
+
+        return () => newSocket.close();
+    }, [channelId]);
+
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+
+    const handleSend = async (e) => {
+        e.preventDefault();
+        if (!input.trim()) return;
+
+        try {
+            // Encrypt message
+            const { content: encryptedContent, iv, tag } = await window.cryptoAPI.encryptData(input, DEMO_CHANNEL_KEY);
+
+            // Append tag to ciphertext for storage
+            const ciphertext = encryptedContent + tag;
+
+            // Sign message (placeholder)
+            const signature = 'placeholder_signature';
+
+            const messageData = {
+                channelId,
+                senderId: '8b105be1-981e-4200-bb07-68d0714870c2', // Placeholder default, gets overwritten below
+                ciphertext,
+                nonce: iv,
+                signature,
+                keyVersion: 1
+            };
+
+            const storedUserId = localStorage.getItem('userId');
+            if (storedUserId) messageData.senderId = storedUserId;
+
+            socket.emit('send_message', messageData);
+            setInput('');
+        } catch (err) {
+            console.error('Send error:', err);
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend(e);
+        }
+    };
+
+    return (
+        <div className="chat-area">
+            <div className="messages-list">
+                {messages.map((msg, idx) => (
+                    <div key={idx} className="message-item">
+                        <div className="message-header">
+                            <span className="username">{msg.username || 'Unknown'}</span>
+                            <span className="timestamp">{new Date(msg.created_at).toLocaleTimeString()}</span>
+                        </div>
+                        <div className="message-content">
+                            <ReactMarkdown
+                                pluginPlugins={[remarkGfm]}
+                                components={{
+                                    code({ node, inline, className, children, ...props }) {
+                                        const match = /language-(\w+)/.exec(className || '')
+                                        return !inline && match ? (
+                                            <SyntaxHighlighter
+                                                style={oneDark}
+                                                language={match[1]}
+                                                PreTag="div"
+                                                {...props}
+                                            >
+                                                {String(children).replace(/\n$/, '')}
+                                            </SyntaxHighlighter>
+                                        ) : (
+                                            <code className={className} {...props}>
+                                                {children}
+                                            </code>
+                                        )
+                                    }
+                                }}
+                            >
+                                {msg.content}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                ))}
+                <div ref={messagesEndRef} />
+            </div>
+            <form className="chat-input-form" onSubmit={handleSend}>
+                <textarea
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={`Message #${channelId}`}
+                    rows={1}
+                    style={{ resize: 'none' }} // Disable manual resize
+                />
+            </form>
+        </div>
+    );
+};
+
+export default ChatArea;

Frontend/Electron/src/components/Sidebar.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Sidebar = ({ channels, activeChannel, onSelectChannel }) => {
+    return (
+        <div className="sidebar">
+            <div className="server-list">
+                <div className="server-icon active">H</div>
+            </div>
+            <div className="channel-list">
+                <div className="channel-header">Secure Chat</div>
+                {channels.map(channel => (
+                    <div
+                        key={channel.id}
+                        className={`channel-item ${activeChannel === channel.id ? 'active' : ''}`}
+                        onClick={() => onSelectChannel(channel.id)}
+                    >
+                        # {channel.name}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;

Frontend/Electron/src/index.css

@@ -0,0 +1,285 @@
+:root {
+  --bg-primary: #36393f;
+  --bg-secondary: #2f3136;
+  --bg-tertiary: #202225;
+  --text-normal: #dcddde;
+  --text-muted: #72767d;
+  --header-primary: #ffffff;
+  --header-secondary: #b9bbbe;
+  --interactive-normal: #b9bbbe;
+  --interactive-hover: #dcddde;
+  --interactive-active: #ffffff;
+  --brand-experiment: #5865f2;
+  --brand-experiment-hover: #4752c4;
+  --input-background: #202225;
+  --danger: #ed4245;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-normal);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+.auth-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-image: url('https://discord.com/assets/f9e794909795f472.svg');
+  /* Placeholder background */
+  background-size: cover;
+  background-position: center;
+}
+
+.auth-box {
+  background-color: var(--bg-secondary);
+  padding: 32px;
+  border-radius: 5px;
+  width: 480px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.auth-header h2 {
+  color: var(--header-primary);
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.auth-header p {
+  color: var(--header-secondary);
+  font-size: 16px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  color: var(--header-secondary);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 10px;
+  background-color: var(--input-background);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  color: var(--text-normal);
+  font-size: 16px;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  border-color: var(--brand-experiment);
+  outline: none;
+}
+
+.auth-button {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--brand-experiment);
+  color: white;
+  border: none;
+  border-radius: 3px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.auth-button:hover {
+  background-color: var(--brand-experiment-hover);
+}
+
+.auth-footer {
+  margin-top: 16px;
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+.auth-footer a {
+  color: var(--brand-experiment);
+  text-decoration: none;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 300px;
+  background-color: var(--bg-secondary);
+  display: flex;
+  flex-direction: row;
+}
+
+.server-list {
+  width: 72px;
+  background-color: var(--bg-tertiary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 12px;
+}
+
+.server-icon {
+  width: 48px;
+  height: 48px;
+  background-color: var(--bg-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-normal);
+  cursor: pointer;
+  transition: border-radius 0.2s, background-color 0.2s;
+}
+
+.server-icon:hover,
+.server-icon.active {
+  border-radius: 30%;
+  background-color: var(--brand-experiment);
+  color: white;
+}
+
+.channel-list {
+  flex: 1;
+  background-color: var(--bg-secondary);
+  padding: 10px;
+}
+
+.channel-header {
+  padding: 0 8px;
+  margin-bottom: 16px;
+  font-weight: 700;
+  color: var(--header-primary);
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.channel-item {
+  padding: 8px;
+  margin-bottom: 2px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.channel-item:hover {
+  background-color: var(--bg-tertiary);
+  color: var(--interactive-hover);
+}
+
+.channel-item.active {
+  background-color: rgba(79, 84, 92, 0.32);
+  color: var(--interactive-active);
+}
+
+/* Chat Area */
+.app-container {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+}
+
+.chat-area {
+  flex: 1;
+  background-color: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.messages-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.message-item {
+  margin-bottom: 20px;
+}
+
+.message-header {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 4px;
+}
+
+.username {
+  color: var(--header-primary);
+  font-weight: 500;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.username:hover {
+  text-decoration: underline;
+}
+
+.timestamp {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.message-content {
+  color: var(--text-normal);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.chat-input-form {
+  padding: 0 16px 24px;
+}
+
+.chat-input-form textarea {
+  width: 100%;
+  padding: 11px 16px;
+  background-color: #40444b;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-normal);
+  font-size: 16px;
+  font-family: inherit;
+  height: auto;
+  min-height: 44px;
+}
+
+.chat-input-form textarea:focus {
+  outline: none;
+}
+
+/* Markdown Styles */
+.message-content p {
+  margin: 0;
+}
+
+.message-content code {
+  background-color: #2f3136;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: monospace;
+}
+
+.message-content pre {
+  margin: 6px 0;
+}
+
+.message-content blockquote {
+  border-left: 4px solid var(--interactive-normal);
+  margin: 0;
+  padding-left: 10px;
+}

Frontend/Electron/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </React.StrictMode>,
+);

Frontend/Electron/src/pages/Chat.jsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import Sidebar from '../components/Sidebar';
+import ChatArea from '../components/ChatArea';
+
+const Chat = () => {
+    const [activeChannel, setActiveChannel] = useState(null);
+    const [channels, setChannels] = useState([]);
+
+    useEffect(() => {
+        fetch('http://localhost:3000/api/channels')
+            .then(res => res.json())
+            .then(data => {
+                setChannels(data);
+                if (data.length > 0 && !activeChannel) {
+                    setActiveChannel(data[0].id);
+                }
+            })
+            .catch(err => console.error('Error fetching channels:', err));
+    }, []);
+
+    if (!activeChannel) return <div style={{ color: 'white', padding: 20 }}>Loading...</div>;
+
+    return (
+        <div className="app-container">
+            <Sidebar
+                channels={channels}
+                activeChannel={activeChannel}
+                onSelectChannel={setActiveChannel}
+            />
+            <ChatArea channelId={activeChannel} />
+        </div>
+    );
+};
+
+export default Chat;

Frontend/Electron/src/pages/Login.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+const Login = () => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            console.log('Starting login for:', username);
+
+            // 1. Get Salt
+            const saltRes = await fetch('http://localhost:3000/api/auth/login/salt', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username })
+            });
+            const { salt } = await saltRes.json();
+            console.log('Got salt');
+
+            // 2. Derive Keys (DEK, DAK)
+            const { dek, dak } = await window.cryptoAPI.deriveAuthKeys(password, salt);
+            console.log('Derived keys');
+
+            // 3. Verify with Server
+            const verifyRes = await fetch('http://localhost:3000/api/auth/login/verify', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, dak })
+            });
+
+            const verifyData = await verifyRes.json();
+
+            if (!verifyRes.ok) {
+                throw new Error(verifyData.error || 'Login failed');
+            }
+
+            console.log('Login verified');
+            if (verifyData.userId) {
+                localStorage.setItem('userId', verifyData.userId);
+            }
+            localStorage.setItem('username', username);
+            navigate('/chat');
+        } catch (err) {
+            console.error('Login error:', err);
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="auth-container">
+            <div className="auth-box">
+                <div className="auth-header">
+                    <h2>Welcome Back!</h2>
+                    <p>We're so excited to see you again!</p>
+                </div>
+                {error && <div style={{ color: 'red', marginBottom: 10, textAlign: 'center' }}>{error}</div>}
+                <form onSubmit={handleLogin}>
+                    <div className="form-group">
+                        <label>Username</label>
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            required
+                            disabled={loading}
+                        />
+                    </div>
+                    <div className="form-group">
+                        <label>Password</label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                            disabled={loading}
+                        />
+                    </div>
+                    <button type="submit" className="auth-button" disabled={loading}>
+                        {loading ? 'Logging in...' : 'Log In'}
+                    </button>
+                </form>
+                <div className="auth-footer">
+                    Need an account? <Link to="/register">Register</Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

Frontend/Electron/src/pages/Register.jsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+const Register = () => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            console.log('Starting registration for:', username);
+
+            // 1. Generate Salt and Master Key (MK)
+            const salt = await window.cryptoAPI.randomBytes(16);
+            const mk = await window.cryptoAPI.randomBytes(16); // 128-bit MK
+
+            console.log('Generated Salt and MK');
+
+            // 2. Derive Keys (DEK, DAK)
+            const { dek, dak } = await window.cryptoAPI.deriveAuthKeys(password, salt);
+            console.log('Derived keys');
+
+            // 3. Encrypt MK with DEK
+            const encryptedMKObj = await window.cryptoAPI.encryptData(mk, dek);
+            const encryptedMK = JSON.stringify(encryptedMKObj); // Store as JSON string {content, tag, iv}
+
+            // 4. Hash DAK for Auth Proof
+            const hak = await window.cryptoAPI.sha256(dak);
+
+            // 5. Generate Key Pairs
+            const keys = await window.cryptoAPI.generateKeys();
+
+            // 6. Encrypt Private Keys with MK
+            // We need to encrypt the private keys so the server can store them safely
+            // MK is used to encrypt these.
+            const encryptedRsaPriv = await window.cryptoAPI.encryptData(keys.rsaPriv, mk);
+            const encryptedEdPriv = await window.cryptoAPI.encryptData(keys.edPriv, mk);
+
+            const encryptedPrivateKeys = JSON.stringify({
+                rsa: encryptedRsaPriv,
+                ed: encryptedEdPriv
+            });
+
+            // 7. Send to Backend
+            const payload = {
+                username,
+                salt,
+                encryptedMK,
+                hak,
+                publicKey: keys.rsaPub,
+                signingKey: keys.edPub,
+                encryptedPrivateKeys // Note: Schema might need this column or we pack it into another
+            };
+
+            // NOTE: The schema in overview.md had 'Encrypted Private Keys' in the text but not explicitly in the SQL CREATE TABLE snippet provided in the prompt's overview.md (it was in the text description).
+            // The SQL snippet had: encrypted_master_key, hashed_auth_key, public_identity_key, public_signing_key.
+            // It did NOT have a column for encrypted_private_keys in the SQL block in overview.md.
+            // I should check schema.sql I created.
+
+            const response = await fetch('http://localhost:3000/api/auth/register', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Registration failed');
+            }
+
+            console.log('Registration successful:', data);
+            navigate('/');
+        } catch (err) {
+            console.error('Registration error:', err);
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="auth-container">
+            <div className="auth-box">
+                <div className="auth-header">
+                    <h2>Create an Account</h2>
+                    <p>Join the secure chat!</p>
+                </div>
+                {error && <div style={{ color: 'red', marginBottom: 10, textAlign: 'center' }}>{error}</div>}
+                <form onSubmit={handleRegister}>
+                    <div className="form-group">
+                        <label>Username</label>
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            required
+                            disabled={loading}
+                        />
+                    </div>
+                    <div className="form-group">
+                        <label>Password</label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                            disabled={loading}
+                        />
+                    </div>
+                    <button type="submit" className="auth-button" disabled={loading}>
+                        {loading ? 'Generating Keys...' : 'Continue'}
+                    </button>
+                </form>
+                <div className="auth-footer">
+                    Already have an account? <Link to="/">Log In</Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Register;

Frontend/Electron/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  base: './',
+})

overview.md

@@ -0,0 +1,165 @@
+# Secure Chat: Project Specification & Zero-Knowledge Architecture
+
+This document outlines the full architecture for a self-hosted, single-server, Discord-style replacement using the Zero-Knowledge model (MEGA.nz inspired).
+
+---
+
+## 1. CORE TECH STACK
+* **Backend:** Node.js (Express or Fastify) + Socket.io (Real-time).
+* **Desktop:** Electron (React/Vue frontend) + Node `crypto` module.
+* **Database:** PostgreSQL (Persistent data/Key bundles) + Redis (Real-time presence/Typing).
+* **Storage:** Local Filesystem or MinIO (Encrypted file blobs).
+* **Media:** WebRTC (P2P for Voice/Video) with mandatory DTLS/SRTP.
+
+---
+
+## 2. ACCOUNT LIFECYCLE (ZERO-KNOWLEDGE)
+
+### A. Account Creation
+1. **User Input:** Username + Password.
+2. **Entropy:** Client (Electron) generates a random 128-bit **Master Key (MK)** and a random **Salt**.
+3. **Derivation:** Client runs `PBKDF2-HMAC-SHA-512` (100k+ iterations) on Password + Salt.
+   - Result = 256-bit Key.
+   - **DEK (Derived Encryption Key):** Bits 0-127.
+   - **DAK (Derived Authentication Key):** Bits 128-255.
+4. **Locking the MK:** Client encrypts MK using DEK via `AES-GCM`.
+5. **Auth Proof:** Client hashes the DAK: `HAK = SHA-256(DAK)`.
+6. **Key Generation:** Client generates RSA-2048 (Sharing) and Ed25519 (Signing) pairs. Private keys are encrypted with the unlocked MK.
+7. **Server Storage:** Server receives and stores: `Username`, `Salt`, `Encrypted MK`, `HAK`, `Encrypted Private Keys`, and `Raw Public Keys`.
+
+### B. Login Handshake
+1. **Salt Request:** Client asks for `Salt` for `Username`.
+   - *Security Fix:* Server returns a fake deterministic salt if the user doesn't exist to prevent enumeration.
+2. **Local Compute:** Client computes `DAK` from password and received salt.
+3. **Authentication:** Client sends `DAK` to server.
+4. **Verification:** Server checks if `SHA-256(DAK) == HAK`.
+5. **Retrieval:** Server sends `Encrypted MK` and `Encrypted Private Keys`.
+6. **Decryption:** Client uses `DEK` to unlock the `MK`, then uses `MK` to unlock Private Keys.
+
+
+
+### C. Password Recovery
+- During setup, the user exports the raw **Master Key** (Recovery Key).
+- To reset: User provides the Recovery Key + New Password. The client generates a new DEK from the new password and re-encrypts the Master Key for the server.
+
+### D. Session Persistence (Local Security)
+- To avoid re-entering passwords on every app launch, the **Master Key** is encrypted with a unique **Local Machine Key** and stored in the OS Keychain (using `electron-keytar`).
+- This keeps the MK safe on the physical disk even if the machine is stolen, as it requires OS-level user authentication to retrieve.
+
+---
+
+## 3. SECURITY & REAL-TIME FIXES
+
+### A. Identity Protection
+- **Problem:** Attackers shouldn't know which usernames exist.
+- **Solution:** `FakeSalt = HMAC(ServerSecret, Username)`. Always return a salt, even for non-existent users.
+
+### B. Forward Secrecy (Key Rotation)
+- **Problem:** Kicked users shouldn't read future messages.
+- **Solution:** When a user leaves, the Admin client generates a new **Channel Key**. It encrypts this new key for all remaining members using their Public Keys.
+
+### C. Trust Verification (MITM Protection)
+- Users can verify each other via **Safety Numbers** (Fingerprints). These are short strings derived from their Public Keys. If the numbers match on both users' screens, the connection is confirmed as un-intercepted by the server.
+
+### D. Electron Hardening
+- `contextIsolation: true` and `sandbox: true`.
+- Use a `preload.js` script to expose only necessary crypto functions via `contextBridge`.
+
+---
+
+## 4. END-TO-END ENCRYPTION (E2EE) LOGIC
+
+### Message Integrity (Digital Signatures)
+- Every message is signed by the sender's **Ed25519 Private Key**. 
+- The recipient verifies the signature using the sender's **Public Key** stored on the server. This prevents the server from tampering with or replaying encrypted messages.
+
+
+
+---
+
+## 5. DATABASE SCHEMA (POSTGRESQL)
+
+```sql
+-- Core User Table
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    username TEXT UNIQUE NOT NULL,
+    client_salt TEXT NOT NULL,
+    encrypted_master_key TEXT NOT NULL, -- MK encrypted by DEK
+    hashed_auth_key TEXT NOT NULL,      -- SHA256(DAK)
+    public_identity_key TEXT NOT NULL,  -- RSA Public Key for Encryption
+    public_signing_key TEXT NOT NULL,   -- Ed25519 Public Key for Signatures
+    is_admin BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP DEFAULT NOW()
+);
+
+-- Permission Roles
+CREATE TABLE roles (
+    id SERIAL PRIMARY KEY,
+    name TEXT NOT NULL, -- 'admin', 'moderator', 'member'
+    permissions JSONB   -- e.g. {"can_view_history": true}
+);
+
+-- Channel Key Bundles (The bridge to E2EE)
+CREATE TABLE channel_keys (
+    channel_id UUID NOT NULL,
+    user_id UUID NOT NULL,
+    encrypted_key_bundle TEXT NOT NULL, -- Channel Key encrypted for this specific user
+    key_version INTEGER DEFAULT 1,      -- For rotation tracking
+    PRIMARY KEY (channel_id, user_id)
+);
+
+-- Message Storage
+CREATE TABLE messages (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    channel_id UUID NOT NULL,
+    sender_id UUID NOT NULL,
+    ciphertext TEXT NOT NULL,           -- Encrypted content
+    nonce TEXT NOT NULL,                -- AES Initialization Vector
+    signature TEXT NOT NULL,            -- Ed25519 Signature
+    key_version INTEGER NOT NULL,       -- Link to specific key bundle
+    created_at TIMESTAMP DEFAULT NOW()
+);
+ 
+## 5. ELECTRON PRELOAD (SECURE BRIDGE)
+
+```javascript
+// preload.js
+const { contextBridge, ipcRenderer } = require('electron');
+const crypto = require('node:crypto');
+
+contextBridge.exposeInMainWorld('cryptoAPI', {
+    // Perform heavy PBKDF2 asynchronously to keep the UI responsive
+    deriveAuthKeys: (password, salt) => {
+        return new Promise((resolve, reject) => {
+            const iterations = 100000;
+            crypto.pbkdf2(password, salt, iterations, 32, 'sha512', (err, derived) => {
+                if (err) reject(err);
+                resolve({
+                    dek: derived.slice(0, 16).toString('hex'),
+                    dak: derived.slice(16, 32).toString('hex')
+                });
+            });
+        });
+    },
+    encryptData: (plaintext, keyHex, iv) => {
+        const key = Buffer.from(keyHex, 'hex');
+        const cipher = crypto.createCipheriv('aes-128-gcm', key, iv);
+        let encrypted = cipher.update(plaintext, 'utf8', 'hex');
+        encrypted += cipher.final('hex');
+        return { content: encrypted, tag: cipher.getAuthTag().toString('hex') };
+    },
+    signMessage: (privateKey, message) => {
+        return crypto.sign(null, Buffer.from(message), privateKey).toString('hex');
+    }
+});
+```
+## 6. REAL-TIME FEATURES
+
+- **Presence:** `user:status:{id}` stored in Redis with 60s TTL. Client sends heartbeat every 30s.
+
+- **Typing:** Socket.io event typing_start -> Room broadcast. Frontend clears name after 5s silence.
+
+- **DMs:** Use Signal Protocol's Double Ratchet. Server stores encrypted pre-key bundles.
+
+- **Files:** Encrypted with a unique File Key (AES-256). The File Key is sent inside the E2EE text message to the channel/user.