Hi hetin,
1) The isConditionalMediationSupported() call is needed if you intend to use the autofill UI in your WebAuthn implementation. It's not strictly necessary to check before the navigator.credentials.create() call, but you might run into a confusing user experience if you create credentials intending to primarily use the autofill UI flow, and then that turns out to not be supported by the user's device or browser.
If you do not intend to use the autofill UI flow, or if you intend to support both the autofill UI and the modal UI flow, then you do not need to check isConditionalMediationSupported().
2) Again, it depends on what UI flows you intend to use.
- If you intend to only support username-less flows, then you need the credentials to be discoverable (resident), so you need to set residentKey: "required".
- If you intend to support a user flow where the user first types a username and then is prompted for a WebAuthn credential, then discoverable keys are not required and you can set residentKey: "preferred" or "discouraged". With residentKey: "preferred", users with compatible devices and browsers will able to use the autofill UI as well as username-less flows, and users with incompatible devices can fall back on typing their username. With residentKey: "discouraged", assume that most users will need to type a username during the login flow.
- If you do not intend to use autofill UI or username-less flows, you can set residentKey: "discouraged".
Hope that helps.
Emil Lundberg
Software Engineer | Yubico