Can authenticate using security key

src/ui/routes/LoginRoute.tsx

@@ -21,7 +21,11 @@ import {
 import { ErrorOutline, Lock, VpnKey } from "@material-ui/icons";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import React from "react";
-import { AccountHelper, AuthOptions } from "../../helpers/AccountHelper";
+import {
+	AccountHelper,
+	AuthKey,
+	AuthOptions,
+} from "../../helpers/AccountHelper";
 import { input, matAlert } from "../widgets/DialogsProvider";
 
 function ErrorGettingOptions() {
@@ -238,8 +242,26 @@ class AuthOptionsWidget extends React.Component<
 		}
 	}
 
-	async loginWithSecurityKey(id: number) {
-		console.info(id);
+	async loginWithSecurityKey(key: AuthKey) {
+		try {
+			const challenge = await AccountHelper.GetAuthenticationChallenge(
+				this.props.email,
+				key
+			);
+
+			const result = await navigator.credentials.get(challenge);
+
+			await AccountHelper.AuthenticateWithKey(
+				this.props.email,
+				key,
+				result
+			);
+
+			document.location.href = document.location.href + "";
+		} catch (e) {
+			console.error(e);
+			matAlert("Authentication with security key failed!");
+		}
 	}
 
 	render() {
@@ -266,7 +288,7 @@ class AuthOptionsWidget extends React.Component<
 					{this.props.options.keys.map((key) => (
 						<ListItem
 							button
-							onClick={() => this.loginWithSecurityKey(key.id)}
+							onClick={() => this.loginWithSecurityKey(key)}
 							key={key.id}
 						>
 							<ListItemAvatar>