Captcha in forms

[pettinarip]

Description

Adds hCaptcha to forms.

TODO

• decide which captcha service to use (using hCaptcha for testing)
• add it to all the forms we have
• test and fix possible cors issues
• support mobile
• validate token in serverside

#198

[nhsz]

@pettinarip LGTM, great work! 🎉 Haven't approved yet because maybe the middleware logic can be abstracted using Next's middleware (and maybe it can even help to avoid extending NextApiRequest types declaration). In case you already check that I'll approve.

[pettinarip]

@nhsz yes, I think I didn't use it because I thought it was meant to be used only on server side requests but not on API routes since you have a NextRequest here and not a NextApiRequest.

Also there are a couple of official docs talking about how to use middlewares on the api routes:

• https://nextjs.org/docs/api-routes/api-middlewares
• Example: https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware

I guess those docs are a bit old and we could refactor it using the new _middleware files, I like that more. Will try to see to do the refactor.

Only concern right now is that the _middleware file is applied to all the files in the folder....it doesn't let you choose which middleware you want to apply to each route within the folder. E.g. I want to only apply the multipartyParse middleware on one specific route, not to all of them. I see that use case a bit dirty. I should add conditions like if (path === '/specific-form').

But I guess that overall, I like that approach more than the current solution. Let me work on that and I'll let you know.

[nhsz]

@nhsz yes, I think I didn't use it because I thought it was meant to be used only on server side requests but not on API routes since you have a NextRequest here and not a NextApiRequest.

Also there are a couple of official docs talking about how to use middlewares on the api routes:

• https://nextjs.org/docs/api-routes/api-middlewares
• Example: https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware

I guess those docs are a bit old and we could refactor it using the new _middleware files, I like that more. Will try to see to do the refactor.

Only concern right now is that the _middleware file is applied to all the files in the folder....it doesn't let you choose which middleware you want to apply to each route within the folder. E.g. I want to only apply the multipartyParse middleware on one specific route, not to all of them. I see that use case a bit dirty. I should add conditions like if (path === '/specific-form').

But I guess that overall, I like that approach more than the current solution. Let me work on that and I'll let you know.

Agree. You can apply the middleware to certain routes only https://nextjs.org/docs/middleware#execution-order, so maybe nesting the multipartyParse middleware inside that dir should execute it for that route only 🤔

Regarding extending NextApiRequest, it is recommended to use functions instead if required, for type-safety.

[pettinarip]

maybe nesting the multipartyParse middleware inside that dir should execute it for that route only thinking

You mean having something like this:

- /pages
    _middleware.ts # check captcha tokens
    devcon-grants.tsx
    - /project-grants
      _middleware.ts # apply multiparty parsing
      index.tsx

The problem with that is that I need to apply the parsing before the captcha check in this case.

I think I will go with just one _middleware.ts at the root level and add a condition to apply the multiparty parsing to a specific route.

[pettinarip]

I'm having some troubles querying req.body on a NextRequest. It seems that is it not being sent to this type of request.
When I do await req.json() I receive an error TypeError: invalid json body reason: Unexpected end of JSON input due to req.body being empty 🤷🏼

I've upgraded Next to 12.1.0 which has this PR vercel/next.js#34294 but it is not working for me.

Then formidable is using the fs module which is not allowed to be used in Edge functions https://nextjs.org/docs/api-reference/edge-runtime#unsupported-apis

Given these conditions I would say to skip this refactor for now.