feat: auto-submit one-time password (OTP) after entering

Parse-Dashboard/Authentication.js

@@ -30,13 +30,13 @@ function initialize(app, options) {
  otpCode: req.body.otpCode
  });
  if (!match.matchingUsername) {
- return cb(null, false, { message: 'Invalid username or password' });
- }
- if (match.otpMissing) {
- return cb(null, false, { message: 'Please enter your one-time password.' });
+ return cb(null, false, { message: JSON.stringify({ text: 'Invalid username or password' }) });
  }
  if (!match.otpValid) {
- return cb(null, false, { message: 'Invalid one-time password.' });
+ return cb(null, false, { message: JSON.stringify({ text: 'Invalid one-time password.', otpLength: match.otpMissingLength || 6}) });
+ }
+ if (match.otpMissingLength) {
+ return cb(null, false, { message: JSON.stringify({ text: 'Please enter your one-time password.', otpLength: match.otpMissingLength || 6 })});
  }
  cb(null, match.matchingUsername);
  })
@@ -91,7 +91,7 @@ function authenticate(userToTest, usernameOnly) {
  let appsUserHasAccessTo = null;
  let matchingUsername = null;
  let isReadOnly = false;
- let otpMissing = false;
+ let otpMissingLength = false;
  let otpValid = true;
 
  //they provided auth
@@ -104,17 +104,20 @@ function authenticate(userToTest, usernameOnly) {
  let usernameMatches = userToTest.name == user.user;
  if (usernameMatches && user.mfa && !usernameOnly) {
  if (!userToTest.otpCode) {
- otpMissing = true;
+ otpMissingLength = user.mfaDigits || 6;
  } else {
  const totp = new OTPAuth.TOTP({
  algorithm: user.mfaAlgorithm || 'SHA1',
- secret: OTPAuth.Secret.fromBase32(user.mfa)
+ secret: OTPAuth.Secret.fromBase32(user.mfa),
+ digits: user.mfaDigits,
+ period: user.mfaPeriod,
  });
  const valid = totp.validate({
  token: userToTest.otpCode
  });
  if (valid === null) {
  otpValid = false;
+ otpMissingLength = user.mfaDigits || 6;
  }
  }
  }
@@ -132,7 +135,7 @@ function authenticate(userToTest, usernameOnly) {
  return {
  isAuthenticated,
  matchingUsername,
- otpMissing,
+ otpMissingLength,
  otpValid,
  appsUserHasAccessTo,
  isReadOnly,

Parse-Dashboard/CLI/mfa.js

@@ -101,14 +101,14 @@ const showInstructions = ({ app, username, passwordCopied, secret, url, encrypt,
 
  if (secret) {
  console.log(
- `\n${getOrder()}. Open the authenticator app to scan the QR code above or enter this secret code:` + 
- `\n\n ${secret}` + 
+ `\n${getOrder()}. Open the authenticator app to scan the QR code above or enter this secret code:` +
+ `\n\n ${secret}` +
  '\n\n If the secret code generates incorrect one-time passwords, try this alternative:' +
- `\n\n ${url}` + 
+ `\n\n ${url}` +
  `\n\n${getOrder()}. Destroy any records of the QR code and the secret code to secure the account.`
  );
  }
- 
+
  if (encrypt) {
  console.log(
  `\n${getOrder()}. Make sure that "useEncryptedPasswords" is set to "true" in your dashboard configuration.` +
@@ -189,6 +189,12 @@ module.exports = {
  if (algorithm !== 'SHA1') {
  data.mfaAlgorithm = algorithm;
  }
+ if (digits !== 6) {
+ data.mfaDigits = digits;
+ }
+ if (period !== 30) {
+ data.mfaPeriod = period;
+ }
  showQR(data.url);
  }
 
@@ -214,12 +220,17 @@ module.exports = {
 
  const { url, secret } = generateSecret({ app, username, algorithm, digits, period });
  showQR(url);
-
  // Compose config
  const config = { mfa: secret };
  if (algorithm !== 'SHA1') {
  config.mfaAlgorithm = algorithm;
  }
+ if (digits !== 6) {
+ config.mfaDigits = digits;
+ }
+ if (period !== 30) {
+ config.mfaPeriod = period;
+ }
  showInstructions({ app, username, secret, url, config });
  }
 };

src/lib/tests/Authentication.test.js

@@ -10,7 +10,7 @@ jest.dontMock('bcryptjs');
 
 const Authentication = require('../../../Parse-Dashboard/Authentication');
 const apps = [{appId: 'test123'}, {appId: 'test789'}];
-const readOnlyApps = apps.map((app) => { 
+const readOnlyApps = apps.map((app) => {
  app.readOnly = true;
  return app;
 });
@@ -55,7 +55,7 @@ function createAuthenticationResult(isAuthenticated, matchingUsername, appsUserH
  matchingUsername,
  appsUserHasAccessTo,
  isReadOnly,
- otpMissing: false,
+ otpMissingLength: false,
  otpValid: true
  }
 }

src/login/Login.js

@@ -16,8 +16,16 @@ export default class Login extends React.Component {
  super();
 
  let errorDiv = document.getElementById('login_errors');
+ let otpLength = 6;
  if (errorDiv) {
  this.errors = errorDiv.innerHTML;
+ try {
+ const json = JSON.parse(this.errors)
+ this.errors = json.text
+ otpLength = json.otpLength;
+ } catch (e) {
+ /* */
+ }
  }
 
  this.state = {
@@ -30,6 +38,7 @@ export default class Login extends React.Component {
  this.inputRefUser = React.createRef();
  this.inputRefPass = React.createRef();
  this.inputRefMfa = React.createRef();
+ this.otpLength = otpLength;
  }
 
  componentDidMount() {
@@ -53,6 +62,15 @@ export default class Login extends React.Component {
  const {path} = this.props;
  const updateField = (field, e) => {
  this.setState({[field]: e.target.value});
+ if (field === 'otp' && e.target.value.length >= this.otpLength) {
+ const input = document.querySelectorAll('input');
+ for (const field of input) {
+ if (field.type === 'submit') {
+ field.click();
+ break;
+ }
+ }
+ }
  }
  const formSubmit = () => {
  sessionStorage.setItem('username', this.state.username);
@@ -96,6 +114,7 @@ export default class Login extends React.Component {
  <input
  name='otpCode'
  type='number'
+ onChange={e => updateField('otp', e)}
  ref={this.inputRefMfa}
  />
  } />