[Draft] Add Reset Password Captcha

package.json

@@ -121,7 +121,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "auth0-js": "^9.23.3",
+    "auth0-js": "file:../auth0.js",
     "auth0-password-policies": "^1.0.2",
     "blueimp-md5": "^2.19.0",
     "classnames": "^2.3.2",

src/connection/captcha.js

@@ -11,8 +11,8 @@ import webApi from '../core/web_api';
  * @param {Number} id
  * @param {Boolean} isPasswordless Whether the captcha is being rendered in a passwordless flow
  */
-export function showMissingCaptcha(m, id, isPasswordless = false) {
-  const captchaConfig = isPasswordless ? l.passwordlessCaptcha(m) : l.captcha(m);
+export function showMissingCaptcha(m, id, isPasswordless = false, isPasswordReset = false) {
+  const captchaConfig = isPasswordReset ? l.resetPasswordCaptcha(m) : (isPasswordless ? l.passwordlessCaptcha(m) : l.captcha(m));
 
   const captchaError = (
     captchaConfig.get('provider') === 'recaptcha_v2' ||
@@ -42,8 +42,8 @@ export function showMissingCaptcha(m, id, isPasswordless = false) {
  *
  * @returns {Boolean} returns true if is required and missing the response from the user
  */
-export function setCaptchaParams(m, params, isPasswordless, fields) {
-  const captchaConfig = isPasswordless ? l.passwordlessCaptcha(m) : l.captcha(m);
+export function setCaptchaParams(m, params, isPasswordless, fields, isPasswordReset) {
+  const captchaConfig = isPasswordReset ? l.resetPasswordCaptcha(m) : (isPasswordless ? l.passwordlessCaptcha(m) : l.captcha(m));
   const isCaptchaRequired = captchaConfig && captchaConfig.get('required');
 
   if (!isCaptchaRequired) {
@@ -68,7 +68,17 @@ export function setCaptchaParams(m, params, isPasswordless, fields) {
  * @param {boolean} wasInvalid A boolean indicating if the previous captcha was invalid.
  * @param {Function} [next] A callback.
  */
-export function swapCaptcha(id, isPasswordless, wasInvalid, next) {
+export function swapCaptcha(id, isPasswordless, wasInvalid, next, isPasswordReset) {
+  if (isPasswordReset) {
+    return webApi.getResetPasswordChallenge(id, (err, newCaptcha) => {
+      if (!err && newCaptcha) {
+        swap(updateEntity, 'lock', id, l.setResetPasswordCaptcha, newCaptcha, wasInvalid);
+      }
+      if (next) {
+        next();
+      }
+    });
+  }
   if (isPasswordless) {
     return webApi.getPasswordlessChallenge(id, (err, newCaptcha) => {
       if (!err && newCaptcha) {

src/connection/database/actions.js

@@ -244,6 +244,11 @@ export function resetPassword(id) {
       email: c.getFieldValue(m, 'email')
     };
 
+    const isCaptchaValid = setCaptchaParams(m, params, false, [], true);
+    if (!isCaptchaValid) {
+      return showMissingCaptcha(m, id, false, true);
+    }
+
     webApi.resetPassword(id, params, (error, ...args) => {
       if (error) {
         setTimeout(() => resetPasswordError(id, error), 250);

src/connection/database/reset_password.jsx

@@ -11,6 +11,7 @@ import * as l from '../../core/index';
 import { swap, updateEntity } from '../../store/index';
 import { isEmail, setEmail } from '../../field/email';
 import { getField } from '../../field';
+import CaptchaPane from '../../field/captcha/captcha_pane';
 
 class Component extends React.Component {
   componentDidMount() {
@@ -33,13 +34,22 @@ class Component extends React.Component {
     const headerText = i18n.html('forgotPasswordInstructions') || null;
     const header = headerText && <p>{headerText}</p>;
 
+    const captchaPane =
+      l.resetPasswordCaptcha(model) &&
+      l.resetPasswordCaptcha(model).get('required') ? (
+        <CaptchaPane i18n={i18n} lock={model} onReload={() => swapCaptcha(l.id(model), false, false, null, true)} />
+      ) : null;
+
     return (
-      <ResetPasswordPane
-        emailInputPlaceholder={i18n.str('emailInputPlaceholder')}
-        header={header}
-        i18n={i18n}
-        lock={model}
-      />
+      <div>
+        <ResetPasswordPane
+          emailInputPlaceholder={i18n.str('emailInputPlaceholder')}
+          header={header}
+          i18n={i18n}
+          lock={model}
+        />
+        {captchaPane}
+      </div>
     );
   }
 }

src/core/index.js

@@ -426,6 +426,11 @@ export function setPasswordlessCaptcha(m, value, wasInvalid) {
   return set(m, 'passwordlessCaptcha', Immutable.fromJS(value));
 }
 
+export function setResetPasswordCaptcha(m, value, wasInvalid) {
+  m = captchaField.reset(m, wasInvalid);
+  return set(m, 'resetPasswordCaptcha', Immutable.fromJS(value));
+}
+
 export function captcha(m) {
   return get(m, 'captcha');
 }
@@ -434,6 +439,10 @@ export function passwordlessCaptcha(m) {
   return get(m, 'passwordlessCaptcha');
 }
 
+export function resetPasswordCaptcha(m) {
+  return get(m, 'resetPasswordCaptcha');
+}
+
 export function prefill(m) {
   return get(m, 'prefill', {});
 }
@@ -585,7 +594,7 @@ export function loginErrorMessage(m, error, type) {
         currentCaptcha.get('provider') === 'recaptcha_enterprise' ||
         currentCaptcha.get('provider') === 'hcaptcha' ||
         currentCaptcha.get('provider') === 'auth0_v2' ||
-        captchaConfig.get('provider') === 'friendly_captcha'
+        currentCaptcha.get('provider') === 'friendly_captcha'
       )) {
       code = 'invalid_recaptcha';
     }

src/core/remote_data.js

@@ -6,7 +6,7 @@ import * as l from './index';
 import { isADEnabled } from '../connection/enterprise'; // shouldn't depend on this
 import sync, { isSuccess } from '../sync';
 import webApi from './web_api';
-import { setCaptcha, setPasswordlessCaptcha } from '../core/index';
+import { setCaptcha, setPasswordlessCaptcha, setResetPasswordCaptcha } from '../core/index';
 
 export function syncRemoteData(m) {
   if (l.useTenantInfo(m)) {
@@ -69,6 +69,15 @@ export function syncRemoteData(m) {
     successFn: setPasswordlessCaptcha
   });
 
+  m = sync(m, 'resetPasswordCaptcha', {
+    syncFn: (m, cb) => {
+      webApi.getResetPasswordChallenge(m.get('id'), (err, r) => {
+        cb(null, r);
+      });
+    },
+    successFn: setResetPasswordCaptcha
+  });
+
 
   return m;
 }

src/core/web_api.js

@@ -64,6 +64,14 @@ class Auth0WebAPI {
     return this.clients[lockID].getPasswordlessChallenge(callback);
   }
 
+  getResetPasswordChallenge(lockID, callback) {
+    return this.clients[lockID].getResetPasswordChallenge(callback);
+  }
+
+  getResetPasswordChallenge(lockID, callback) {
+    return this.clients[lockID].getResetPasswordChallenge(callback);
+  }
+
   getSSOData(lockID, ...args) {
     return this.clients[lockID].getSSOData(...args);
   }

src/core/web_api/p2_api.js

@@ -199,6 +199,10 @@ class Auth0APIClient {
     return this.client.client.passwordless.getChallenge(...params);
   }
 
+  getResetPasswordChallenge(...params) {
+    return this.client.client.dbConnection.getChallenge(...params);
+  }
+
   getUserCountry(cb) {
     return this.client.client.getUserCountry(cb);
   }

src/field/captcha/captcha_pane.jsx

@@ -11,9 +11,9 @@ import { ThirdPartyCaptcha, isThirdPartyCaptcha } from './third_party_captcha';
 
 export default class CaptchaPane extends React.Component {
   render() {
-    const { i18n, lock, onReload, isPasswordless } = this.props;
+    const { i18n, lock, onReload, isPasswordless, isPasswordReset } = this.props;
     const lockId = l.id(lock);
-    const captcha = isPasswordless ? l.passwordlessCaptcha(lock) : l.captcha(lock);
+    const captcha = isPasswordReset ? l.resetPasswordCaptcha(lock) : (isPasswordless ? l.passwordlessCaptcha(lock) : l.captcha(lock));
     const value = getFieldValue(lock, 'captcha');
     const isValid = !isFieldVisiblyInvalid(lock, 'captcha');
     const provider = captcha.get('provider');