Fix passkey login error experience #62480
Conversation
| return; | ||
| } | ||
| formData.append(`${this.attrs.name}.Error`, error.message); | ||
| console.error(error); | ||
| const errorMessage = error.name === 'NotAllowedError' ? 'Unable to authenticate.' : error.message; |
There was a problem hiding this comment.
I wonder if we should put something in the error message to indicate that there's more information in the developer console. And now that Login.razor doesn't add anything to the message mentioning "passkey", I wonder if we should mention that here.
| const errorMessage = error.name === 'NotAllowedError' ? 'Unable to authenticate.' : error.message; | |
| const errorMessage = error.name === 'NotAllowedError' ? 'Unable to authenticate with passkey. See developer console for more details.' : error.message; |
There was a problem hiding this comment.
Yeah, maybe we could improve the wording here. The thing about "Unable to authenticate with passkey" is that IMO it could be interpreted as if passkey was obtained, but we just couldn't authenticate with it (implying a possible error on the server). Whereas, what actually happened is that the authenticator couldn't authenticate the user, so no passkey was provided to the browser. Maybe something like "No passkey was provided by the authenticator" could work?
And regarding "See developer console for more details" - this is definitely helpful to the developer, but might it be unusual to display this to the user? The fact that this error shows up in a user-facing part of the UI makes me a little hesitant to put that there. I guess the developer could always remove that bit if they want.
...s/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Shared/PasskeySubmit.razor.js
Show resolved
Hide resolved
Fix passkey login error experience
Improves passkey login error messages and fixes an issue where passkey autofill failure can result in the page refreshing indefinitely.
Description
If the browser is missing certain passkey APIs, passkey autofill (conditional mediation) can fail. This causes the page to refresh to display the error, but the refresh itself causes passkey autofill to be attempted again. As a result, the page continues to refresh indefinitely.
In addition, displayed error messages are technical and not user-friendly. If an error does occur during passkey login, the user should have a clear understanding of the problem, and the technical details should be logged to the browser console rather than displayed in the UI.
This PR makes the following changes:
Before:
After:
Before:
After:
Fixes https://github.com/dotnet/aspnetcore-manualtests/issues/3693