Captcha validation

Author: razvanMiu

packages/next-drupal/src/components/utils/Widgets/CaptchaWidget.tsx

@@ -4,10 +4,8 @@ import cx from 'classnames'
 
 import WidgetError from '../../theme/Errors/WidgetError'
 
-const FRIENDLYCAPTCHA_SITEKEY: string = process?.env
-  ?.NEXT_PUBLIC_FRIENDLYCAPTCHA_SITEKEY
-  ? process.env.NEXT_PUBLIC_FRIENDLYCAPTCHA_SITEKEY
-  : ''
+const FRIENDLYCAPTCHA_SITEKEY: string =
+  process.env.NEXT_PUBLIC_FRIENDLYCAPTCHA_SITEKEY || ''
 
 export function CaptchaWidget({ id, InputProps = {}, error }: any) {
   const captchaRef: any = useRef(null)
@@ -28,7 +26,7 @@ export function CaptchaWidget({ id, InputProps = {}, error }: any) {
             onChange.current(value)
           },
           errorCallback: () => {
-            onChange.current(true)
+            onChange.current()
           },
           sitekey: FRIENDLYCAPTCHA_SITEKEY,
         })

packages/next-drupal/src/config/Validations.tsx

@@ -12,19 +12,60 @@ const defaultTextValidation = ({ name, required }) => {
   return validation
 }
 
+const emailValidation = ({ name, required }) => {
+  let validation = yup.string().email('Must be a valid email')
+  if (required) {
+    validation = validation.required(`${capitalize(name)} is required`)
+  }
+  return validation
+}
+
+const friendlycaptchaValidation = () => {
+  return yup
+    .string()
+    .test('captcha', 'Captcha verification is invalid', async (solution) => {
+      if (process.env.NODE_ENV === 'development') {
+        return true
+      }
+      const body = new FormData()
+      body.append(
+        'secret',
+        process.env.NEXT_PUBLIC_FRIENDLYCAPTCHA_SECRET || '',
+      )
+      body.append(
+        'sitekey',
+        process.env.NEXT_PUBLIC_FRIENDLYCAPTCHA_SITEKEY || '',
+      )
+      body.append('solution', solution || '')
+
+      try {
+        const response = await fetch(
+          'https://api.friendlycaptcha.com/api/v1/siteverify',
+          {
+            body,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            method: 'POST',
+          },
+        )
+        const result: any = await response.text()
+        if (result?.success) {
+          return true
+        }
+        return false
+      } catch (e) {
+        return false
+      }
+    })
+    .required('Captcha verification is required')
+}
+
 // Validations mapping
 export const validationsMapping = {
   type: {
-    captcha: () => {
-      return yup.string().required('Captcha verification is required')
-    },
-    email: ({ name, required }) => {
-      let validation = yup.string().email('Must be a valid email')
-      if (required) {
-        validation = validation.required(`${capitalize(name)} is required`)
-      }
-      return validation
-    },
+    email: emailValidation,
+    headless_captcha: friendlycaptchaValidation,
     text: defaultTextValidation,
     textarea: defaultTextValidation,
     textfield: defaultTextValidation,

packages/next-drupal/src/config/Widgets.tsx

@@ -10,8 +10,8 @@ export const defaultWidget = TextWidget
 // Widgets mapping
 export const widgetsMapping = {
   type: {
-    captcha: CaptchaWidget,
     email: EmailWidget,
+    headless_captcha: CaptchaWidget,
     text: defaultWidget,
     textarea: TextareaWidget,
     textfield: defaultWidget,

turbo.json

@@ -19,6 +19,7 @@
     "DRUPAL_CLIENT_ID",
     "DRUPAL_CLIENT_SECRET",
     "NEXT_PUBLIC_DRAFT_REPORT_TERM_IDS",
+    "NEXT_PUBLIC_FRIENDLYCAPTCHA_SECRET",
     "NEXT_PUBLIC_FRIENDLYCAPTCHA_SITEKEY"
   ],
   "pipeline": {