feat: add JWT auth with db-backed users
Some checks failed
Build & Release / build (push) Has been cancelled

- users table created on startup via migrate()
- POST /api/auth/setup to create first user (blocked once any user exists)
- POST /api/auth/login returns httpOnly JWT cookie (7d expiry)
- POST /api/auth/logout clears cookie
- GET /api/auth/me for auth check
- All /api/customers routes require valid JWT
- Frontend shows login form when unauthenticated
- Fix type errors in k8s, do, and pgbouncer services
This commit is contained in:
Ryan Moon
2026-04-03 07:41:36 -05:00
parent 8dbfb5810f
commit 4bd1918e3b
11 changed files with 267 additions and 20 deletions

View File

@@ -19,20 +19,82 @@
.status { margin-top: 1rem; font-size: 0.85rem; padding: 0.6rem 0.8rem; border-radius: 6px; display: none; }
.status.success { background: #14532d; color: #86efac; display: block; }
.status.error { background: #450a0a; color: #fca5a5; display: block; }
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.logout-btn { background: none; border: 1px solid #333; color: #aaa; font-size: 0.8rem; padding: 0.4rem 0.8rem; }
.logout-btn:hover { background: #1a1a1a; color: #fff; }
#login-view, #app-view { display: none; }
</style>
</head>
<body>
<h1>LunarFront Manager</h1>
<div class="card">
<h2>Provision Customer</h2>
<label for="name">Customer Slug</label>
<input id="name" type="text" placeholder="acme-shop" pattern="[a-z0-9-]+" />
<button id="provision-btn" onclick="provision()">Provision</button>
<div id="provision-status" class="status"></div>
<div id="login-view">
<h1>LunarFront Manager</h1>
<div class="card">
<h2>Sign In</h2>
<label for="login-username">Username</label>
<input id="login-username" type="text" autocomplete="username" />
<label for="login-password">Password</label>
<input id="login-password" type="password" autocomplete="current-password" onkeydown="if(event.key==='Enter')login()" />
<button onclick="login()">Sign In</button>
<div id="login-status" class="status"></div>
</div>
</div>
<div id="app-view">
<div class="header">
<h1>LunarFront Manager</h1>
<button class="logout-btn" onclick="logout()">Sign Out</button>
</div>
<div class="card">
<h2>Provision Customer</h2>
<label for="name">Customer Slug</label>
<input id="name" type="text" placeholder="acme-shop" pattern="[a-z0-9-]+" />
<button id="provision-btn" onclick="provision()">Provision</button>
<div id="provision-status" class="status"></div>
</div>
</div>
<script>
async function checkAuth() {
const res = await fetch('/api/auth/me');
if (res.ok) {
document.getElementById('app-view').style.display = 'block';
} else {
document.getElementById('login-view').style.display = 'block';
}
}
async function login() {
const username = document.getElementById('login-username').value.trim();
const password = document.getElementById('login-password').value;
const status = document.getElementById('login-status');
status.className = 'status';
try {
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
const data = await res.json();
if (!res.ok) throw new Error(data.message ?? 'Login failed');
document.getElementById('login-view').style.display = 'none';
document.getElementById('app-view').style.display = 'block';
} catch (err) {
status.textContent = err.message;
status.className = 'status error';
}
}
async function logout() {
await fetch('/api/auth/logout', { method: 'POST' });
document.getElementById('app-view').style.display = 'none';
document.getElementById('login-view').style.display = 'block';
document.getElementById('login-password').value = '';
}
async function provision() {
const name = document.getElementById('name').value.trim();
const btn = document.getElementById('provision-btn');
@@ -63,6 +125,8 @@
btn.textContent = 'Provision';
}
}
checkAuth();
</script>
</body>
</html>