From c151198e9477d930e0758e2d8db81b41354373c1 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 14 Feb 2026 05:02:07 +1300
Subject: [PATCH] Derive login hash in background

---
 materialious/package-lock.json                |   7 +
 materialious/package.json                     |   1 +
 materialious/src/lib/api/backend.ts           |  26 ++-
 .../routes/(app)/internal/login/+page.svelte  | 157 ++++++++++--------
 .../internal/login/workers/derivePassword.ts  |  17 ++
 5 files changed, 126 insertions(+), 82 deletions(-)
 create mode 100644 materialious/src/routes/(app)/internal/login/workers/derivePassword.ts

diff --git a/materialious/package-lock.json b/materialious/package-lock.json
index 77daf739..075729ec 100644
--- a/materialious/package-lock.json
+++ b/materialious/package-lock.json
@@ -27,6 +27,7 @@
 				"buffer": "^6.0.3",
 				"capacitor-music-controls-plugin": "^6.1.0",
 				"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
+				"comlink": "^4.4.2",
 				"cookie-signature": "^1.2.2",
 				"dayjs": "^1.11.19",
 				"dexie": "^4.2.1",
@@ -6340,6 +6341,12 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/comlink": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/comlink/-/comlink-4.4.2.tgz",
+			"integrity": "sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/commander": {
 			"version": "8.3.0",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
diff --git a/materialious/package.json b/materialious/package.json
index c889a2f0..5450ac1d 100644
--- a/materialious/package.json
+++ b/materialious/package.json
@@ -72,6 +72,7 @@
 		"buffer": "^6.0.3",
 		"capacitor-music-controls-plugin": "^6.1.0",
 		"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
+		"comlink": "^4.4.2",
 		"cookie-signature": "^1.2.2",
 		"dayjs": "^1.11.19",
 		"dexie": "^4.2.1",
diff --git a/materialious/src/lib/api/backend.ts b/materialious/src/lib/api/backend.ts
index bee4e095..4b56b0b9 100644
--- a/materialious/src/lib/api/backend.ts
+++ b/materialious/src/lib/api/backend.ts
@@ -111,22 +111,19 @@ export async function postSubscribeBackend(authorId: string) {
 	if (resp.ok) parseChannelRSS(authorId);
 }
 
+export type DerivePassword = (rawPassword: string, passwordSalt: Uint8Array) => Promise<Uint8Array>;
+
 export async function createUserBackend(
 	username: string,
 	rawPassword: string,
-	captchaPayload: string
+	captchaPayload: string,
+	derivePassword: DerivePassword
 ): Promise<boolean> {
 	await sodium.ready;
 
 	const passwordSalt = sodium.randombytes_buf(sodium.crypto_pwhash_SALTBYTES);
-	const loginHash = sodium.crypto_pwhash(
-		32,
-		rawPassword,
-		passwordSalt,
-		sodium.crypto_pwhash_OPSLIMIT_SENSITIVE,
-		sodium.crypto_pwhash_MEMLIMIT_SENSITIVE,
-		sodium.crypto_pwhash_ALG_DEFAULT
-	);
+
+	const loginHash = await derivePassword(rawPassword, passwordSalt);
 
 	const decryptionKeySalt = sodium.randombytes_buf(sodium.crypto_pwhash_SALTBYTES);
 	const rawDecryptionKey = sodium.crypto_pwhash(
@@ -175,7 +172,8 @@ export async function createUserBackend(
 export async function loginUserBackend(
 	username: string,
 	rawPassword: string,
-	captchaPayload: string
+	captchaPayload: string,
+	derivePassword: DerivePassword
 ): Promise<boolean> {
 	await sodium.ready;
 
@@ -184,13 +182,9 @@ export async function loginUserBackend(
 
 	const passwordSalts = await passwordSaltsResp.json();
 
-	const loginHash = sodium.crypto_pwhash(
-		32,
+	const loginHash = await derivePassword(
 		rawPassword,
-		sodium.from_base64(passwordSalts.passwordSalt),
-		sodium.crypto_pwhash_OPSLIMIT_SENSITIVE,
-		sodium.crypto_pwhash_MEMLIMIT_SENSITIVE,
-		sodium.crypto_pwhash_ALG_DEFAULT
+		sodium.from_base64(passwordSalts.passwordSalt)
 	);
 
 	const loginResp = await fetch('/api/user/login', {
diff --git a/materialious/src/routes/(app)/internal/login/+page.svelte b/materialious/src/routes/(app)/internal/login/+page.svelte
index 5b9fb34e..f2c4a9dc 100644
--- a/materialious/src/routes/(app)/internal/login/+page.svelte
+++ b/materialious/src/routes/(app)/internal/login/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { createUserBackend, loginUserBackend } from '$lib/api/backend';
+	import { createUserBackend, loginUserBackend, type DerivePassword } from '$lib/api/backend';
+	import PageLoading from '$lib/components/PageLoading.svelte';
 	import { _ } from '$lib/i18n';
 	import 'altcha';
+	import * as comlink from 'comlink';
+	import { onMount } from 'svelte';
 
 	let needToRegister = $state(false);
 
@@ -11,88 +14,110 @@
 	let rawPassword = $state('');
 	let captchaPayload = $state('');
 
+	let worker: Worker | undefined;
+	let derivePassword: DerivePassword;
+
+	let isLoading = $state(false);
+
+	onMount(() => {
+		worker = new Worker(new URL('./workers/derivePassword.ts', import.meta.url), {
+			type: 'module'
+		});
+		const workerApi = comlink.wrap(worker);
+
+		derivePassword = (workerApi as any).derivePassword as DerivePassword;
+	});
+
 	let failed = $state(false);
 	async function onLogin(event: Event) {
 		event.preventDefault();
 
+		isLoading = true;
+
 		if (needToRegister) {
-			failed = !(await createUserBackend(username, rawPassword, captchaPayload));
+			failed = !(await createUserBackend(username, rawPassword, captchaPayload, derivePassword));
 		} else {
-			failed = !(await loginUserBackend(username, rawPassword, captchaPayload));
+			failed = !(await loginUserBackend(username, rawPassword, captchaPayload, derivePassword));
 		}
 
+		isLoading = false;
+
 		if (!failed) {
 			goto(resolve('/', {}), { replaceState: true });
 		}
 	}
 </script>
 
-<nav class="center-align">
-	<article class="padding left-align">
-		<h3>{$_(needToRegister ? 'createAccount' : 'login')}</h3>
-		<p class="no-margin">{$_(needToRegister ? 'materialiousCreate' : 'materialiousLogin')}</p>
+{#if isLoading}
+	<PageLoading />
+{:else}
+	<nav class="center-align">
+		<article class="padding left-align">
+			<h3>{$_(needToRegister ? 'createAccount' : 'login')}</h3>
+			<p class="no-margin">{$_(needToRegister ? 'materialiousCreate' : 'materialiousLogin')}</p>
 
-		<form onsubmit={onLogin}>
-			<div
-				class="field label prefix surface-container-highest"
-				class:invalid={failed && needToRegister}
-			>
-				<i>person</i>
-				<input bind:value={username} name="username" type="text" />
-				<label for="username">{$_('username')}</label>
-				{#if failed && needToRegister}
-					<output class="invalid">{$_('usernameTaken')}</output>
-				{/if}
-			</div>
-			<div
-				class="field label prefix surface-container-highest"
-				class:invalid={failed && !needToRegister}
-			>
-				<i>password</i>
-				<input bind:value={rawPassword} name="password" type="password" />
-				<label for="password">{$_('password')}</label>
-				{#if failed && !needToRegister}
-					<output class="invalid">{$_('invalidPassword')}</output>
-				{/if}
-			</div>
-
-			<article
-				class="surface-container-highest no-padding"
-				style="width: 100%;height: fit-content;"
-			>
-				<altcha-widget
-					challengeurl="/api/captcha"
-					hidelogo
-					hidefooter
-					onstatechange={(ev) => {
-						const { payload, state } = ev.detail;
-						if (state === 'verified' && payload) {
-							captchaPayload = payload;
-						}
-					}}
-				></altcha-widget>
-			</article>
-
-			<nav class="right-align">
-				<button
-					type="button"
-					class="secondary"
-					onclick={() => {
-						needToRegister = !needToRegister;
-						failed = false;
-					}}
+			<form onsubmit={onLogin}>
+				<div
+					class="field label prefix surface-container-highest"
+					class:invalid={failed && needToRegister}
 				>
-					<span>{$_(!needToRegister ? 'needRegister' : 'needLogin')}</span>
-				</button>
+					<i>person</i>
+					<input bind:value={username} name="username" type="text" />
+					<label for="username">{$_('username')}</label>
+					{#if failed && needToRegister}
+						<output class="invalid">{$_('usernameTaken')}</output>
+					{/if}
+				</div>
+				<div
+					class="field label prefix surface-container-highest"
+					class:invalid={failed && !needToRegister}
+				>
+					<i>password</i>
+					<input bind:value={rawPassword} name="password" type="password" />
+					<label for="password">{$_('password')}</label>
+					{#if failed && !needToRegister}
+						<output class="invalid">{$_('invalidPassword')}</output>
+					{/if}
+				</div>
 
-				<button type="submit">
-					<i>done</i>
-					<span>{$_(needToRegister ? 'createAccount' : 'login')}</span>
-				</button>
-			</nav>
-		</form>
-	</article>
-</nav>
+				<article
+					class="surface-container-highest no-padding"
+					style="width: 100%;height: fit-content;"
+				>
+					<altcha-widget
+						challengeurl="/api/captcha"
+						hidelogo
+						hidefooter
+						onstatechange={(ev) => {
+							const { payload, state } = ev.detail;
+							if (state === 'verified' && payload) {
+								captchaPayload = payload;
+							}
+						}}
+					></altcha-widget>
+				</article>
+
+				<nav class="right-align">
+					<button
+						type="button"
+						class="secondary"
+						onclick={() => {
+							needToRegister = !needToRegister;
+							failed = false;
+						}}
+					>
+						<span>{$_(!needToRegister ? 'needRegister' : 'needLogin')}</span>
+					</button>
+
+					<button type="submit">
+						<i>done</i>
+						<span>{$_(needToRegister ? 'createAccount' : 'login')}</span>
+					</button>
+				</nav>
+			</form>
+		</article>
+	</nav>
+{/if}
 
 <style>
 	article {
diff --git a/materialious/src/routes/(app)/internal/login/workers/derivePassword.ts b/materialious/src/routes/(app)/internal/login/workers/derivePassword.ts
new file mode 100644
index 00000000..9a592fc3
--- /dev/null
+++ b/materialious/src/routes/(app)/internal/login/workers/derivePassword.ts
@@ -0,0 +1,17 @@
+import * as comlink from 'comlink';
+import sodium from 'libsodium-wrappers-sumo';
+
+async function derivePassword(rawPassword: string, passwordSalt: Uint8Array): Promise<Uint8Array> {
+	await sodium.ready;
+
+	return sodium.crypto_pwhash(
+		32,
+		rawPassword,
+		passwordSalt,
+		sodium.crypto_pwhash_OPSLIMIT_SENSITIVE,
+		sodium.crypto_pwhash_MEMLIMIT_SENSITIVE,
+		sodium.crypto_pwhash_ALG_DEFAULT
+	);
+}
+
+comlink.expose({ derivePassword });