Move JWT from localStorage to HttpOnly cookie; fix CSRF

- JWT stored in HttpOnly, Secure, SameSite=Strict cookie — JS cannot read the token at all; SameSite=Strict prevents CSRF without tokens - Non-sensitive user payload returned in response body and stored in localStorage for UI purposes only (not usable for auth) - Add POST /api/auth/logout endpoint that clears the cookie server-side - Add SECURE_COOKIES env var (default true) for local HTTP testing - Extract login.html inline script to login.js (CSP compliance) - Remove Authorization: Bearer header from API calls; add credentials: include so cookies are sent automatically - CSP script-src includes unsafe-inline to support existing onclick handlers throughout the app Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-19 23:57:22 -07:00
parent 6d09e40f58
commit 59f9685e2b
10 changed files with 229 additions and 165 deletions
--- a/nginx/html/js/login.js
+++ b/nginx/html/js/login.js
@@ -0,0 +1,110 @@
+// login.js — login / register page logic
+
+// Redirect if already logged in
+(function () {
+    const raw = localStorage.getItem('user');
+    if (raw) {
+        try {
+            const user = JSON.parse(raw);
+            if (user.exp > Date.now() / 1000) {
+                window.location.href = '/';
+                return;
+            }
+        } catch (_) {}
+        localStorage.removeItem('user');
+    }
+})();
+
+function showLogin() {
+    document.getElementById('register-panel').style.display = 'none';
+    document.getElementById('login-panel').style.display = 'block';
+    document.getElementById('username').focus();
+}
+
+function showRegister() {
+    document.getElementById('login-panel').style.display = 'none';
+    document.getElementById('register-panel').style.display = 'block';
+    document.getElementById('reg-username').focus();
+}
+
+function showError(elId, text) {
+    const el = document.getElementById(elId);
+    el.textContent = text;
+    el.className = 'message error visible';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('show-register-link').addEventListener('click', (e) => {
+        e.preventDefault();
+        showRegister();
+    });
+
+    document.getElementById('show-login-link').addEventListener('click', (e) => {
+        e.preventDefault();
+        showLogin();
+    });
+
+    // ── Login ──
+    document.getElementById('login-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const btn = document.getElementById('login-btn');
+        btn.disabled = true;
+        btn.textContent = 'Signing in…';
+        document.getElementById('login-msg').className = 'message';
+
+        const username = document.getElementById('username').value.trim();
+        const password = document.getElementById('password').value;
+
+        try {
+            const res = await fetch('/api/auth/login', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password }),
+            });
+            const data = await res.json();
+            if (res.status === 429) { showError('login-msg', 'Too many attempts — please wait a minute and try again.'); return; }
+            if (!res.ok) { showError('login-msg', data.detail || 'Login failed'); return; }
+            localStorage.setItem('user', JSON.stringify(data.user));
+            window.location.href = '/';
+        } catch (err) {
+            showError('login-msg', 'Could not reach the server. Please try again.');
+        } finally {
+            btn.disabled = false;
+            btn.textContent = 'Sign In';
+        }
+    });
+
+    // ── Register ──
+    document.getElementById('reg-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const btn = document.getElementById('reg-btn');
+        const username = document.getElementById('reg-username').value.trim();
+        const password = document.getElementById('reg-password').value;
+        const confirm  = document.getElementById('reg-confirm').value;
+
+        if (password !== confirm) { showError('reg-msg', 'Passwords do not match'); return; }
+
+        btn.disabled = true;
+        btn.textContent = 'Creating account…';
+        document.getElementById('reg-msg').className = 'message';
+
+        try {
+            const res = await fetch('/api/auth/register', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password }),
+            });
+            const data = await res.json();
+            if (!res.ok) { showError('reg-msg', data.detail || 'Registration failed'); return; }
+            localStorage.setItem('user', JSON.stringify(data.user));
+            window.location.href = '/';
+        } catch (err) {
+            showError('reg-msg', 'Could not reach the server. Please try again.');
+        } finally {
+            btn.disabled = false;
+            btn.textContent = 'Create Account';
+        }
+    });
+});