remove jssha and add bcrypt for password hashing with salt

package-lock.json

@@ -12,9 +12,9 @@
 				"@sveltejs/adapter-node": "^5.2.12",
 				"@tailwindcss/forms": "^0.5.10",
 				"autoprefixer": "^10.4.21",
+				"bcrypt": "^6.0.0",
 				"better-sqlite3": "^12.2.0",
 				"jsonwebtoken": "^9.0.2",
-				"jssha": "^3.3.1",
 				"minio": "^8.0.5",
 				"postcss": "^8.5.4",
 				"sqlite3": "^5.1.7",
@@ -2483,6 +2483,29 @@
 			],
 			"license": "MIT"
 		},
+		"node_modules/bcrypt": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
+			"integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"dependencies": {
+				"node-addon-api": "^8.3.0",
+				"node-gyp-build": "^4.8.4"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
+		"node_modules/bcrypt/node_modules/node-addon-api": {
+			"version": "8.5.0",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.5.0.tgz",
+			"integrity": "sha512-/bRZty2mXUIFY/xU5HLvveNHlswNJej+RnxBjOMkidWfwZzgTbPG1E3K5TOxRLOR+5hX7bSofy8yf1hZevMS8A==",
+			"license": "MIT",
+			"engines": {
+				"node": "^18 || ^20 || >= 21"
+			}
+		},
 		"node_modules/better-sqlite3": {
 			"version": "12.2.0",
 			"resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.2.0.tgz",
@@ -4617,15 +4640,6 @@
 				"npm": ">=6"
 			}
 		},
-		"node_modules/jssha": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz",
-			"integrity": "sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ==",
-			"license": "BSD-3-Clause",
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/jwa": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
@@ -5309,6 +5323,17 @@
 				"node": ">= 10.12.0"
 			}
 		},
