diff --git a/src/components/Challenge.vue b/src/components/Challenge.vue
new file mode 100644
index 0000000..2e4b212
--- /dev/null
+++ b/src/components/Challenge.vue
@@ -0,0 +1,115 @@
+<!--
+  - @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<div>
+		<form method="POST"
+			  ref="challengeForm">
+			<input id="challenge"
+				   type="hidden"
+				   name="challenge"
+				   v-model="challenge">
+		</form>
+
+		<p id="u2f-info"
+		   v-if="error">
+			<strong>
+				{{ t('twofactor_u2f', 'An error occurred: {msg}', {msg: this.error}) }}
+			</strong>
+			<br>
+			<button class="btn"
+					@click="sign">
+				{{ t('twofactor_u2f', 'Retry') }}
+			</button>
+		</p>
+		<p id="u2f-info"
+		   v-else>
+			{{ t('mail', 'Plug in your U2F device and press the device button to authorize.') }}
+		</p>
+		<p id="u2f-error"
+		   style="display: none">
+			<strong>{{ t('mail', 'An error occurred. Please try again.')}}</strong>
+		</p>
+
+		<p v-if="notSupported">
+			<em>
+			{{ t('twofactor_u2f', 'Your browser does not support U2F.') }}
+			{{ t('twofactor_u2f', 'Chrome is the only browser that supports U2F devices. You need to install the "U2F Support Add-on" on Firefox to use U2F.') }}
+			</em>
+		</p>
+		<p v-else-if="httpWarning"
+		   id="u2f-http-warning">
+			<em>
+			{{ t('twofactor_u2f', 'You are accessing this site via an insecure connection. Browsers might therefore refuse the U2F authentication.') }}
+			</em>
+		</p>
+	</div>
+</template>
+
+<script>
+	import u2f from 'u2f-api'
+
+	export default {
+		name: 'Challenge',
+		props: {
+			req: {
+				type: Array,
+				required: true,
+			},
+			httpWarning: {
+				type: Boolean,
+				required: true,
+			}
+		},
+		data () {
+			return {
+				notSupported: !u2f.isSupported(),
+				challenge: '',
+				error: undefined,
+			}
+		},
+		mounted () {
+			this.sign()
+				.catch(console.error.bind(this))
+		},
+		methods: {
+			sign () {
+				this.error = undefined
+
+				return u2f.sign(this.req)
+					.then(challenge => {
+						this.challenge = JSON.stringify(challenge)
+
+						return this.$nextTick(() => {
+							this.$refs.challengeForm.submit()
+						})
+					})
+					.catch(err => {
+						console.error('could not sign u2f challenge', err)
+
+						this.error = err.message || 'Unknown error'
+
+						throw err
+					})
+			}
+		}
+	}
+</script>
diff --git a/src/main-challenge.js b/src/main-challenge.js
new file mode 100644
index 0000000..8365451
--- /dev/null
+++ b/src/main-challenge.js
@@ -0,0 +1,41 @@
+/*
+ * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import store from './store'
+import Vue from 'vue'
+
+import Nextcloud from './mixins/Nextcloud'
+
+Vue.mixin(Nextcloud)
+
+const initialStateElement = document.getElementById('twofactor-u2f-req')
+const req = JSON.parse(initialStateElement.value)
+
+import Challenge from './components/Challenge'
+
+const View = Vue.extend(Challenge)
+new View({
+	propsData: {
+		req,
+		httpWarning: document.location.protocol !== 'https:',
+	},
+	store,
+}).$mount('#twofactor-u2f-challenge')
diff --git a/src/webpack.common.js b/src/webpack.common.js
index 789da78..4940550 100644
--- a/src/webpack.common.js
+++ b/src/webpack.common.js
@@ -2,11 +2,13 @@ const path = require('path');
 const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
-	entry: path.join(__dirname, 'main-settings.js'),
+	entry: {
+		challenge: path.join(__dirname, 'main-challenge.js'),
+		settings: path.join(__dirname, 'main-settings.js')
+	},
 	output: {
 		path: path.resolve(__dirname, '../js'),
 		publicPath: '/js/',
-		filename: 'settings.js'
 	},
 	module: {
 		rules: [
diff --git a/templates/challenge.php b/templates/challenge.php
index 1e67cd0..1f10542 100644
--- a/templates/challenge.php
+++ b/templates/challenge.php
@@ -1,30 +1,10 @@
 <?php
 
-script('twofactor_u2f', 'build/challenge');
-style('twofactor_u2f', 'style');
+script('twofactor_u2f', 'challenge');
 
 ?>
 
-<input id="u2f-auth" type="hidden" value="<?php p(json_encode($_['reqs'])); ?>">
-
-<form method="POST" id="u2f-form">
-	<input id="challenge" type="hidden" name="challenge">
-</form>
-
 <img class="two-factor-icon" src="<?php print_unescaped(image_path('twofactor_u2f', 'app.svg')); ?>" alt="">
-<p id="u2f-info">
-<?php p($l->t('Plug in your U2F device and press the device button to authorize.')) ?>
-</p>
-<p id="u2f-error"
-   style="display: none">
-	<strong><?php p($l->t('An error occurred. Please try again.')) ?></strong>
-</p>
-<p>
-	<em>
-		<?php p($l->t('In Firefox, you need to install the "U2F Support Add-on" to use U2F. This is not needed in Chrome.')) ?>
-		<p id="u2f-http-warning"
-		      style="display: none">
-			<?php p($l->t('You are accessing this site via an insecure connection. Browsers might therefore refuse the U2F authentication.')) ?>
-		</p>
-	</em>
-</p>
+
+<input id="twofactor-u2f-req" type="hidden" value="<?php p(json_encode($_['reqs'])); ?>">
+<div id="twofactor-u2f-challenge"></div>