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
addinitWebauthnAuthenticateVue
. Can be NO-OP initially. -
In
authentication/webauthn/index.js
addinitWebauthnAuthenticateLegacy
. -
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 fromauthentication/webauthn/authenticate.js
Part 3 - Update tests + testing
- Update unit tests, feature and E2E tests
- Manual regression testing.