Fix crypto

src/lib/components/Login.svelte

@@ -6,12 +6,6 @@
 	let password = '';
 
 	const { signInMutation } = sessionStorageQueries();
-
-	async function login() {
-		$signInMutation.mutate(password, {
-			onError: () => alert('Invalid password')
-		});
-	}
 </script>
 
 <div class="m-8">
@@ -27,7 +21,11 @@
 			extraProps="my-4 text-center max-w-xs"
 			text="Please enter your password to login into Holo Key Manager"
 		/>
-		<InputPassword bind:value={password} label="Enter password" />
+		<InputPassword
+			error={$signInMutation.error ? 'Invalid password' : ''}
+			bind:value={password}
+			label="Enter password"
+		/>
 	</div>
-	<Button label="Login" onClick={login} extraBottomMargin />
+	<Button label="Login" onClick={() => $signInMutation.mutate(password)} extraBottomMargin />
 </div>

src/lib/helpers/encryption.ts

@@ -1,4 +1,4 @@
-import type { SecureData } from '$types';
+import type { SecureData, HashSalt } from '$types';
 
 const hexStringToArrayBuffer = (hexString: string) => {
 	if (hexString.length % 2 !== 0) {
@@ -26,12 +26,36 @@ const arrayBufferToHexString = (buffer: ArrayBuffer) =>
 		.call(new Uint8Array(buffer), (x) => ('00' + x.toString(16)).slice(-2))
 		.join('');
 
-export const hashPassword = async (password: string): Promise<string> => {
-	const encoder = new TextEncoder();
-	const data = encoder.encode(password);
-	const algo = { name: 'SHA-256' };
-	const hashBuffer = await crypto.subtle.digest(algo, data);
-	return arrayBufferToHexString(hashBuffer); // Convert ArrayBuffer to hex string
+const deriveBits = async (password: string, salt: Uint8Array, iterations: number) => {
+	const encodedPassword = new TextEncoder().encode(password);
+	const algo = {
+		name: 'PBKDF2',
+		hash: 'SHA-256',
+		salt: new TextEncoder().encode(arrayBufferToHexString(salt)),
+		iterations: iterations
+	};
+	const key = await crypto.subtle.importKey('raw', encodedPassword, { name: 'PBKDF2' }, false, [
+		'deriveBits'
+	]);
+	return await crypto.subtle.deriveBits(algo, key, 256);
+};
+
+export const hashPassword = async (password: string): Promise<HashSalt> => {
+	const salt = crypto.getRandomValues(new Uint8Array(16));
+	const derivedBits = await deriveBits(password, salt, 100000);
+	return {
+		hash: arrayBufferToHexString(derivedBits),
+		salt: arrayBufferToHexString(salt)
+	};
+};
+
+export const verifyPassword = async (
+	inputPassword: string,
+	storedHashSalt: HashSalt
+): Promise<boolean> => {
+	const saltBuffer = hexStringToArrayBuffer(storedHashSalt.salt);
+	const derivedBits = await deriveBits(inputPassword, new Uint8Array(saltBuffer), 100000);
+	return arrayBufferToHexString(derivedBits) === storedHashSalt.hash;
 };
 
 export const encryptData = async (
@@ -44,6 +68,7 @@ export const encryptData = async (
 	const key = await crypto.subtle.importKey('raw', passwordHash, algo, false, ['encrypt']);
 
 	const encrypted = await crypto.subtle.encrypt(algo, key, secretData);
+
 	return {
 		encryptedData: arrayBufferToBase64(encrypted),
 		iv: arrayBufferToBase64(iv)

src/lib/queries/password.ts

@@ -7,22 +7,22 @@ import {
 	SESSION_DATA_KEY,
 	SETUP_PASSWORD
 } from '$const';
-import { decryptData, encryptData, hashPassword } from '$helpers';
+import { decryptData, encryptData, hashPassword, verifyPassword } from '$helpers';
 import { storageService } from '$services';
-import { Password, SecureDataSchema } from '$types';
+import { HashSaltSchema, SecureDataSchema } from '$types';
 import { createMutation, createQuery, type QueryClient } from '@tanstack/svelte-query';
 
 const getPassword = async () => {
 	const data = await storageService.getWithoutCallback({ key: PASSWORD, area: LOCAL });
-	return Password.safeParse(data);
+	return HashSaltSchema.safeParse(data);
 };
 
 export function createSetupPasswordQuery() {
 	return createQuery({
 		queryKey: [SETUP_PASSWORD],
 		queryFn: async () => {
-			const validatedResult = await getPassword();
-			return validatedResult.success;
+			const parsedResult = await getPassword();
+			return parsedResult.success;
 		}
 	});
 }
@@ -46,9 +46,9 @@ export function createPasswordMutation(queryClient: QueryClient) {
 export function createSignInMutation(queryClient: QueryClient) {
 	return createMutation({
 		mutationFn: async (password: string) => {
-			const validatedResult = await getPassword();
+			const parsedResult = await getPassword();
 
-			if (validatedResult.success && (await hashPassword(password)) === validatedResult.data) {
+			if (parsedResult.success && (await verifyPassword(password, parsedResult.data))) {
 				return storageService.set({
 					key: SESSION_DATA,
 					value: true,
@@ -67,11 +67,12 @@ export function createSignInMutation(queryClient: QueryClient) {
 export function createChangePasswordWithDeviceKeyMutation(queryClient: QueryClient) {
 	return createMutation({
 		mutationFn: async (mutationData: { newPassword: string; oldPassword: string }) => {
-			const oldHash = await hashPassword(mutationData.oldPassword);
+			const parsedResult = await getPassword();
 
-			const validatePassword = await getPassword();
-
-			if (!validatePassword.success || oldHash !== validatePassword.data) {
+			if (
+				!parsedResult.success ||
+				!(await verifyPassword(mutationData.oldPassword, parsedResult.data))
+			) {
 				throw new Error('Invalid password');
 			}
 
@@ -80,23 +81,23 @@ export function createChangePasswordWithDeviceKeyMutation(queryClient: QueryClie
 				area: LOCAL
 			});
 
-			const validatedDeviceKey = SecureDataSchema.safeParse(deviceKey);
+			const parsedDeviceKey = SecureDataSchema.safeParse(deviceKey);
 
-			if (!validatedDeviceKey.success) {
+			if (!parsedDeviceKey.success) {
 				throw new Error('Invalid device key');
 			}
 
-			const decryptedData = await decryptData(validatedDeviceKey.data, oldHash);
-			const newHash = await hashPassword(mutationData.newPassword);
+			const decryptedData = await decryptData(parsedDeviceKey.data, parsedResult.data.hash);
+			const newHashSalt = await hashPassword(mutationData.newPassword);
 
 			storageService.set({
 				key: PASSWORD,
-				value: newHash,
+				value: newHashSalt,
 				area: LOCAL
 			});
 			storageService.set({
 				key: DEVICE_KEY,
-				value: await encryptData(decryptedData, newHash),
+				value: await encryptData(decryptedData, newHashSalt.hash),
 				area: LOCAL
 			});
 			storageService.set({

src/lib/queries/sessionAndKey.ts

@@ -9,7 +9,7 @@ import {
 } from '$const';
 import { encryptData } from '$helpers';
 import { storageService } from '$services';
-import { Password, SecureDataSchema, SessionStateSchema } from '$types';
+import { HashSaltSchema, SecureDataSchema, SessionStateSchema } from '$types';
 import { QueryClient, createMutation, createQuery } from '@tanstack/svelte-query';
 
 export function createSessionQuery() {
@@ -20,8 +20,8 @@ export function createSessionQuery() {
 				key: SESSION_DATA,
 				area: SESSION
 			});
-			const validatedData = SessionStateSchema.safeParse(data);
-			return validatedData.success ? validatedData.data : false;
+			const parsedData = SessionStateSchema.safeParse(data);
+			return parsedData.success ? parsedData.data : false;
 		}
 	});
 }
@@ -34,8 +34,9 @@ export function createSetupDeviceKeyQuery() {
 				key: DEVICE_KEY,
 				area: LOCAL
 			});
-			const validatedData = SecureDataSchema.safeParse(data);
-			return validatedData.success;
+
+			const parsedData = SecureDataSchema.safeParse(data);
+			return parsedData.success;
 		}
 	});
 }
@@ -47,17 +48,17 @@ export function createStoreDeviceKey(queryClient: QueryClient) {
 				key: PASSWORD,
 				area: LOCAL
 			});
-			const validatePassword = Password.safeParse(result);
+			const parsedPassword = HashSaltSchema.safeParse(result);
 
-			if (validatePassword.success) {
-				storageService.set({
-					key: DEVICE_KEY,
-					value: await encryptData(deviceKey, validatePassword.data),
-					area: LOCAL
-				});
+			if (!parsedPassword.success) {
+				throw new Error('Something went wrong');
 			}
 
-			throw new Error('Something went wrong');
+			storageService.set({
+				key: DEVICE_KEY,
+				value: await encryptData(deviceKey, parsedPassword.data.hash),
+				area: LOCAL
+			});
 		},
 
 		onSuccess: () => {

src/lib/types/keys.ts

@@ -13,7 +13,12 @@ export type KeysState = {
 	loading: boolean;
 };
 
-export const Password = z.string();
+export const HashSaltSchema = z.object({
+	salt: z.string(),
+	hash: z.string()
+});
+
+export type HashSalt = z.infer<typeof HashSaltSchema>;
 
 export const SecureDataSchema = z.object({
 	encryptedData: z.string(),

src/lib/types/storage-service.ts

@@ -1,6 +1,6 @@
 import type { LOCAL, SESSION, SESSION_DATA, PASSWORD, DEVICE_KEY } from '$const';
 import { z } from 'zod';
-import type { SecureData } from './keys';
+import type { HashSalt, SecureData } from './keys';
 
 export type AreaName = typeof SESSION | typeof LOCAL | 'sync' | 'managed';
 
@@ -17,7 +17,7 @@ type GetSession = { key: typeof SESSION_DATA; area: typeof SESSION };
 
 type SetPassword = {
 	key: typeof PASSWORD;
-	value: string;
+	value: HashSalt;
 	area: typeof LOCAL;
 };
 type GetPassword = { key: typeof PASSWORD; area: typeof LOCAL };

src/routes/setup-pass/app-password/+page.svelte

@@ -11,7 +11,7 @@
 	let password = '';
 
 	$: charCount = password.length;
-	$: isDisabled = charCount < 8 && confirmPassword !== password;
+	$: isDisabled = charCount < 8 || confirmPassword !== password;
 </script>
 
 <Title>Set Key Manager Password</Title>