Skip to content

Migrate WebAuthn authentication workflow from jQuery to Vue

Similar to the work we have done with the WebAuthn registration, Frontend: Enable WebAuthn device registration w... (!111659 - merged), I propose to migrate the WebAuthn authentication (https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/authentication/webauthn/authenticate.js) to Vue.

This type of migration has many advantages:

  • more maintainable and commonly understood
  • reuse of Vue components (buttons, forms, alerts) that get updated and improve continously
  • opportunity to improve the look and feel
  • remove the jQuery dependency (large dependency)

Part of this:

  • remove old fixtures
  • update feature and e2e tests
  • remove unneeded helpers

Implementation Plan Draft:

Part 1 - Introduce Feature flag:

  • In authentication/webauthn/index.js add initWebauthnAuthenticateVue. Can be NO-OP initially.

  • In authentication/webauthn/index.js add initWebauthnAuthenticateLegacy.

  • Refactor initWebauthnAuthenticate to call either version depending on feature flag presence.

  • In each devise auth controller action (there are 4), inject feature flag to expose to frontend.

  • Create No-OP haml template called _totp_recovery_code_or_webauthn_vue.html.haml

  • In devise/shared/_totp_recovery_code_or_webauthn.html.haml#L19 use feature flag to conditionally render either _totp_recovery_code_or_webauthn.html.haml or _totp_recovery_code_or_webauthn_vue.html.haml

Part 2 - Implement Vue component:

  • _totp_recovery_code_or_webauthn_vue.html.haml will be a stripped file that only contain's the dom node too bootstrap the Vue app, and pass in params via the HTML5 data-attribute.
  • Create webauthn_authenticate.vue component to contain the text markup from the haml template AND the javascript logic from authentication/webauthn/authenticate.js

Part 3 - Update tests + testing

  • Update unit tests, feature and E2E tests
  • Manual regression testing.
Edited by Fernando Cardenas