diff --git a/src/helpers/AccountHelper.ts b/src/helpers/AccountHelper.ts
index ff0378c..6a88cbb 100644
--- a/src/helpers/AccountHelper.ts
+++ b/src/helpers/AccountHelper.ts
@@ -10,8 +10,14 @@ import {
 } from "../utils/Base64Utils";
 import { serverRequest } from "./APIHelper";
 
+export interface AuthKey {
+	name: string;
+	id: number;
+}
+
 export interface AuthOptions {
 	reset_token: string;
+	keys: AuthKey[];
 }
 
 export interface AdminAccount {
diff --git a/src/ui/routes/LoginRoute.tsx b/src/ui/routes/LoginRoute.tsx
index 7a5397b..336decb 100644
--- a/src/ui/routes/LoginRoute.tsx
+++ b/src/ui/routes/LoginRoute.tsx
@@ -217,6 +217,7 @@ class AuthOptionsWidget extends React.Component<
 		this.state = {};
 
 		this.loginWithResetToken = this.loginWithResetToken.bind(this);
+		this.loginWithSecurityKey = this.loginWithSecurityKey.bind(this);
 	}
 
 	async loginWithResetToken() {
@@ -237,6 +238,10 @@ class AuthOptionsWidget extends React.Component<
 		}
 	}
 
+	async loginWithSecurityKey(id: number) {
+		console.info(id);
+	}
+
 	render() {
 		return (
 			<Paper style={{ width: "100%", marginTop: "10px" }}>
@@ -258,14 +263,23 @@ class AuthOptionsWidget extends React.Component<
 						<span></span>
 					)}
 
-					<ListItem>
-						<ListItemAvatar>
-							<Avatar>
-								<VpnKey />
-							</Avatar>
-						</ListItemAvatar>
-						<ListItemText primary="Work" secondary="Jan 7, 2014" />
-					</ListItem>
+					{this.props.options.keys.map((key) => (
+						<ListItem
+							button
+							onClick={() => this.loginWithSecurityKey(key.id)}
+							key={key.id}
+						>
+							<ListItemAvatar>
+								<Avatar>
+									<VpnKey />
+								</Avatar>
+							</ListItemAvatar>
+							<ListItemText
+								primary={key.name}
+								secondary="Sign in using this security key"
+							/>
+						</ListItem>
+					))}
 				</List>
 			</Paper>
 		);