+		"node_modules/node-gyp-build": {
+			"version": "4.8.4",
+			"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+			"integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+			"license": "MIT",
+			"bin": {
+				"node-gyp-build": "bin.js",
+				"node-gyp-build-optional": "optional.js",
+				"node-gyp-build-test": "build-test.js"
+			}
+		},
 		"node_modules/node-releases": {
 			"version": "2.0.19",
 			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",

package.json

@@ -47,9 +47,9 @@
 		"@sveltejs/adapter-node": "^5.2.12",
 		"@tailwindcss/forms": "^0.5.10",
 		"autoprefixer": "^10.4.21",
+		"bcrypt": "^6.0.0",
 		"better-sqlite3": "^12.2.0",
 		"jsonwebtoken": "^9.0.2",
-		"jssha": "^3.3.1",
 		"minio": "^8.0.5",
 		"postcss": "^8.5.4",
 		"sqlite3": "^5.1.7",

src/init/init_db.ts

@@ -1,5 +1,5 @@
 import Database from 'better-sqlite3';
-import jsSHA from 'jssha';
+import bcrypt from 'bcrypt';
 
 const db = new Database('./src/lib/data/tatort.db');
 
@@ -11,7 +11,8 @@ db.exec(createSQLStmt);
 
 // check if there are any users; if not add one default admin one
 const userPassword = 'A-InnoHUB_2025!';
-const hashedUserPassword = new jsSHA('SHA-512', 'TEXT').update(userPassword).getHash('HEX');
+const saltRounds = 12;
+const hashedUserPassword = bcrypt.hashSync(userPassword, saltRounds);
 const checkInsertSQLStmt = `INSERT INTO users (name, pw) SELECT 'admin', '${hashedUserPassword}'
                     WHERE NOT EXISTS (SELECT * FROM users);`;
 

src/lib/auth.ts

@@ -1,5 +1,5 @@
 import jwt from 'jsonwebtoken';
-import jsSHA from 'jssha';
+import bcrypt from 'bcrypt';
 import { db } from '$lib/server/dbService';
 
 import config from '$lib/config';
@@ -7,7 +7,6 @@ import config from '$lib/config';
 const SECRET = config.jwt.secret;
 const EXPIRES_IN = config.jwt.expiresIn;
 
-
 export function createToken(userData) {
 	return jwt.sign(userData, SECRET, { expiresIn: EXPIRES_IN });
 }
@@ -19,14 +18,16 @@ export function decryptToken(token: string) {
 export function authenticate(user, password) {
 	let JWTToken;
 
-	// hash user password
-	const hashedPW = new jsSHA('SHA-512', 'TEXT').update(password).getHash('HEX');
-
 	const getUserSQLStmt = 'SELECT name, pw FROM users WHERE name = ?';
 	const row = db.prepare(getUserSQLStmt).get(user);
+
+	if (!row) {
+		return null;
+	}
 	const storedPW = row.pw;
 
-	if (hashedPW && hashedPW === storedPW) {
+	const isValid = bcrypt.compareSync(password, storedPW)
+	if (isValid) {
 		JWTToken = createToken({ id: user, admin: true });
 	}
 

src/lib/server/userService.ts

@@ -15,21 +15,18 @@ export const getUsers = (): { userId: string; userName: string }[] => {
 	return userList;
 };
 
-export const addUser = (userName: string, userPassword: string): number => {
+export const addUser = (userName: string, userPassword: string) => {
 	const addUserSQLStmt = `INSERT into users(name, pw)
 													values (?, ?)`;
 	const statement = db.prepare(addUserSQLStmt);
 
-	let rowCount;
+	let rowInfo;
 	try {
-		const info = statement.run(userName, userPassword);
-		rowCount = info.changes;
+		rowInfo = statement.run(userName, userPassword);
+		return rowInfo;
 	} catch (error) {
-		console.log(error);
-		rowCount = 0;
+		console.error('ERROR: ', error);
 	}
-
-	return rowCount;
 };
 
 export const deleteUser = (userId: string) => {

src/routes/(angemeldet)/user-management/+page.svelte

@@ -1,174 +1,193 @@
 <script lang="ts">
-    import {onMount} from 'svelte';
-    import Button from "$lib/components/Button.svelte";
+	import { onMount } from 'svelte';
+	import Button from '$lib/components/Button.svelte';
 
-    import jsSHA from 'jssha'
+	import jsSHA from 'jssha';
 
-    const {data} = $props();
+	const { data } = $props();
 
-    let userName = $state('')
-    let userPassword = $state('')
-    let userList: { userId: string; userName: string }[] = $state([])
-    let addUserError = $state(false);
-    let addUserSuccess = $state(false);
-    const currentUser: string = data.user.id;
+	let userName = $state('');
+	let userPassword = $state('');
+	let userList: { userId: string; userName: string }[] = $state([]);
+	let addUserError = $state(false);
+	let addUserSuccess = $state(false);
+	const currentUser: string = data.user.id;
 
-    onMount(async () => {
-        userList = await getUsers();
-    })
+	onMount(async () => {
+		try {
+			userList = await getUsers();
+		} catch (error) {
+			console.log(`An error occured while retrieving users: ${error}`);
+		}
+	});
 
-    async function getUsers() {
-        const URL = "/api/users"
-        const response = await fetch(URL);
+	async function getUsers() {
+		const URL = '/api/users';
 
-        return await response.json();
-    }
+		try {
+			const response = await fetch(URL);
+			return await response.json();
+		} catch (error) {
+			console.log(`Error fetching users: ${error}`);
+			return null;
+		}
+	}
 
-    async function addUser() {
-        if (userName == "") {
-            alert("Der Benutzername darf nicht leer sein.")
-            return;
-        }
+	async function addUser() {
+		if (userName == '') {
+			alert('Der Benutzername darf nicht leer sein.');
+			return;
+		}
 
-        if (userPassword == "") {
-            alert("Das Passwort darf nicht leer sein.")
-            return;
-        }
+		if (userPassword == '') {
+			alert('Das Passwort darf nicht leer sein.');
+			return;
+		}
 
-        const URL = "/api/users";
-        const hashedUserPassword = new jsSHA('SHA-512', 'TEXT').update(userPassword).getHash('HEX');
-        const userData = {userName: userName, userPassword: hashedUserPassword}
+		const URL = '/api/users';
+		const userData = { userName: userName, userPassword: userPassword };
 
-        const response = await fetch(URL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
+		try {
+			const response = await fetch(URL, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(userData)
+			});
 
-        if (response.ok) {
-            userList = await getUsers();
-            addUserSuccess = true;
-            resetInput();
-        } else {
-            addUserError = true;
-        }
-    }
+			if (response.ok) {
+				const newUser = await response.json();
+				userList = [...userList, newUser];
+				addUserSuccess = true;
+				resetInput();
+			} else {
+				addUserError = true;
+			}
+		} catch (error) {
+			console.log(`Error creating user: ${error}`);
+			addUserError = true;
+		}
+	}
 
-    function resetInput() {
-        userName = "";
-        userPassword = "";
-        addUserError = false;
-        setInterval(() => {
-            addUserSuccess = false;
-        }, 5000);
-    }
+	function resetInput() {
+		userName = '';
+		userPassword = '';
+		addUserError = false;
+		setInterval(() => {
+			addUserSuccess = false;
+		}, 5000);
+	}
 
-    async function deleteUser(userId: string) {
-        const URL = `/api/users/${userId}`;
+	async function deleteUser(userId: string) {
+		const URL = `/api/users/${userId}`;
 
-        const response = await fetch(URL, {
-            method: 'DELETE',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        })
+		try {
+			const response = await fetch(URL, {
+				method: 'DELETE',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
 
-        if (response.status == 204) {
-            userList = await getUsers();
-        } else {
-            alert("Nutzer konnte nicht gelöscht werden")
-        }
-    }
+			if (response.status == 204) {
+				userList = await getUsers();
+			} else {
+				alert('Nutzer konnte nicht gelöscht werden');
+			}
+
+		} catch (error) {
+			console.log(`Error deleting users: ${error}`);
+		}
+	}
 
 </script>
 
 <h1 class="flex justify-center text-3xl md:text-4xl font-bold text-gray-800 dark:text-white tracking-tight mb-4">
-    Benutzerverwaltung
+	Benutzerverwaltung
 </h1>
 
 <h1 class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
-    Benutzerliste
+	Benutzerliste
 </h1>
 
 <div class="w-1/4 mx-auto">
-    <table class="min-w-full border border-gray-300 rounded overflow-hidden">
-        <thead class="bg-gray-100 dark:bg-gray-700">
-        <tr>
-            <th class="text-left px-4 py-2">Benutzername</th>
-            <th class="text-center px-4 py-2">Entfernen</th>
-        </tr>
-        </thead>
-        <tbody>
-        {#each userList as userItem}
-            <tr class="border-t border-gray-200 dark:border-gray-600">
-                <td class="px-4 py-2 text-gray-800 dark:text-white">{userItem.userName}</td>
-                <td class="px-4 py-2 text-center">
-                    <button
-                            class="text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-1 transition"
-                            on:click={() => deleteUser(userItem.userId)}
-                            aria-label="Delete user"
-                    >
-                        {#if (userItem.userName != currentUser)}
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                                 stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                      d="M6 18L18 6M6 6l12 12"/>
-                            </svg>
-                        {/if}
-                    </button>
-                </td>
-            </tr>
-        {/each}
-        </tbody>
-    </table>
+	<table class="min-w-full border border-gray-300 rounded overflow-hidden">
+		<thead class="bg-gray-100 dark:bg-gray-700">
+		<tr>
+			<th class="text-left px-4 py-2">Benutzername</th>
+			<th class="text-center px-4 py-2">Entfernen</th>
+		</tr>
+		</thead>
+		<tbody>
+		{#each userList as userItem}
+			<tr class="border-t border-gray-200 dark:border-gray-600">
+				<td class="px-4 py-2 text-gray-800 dark:text-white">{userItem.userName}</td>
+				<td class="px-4 py-2 text-center">
+					<button
+						class="text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-1 transition"
+						on:click={() => deleteUser(userItem.userId)}
+						aria-label="Delete user"
+					>
+						{#if (userItem.userName != currentUser)}
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+									 stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+											d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						{/if}
+					</button>
+				</td>
+			</tr>
+		{/each}
+		</tbody>
+	</table>
 </div>
 
 <h1 style="margin-top: 50px;"
-    class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
-    Neuer Nutzer
+		class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
+	Neuer Nutzer
 </h1>
 
 <div class="mx-auto flex justify-center">
-    <form>
-        <div class="form-group">
-            <label for="username">Benutzername</label>
-            <input bind:value={userName} type="text" id="username" placeholder="Namen eingeben"/>
-        </div>
+	<form>
+		<div class="form-group">
+			<label for="username">Benutzername</label>
+			<input bind:value={userName} type="text" id="username" placeholder="Namen eingeben" />
+		</div>
 
-        <div class="form-group">
-            <label for="password">Passwort</label>
-            <input bind:value={userPassword} type="password" id="password" placeholder="Passwort vergeben"/>
-        </div>
-    </form>
+		<div class="form-group">
+			<label for="password">Passwort</label>
+			<input bind:value={userPassword} type="password" id="password" placeholder="Passwort vergeben" />
+		</div>
+	</form>
 </div>
 
 <div class="mx-auto flex flex-col items-center space-y-4" style="margin-top: 20px;">
-    {#if addUserError}
-        <div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
-             role="alert">
-            <svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                 stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z"/>
-            </svg>
-            <span class="text-sm font-medium">Der Benutzer konnte nicht hinzugefügt werden.</span>
-        </div>
-    {/if}
-    {#if addUserSuccess}
-        <div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
-             role="alert">
-            <svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                 stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z"/>
-            </svg>
-            <span class="text-sm font-medium">Der Benutzer wurde hinzugefügt.</span>
-        </div>
-    {/if}
+	{#if addUserError}
+		<div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
+				 role="alert">
+			<svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+					 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
+			</svg>
+			<span class="text-sm font-medium">Der Benutzer konnte nicht hinzugefügt werden.</span>
+		</div>
+	{/if}
+	{#if addUserSuccess}
+		<div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
+				 role="alert">
+			<svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+					 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
+			</svg>
+			<span class="text-sm font-medium">Der Benutzer wurde hinzugefügt.</span>
+		</div>
+	{/if}
 
-    <Button on:click={addUser}>Benutzer hinzufügen</Button>
+	<Button on:click={addUser}>Benutzer hinzufügen</Button>
 </div>
 
 <style>

src/routes/api/users/+server.ts

@@ -1,5 +1,8 @@
 import { json } from '@sveltejs/kit';
 import { addUser, getUsers } from '$lib/server/userService';
+import bcrypt from 'bcrypt';
+
+const saltRounds = 12;
 
 export function GET({ locals }) {
 	if (!locals.user) {
@@ -24,7 +27,12 @@ export async function POST({ request, locals }) {
 		return json({ error: 'Missing input' }, { status: 400 });
 	}
 
-	const rowCount = addUser(userName, userPassword);
+	const hashedPassword = bcrypt.hashSync(userPassword, saltRounds);
+	const rowInfo = addUser(userName, hashedPassword);
 
-	return new Response(null, { status: rowCount == 1 ? 200 : 400 });
+	if (rowInfo?.changes == 1) {
+		return json({ userId: rowInfo.lastInsertRowid, userName: userName }, { status: 201 });
+	} else {
+		return new Response(null, { status: 400 });
+	}
 }