Support registering a new authenticator

This adds Yubico's FIDO2 library and two APIs for working with the
"navigator.credentials.create()" function in JavaScript. The GET
API uses the library to generate options for the "create()" function,
and the POST API decodes and verifies the resulting credential. While
the options and response are dict-like, CBOR is necessary to encode
some of the byte-level values, which can't be represented in JSON.

Much of the code here is based on the Yubico library example [1][2].

Implementation notes:

- There are definitely better ways to alert the user about failure, but
window.alert() will do for the time being. Using location.reload() is
also a bit jarring if the page scrolls, but not a major issue.

- Ideally we would use window.fetch() to do AJAX calls, but we don't
have a polyfill for this, and we use $.ajax() elsewhere [3]. We need
to do a few weird tricks [6] to stop jQuery trashing the data.

- The FIDO2 server doesn't serve web requests; it's just a "server" in
the sense of WebAuthn terminology. It lives in its own module, since it
needs to be initialised with the app / config.

- $.ajax returns a promise-like object. Although we've used ".fail()"
elsewhere [3], I couldn't find a stub object that supports it, so I've
gone for ".catch()", and used a Promise stub object in tests.

- WebAuthn only works over HTTPS, but there's an exception for "localhost"
[4].  However, the library is a bit too strict [5], so we have to disable
origin verification to avoid needing HTTPS for dev work.

[1]: c42d9628a4/examples/server/server.py
[2]: c42d9628a4/examples/server/static/register.html
[3]: 91453d3639/app/assets/javascripts/updateContent.js (L33)
[4]: https://stackoverflow.com/questions/55971593/navigator-credentials-is-null-on-local-server
[5]: c42d9628a4/fido2/rpid.py (L69)
[6]: https://stackoverflow.com/questions/12394622/does-jquery-ajax-or-load-allow-for-responsetype-arraybuffer

tests/javascripts/registerSecurityKey.test.js

@@ -1,26 +1,147 @@
 beforeAll(() => {
-  require('../../app/assets/javascripts/registerSecurityKey.js');
+  window.CBOR = require('../../node_modules/cbor-js/cbor.js')
+  require('../../app/assets/javascripts/registerSecurityKey.js')
+
+  // disable console.error() so we don't see it in test output
+  // you might need to comment this out to debug some failures
+  jest.spyOn(console, 'error').mockImplementation(() => {})
 })
 
 afterAll(() => {
-  require('./support/teardown.js');
+  require('./support/teardown.js')
 })
 
 describe('Register security key', () => {
+  let button
+
   beforeEach(() => {
     document.body.innerHTML = `
       <a href="#" role="button" draggable="false" class="govuk-button govuk-button--secondary" data-module="register-security-key">
         Register a key
-      </a>`;
+      </a>`
+
+    button = document.querySelector('[data-module="register-security-key"]')
+    window.GOVUK.modules.start()
   })
 
-  test('it is not implemented yet', () => {
-    window.GOVUK.modules.start();
-    jest.spyOn(window, 'alert').mockImplementation(() => {});
+  test('creates a new credential and reloads', (done) => {
+    // pretend window.navigator.credentials exists in test env
+    // defineProperty is used as window.navigator is read-only
+    Object.defineProperty(window.navigator, 'credentials', {
+      value: {
+        // fake PublicKeyCredential response from WebAuthn API
+        // both of the nested properties are Array(Buffer) objects
+        create: (options) => {
+          expect(options).toEqual('options')
 
-    button = document.querySelector('[data-module="register-security-key"]');
-    button.click();
+          return Promise.resolve({
+            response: {
+              attestationObject: [1, 2, 3],
+              clientDataJSON: [4, 5, 6],
+            }
+          })
+        }
+      },
+      // allow global property to be redefined in other tests
+      writable: true,
+    })
 
-    expect(window.alert).toBeCalledWith('not implemented')
+    // pretend window.location exists in test env
+    // defineProperty is used as window.location is read-only
+    Object.defineProperty(window, 'location', {
+      // signal that the async promise chain was called
+      value: { reload: () => done() },
+      // allow global property to be redefined in other tests
+      writable: true,
+    })
+
+    jest.spyOn(window.$, 'ajax').mockImplementation((options) => {
+      // initial fetch of options from the server
+      if (!options.method) {
+        // options from the server are CBOR-encoded
+        webauthnOptions = window.CBOR.encode('options')
+        return Promise.resolve(webauthnOptions)
+
+      // subsequent POST of credential data to server
+      } else {
+        decodedData = window.CBOR.decode(options.data)
+        expect(decodedData.clientDataJSON).toEqual(new Uint8Array([4,5,6]))
+        expect(decodedData.attestationObject).toEqual(new Uint8Array([1,2,3]))
+        expect(options.headers['X-CSRFToken']).toBe()
+        return Promise.resolve()
+      }
+    })
+
+    button.click()
+  })
+
+  test('alerts if fetching WebAuthn options fails', (done) => {
+    jest.spyOn(window.$, 'ajax').mockImplementation((options) => {
+      return Promise.reject('error')
+    })
+
+    jest.spyOn(window, 'alert').mockImplementation((msg) => {
+      done()
+      expect(msg).toEqual('Error during registration. Please try again.')
+    })
+
+    button.click()
+  })
+
+  test('alerts if sending WebAuthn credentials fails', (done) => {
+    Object.defineProperty(window.navigator, 'credentials', {
+      value: {
+        // fake PublicKeyCredential response from WebAuthn API
+        create: (options) => {
+          return Promise.resolve({ response: {} })
+        }
+      },
+      // allow global property to be redefined in other tests
+      writable: true,
+    })
+
+    jest.spyOn(window.$, 'ajax').mockImplementation((options) => {
+      // initial fetch of options from the server
+      if (!options.method) {
+        webauthnOptions = window.CBOR.encode('options')
+        return Promise.resolve(webauthnOptions)
+
+      // subsequent POST of credential data to server
+      } else {
+        return Promise.reject('error')
+      }
+    })
+
+    jest.spyOn(window, 'alert').mockImplementation((msg) => {
+      done()
+      expect(msg).toEqual('Error during registration. Please try again.')
+    })
+
+    button.click()
+  })
+
+  test('alerts if comms with the authenticator fails', (done) => {
+    Object.defineProperty(window.navigator, 'credentials', {
+      value: {
+        create: () => {
+          return Promise.reject(new DOMException('error'))
+        }
+      },
+      // allow global property to be redefined in other tests
+      writable: true,
+    })
+
+    jest.spyOn(window.$, 'ajax').mockImplementation((options) => {
+      // initial fetch of options from the server
+      webauthnOptions = window.CBOR.encode('options')
+      return Promise.resolve(webauthnOptions)
+    })
+
+    jest.spyOn(window, 'alert').mockImplementation((msg) => {
+      done()
+      expect(msg).toEqual('Error communicating with device.\n\nerror')
+    })
+
+    button.click()
   })
 })