import $ from 'jquery'; import { template as lodashTemplate, omit } from 'lodash'; import importU2FLibrary from './util'; import U2FError from './error'; // Authenticate U2F (universal 2nd factor) 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 U2FAuthenticate { constructor(container, form, u2fParams, fallbackButton, fallbackUI) { this.u2fUtils = null; this.container = container; this.renderAuthenticated = this.renderAuthenticated.bind(this); this.renderError = this.renderError.bind(this); this.renderInProgress = this.renderInProgress.bind(this); this.renderTemplate = this.renderTemplate.bind(this); this.authenticate = this.authenticate.bind(this); this.start = this.start.bind(this); this.appId = u2fParams.app_id; this.challenge = u2fParams.challenge; this.form = form; this.fallbackButton = fallbackButton; this.fallbackUI = fallbackUI; if (this.fallbackButton) { this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this)); } // The U2F Javascript API v1.1 requires a single challenge, with // _no challenges per-request_. The U2F Javascript API v1.0 requires a // challenge per-request, which is done by copying the single challenge // into every request. // // In either case, we don't need the per-request challenges that the server // has generated, so we can remove them. // // Note: The server library fixes this behaviour in (unreleased) version 1.0.0. // This can be removed once we upgrade. // https://github.com/castle/ruby-u2f/commit/103f428071a81cd3d5f80c2e77d522d5029946a4 this.signRequests = u2fParams.sign_requests.map(request => omit(request, 'challenge')); this.templates = { setup: '#js-authenticate-u2f-setup', inProgress: '#js-authenticate-u2f-in-progress', error: '#js-authenticate-u2f-error', authenticated: '#js-authenticate-u2f-authenticated', }; } start() { return importU2FLibrary() .then(utils => { this.u2fUtils = utils; this.renderInProgress(); }) .catch(() => this.switchToFallbackUI()); } authenticate() { return this.u2fUtils.sign( this.appId, this.challenge, this.signRequests, response => { if (response.errorCode) { const error = new U2FError(response.errorCode, 'authenticate'); return this.renderError(error); } return this.renderAuthenticated(JSON.stringify(response)); }, 10, ); } renderTemplate(name, params) { const templateString = $(this.templates[name]).html(); const template = lodashTemplate(templateString); return this.container.html(template(params)); } renderInProgress() { this.renderTemplate('inProgress'); return this.authenticate(); } renderError(error) { this.renderTemplate('error', { error_message: error.message(), error_code: error.errorCode, }); return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress); } renderAuthenticated(deviceResponse) { this.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'); } }