Hardware authentication design

interface/libraries/encryption.ts

@@ -1,4 +1,7 @@
 import { invoke, dialog } from "@tauri-apps/api"
+import { getSettings, setSettings } from "interface/stores/settings"
+
+const settings = getSettings()
 
 /**
  * Generates random key
@@ -66,3 +69,67 @@ export const sendEncryptionKey = async (key: string) => {
 export const deleteEncryptionKey = async (name: string) => {
 	return await invoke("delete_entry", { name })
 }
+
+/**
+ * Create a new WebAuthn credential
+ */
+export const createWebAuthnLogin = async () => {
+	try {
+		const res = await navigator.credentials.create({
+			publicKey: {
+				rp: {
+					name: "Authme Windows Hello",
+				},
+
+				user: {
+					id: new Uint8Array(16),
+					name: "Authme",
+					displayName: "Authme",
+				},
+
+				pubKeyCredParams: [
+					{
+						type: "public-key",
+						alg: -257,
+					},
+					{
+						type: "public-key",
+						alg: -7,
+					},
+				],
+
+				attestation: "none",
+
+				timeout: 60000,
+
+				challenge: window.crypto.getRandomValues(new Uint8Array(64)),
+			},
+		})
+
+		settings.security.hardwareAuthentication = true
+		setSettings(settings)
+
+		console.log(res)
+	} catch (error) {
+		console.log(error)
+	}
+}
+
+/**
+ * Get an existing WebAuthn credential
+ */
+export const getWebAuthnLogin = async () => {
+	try {
+		const res = await navigator.credentials.get({
+			publicKey: {
+				timeout: 60000,
+				challenge: window.crypto.getRandomValues(new Uint8Array(64)),
+				userVerification: "discouraged",
+			},
+		})
+
+		console.log(res)
+	} catch (error) {
+		console.log(error)
+	}
+}

interface/libraries/types.d.ts

