From 27b319bd988f49d2feb6352ea2f2ad21e68646b7 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 7 Mar 2025 10:51:39 +0100
Subject: [PATCH] fix(login): passkey setup when pressing "Enter" key on login
 form (#9485)

# Which Problems Are Solved

When registering passkeys or u2f methods as second factor, some users
pressed the "Enter" key, rather than clicking the submit button. This
method has bypassed the execution of the device registration and
encoding scripts, resulting in the form being submitted without the
necessary encoded values.

# How the Problems Are Solved

This PR ensures that device registration is always executed and the
required information are submitted in the form regardless of pressing
"Enter" or clicking the button.

# Additional Changes

None

# Additional Context

- closes #6592
- closes #2910
---
 .../ui/login/static/resources/scripts/webauthn.js    | 10 ++++++++--
 .../login/static/resources/scripts/webauthn_login.js |  2 +-
 .../static/resources/scripts/webauthn_register.js    | 12 ++++++++++--
 .../api/ui/login/static/templates/mfa_init_u2f.html  |  2 +-
 .../static/templates/passwordless_registration.html  |  2 +-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/internal/api/ui/login/static/resources/scripts/webauthn.js b/internal/api/ui/login/static/resources/scripts/webauthn.js
index 9fafef8030..f44f3db498 100644
--- a/internal/api/ui/login/static/resources/scripts/webauthn.js
+++ b/internal/api/ui/login/static/resources/scripts/webauthn.js
@@ -1,4 +1,4 @@
-function checkWebauthnSupported(button, func) {
+function checkWebauthnSupported(func, optionalClickId) {
   let support = document.getElementsByClassName("wa-support");
   let noSupport = document.getElementsByClassName("wa-no-support");
   if (!window.PublicKeyCredential) {
@@ -10,7 +10,13 @@ function checkWebauthnSupported(button, func) {
     }
     return;
   }
-  document.getElementById(button).addEventListener("click", func);
+
+  // if id is provided add click event only, otherwise call the function directly
+  if (optionalClickId) {
+    document.getElementById(optionalClickId).addEventListener("click", func);
+  } else {
+    func();
+  }
 }
 
 function webauthnError(error) {
diff --git a/internal/api/ui/login/static/resources/scripts/webauthn_login.js b/internal/api/ui/login/static/resources/scripts/webauthn_login.js
index 3bf6c4c754..d8af4cd02f 100644
--- a/internal/api/ui/login/static/resources/scripts/webauthn_login.js
+++ b/internal/api/ui/login/static/resources/scripts/webauthn_login.js
@@ -1,6 +1,6 @@
 document.addEventListener(
   "DOMContentLoaded",
-  checkWebauthnSupported("btn-login", login)
+  checkWebauthnSupported(login, "btn-login"),
 );
 
 async function login() {
diff --git a/internal/api/ui/login/static/resources/scripts/webauthn_register.js b/internal/api/ui/login/static/resources/scripts/webauthn_register.js
index dd33f18933..49385d96fc 100644
--- a/internal/api/ui/login/static/resources/scripts/webauthn_register.js
+++ b/internal/api/ui/login/static/resources/scripts/webauthn_register.js
@@ -1,6 +1,14 @@
 document.addEventListener(
   "DOMContentLoaded",
-  checkWebauthnSupported("btn-register", registerCredential)
+  () => {
+    const form = document.getElementsByTagName("form")[0];
+    if (form) {
+      form.addEventListener("submit", (event) => {
+        event.preventDefault(); // Prevent the default form submission
+        checkWebauthnSupported(registerCredential);
+      });
+    }
+  }
 );
 
 async function registerCredential() {
@@ -8,7 +16,7 @@ async function registerCredential() {
 
   let opt;
   try {
-    opt = JSON.parse(atob(document.getElementsByName("credentialCreationData")[0].value));
+    opt = JSON.parse(window.atob(document.getElementsByName("credentialCreationData")[0].value));
   } catch (e) {
     webauthnError({ message: "Failed to parse credential creation data." });
     return;
diff --git a/internal/api/ui/login/static/templates/mfa_init_u2f.html b/internal/api/ui/login/static/templates/mfa_init_u2f.html
index 826defaa39..a0c3902342 100644
--- a/internal/api/ui/login/static/templates/mfa_init_u2f.html
+++ b/internal/api/ui/login/static/templates/mfa_init_u2f.html
@@ -37,7 +37,7 @@
         </a>
 
         <span class="fill-space"></span>
-        <a id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "InitMFAU2F.RegisterTokenButtonText"}}</a>
+        <button type="submit" id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "InitMFAU2F.RegisterTokenButtonText"}}</button>
     </div>
 </form>
 
diff --git a/internal/api/ui/login/static/templates/passwordless_registration.html b/internal/api/ui/login/static/templates/passwordless_registration.html
index 5ba814d66f..cfe65d182f 100644
--- a/internal/api/ui/login/static/templates/passwordless_registration.html
+++ b/internal/api/ui/login/static/templates/passwordless_registration.html
@@ -40,7 +40,7 @@
     <div class="lgn-actions">
         <span class="fill-space"></span>
         {{if not .Disabled}}
-        <a id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "PasswordlessRegistration.RegisterTokenButtonText"}}</a>
+        <button type="submit" id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "PasswordlessRegistration.RegisterTokenButtonText"}}</button>
         {{end}}
     </div>
 </form>