Fix passkey login error experience

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Login.razor

@@ -101,7 +101,7 @@
     {
         if (!string.IsNullOrEmpty(Input.Passkey?.Error))
         {
-            errorMessage = $"Error: Could not log in using the provided passkey: {Input.Passkey.Error}";
+            errorMessage = $"Error: {Input.Passkey.Error}";
             return;
         }
 

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Manage/Passkeys.razor

@@ -90,7 +90,7 @@ else
 
         if (!string.IsNullOrEmpty(Input.Error))
         {
-            RedirectManager.RedirectToCurrentPageWithStatus($"Error: Could not add a passkey: {Input.Error}", HttpContext);
+            RedirectManager.RedirectToCurrentPageWithStatus($"Error: {Input.Error}", HttpContext);
             return;
         }
 

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Shared/PasskeySubmit.razor.js

@@ -1,4 +1,10 @@
-async function fetchWithErrorHandling(url, options = {}) {
+const browserSupportsPasskeys =
+    typeof navigator.credentials !== 'undefined' &&
+    typeof window.PublicKeyCredential !== 'undefined' &&
+    typeof window.PublicKeyCredential.parseCreationOptionsFromJSON === 'function' &&
+    typeof window.PublicKeyCredential.parseRequestOptionsFromJSON === 'function';
+
+async function fetchWithErrorHandling(url, options = {}) {
     const response = await fetch(url, {
         credentials: 'include',
         ...options
@@ -45,7 +51,7 @@ customElements.define('passkey-submit', class extends HTMLElement {
         this.internals.form.addEventListener('submit', (event) => {
             if (event.submitter?.name === '__passkeySubmit') {
                 event.preventDefault();
-                this.obtainCredentialAndSubmit();
+                this.obtainAndSubmitCredential();
             }
         });
 
@@ -56,39 +62,49 @@ customElements.define('passkey-submit', class extends HTMLElement {
         this.abortController?.abort();
     }
 
-    async obtainCredentialAndSubmit(useConditionalMediation = false) {
+    async obtainCredential(useConditionalMediation, signal) {
+        if (!browserSupportsPasskeys) {
+            throw new Error('Some passkey features are missing. Please update your browser.');
+        }
+
+        if (this.attrs.operation === 'Create') {
+            return await createCredential(signal);
+        } else if (this.attrs.operation === 'Request') {
+            const email = new FormData(this.internals.form).get(this.attrs.emailName);
+            const mediation = useConditionalMediation ? 'conditional' : undefined;
+            return await requestCredential(email, mediation, signal);
+        } else {
+            throw new Error(`Unknown passkey operation '${this.attrs.operation}'.`);
+        }
+    }
+
+    async obtainAndSubmitCredential(useConditionalMediation = false) {
         this.abortController?.abort();
         this.abortController = new AbortController();
         const signal = this.abortController.signal;
         const formData = new FormData();
         try {
-            let credential;
-            if (this.attrs.operation === 'Create') {
-                credential = await createCredential(signal);
-            } else if (this.attrs.operation === 'Request') {
-                const email = new FormData(this.internals.form).get(this.attrs.emailName);
-                const mediation = useConditionalMediation ? 'conditional' : undefined;
-                credential = await requestCredential(email, mediation, signal);
-            } else {
-                throw new Error(`Unknown passkey operation '${operation}'.`);
-            }
+            const credential = await this.obtainCredential(useConditionalMediation, signal);
             const credentialJson = JSON.stringify(credential);
             formData.append(`${this.attrs.name}.CredentialJson`, credentialJson);
         } catch (error) {
-            if (error.name === 'AbortError') {
-                // Canceled by user action, do not submit the form
+            console.error(error);
+            if (useConditionalMediation || error.name === 'AbortError') {
+                // We do not relay the error to the user if:
+                // 1. We are attempting conditional mediation, meaning the user did not initiate the operation.
+                // 2. The user explicitly canceled the operation.
                 return;
             }
-            formData.append(`${this.attrs.name}.Error`, error.message);
-            console.error(error);
+            const errorMessage = error.name === 'NotAllowedError' ? 'Unable to authenticate.' : error.message;
+            formData.append(`${this.attrs.name}.Error`, errorMessage);
         }
         this.internals.setFormValue(formData);
         this.internals.form.submit();
     }
 
     async tryAutofillPasskey() {
-        if (this.attrs.operation === 'Request' && await PublicKeyCredential.isConditionalMediationAvailable()) {
-            await this.obtainCredentialAndSubmit(/* useConditionalMediation */ true);
+        if (browserSupportsPasskeys && this.attrs.operation === 'Request' && await PublicKeyCredential.isConditionalMediationAvailable?.()) {
+            await this.obtainAndSubmitCredential(/* useConditionalMediation */ true);
         }
     }
 });