WebAuthn / FIDO2 : allow discoverable or legacy passkeys + runtime choice

- Let users choose during registration whether a passkey is stored as a discoverable credential; retry with the legacy flow if the authenticator can't do resident keys.
- Simplify “Log in with a device”: a single field now accepts an optional login/email, using discoverable credentials when left empty and falling back gracefully otherwise.
- Backend/WebAuthn services updated to handle optional usernames and return the credential source so the UID can be derived from the authenticator.

Signed-off-by: swissbit-eis-admin <[email protected]>

Author: swissbit-eis-admin

3rdparty

@@ -48,7 +48,12 @@ public function __construct(
 	public function startRegistration(): JSONResponse {
 		$this->logger->debug('Starting WebAuthn registration');
 
-		$credentialOptions = $this->manager->startRegistration($this->userSession->getUser(), $this->request->getServerHost());
+		$discoverable = $this->request->getParam('discoverable', '1') !== '0';
+		$credentialOptions = $this->manager->startRegistration(
+			$this->userSession->getUser(),
+			$this->request->getServerHost(),
+			$discoverable
+		);
 
 		// Set this in the session since we need it on finish
 		$this->session->set(self::WEBAUTHN_REGISTRATION, $credentialOptions);

apps/settings/lib/Controller/WebAuthnController.php

@@ -8,6 +8,18 @@
 		{{ t('settings', 'Passwordless authentication requires a secure connection.') }}
 	</div>
 	<div v-else>
+		<div class="new-webauthn-device__option">
+			<NcCheckboxRadioSwitch
+				v-model="discoverable"
+				type="switch"
+				:disabled="step !== RegistrationSteps.READY">
+				{{ t('settings', 'Store passkey on this device (discoverable)') }}
+			</NcCheckboxRadioSwitch>
+			<p class="settings-hint">
+				{{ t('settings', 'Disable this option if you prefer the classic flow that requires your login name before using the security key.') }}
+			</p>
+		</div>
+
 		<NcButton
 			v-if="step === RegistrationSteps.READY"
 			variant="primary"
@@ -56,6 +68,7 @@
 import { showError } from '@nextcloud/dialogs'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import logger from '../../logger.ts'
 import {
@@ -85,6 +98,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcCheckboxRadioSwitch,
 		NcTextField,
 	},
 
@@ -113,6 +127,7 @@ export default {
 			name: '',
 			credential: {},
 			step: RegistrationSteps.READY,
+			discoverable: true,
 		}
 	},
 
@@ -138,7 +153,7 @@ export default {
 
 			try {
 				await confirmPassword()
-				this.credential = await startRegistration()
+				this.credential = await startRegistration(this.discoverable)
 				this.step = RegistrationSteps.NAMING
 			} catch (err) {
 				showError(err)
@@ -199,4 +214,8 @@ export default {
 		max-width: min(100vw, 400px);
 	}
 }
+
+.new-webauthn-device__option {
+	margin-bottom: 12px;
+}
 </style>

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

@@ -16,16 +16,19 @@ import logger from '../logger.ts'
  *
  * @return The device attributes
  */
-export async function startRegistration() {
-	const url = generateUrl('/settings/api/personal/webauthn/registration')
-
+export async function startRegistration(discoverable = true): Promise<RegistrationResponseJSON> {
+	const url = generateUrl('/settings/api/personal/webauthn/registration') + (discoverable ? '' : '?discoverable=0')
 	try {
 		logger.debug('Fetching webauthn registration data')
 		const { data } = await axios.get<PublicKeyCredentialCreationOptionsJSON>(url)
 		logger.debug('Start webauthn registration')
 		const attrs = await registerWebAuthn({ optionsJSON: data })
 		return attrs
 	} catch (e) {
+		if (shouldFallbackToLegacy(e) && discoverable) {
+			logger.debug('WebAuthn discoverable registration failed, falling back to legacy mode')
+			return await startRegistration(false)
+		}
 		logger.error(e as Error)
 		if (isAxiosError(e)) {
 			throw new Error(t('settings', 'Could not register device: Network error'))
@@ -36,6 +39,18 @@ export async function startRegistration() {
 	}
 }
 
+function shouldFallbackToLegacy(error: unknown): boolean {
+	if (error instanceof Error) {
+		if (error.name === 'ConstraintError' || error.name === 'NotSupportedError') {
+			return true
+		}
+		if (error.message.includes('Discoverable credentials were required')) {
+			return true
+		}
+	}
+	return false
+}
+
 /**
  * @param name Name of the device
  * @param data Device attributes

apps/settings/src/service/WebAuthnRegistrationSerice.ts

@@ -43,21 +43,28 @@ public function __construct(
 	#[PublicPage]
 	#[UseSession]
 	#[FrontpageRoute(verb: 'POST', url: 'login/webauthn/start')]
-	public function startAuthentication(string $loginName): JSONResponse {
+	public function startAuthentication(?string $loginName = null): JSONResponse {
 		$this->logger->debug('Starting WebAuthn login');
 
-		$this->logger->debug('Converting login name to UID');
-		$uid = $loginName;
-		Util::emitHook(
-			'\OCA\Files_Sharing\API\Server2Server',
-			'preLoginNameUsedAsUserName',
-			['uid' => &$uid]
-		);
-		$this->logger->debug('Got UID: ' . $uid);
+		$uid = null;
+		if ($loginName !== null && $loginName !== '') {
+			$this->logger->debug('Converting login name to UID');
+			$uid = $loginName;
+			Util::emitHook(
+				'\OCA\Files_Sharing\API\Server2Server',
+				'preLoginNameUsedAsUserName',
+				['uid' => &$uid]
+			);
+			$this->logger->debug('Got UID: ' . $uid);
+		}
 
 		$publicKeyCredentialRequestOptions = $this->webAuthnManger->startAuthentication($uid, $this->request->getServerHost());
 		$this->session->set(self::WEBAUTHN_LOGIN, json_encode($publicKeyCredentialRequestOptions));
-		$this->session->set(self::WEBAUTHN_LOGIN_UID, $uid);
+		if ($uid !== null && $uid !== '') {
+			$this->session->set(self::WEBAUTHN_LOGIN_UID, $uid);
+		} else {
+			$this->session->remove(self::WEBAUTHN_LOGIN_UID);
+		}
 
 		return new JSONResponse($publicKeyCredentialRequestOptions);
 	}
@@ -68,15 +75,18 @@ public function startAuthentication(string $loginName): JSONResponse {
 	public function finishAuthentication(string $data): JSONResponse {
 		$this->logger->debug('Validating WebAuthn login');
 
-		if (!$this->session->exists(self::WEBAUTHN_LOGIN) || !$this->session->exists(self::WEBAUTHN_LOGIN_UID)) {
+		if (!$this->session->exists(self::WEBAUTHN_LOGIN)) {
 			$this->logger->debug('Trying to finish WebAuthn login without session data');
 			return new JSONResponse([], Http::STATUS_BAD_REQUEST);
 		}
 
 		// Obtain the publicKeyCredentialOptions from when we started the registration
 		$publicKeyCredentialRequestOptions = PublicKeyCredentialRequestOptions::createFromString($this->session->get(self::WEBAUTHN_LOGIN));
-		$uid = $this->session->get(self::WEBAUTHN_LOGIN_UID);
-		$this->webAuthnManger->finishAuthentication($publicKeyCredentialRequestOptions, $data, $uid);
+		$uidFromSession = $this->session->get(self::WEBAUTHN_LOGIN_UID);
+		$this->session->remove(self::WEBAUTHN_LOGIN);
+		$this->session->remove(self::WEBAUTHN_LOGIN_UID);
+		$publicKeyCredentialSource = $this->webAuthnManger->finishAuthentication($publicKeyCredentialRequestOptions, $data, $uidFromSession);
+		$uid = $uidFromSession ?? $publicKeyCredentialSource->getUserHandle();
 
 		//TODO: add other parameters
 		$loginData = new LoginData(

core/Controller/WebAuthnController.php

@@ -16,17 +16,15 @@
 		</h2>
 
 		<NcTextField
-			required
 			:model-value="user"
 			:autocomplete="autoCompleteAllowed ? 'on' : 'off'"
 			:error="!validCredentials"
-			:label="t('core', 'Login or email')"
-			:placeholder="t('core', 'Login or email')"
-			:helper-text="!validCredentials ? t('core', 'Your account is not setup for passwordless login.') : ''"
+			:label="t('core', 'Login or email (optional)')"
+			:placeholder="t('core', 'Login or email (optional)')"
+			:helper-text="helperText"
 			@update:value="changeUsername" />
 
 		<LoginButton
-			v-if="validCredentials"
 			:loading="loading"
 			@click="authenticate" />
 	</form>
@@ -113,6 +111,7 @@ export default defineComponent({
 			user: this.username,
 			loading: false,
 			validCredentials: true,
+			helperText: this.t('core', 'Leave empty to use a discoverable credential.'),
 		}
 	},
 
@@ -125,11 +124,15 @@ export default defineComponent({
 
 			logger.debug('passwordless login initiated')
 
+			this.loading = true
 			try {
-				const params = await startAuthentication(this.user)
+				const trimmed = this.user.trim()
+				const params = await startAuthentication(trimmed !== '' ? trimmed : undefined)
 				await this.completeAuthentication(params)
 			} catch (error) {
-				if (error instanceof NoValidCredentials) {
+				this.loading = false
+				if (error instanceof NoValidCredentials && this.user.trim() === '') {
+					this.helperText = this.t('core', 'No discoverable credential found. Please enter your login or email and try again.')
 					this.validCredentials = false
 					return
 				}
@@ -139,6 +142,8 @@ export default defineComponent({
 
 		changeUsername(username) {
 			this.user = username
+			this.validCredentials = true
+			this.helperText = this.t('core', 'Leave empty to use a discoverable credential.')
 			this.$emit('update:username', this.user)
 		},
 
@@ -152,21 +157,28 @@ export default defineComponent({
 				})
 				.catch((error) => {
 					logger.debug('GOT AN ERROR WHILE SUBMITTING CHALLENGE!', { error }) // Example: timeout, interaction refused...
+					this.loading = false
 				})
 		},
 
 		submit() {
-			// noop
+			if (!this.loading) {
+				void this.authenticate()
+			}
 		},
 	},
 })
 </script>
 
 <style lang="scss" scoped>
-.password-less-login-form {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	margin: 0;
-}
+	.password-less-login-form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin: 0;
+
+		&__discoverable {
+			align-self: flex-start;
+		}
+	}
 </style>

core/src/components/login/PasswordLessLoginForm.vue

@@ -16,17 +16,20 @@ export class NoValidCredentials extends Error {}
  * Start webautn authentication
  * This loads the challenge, connects to the authenticator and returns the repose that needs to be sent to the server.
  *
- * @param loginName Name to login
+ * @param loginName Name to login (optional for discoverable credentials)
  */
-export async function startAuthentication(loginName: string) {
+export async function startAuthentication(loginName?: string) {
 	const url = generateUrl('/login/webauthn/start')
 
-	const { data } = await Axios.post<PublicKeyCredentialRequestOptionsJSON>(url, { loginName })
-	if (!data.allowCredentials || data.allowCredentials.length === 0) {
+	const body = loginName ? { loginName } : undefined
+	const { data } = await Axios.post<PublicKeyCredentialRequestOptionsJSON>(url, body)
+	if (loginName && (!data.allowCredentials || data.allowCredentials.length === 0)) {
 		logger.error('No valid credentials returned for webauthn')
 		throw new NoValidCredentials()
 	}
-	return await startWebauthnAuthentication({ optionsJSON: data })
+	return await startWebauthnAuthentication({
+		optionsJSON: data,
+	})
 }
 
 /**