Allow WebAuthn on localhost as well

* browsers typically whiteliste this as well - https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
* for developing purposes see https://developer.chrome.com/docs/devtools/webauthn/

Signed-off-by: Morris Jobke <hey@morrisjobke.de>
Signed-off-by: Louis Chemineau <louis@chmn.me>

Author: MorrisJobke

apps/settings/js/vue-settings-personal-webauthn.js

@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<div v-if="!isHttps">
+	<div v-if="!isHttps && !isLocalhost">
 		{{ t('settings', 'Passwordless authentication requires a secure connection.') }}
 	</div>
 	<div v-else>
@@ -89,6 +89,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isLocalhost: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

apps/settings/js/vue-settings-personal-webauthn.js.map

@@ -40,7 +40,10 @@
 			{{ t('settings', 'Your browser does not support WebAuthn.') }}
 		</p>
 
-		<AddDevice v-if="hasPublicKeyCredential" :is-https="isHttps" @added="deviceAdded" />
+		<AddDevice v-if="hasPublicKeyCredential"
+			:is-https="isHttps"
+			:is-localhost="isLocalhost"
+			@added="deviceAdded" />
 	</div>
 </template>
 
@@ -69,6 +72,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isLocalhost: {
+			type: Boolean,
+			default: false,
+		},
 		hasPublicKeyCredential: {
 			type: Boolean,
 			default: false,

apps/settings/src/components/WebAuthn/AddDevice.vue

@@ -36,6 +36,7 @@ new View({
 	propsData: {
 		initialDevices: devices,
 		isHttps: window.location.protocol === 'https:',
+		isLocalhost: window.location.hostname === 'localhost',
 		hasPublicKeyCredential: typeof (window.PublicKeyCredential) !== 'undefined',
 	},
 }).$mount('#security-webauthn')

apps/settings/src/components/WebAuthn/Section.vue

@@ -1,5 +1,5 @@
 <template>
-	<form v-if="isHttps && hasPublicKeyCredential"
+	<form v-if="(isHttps || isLocalhost) && hasPublicKeyCredential"
 		ref="loginForm"
 		method="post"
 		name="login"
@@ -32,7 +32,7 @@
 	<div v-else-if="!hasPublicKeyCredential">
 		{{ t('core', 'Passwordless authentication is not supported in your browser.') }}
 	</div>
-	<div v-else-if="!isHttps">
+	<div v-else-if="!isHttps && !isLocalhost">
 		{{ t('core', 'Passwordless authentication is only available over a secure connection.') }}
 	</div>
 </template>
@@ -73,6 +73,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isLocalhost: {
+			type: Boolean,
+			default: false,
+		},
 		hasPublicKeyCredential: {
 			type: Boolean,
 			default: false,

apps/settings/src/main-personal-webauth.js

@@ -71,6 +71,7 @@ new View({
 		hasPasswordless: fromStateOr('webauthn-available', false),
 		countAlternativeLogins: fromStateOr('countAlternativeLogins', false),
 		isHttps: window.location.protocol === 'https:',
+		isLocalhost: window.location.hostname === 'localhost',
 		hasPublicKeyCredential: typeof (window.PublicKeyCredential) !== 'undefined',
 		hideLoginForm: fromStateOr('hideLoginForm', false),
 	},

core/js/dist/login.js

@@ -73,6 +73,7 @@
 					:inverted-colors="invertedColors"
 					:auto-complete-allowed="autoCompleteAllowed"
 					:is-https="isHttps"
+					:is-localhost="isLocalhost"
 					:has-public-key-credential="hasPublicKeyCredential"
 					@submit="loading = true" />
 				<a href="#" @click.prevent="passwordlessLogin = false">
@@ -176,6 +177,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isLocalhost: {
+			type: Boolean,
+			default: false,
+		},
 		hasPublicKeyCredential: {
 			type: Boolean,
 			default: false,