Resolve "2FA should not attempt to use U2F in unsupported browsers"

app/assets/javascripts/u2f/authenticate.js

@@ -11,7 +11,6 @@ export default class U2FAuthenticate {
   constructor(container, form, u2fParams, fallbackButton, fallbackUI) {
     this.u2fUtils = null;
     this.container = container;
-    this.renderNotSupported = this.renderNotSupported.bind(this);
     this.renderAuthenticated = this.renderAuthenticated.bind(this);
     this.renderError = this.renderError.bind(this);
     this.renderInProgress = this.renderInProgress.bind(this);
@@ -41,7 +40,6 @@ export default class U2FAuthenticate {
     this.signRequests = u2fParams.sign_requests.map(request => _(request).omit('challenge'));
 
     this.templates = {
-      notSupported: '#js-authenticate-u2f-not-supported',
       setup: '#js-authenticate-u2f-setup',
       inProgress: '#js-authenticate-u2f-in-progress',
       error: '#js-authenticate-u2f-error',
@@ -55,7 +53,7 @@ export default class U2FAuthenticate {
         this.u2fUtils = utils;
         this.renderInProgress();
       })
-      .catch(() => this.renderNotSupported());
+      .catch(() => this.switchToFallbackUI());
   }
 
   authenticate() {
@@ -96,10 +94,6 @@ export default class U2FAuthenticate {
     this.fallbackButton.classList.add('hidden');
   }
 
-  renderNotSupported() {
-    return this.renderTemplate('notSupported');
-  }
-
   switchToFallbackUI() {
     this.fallbackButton.classList.add('hidden');
     this.container[0].classList.add('hidden');

app/views/u2f/_authenticate.html.haml

@@ -2,9 +2,6 @@
 %a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' } Sign in via 2FA code
 
 -# haml-lint:disable InlineJavaScript
-%script#js-authenticate-u2f-not-supported{ type: "text/template" }
-  %p Your browser doesn't support U2F. Please use Google Chrome desktop (version 41 or newer).
-
 %script#js-authenticate-u2f-in-progress{ type: "text/template" }
   %p Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.
 

changelogs/unreleased/40005-u2f-unspported-browsers.yml

+---
+title: Improve U2F workflow when using unsupported browsers
+merge_request: 19938
+author: Jan Beckmann
+type: changed

spec/javascripts/u2f/authenticate_spec.js

@@ -6,7 +6,7 @@ import MockU2FDevice from './mock_u2f_device';
 describe('U2FAuthenticate', function () {
   preloadFixtures('u2f/authenticate.html.raw');
 
-  beforeEach((done) => {
+  beforeEach(() => {
     loadFixtures('u2f/authenticate.html.raw');
     this.u2fDevice = new MockU2FDevice();
     this.container = $('#js-authenticate-u2f');
@@ -19,9 +19,32 @@ describe('U2FAuthenticate', function () {
       document.querySelector('#js-login-2fa-device'),
       document.querySelector('.js-2fa-form'),
     );
+  });
+
+  describe('with u2f unavailable', () => {
+    beforeEach(() => {
+      spyOn(this.component, 'switchToFallbackUI');
+      this.oldu2f = window.u2f;
+      window.u2f = null;
+    });
+
+    afterEach(() => {
+      window.u2f = this.oldu2f;
+    });
 
+    it('falls back to normal 2fa', (done) => {
+      this.component.start().then(() => {
+        expect(this.component.switchToFallbackUI).toHaveBeenCalled();
+        done();
+      }).catch(done.fail);
+    });
+  });
+
+  describe('with u2f available', () => {
+    beforeEach((done) => {
       // bypass automatic form submission within renderAuthenticated
       spyOn(this.component, 'renderAuthenticated').and.returnValue(true);
+      this.u2fDevice = new MockU2FDevice();
 
       this.component.start().then(done).catch(done.fail);
     });
@@ -61,4 +84,5 @@ describe('U2FAuthenticate', function () {
         expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}');
       });
     });
+  });
 });