From b6dc9291410ea5ce8869ccb5655d69172edd61b8 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 23 Oct 2023 11:21:05 -0400
Subject: [PATCH] UX: Add conditional UI for passkeys (#24041)

This allows users to see their passkeys recommended by the browser as they type their username.

There's a small refactor here, to make sure the same action is used by both the conditional UI and the passkey login button. The webauthn API only supports one auth attempt at a time, so in this PR we need to add a service singleton to manage the navigator.credentials.get promise so that it can be cancelled and reused as the user picks the conditional UI (i.e. the username login input) or the dedicated passkey login button.
---
 .../app/components/login-buttons.hbs          |  2 +-
 .../discourse/app/components/modal/login.hbs  |  7 +-
 .../discourse/app/components/modal/login.js   | 34 ++++++++-
 .../modal/login/local-login-form.hbs          |  4 +-
 .../modal/login/local-login-form.js           | 13 ++++
 .../app/components/passkey-login-button.gjs   | 34 +--------
 .../javascripts/discourse/app/lib/webauthn.js | 70 +++++++++++++------
 .../acceptance/modal/login/login-test.js      | 39 +++++++++++
 8 files changed, 145 insertions(+), 58 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/login-buttons.hbs b/app/assets/javascripts/discourse/app/components/login-buttons.hbs
index 2b03fb31d76..779f2bbd6e9 100644
--- a/app/assets/javascripts/discourse/app/components/login-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/components/login-buttons.hbs
@@ -17,7 +17,7 @@
 {{/each}}
 
 {{#if this.canUsePasskeys}}
-  <PasskeyLoginButton />
+  <PasskeyLoginButton @passkeyLogin={{this.passkeyLogin}} />
 {{/if}}
 
 <PluginOutlet @name="after-login-buttons" />
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/login.hbs b/app/assets/javascripts/discourse/app/components/modal/login.hbs
index 0c1d1c9717b..acb9696aea8 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/login.hbs
@@ -31,6 +31,8 @@
           @loginName={{this.loginName}}
           @loginNameChanged={{this.loginNameChanged}}
           @canLoginLocalWithEmail={{this.canLoginLocalWithEmail}}
+          @canUsePasskeys={{this.canUsePasskeys}}
+          @passkeyLogin={{this.passkeyLogin}}
           @loginPassword={{this.loginPassword}}
           @secondFactorMethod={{this.secondFactorMethod}}
           @secondFactorToken={{this.secondFactorToken}}
@@ -67,7 +69,10 @@
         </div>
       {{/unless}}
       <div class="login-right-side">
-        <LoginButtons @externalLogin={{this.externalLogin}} />
+        <LoginButtons
+          @externalLogin={{this.externalLogin}}
+          @passkeyLogin={{this.passkeyLogin}}
+        />
       </div>
     {{/if}}
   </:body>
diff --git a/app/assets/javascripts/discourse/app/components/modal/login.js b/app/assets/javascripts/discourse/app/components/modal/login.js
index 6f4fb54e290..a8685290cb5 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login.js
+++ b/app/assets/javascripts/discourse/app/components/modal/login.js
@@ -5,10 +5,14 @@ import { schedule } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import { isEmpty } from "@ember/utils";
 import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import { areCookiesEnabled } from "discourse/lib/utilities";
 import { wavingHandURL } from "discourse/lib/waving-hand-url";
-import { isWebauthnSupported } from "discourse/lib/webauthn";
+import {
+  getPasskeyCredential,
+  isWebauthnSupported,
+} from "discourse/lib/webauthn";
 import { findAll } from "discourse/models/login-method";
 import { SECOND_FACTOR_METHODS } from "discourse/models/user";
 import escape from "discourse-common/lib/escape";
@@ -109,6 +113,34 @@ export default class Login extends Component {
     );
   }
 
+  @action
+  async passkeyLogin(mediation = "optional") {
+    try {
+      const response = await ajax("/session/passkey/challenge.json");
+
+      const publicKeyCredential = await getPasskeyCredential(
+        response.challenge,
+        (errorMessage) => this.dialog.alert(errorMessage),
+        mediation
+      );
+
+      if (publicKeyCredential) {
+        const authResult = await ajax("/session/passkey/auth.json", {
+          type: "POST",
+          data: { publicKeyCredential },
+        });
+
+        if (authResult && !authResult.error) {
+          window.location.reload();
+        } else {
+          this.dialog.alert(authResult.error);
+        }
+      }
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
   @action
   preloadLogin() {
     const prefillUsername = document.querySelector(
diff --git a/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs b/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs
index b0ba7ed72e6..6df03d904c9 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs
@@ -1,12 +1,12 @@
 <form id="login-form" method="post">
   <div id="credentials" class={{this.credentialsClass}}>
-    <div class="input-group">
+    <div class="input-group" {{did-insert this.passkeyConditionalLogin}}>
       <Input
         @value={{@loginName}}
         @type="email"
         id="login-account-name"
         class={{value-entered @loginName}}
-        autocomplete="username"
+        autocomplete={{if @canUsePasskeys "username webauthn" "username"}}
         autocorrect="off"
         autocapitalize="off"
         disabled={{@showSecondFactor}}
diff --git a/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.js b/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.js
index a3eed0d4f6a..728599ec43e 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.js
+++ b/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.js
@@ -34,6 +34,19 @@ export default class LocalLoginBody extends Component {
     return this.args.showSecondFactor || this.args.showSecurityKey;
   }
 
+  @action
+  passkeyConditionalLogin() {
+    if (
+      // eslint-disable-next-line no-undef
+      !PublicKeyCredential.isConditionalMediationAvailable ||
+      !this.args.canUsePasskeys
+    ) {
+      return;
+    }
+
+    this.args.passkeyLogin("conditional");
+  }
+
   @action
   togglePasswordMask() {
     this.maskPassword = !this.maskPassword;
diff --git a/app/assets/javascripts/discourse/app/components/passkey-login-button.gjs b/app/assets/javascripts/discourse/app/components/passkey-login-button.gjs
index 2730c70b0dd..014ffa6325e 100644
--- a/app/assets/javascripts/discourse/app/components/passkey-login-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/passkey-login-button.gjs
@@ -1,42 +1,10 @@
 import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
 import DButton from "discourse/components/d-button";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-import { getPasskeyCredential } from "discourse/lib/webauthn";
 
 export default class PasskeyLoginButton extends Component {
-  @service dialog;
-
-  @action
-  async passkeyLogin() {
-    try {
-      const response = await ajax("/session/passkey/challenge.json");
-
-      const publicKeyCredential = await getPasskeyCredential(
-        response.challenge,
-        (errorMessage) => this.dialog.alert(errorMessage)
-      );
-
-      const authResult = await ajax("/session/passkey/auth.json", {
-        type: "POST",
-        data: { publicKeyCredential },
-      });
-
-      if (authResult && !authResult.error) {
-        window.location.reload();
-      } else {
-        this.dialog.alert(authResult.error);
-      }
-    } catch (e) {
-      popupAjaxError(e);
-    }
-  }
-
   <template>
     <DButton
-      @action={{this.passkeyLogin}}
+      @action={{@passkeyLogin}}
       @icon="user"
       @label="login.passkey.name"
       class="btn btn-social passkey-login-button"
diff --git a/app/assets/javascripts/discourse/app/lib/webauthn.js b/app/assets/javascripts/discourse/app/lib/webauthn.js
index 9615babcb63..a48aedc28f3 100644
--- a/app/assets/javascripts/discourse/app/lib/webauthn.js
+++ b/app/assets/javascripts/discourse/app/lib/webauthn.js
@@ -94,13 +94,38 @@ export function getWebauthnCredential(
     });
 }
 
-export async function getPasskeyCredential(challenge, errorCallback) {
+// The webauthn API only supports one auth attempt at a time
+// We need this service to cancel the previous attempt when a new one is started
+class WebauthnAbortService {
+  controller = undefined;
+
+  signal() {
+    if (this.controller) {
+      const abortError = new Error("Cancelling pending webauthn call");
+      abortError.name = "AbortError";
+      this.controller.abort(abortError);
+    }
+
+    this.controller = new AbortController();
+    return this.controller.signal;
+  }
+}
+
+// Need to use a singleton here to reset the active webauthn ceremony
+// Inspired by the BaseWebAuthnAbortService in https://github.com/MasterKale/SimpleWebAuthn
+const WebauthnAbortHandler = new WebauthnAbortService();
+
+export async function getPasskeyCredential(
+  challenge,
+  errorCallback,
+  mediation = "optional"
+) {
   if (!isWebauthnSupported()) {
     return errorCallback(I18n.t("login.security_key_support_missing_error"));
   }
 
-  return navigator.credentials
-    .get({
+  try {
+    const credential = await navigator.credentials.get({
       publicKey: {
         challenge: stringToBuffer(challenge),
         // https://www.w3.org/TR/webauthn-2/#user-verification
@@ -109,22 +134,27 @@ export async function getPasskeyCredential(challenge, errorCallback) {
         // lib/discourse_webauthn/authentication_service.rb requires this flag too
         userVerification: "required",
       },
-    })
-    .then((credential) => {
-      return {
-        signature: bufferToBase64(credential.response.signature),
-        clientData: bufferToBase64(credential.response.clientDataJSON),
-        authenticatorData: bufferToBase64(
-          credential.response.authenticatorData
-        ),
-        credentialId: bufferToBase64(credential.rawId),
-        userHandle: bufferToBase64(credential.response.userHandle),
-      };
-    })
-    .catch((err) => {
-      if (err.name === "NotAllowedError") {
-        return errorCallback(I18n.t("login.security_key_not_allowed_error"));
-      }
-      errorCallback(err);
+      signal: WebauthnAbortHandler.signal(),
+      mediation,
     });
+
+    return {
+      signature: bufferToBase64(credential.response.signature),
+      clientData: bufferToBase64(credential.response.clientDataJSON),
+      authenticatorData: bufferToBase64(credential.response.authenticatorData),
+      credentialId: bufferToBase64(credential.rawId),
+      userHandle: bufferToBase64(credential.response.userHandle),
+    };
+  } catch (error) {
+    if (error.name === "NotAllowedError") {
+      return errorCallback(I18n.t("login.security_key_not_allowed_error"));
+    } else if (error.name === "AbortError") {
+      // no need to show an error when the cancelling a pending ceremony
+      // this happens when switching from the conditional method (username input autofill)
+      // to the optional method (login button) or vice versa
+      return null;
+    } else {
+      return errorCallback(error);
+    }
+  }
 }
diff --git a/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js
index 7eb113eaf19..85ce8213ad3 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js
@@ -43,3 +43,42 @@ acceptance("Modal - Login - With 2FA", function (needs) {
     assert.dom("#login-button").isFocused();
   });
 });
+
+acceptance("Modal - Login - With Passkeys enabled", function (needs) {
+  needs.settings({
+    experimental_passkeys: true,
+  });
+
+  needs.pretender((server, helper) => {
+    server.get(`/session/passkey/challenge.json`, () =>
+      helper.response({
+        challenge: "some-challenge",
+      })
+    );
+  });
+
+  test("Includes passkeys button and conditional UI", async function (assert) {
+    await visit("/");
+    await click("header .login-button");
+
+    assert.dom(".passkey-login-button").exists();
+
+    assert
+      .dom("#login-account-name")
+      .hasAttribute("autocomplete", "username webauthn");
+  });
+});
+
+acceptance("Modal - Login - With Passkeys disabled", function (needs) {
+  needs.settings({
+    experimental_passkeys: false,
+  });
+
+  test("Excludes passkeys button and conditional UI", async function (assert) {
+    await visit("/");
+    await click("header .login-button");
+
+    assert.dom(".passkey-login-button").doesNotExist();
+    assert.dom("#login-account-name").hasAttribute("autocomplete", "username");
+  });
+});