All files / app/assets/javascripts/authentication/webauthn register.js

100% Statements 19/19
100% Branches 4/4
100% Functions 9/9
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79                      8x 8x 8x   8x             8x       10x       2x   8x         6x       3x 3x       8x 8x       6x         6x       2x     2x       2x               2x      
import { __ } from '~/locale';
import WebAuthnError from './error';
import WebAuthnFlow from './flow';
import { supported, isHTTPS, convertCreateParams, convertCreateResponse } from './util';
 
// Register WebAuthn devices for users to authenticate with.
//
// State Flow #1: setup -> in_progress -> registered -> POST to server
// State Flow #2: setup -> in_progress -> error -> setup
export default class WebAuthnRegister {
  constructor(container, webauthnParams) {
    this.container = container;
    this.renderInProgress = this.renderInProgress.bind(this);
    this.webauthnOptions = convertCreateParams(webauthnParams.options);
 
    this.flow = new WebAuthnFlow(container, {
      message: '#js-register-2fa-message',
      setup: '#js-register-token-2fa-setup',
      error: '#js-register-token-2fa-error',
      registered: '#js-register-token-2fa-registered',
    });
 
    this.container.on('click', '#js-token-2fa-try-again', this.renderInProgress);
  }
 
  start() {
    if (!supported()) {
      // we show a special error message when the user visits the site
      // using a non-ssl connection as this makes WebAuthn unavailable in
      // any case, regardless of the used browser
      this.renderNotSupported(!isHTTPS());
    } else {
      this.renderSetup();
    }
  }
 
  register() {
    navigator.credentials
      .create({
        publicKey: this.webauthnOptions,
      })
      .then((cred) => this.renderRegistered(JSON.stringify(convertCreateResponse(cred))))
      .catch((err) => this.flow.renderError(new WebAuthnError(err, 'register')));
  }
 
  renderSetup() {
    this.flow.renderTemplate('setup');
    this.container.find('#js-setup-token-2fa-device').on('click', this.renderInProgress);
  }
 
  renderInProgress() {
    this.flow.renderTemplate('message', {
      message: __(
        'Trying to communicate with your device. Plug it in (if needed) and press the button on the device now.',
      ),
    });
    return this.register();
  }
 
  renderRegistered(deviceResponse) {
    this.flow.renderTemplate('registered');
    // Prefer to do this instead of interpolating using Underscore templates
    // because of JSON escaping issues.
    this.container.find('#js-device-response').val(deviceResponse);
  }
 
  renderNotSupported(noHttps) {
    const message = noHttps
      ? __(
          'WebAuthn only works with HTTPS-enabled websites. Contact your administrator for more details.',
        )
      : __(
          "Your browser doesn't support WebAuthn. Please use a supported browser, e.g. Chrome (67+) or Firefox (60+).",
        );
 
    this.flow.renderTemplate('message', { message });
  }
}