Add CAPTCHA to the API
I want to call the API but with Captcha verification?
site.com -> Something that is not Wasp
api.site.com -> Wasp backend
site.com has a form that collects emails for newsletters, and has Captcha verification for that frontend.
But would it still be possible to bypass that protection by calling the API directly? (not using the newsletter form).
4 Replies
Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To ensure that your Wasp API endpoint (e.g., on api.site.com) is protected by CAPTCHA—even when the frontend form (on site.com) already implements CAPTCHA—you must verify the CAPTCHA token server-side in your Wasp backend. Otherwise, someone could bypass the frontend and call the API directly, omitting CAPTCHA verification.
The knowledge sources do not provide a built-in way in Wasp to handle CAPTCHA verification out of the box. However, you can implement this logic yourself in your Wasp API endpoint. The typical approach is:
1. The frontend (site.com) collects the CAPTCHA token after the user completes the CAPTCHA.
2. The frontend sends this token along with the form data to your Wasp API endpoint.
3. Your Wasp backend verifies the CAPTCHA token with the CAPTCHA provider (e.g., Google reCAPTCHA) before processing the request.
If you do not verify the CAPTCHA token in your Wasp backend, then yes, it is possible for someone to bypass the CAPTCHA by calling the API directly and omitting the token or providing a fake one.
While the knowledge sources do not provide a code example for CAPTCHA verification, they do show how to create custom API endpoints in Wasp, which you can use to implement this logic. You would declare your API in main.wasp and implement the verification logic in the corresponding JS/TS function, including making an HTTP request to the CAPTCHA provider to validate the token before proceeding with the rest of your logic. See the custom API docs for how to set up such an endpoint: Custom HTTP API Endpoints
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
@kapa.ai give me all knowledge, resources or mentions about captchas
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but after reviewing all the provided knowledge sources, there is no information, documentation, or discussion specifically about CAPTCHAs or their integration with Wasp. The knowledge sources do not mention CAPTCHA support, implementation guides, or related resources. If you need to implement CAPTCHA with Wasp, you would need to rely on general web development practices and integrate it manually, as there is no official guidance or built-in support documented in the available sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
It will depend on which captcha system you use, but most likely you'll send some value e.g.
token=abc from the client that you got from the Captcha widget and then you'll verify that abc is valid and that's how'll know the user completed the captcha on the client successfully. I'd suggest you take a look at the docs of the captcha solution you want to use.