MasterKale / SimpleWebAuthn

WebAuthn, Simplified. A collection of TypeScript-first libraries for simpler WebAuthn integration. Supports modern browsers, Node, Deno, and more.
https://simplewebauthn.dev
MIT License
1.63k stars 137 forks source link

Support the 'mediation' credential request option #209

Closed Manduro closed 2 years ago

Manduro commented 2 years ago

Right now the browser's startAuthentication method only passes the publicKey option to navigator.credentials.get: https://github.com/MasterKale/SimpleWebAuthn/blob/5ea1b6834b540dad6f733011556989adc66e569e/packages/browser/src/methods/startAuthentication.ts#L40

Besides the publicKey option, I'd like to pass the mediation option which is documented here: https://w3c.github.io/webappsec-credential-management/#enumdef-credentialmediationrequirement

Especially the conditional value will be useful as it enables browsers to present an autofill option in a login form. See https://github.com/w3c/webauthn/wiki/Explainer:-WebAuthn-Conditional-UI. Safari 16 might be the first to support this to autofill passkeys. Some info about this is available here: https://developer.apple.com/videos/play/wwdc2022/10092/?time=1036

MasterKale commented 2 years ago

Thanks for opening this, @Manduro. I've known about conditional UI for quite a while now, but until WWDC it still felt like something being incubated in Chrome Canacry. The demonstration of support for it in macOS Ventura established an actual deadline for anything that'd support it. As such I'm now going to prioritize adding support for it.

MasterKale commented 2 years ago

I've made some progress on this the last couple of days 👀

Chrome Canary 105:

Screen Shot 2022-06-17 at 4 18 17 PM

Safari in macOS Ventura Beta:

FVfczGlUsAI7kYb

I think I've got a good idea now of how I want to support this feature within @simplewebauthn/browser

MasterKale commented 2 years ago

Conditional UI is now supported in @simplewebauthn/browser@5.3.0. I went with "browser autofill" as a simpler way of communicating what "Conditional UI" gets you.

I've added docs as well to show how to use it:

https://simplewebauthn.dev/docs/packages/browser/#browser-autofill-aka-conditional-ui