Check webauthn support when registering security keys (#8146)

app/assets/javascripts/discourse/controllers/second-factor-add-security-key.js.es6

@@ -1,5 +1,9 @@
 import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { bufferToBase64, stringToBuffer } from "discourse/lib/webauthn";
+import {
+  bufferToBase64,
+  stringToBuffer,
+  isWebauthnSupported
+} from "discourse/lib/webauthn";
 
 // model for this controller is user.js.es6
 export default Ember.Controller.extend(ModalFunctionality, {
@@ -11,7 +15,8 @@ export default Ember.Controller.extend(ModalFunctionality, {
     this.setProperties({
       errorMessage: null,
       loading: true,
-      securityKeyName: I18n.t("user.second_factor.security_key.default_name")
+      securityKeyName: I18n.t("user.second_factor.security_key.default_name"),
+      webauthnUnsupported: !isWebauthnSupported()
     });
 
     this.model
@@ -23,7 +28,9 @@ export default Ember.Controller.extend(ModalFunctionality, {
         }
 
         this.setProperties({
-          errorMessage: null,
+          errorMessage: isWebauthnSupported()
+            ? null
+            : I18n.t("login.security_key_support_missing_error"),
           loading: false,
           challenge: response.challenge,
           relayingParty: {

app/assets/javascripts/discourse/lib/webauthn.js.es6

@@ -11,13 +11,17 @@ export function bufferToBase64(buffer) {
   return btoa(String.fromCharCode(...new Uint8Array(buffer)));
 }
 
+export function isWebauthnSupported() {
+  return typeof PublicKeyCredential !== "undefined";
+}
+
 export function getWebauthnCredential(
   challenge,
   allowedCredentialIds,
   successCallback,
   errorCallback
 ) {
-  if (typeof PublicKeyCredential === "undefined") {
+  if (!isWebauthnSupported()) {
     return errorCallback(I18n.t("login.security_key_support_missing_error"));
   }
 

app/assets/javascripts/discourse/templates/modal/second-factor-add-security-key.hbs

@@ -22,9 +22,11 @@
 
     <div class="control-group">
       <div class="controls">
-        {{d-button action=(action "registerSecurityKey")
-          class="btn btn-primary add-totp"
-          label="user.second_factor.security_key.register"}}
+        {{#unless webauthnUnsupported}}
+          {{d-button action=(action "registerSecurityKey")
+            class="btn btn-primary add-totp"
+            label="user.second_factor.security_key.register"}}
+        {{/unless}}
       </div>
     </div>
   {{/conditional-loading-spinner}}