Merge pull request #548 from redpwn/fix/double-recaptcha

fix(recaptcha): prevent double recaptcha initialization

Author: ginkoid

client/src/components/recaptcha.js

@@ -15,6 +15,12 @@ const loadRecaptchaScript = () => new Promise((resolve, reject) => {
 const recaptchaQueue = []
 let recaptchaPromise
 let recaptchaId
+const handleRecaptchaNext = async () => {
+  if (recaptchaQueue.length === 0) {
+    return
+  }
+  (await loadRecaptcha()).execute(recaptchaId)
+}
 const handleRecaptchaDone = async (code) => {
   (await loadRecaptcha()).reset(recaptchaId)
   const { resolve } = recaptchaQueue.shift()
@@ -27,24 +33,14 @@ const handleRecaptchaError = async (err) => {
   reject(err)
   handleRecaptchaNext()
 }
-const handleRecaptchaNext = async () => {
-  if (recaptchaQueue.length === 0) {
-    return
-  }
-  (await loadRecaptcha()).execute(recaptchaId)
-}
 const loadRecaptcha = async () => {
-  if (!recaptchaPromise) {
-    recaptchaPromise = loadRecaptchaScript()
-  }
-  if (!recaptchaId) {
-    recaptchaId = (await recaptchaPromise).render({
-      theme: 'dark',
-      sitekey: config.recaptcha.siteKey,
-      callback: handleRecaptchaDone,
-      'error-callback': handleRecaptchaError
-    })
-  }
+  recaptchaPromise = recaptchaPromise ?? loadRecaptchaScript()
+  recaptchaId = recaptchaId ?? (await recaptchaPromise).render({
+    theme: 'dark',
+    sitekey: config.recaptcha.siteKey,
+    callback: handleRecaptchaDone,
+    'error-callback': handleRecaptchaError
+  })
   return recaptchaPromise
 }
 const requestRecaptchaCode = () => new Promise((resolve, reject) => {
@@ -83,7 +79,7 @@ export default (action) => {
       loadRecaptcha()
     }
   }, [recaptchaEnabled])
-  const callback = useCallback(requestRecaptchaCode, [recaptchaEnabled])
+  const callback = useCallback(requestRecaptchaCode, [])
   if (recaptchaEnabled) {
     return callback
   }

client/src/index.js

@@ -93,8 +93,8 @@ export default withStyles({
   '@global body': {
     overflowX: 'hidden'
   },
+  // we show the google legal notice on each protected form
   '@global .grecaptcha-badge': {
-    // we show the google legal notice on each protected form
     visibility: 'hidden'
   },
   // cirrus makes recaptcha position the modal incorrectly, so we reset it here