Merge pull request #100 from SmoFlaDru/dev-benno

Add passkey creation and login, select activity chart time range, nav bar improvements, dark theme switching, fixes.

Spybot2/settings.py

@@ -9,7 +9,7 @@
 For the full list of settings and their values, see
 https://docs.djangoproject.com/en/4.1/ref/settings/
 """
-
+from datetime import timedelta
 from pathlib import Path
 import environ
 import os
@@ -45,7 +45,10 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = env.bool('DEBUG', False)
 
-ALLOWED_HOSTS = [SERVER_IP, TS_IP, 'localhost', '127.0.0.1']
+ALLOWED_HOSTS = [SERVER_IP, TS_IP, 'localhost', '127.0.0.1', 'spybot.localhost.direct']
+
+CSRF_TRUSTED_ORIGINS = [f"https://{SERVER_IP}"]
+
 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
 
 CSRF_COOKIE_SECURE = not env.bool('INSECURE_COOKIES', False)
@@ -94,6 +97,17 @@
     },
 ]
 
+MIDDLEWARE = [
+    "django.middleware.security.SecurityMiddleware",
+    "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.common.CommonMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
+    "django.contrib.auth.middleware.AuthenticationMiddleware",
+    "spybot.auth.last_seen_middleware.middleware",
+    "django.contrib.messages.middleware.MessageMiddleware",
+    "django.middleware.clickjacking.XFrameOptionsMiddleware",
+]
+
 WSGI_APPLICATION = 'Spybot2.wsgi.application'
 
 
@@ -137,9 +151,14 @@
 AUTH_USER_MODEL = 'spybot.MergedUser'
 
 AUTHENTICATION_BACKENDS = [
-    'spybot.auth.backend.LinkAuthBackend',
+    'django.contrib.auth.backends.ModelBackend',
+    'spybot.auth.backend.link_backend.LinkAuthBackend',
 ]
 
+# Passkeys
+FIDO_SERVER_NAME = "Spybot local"
+#KEY_ATTACHMENT = passkeys.Attachment.CROSS_PLATFORM
+
 
 # Internationalization
 # https://docs.djangoproject.com/en/4.1/topics/i18n/

frontend/main.js

@@ -1,8 +1,12 @@
 import * as ApexCharts from 'apexcharts/dist/apexcharts.min.js'
 import * as tabler from '@tabler/core/dist/js/tabler.min.js'
 import * as htmx from 'htmx.org/dist/htmx.min.js'
+import * as passkeys from './passkeys';
 
 import "@tabler/core/dist/css/tabler.min.css"
 import "@tabler/core/dist/css/tabler-vendors.min.css"
 
-export { ApexCharts, tabler, htmx }
+
+window.passkeys = passkeys;
+
+export { ApexCharts, tabler, htmx, passkeys }

frontend/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@simplewebauthn/browser": "^10.0.0",
     "@tabler/core": "^1.0.0-beta20",
     "apexcharts": "^3.36.3",
     "htmx.org": "^1.9.2"

frontend/passkeys.js

@@ -0,0 +1,79 @@
+import {startAuthentication, startRegistration} from '@simplewebauthn/browser'
+
+const sendToServerForVerificationAndLogin = async (response) => {
+    try {
+        console.log("sendToServerForVerificationAndLogin:", response);
+        const verificationResp = await fetch('/passkeys/verify-authentication', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(response),
+        });
+        const verificationJSON = await verificationResp.json();
+
+        // Show UI appropriate for the `verified` status
+        if (verificationJSON && verificationJSON.verified) {
+            console.log("success")
+            window.location.href = '/profile';
+        } else {
+            console.log("error", verificationJSON);
+        }
+    } catch (e) {
+        handleError(e);
+    }
+}
+
+const handleError = (error) => {
+    console.log("An error occurred:", error);
+}
+
+export const autocomplete = async () => {
+    try {
+        console.log("Setting up autocomplete");
+        const options = await fetch('/passkeys/generate-authentication-options')
+        const optionsPayload = (await options.json())["publicKey"]
+        // delete options["allowedCredentials"]
+        const response = await startAuthentication(optionsPayload, true)
+        await sendToServerForVerificationAndLogin(response)
+    } catch (e) {
+        handleError(e);
+    }
+};
+
+export const create = async () => {
+    const resp = await fetch('/passkeys/generate-registration-options');
+
+    let attResp;
+    try {
+        // Pass the options to the authenticator and wait for a response
+        attResp = await startRegistration((await resp.json()).publicKey);
+    } catch (error) {
+        // Some basic error handling
+        if (error.name === 'InvalidStateError') {
+            throw Error('Error: Authenticator was probably already registered by user');
+        } else {
+            throw Error(error);
+        }
+    }
+
+    // POST the response to the endpoint that calls
+    // @simplewebauthn/server -> verifyRegistrationResponse()
+    const verificationResp = await fetch('/passkeys/verify-registration', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(attResp),
+    });
+
+    // Wait for the results of verification
+    const verificationJSON = await verificationResp.json();
+
+    // Show UI appropriate for the `verified` status
+    if (verificationJSON && verificationJSON.verified) {
+        return 'Success!';
+    } else {
+        throw Error(`Oh no, something went wrong! Response: <pre>${JSON.stringify(verificationJSON)}</pre>`);
+    }
+}

frontend/rollup.config.mjs

@@ -6,7 +6,8 @@ export default {
   input: 'main.js',
   output: {
     dir: 'output',
-    format: 'iife'
+    format: 'iife',
+    name: 'jsbundle',
   },
   plugins: [nodeResolve(), css({'output': 'main.css'})]
 };