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

100% Statements 27/27
75% Branches 3/4
100% Functions 8/8
100% Lines 27/27

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                      5x 5x 5x   5x 5x 5x 5x 5x     5x           5x       5x 1x   4x         5x     2x 2x     2x         5x 5x       2x 2x 2x 2x 2x       1x 1x 1x      
import { WEBAUTHN_AUTHENTICATE } from './constants';
import WebAuthnError from './error';
import WebAuthnFlow from './flow';
import { supported, convertGetParams, convertGetResponse } from './util';
 
// Authenticate WebAuthn devices for users to authenticate with.
//
// State Flow #1: setup -> in_progress -> authenticated -> POST to server
// State Flow #2: setup -> in_progress -> error -> setup
export default class WebAuthnAuthenticate {
  constructor(container, form, webauthnParams, fallbackButton, fallbackUI) {
    this.container = container;
    this.webauthnParams = convertGetParams(JSON.parse(webauthnParams.options));
    this.renderInProgress = this.renderInProgress.bind(this);
 
    this.form = form;
    this.fallbackButton = fallbackButton;
    this.fallbackUI = fallbackUI;
    Eif (this.fallbackButton) {
      this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
    }
 
    this.flow = new WebAuthnFlow(container, {
      inProgress: '#js-authenticate-token-2fa-in-progress',
      error: '#js-authenticate-token-2fa-error',
      authenticated: '#js-authenticate-token-2fa-authenticated',
    });
 
    this.container.on('click', '#js-token-2fa-try-again', this.renderInProgress);
  }
 
  start() {
    if (!supported()) {
      this.switchToFallbackUI();
    } else {
      this.renderInProgress();
    }
  }
 
  authenticate() {
    navigator.credentials
      .get({ publicKey: this.webauthnParams })
      .then((resp) => {
        const convertedResponse = convertGetResponse(resp);
        this.renderAuthenticated(JSON.stringify(convertedResponse));
      })
      .catch((err) => {
        this.flow.renderError(new WebAuthnError(err, WEBAUTHN_AUTHENTICATE));
      });
  }
 
  renderInProgress() {
    this.flow.renderTemplate('inProgress');
    this.authenticate();
  }
 
  renderAuthenticated(deviceResponse) {
    this.flow.renderTemplate('authenticated');
    const container = this.container[0];
    container.querySelector('#js-device-response').value = deviceResponse;
    container.querySelector(this.form).submit();
    this.fallbackButton.classList.add('hidden');
  }
 
  switchToFallbackUI() {
    this.fallbackButton.classList.add('hidden');
    this.container[0].classList.add('hidden');
    this.fallbackUI.classList.remove('hidden');
  }
}