How do you implement FIDO U2F using Webauthn APIs?

Question

I am currently using the window.u2f APIs to implement U2F two-factor authentication with my website. These are natively available in Firefox (when the about:config flag is enabled) and through Chromium with the u2f-api.js library.

My implementation uses window.u2f.register(...) during key setup and window.u2f.sign(...) during logins.

I have read that the new Web Authentication API is backwards compatible and supports FIDO U2F as well, however, I cannot find any information on how to implement it. All the samples only seem to demonstrate FIDO2 passwordless login, which is not what I want to do.

How do I implement FIDO U2F with the equivalent window.u2f.register and window.u2f.sign functions using the Web Authentication APIs?

Answer 1

Great question. Some incredible examples of U2F implementation can be found from Yubico's Github Account. More specifically, if you want a working example of registering a key and authenticating it using javascript on the client-side, implementation of the crypto on the backend with a Flask API, that example is located here. It supports both FIDO2 and the legacy U2F. Additionally, if you want a video of someone walking through the example step-by-step of how the implementation works, that is located here. I hope this helps :)

Answer 2

You can read this to understand what they mean by backward compatibility

Thing to be highlighted for you

CTAP1/U2F authenticator returns a command error or improperly formatted CBOR response. For any failure, platform may fall back to CTAP1/U2F protocol.

WebAuthn communicates with authenticator by CBOR messages. If authenticator doesn't support FIDO2, authenticator will return error code, then WebAuthn will talk with authenticator by U2F raw messages.

You can just implement WebAuthn like what you have read. Web Authentication API

You can refer this for your implementation