@@ -46,6 +46,7 @@ declare global {
 
 		security: {
 			requireAuthentication: null | boolean
+			hardwareAuthentication: boolean
 			password: null | string
 		}
 

interface/stores/settings.ts

@@ -11,6 +11,7 @@ const defaultSettings: LibSettings = {
 
 	security: {
 		requireAuthentication: null,
+		hardwareAuthentication: false,
 		password: null,
 	},
 
@@ -45,12 +46,15 @@ const defaultSettings: LibSettings = {
 	},
 }
 
+// Setup auto launch on first start
 if (build.dev === false && localStorage.settings === undefined) {
 	invoke("auto_launch")
 }
 
+// Create store
 export const settings = writable<LibSettings>(localStorage.settings ? JSON.parse(localStorage.settings) : defaultSettings)
 
+// Listen for store events
 settings.subscribe((data) => {
 	console.log("Settings changed: ", data)
 
@@ -64,7 +68,3 @@ export const getSettings = (): LibSettings => {
 export const setSettings = (newSettings: LibSettings) => {
 	settings.set(newSettings)
 }
-
-export const resetSettings = () => {
-	settings.set(defaultSettings)
-}

interface/stores/state.ts

@@ -21,7 +21,3 @@ export const getState = (): LibState => {
 export const setState = (newState: LibState) => {
 	state.set(newState)
 }
-
-export const resetState = () => {
-	state.set(defaultState)
-}

interface/windows/landing/landing.svelte

@@ -9,7 +9,7 @@
 
 		<div class="flex w-full flex-row justify-center gap-5 sm:flex-wrap">
 			<div class="transparent-800 my-5 flex w-1/2 flex-col flex-wrap items-center justify-center rounded-2xl p-5 sm:w-full">
-				<h4 data-loc class="mb-3">Require password</h4>
+				<h4 data-loc class="mb-3">Password authentication</h4>
 				<h5 data-loc class="mb-3">You have to type in a password every time you launch Authme.</h5>
 
 				<button class="button" on:click={requirePassword}>
@@ -20,8 +20,8 @@
 				</button>
 			</div>
 			<div class="transparent-800 my-5 flex w-1/2 flex-col flex-wrap items-center justify-center rounded-2xl p-5 sm:w-full">
-				<h4 data-loc class="mb-3">No password</h4>
-				<h5 data-loc class="mb-3">If you don't want to type in your password every time you launch Authme.</h5>
+				<h4 data-loc class="mb-3">No authentication</h4>
+				<h5 data-loc class="mb-3">If you don't want to type in a password every time you launch Authme.</h5>
 
 				<button class="button" on:click={noPassword}>
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -32,24 +32,20 @@
 			</div>
 		</div>
 
-		<div class="transparent-800 flex w-full flex-col flex-wrap items-center justify-center rounded-2xl p-5">
-			<h4 data-loc class="mb-3">Hardware key authentication</h4>
-			<h5 data-loc class="mb-3">Login with Windows Hello, Touch ID or any WebAuthn compatible hardware key.</h5>
-
-			<button class="button" on:click={createWebAuthnLogin}>
-				<svg xmlns="http://www.w3.org/200/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-				</svg>
-				<span data-loc>Setup</span>
-			</button>
-
-			<button on:click={getWebAuthnLogin}>test</button>
+		<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left sm:flex-wrap">
+			<div>
+				<h4>Hardware authentication</h4>
+				<h5>Confirm important actions with Windows Hello, Touch ID or any WebAuthn compatible hardware key.</h5>
+			</div>
+			<div class="ml-20 flex gap-3">
+				<Toggle bind:checked={$settings.security.hardwareAuthentication} />
+			</div>
 		</div>
 	</div>
 </div>
 
 <div class="transparent-900 requirePassword m-auto mt-40 mb-60 hidden w-3/5 rounded-2xl p-10 text-center">
-	<h1>Require password</h1>
+	<h1>Password authentication</h1>
 
 	<div class="mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
 		<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
@@ -126,65 +122,12 @@
 
 <script lang="ts">
 	import { appController, createPassword, noPassword, requirePassword, showPassword } from "./index"
+	import Toggle from "interface/components/toggle.svelte"
 	import Details from "../../components/details.svelte"
+	import { settings } from "interface/stores/settings"
 	import { onMount } from "svelte"
 
 	onMount(() => {
 		appController()
 	})
-
-	const createWebAuthnLogin = async () => {
-		try {
-			const res = await navigator.credentials.create({
-				publicKey: {
-					rp: {
-						name: "Authme Windows Hello",
-					},
-
-					user: {
-						id: new Uint8Array(16),
-						name: "Authme",
-						displayName: "Authme",
-					},
-
-					pubKeyCredParams: [
-						{
-							type: "public-key",
-							alg: -257,
-						},
-						{
-							type: "public-key",
-							alg: -7,
-						},
-					],
-
-					attestation: "none",
-
-					timeout: 60000,
-
-					challenge: window.crypto.getRandomValues(new Uint8Array(64)),
-				},
-			})
-
-			console.log(res)
-		} catch (error) {
-			console.log(error)
-		}
-	}
-
-	const getWebAuthnLogin = async () => {
-		try {
-			const res = await navigator.credentials.get({
-				publicKey: {
-					timeout: 60000,
-					challenge: window.crypto.getRandomValues(new Uint8Array(64)),
-					userVerification: "discouraged",
-				},
-			})
-
-			console.log(res)
-		} catch (error) {
-			console.log(error)
-		}
-	}
 </script>

interface/windows/settings/index.ts

@@ -1,5 +1,3 @@
-import { resetState } from "../../stores/state"
-import { resetSettings } from "../../stores/settings"
 import build from "../../../build.json"
 import { path, invoke, os, dialog, app } from "@tauri-apps/api"
 import { UAParser } from "ua-parser-js"