Add auth pages and gate lobby behind JWT sessions

database/dump.sql

@@ -39,6 +39,7 @@ DROP TABLE IF EXISTS `status_effects`;
 DROP TABLE IF EXISTS `elements`;
 DROP TABLE IF EXISTS `floor_room_rules`;
 DROP TABLE IF EXISTS `difficulties`;
+DROP TABLE IF EXISTS `web_users`;
 
 CREATE TABLE IF NOT EXISTS difficulties (
             difficulty_id       INT AUTO_INCREMENT PRIMARY KEY,
@@ -56,6 +57,14 @@ CREATE TABLE IF NOT EXISTS difficulties (
             created_at          TIMESTAMP DEFAULT CURRENT_TIMESTAMP
         );
 
+CREATE TABLE IF NOT EXISTS web_users (
+            id            INT AUTO_INCREMENT PRIMARY KEY,
+            email         VARCHAR(255) NOT NULL UNIQUE,
+            display_name  VARCHAR(255) NOT NULL,
+            password_hash VARCHAR(255) NOT NULL,
+            created_at    TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        );
+
 CREATE TABLE IF NOT EXISTS floor_room_rules (
             rule_id           INT AUTO_INCREMENT PRIMARY KEY,
             difficulty_name   VARCHAR(50) NOT NULL,

webapp/.env.example

@@ -1,8 +1,9 @@
 PORT=8080
 NODE_ENV=development
 LOG_LEVEL=info
-MYSQL_HOST=127.0.0.1
+MYSQL_HOST=localhost
 MYSQL_PORT=3306
-MYSQL_USER=adventurebot
-MYSQL_PASSWORD=bot_password
-MYSQL_DATABASE=adventure
+MYSQL_USER=root
+MYSQL_PASSWORD=changeme
+MYSQL_DATABASE=adventurebot
+JWT_SECRET=change-me-to-a-long-random-string

webapp/package.json

@@ -16,15 +16,19 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@types/jsonwebtoken": "^9.0.10",
+    "cookie-parser": "^1.4.7",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
+    "jsonwebtoken": "^9.0.2",
     "mysql2": "^3.9.4",
     "pino": "^9.3.2",
     "pino-http": "^10.1.0",
     "pino-pretty": "^11.2.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/cookie-parser": "^1.4.10",
     "@types/express": "^4.17.21",
     "@types/node": "^20.14.11",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
@@ -38,4 +42,4 @@
     "ts-node-dev": "^2.0.0",
     "typescript": "5.5.4"
   }
-}
+}

webapp/public/auth.js

@@ -0,0 +1,55 @@
+const form = document.querySelector('#auth-form');
+const errorEl = document.querySelector('#auth-error');
+if (!form || !errorEl) {
+  throw new Error('Auth form missing from page');
+}
+const mode = form.dataset.mode || 'login';
+
+const handleExistingSession = async () => {
+  try {
+    const response = await fetch('/api/auth/me', { credentials: 'include' });
+    if (response.ok) {
+      window.location.href = '/lobby';
+    }
+  } catch (_error) {
+    // Ignore and allow normal flow
+  }
+};
+
+const submitAuth = async (event) => {
+  event.preventDefault();
+  errorEl.textContent = '';
+
+  const formData = new FormData(form);
+  const payload = {
+    email: formData.get('email'),
+    password: formData.get('password'),
+  };
+
+  if (mode === 'register') {
+    payload.displayName = formData.get('displayName');
+  }
+
+  try {
+    const response = await fetch(`/api/auth/${mode}`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    });
+
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error(data.message || 'Unable to complete request');
+    }
+
+    window.location.href = '/lobby';
+  } catch (error) {
+    errorEl.textContent = error.message;
+  }
+};
+
+form?.addEventListener('submit', submitAuth);
+handleExistingSession();