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?

Wouldn't the standard definition have to answer your question? https://www.w3.org/TR/webauthn/ What I take from it is that formats are compatible, and the format seems to be a configuration option. — cslotty, Jan 08 '19 at 07:56
@kspearrin could you please let me know how you solved this? — LAX_DEV, May 10 '20 at 22:38

Cody · Answer 1 · 2018-12-28T03:46:01.480

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 :)

edited Dec 28 '18 at 03:46

answered Dec 27 '18 at 23:41

Cody

329
4
16

1

The yubico example repo that you linked appears to be using u2f-api.js for u2f, not webauthn. As mentioned in my question, this is what I am trying to move away from. – kspearrin Dec 28 '18 at 02:04

score 1 · Answer 2 · answered May 27 '19 at 12:19

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

LAX_DEV · Answer 3 · 2020-05-27T22:20:19.960

@kspearrin, here is the solution I got working.

I have users who were registered using U2F (u2f-api.js). Moving over to WebAuthn is actually straightforward. All the new registrations will use WebAuthn and all the verifications will use WebAuthn with extension parameter.

U2F

Registration - window.u2f.register
Verification - window.u2f.sign

WebAuthn

Registration - navigator.credentials.create
Verification - navigator.credentials.get

Compatibility for U2F registered users:

When using the navigator.credentials.get(), make sure to set the extensions.appid to the U2F appId parameter. In my case I use the origins.json URL.

https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredentialRequestOptions/extensions

Lastly, you will need to implement WebAuthn functions on both client and server side. There are many libraries available depending on your platform. The responses out of WebAuthn contains data in ArrayBuffer format. The only thing I had to figure out was properly transferring the ArrayBuffer data between client and server. I had to convert them to base64 before posting it to server and back. Basically you have to massage the data format to make it work.

How do you implement FIDO U2F using Webauthn APIs?

3 Answers3