Contact
Supaplate comes with a /contact-us route that allows users to send a message to the application owner.
Most applications will not need this feature, and it is very likely you're going to delete it, but the reason I included it is to showcase how to configure and use hCaptcha and Cloudflare Turnstile to prevent spam.
hCaptcha vs Cloudflare Turnstile
hCaptcha and Cloudflare Turnstile are two different services that provide the same functionality: preventing spam.
You are never going to use them both together, both are free to use, I like Cloudflare Turnstile more but you can do what you want.
Configuring hCaptcha
- Head over to hCaptcha and create an account.
- Create a new site and add the domain of your application.
- Copy the
sitekeyandsecretkeyand save them in the.envfile asVITE_HCAPTCHA_SITEKEYandHCAPTCHA_SECRETKEY.
Configuring Cloudflare Turnstile
Follow this guide to get a Turnstile sitekey and secretkey.
Copy the sitekey and secretkey and save them in the .env file as VITE_TURNSTILE_SITEKEY and TURNSTILE_SECRETKEY.
Sitekey and Secretkey
For both hCaptcha and Cloudflare Turnstile, the sitekey is public and can be seen by everyone, the secretkey is private and should not be shared with anyone.
That is why we are using the VITE_ prefix for the environment variables.
hCaptcha and Cloudflare Turnstile Flow
The flow is the same for both hCaptcha and Cloudflare Turnstile.
- The user loads the page.
- The hCaptcha widget or Cloudflare Turnstile React component is displayed.
- The user solves the challenge.
- The widget calls a callback function with the token.
- We save the token in the form data.
- The user submits the form.
- The form data is sent to the server.
- The server verifies the hCaptcha token or Cloudflare Turnstile token using the secretkey.
- If the token is valid, the form data is sent to the application owner.
Conclusion
As I said, most applications don't need a contact-us page, but it is a good example of how to use hCaptcha and Cloudflare Turnstile to prevent spam.
Use this example to protect any form in your application, like a login form, a comment form, a newsletter signup form, etc.