Webiny not working with reCaptcha

[jsuarezb]

Version

5.36.2

Operating System

Linux 6.2.0-26-generic #26~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Jul 13 16:27:29 UTC 2 x86_64 x86_64 x86_64 GNU/Linux

Browser

Version 115.0.5790.170 (Official Build) (64-bit)

What are the steps to reproduce this bug?

1. Configure reCaptcha with the corresponding keys.
2. Create a form within the Form Builder with reCaptcha enabled.
3. Try using the /graphql endpoint to submit a new form entry:

   mutation CreateFormSubmission {
   formBuilder{
   createFormSubmission(
       revision: <revision id>,
       data: <data>,
       reCaptchaResponseToken: <token>
   ) {
     data {
       id
       data
     }
     error {
       code
       message
       data
       stack
     }
   }
   }
   }

What is the expected behavior?

To get the token validated successfully by the reCaptcha service and to be able to submit a new entry into the form.

What do you see instead?

A reCaptcha error reported by Webiny:

{
  "data": {
    "formBuilder": {
      "createFormSubmission": {
        "data": null,
        "error": {
          "code": "",
          "message": "reCAPTCHA verification failed.",
          "data": null,
          "stack": "Error: reCAPTCHA verification failed.\n    at Object.createFormSubmission (/var/task/webpack:/webiny/node_modules/@webiny/api-form-builder/plugins/crud/submissions.crud.js:143:17)\n    at process.formSubmission (internal/process/task_queues.js:95:5)\n    at result (/var/task/webpack:/webiny/node_modules/@webiny/api-form-builder/plugins/graphql/form.js:528:19)\n    at async Promise.all (index 0)\n    at result (/var/task/webpack:/webiny/node_modules/@webiny/handler-graphql/processRequestBody.js:19:9)\n    at result (/var/task/webpack:/webiny/node_modules/@webiny/handler-graphql/processRequestBody.js:34:13)\n    at Object.<anonymous> (/var/task/webpack:/webiny/node_modules/@webiny/handler-graphql/createGraphQLHandler.js:70:15)"
        }
      }
    }
  },
  "extensions": {
    "console": []
  }
}

Additional information

1. I've disabled reCaptcha and the submission flow seems to work without any issues.
2. After some debugging by directly hitting the reCaptcha API, I've managed to validate my token successfully so there shouldn't be anything wrong with that part of the flow.
3. A Content-Type: application/x-www-form-urlencoded header (with an adequate body) seems to be necessary for the reCaptcha service to answer with the expected values. It seems that right now there's no Content-Type header specified and the body of the request is a JSON which reCaptcha API does not like (see code here)
4. This StackOverflow answer explains a little bit the issue of not using the appropriate headers/body.

Possible solution

Add the missing Content-Type: application/x-www-form-urlencoded header and modify the body appropriately within the Webiny → reCaptcha request while doing the token validation.

[SvenAlHamad]

Thanks for reporting @jsuarezb - we'll have a look.