Using reCAPTCHA
Last updated
Last updated
is a free service from Google that protects your site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart. Rock Mountain leverages the reCAPTCHA service to help protect your site. It is used with the Contact form, for example, so that a robot cannot attempt to spam you with multiple emails or impose an overly high cloud service fees.
Currently, you must register two new projects on reCAPTCHA and get the required keys: one project for Preview and Development environments, and one project for Production. Here's how...
Let's start by registering the project for Preview and Development environments. Navigate to the , fill in the required details as shown below, and click on submit.
Notice that, to the list of domains, we added only localhost (our local development environment), codyburleson.cloud (our Preview environment), and vercel.app (a dev environment for any other non-prod branch that gets deployed to Vercel). That’s because we should only be using these keys for development purposes. reCAPTCHA also performs a domain validation for the site it’s being executed on, so we will also need to create a separate set of keys for the Production environment.
After clicking submit, you should be able to see the public and secret keys.
Add the generated keys and values to your .env.local file and to your Preview and Development environments in Vercel. Use the following keys:
If everything is working properly, you should be able to test this setup by running npm run dev and then sending yourself a message using the form on the Contact page. Of course, this also presupposes that you have the Contact form properly configured to send email through the cloud service (currently only AWS SES has been integrated).
If the reCAPTCHA integration was successful you should see the reCAPTCHA badge at the bottom right corner of your browser on the Contact page. If a challenge is not being shown to you, it doesn't necessarily mean there is something wrong with the integration because reCAPTCHA only shows a challenge if you fail its behavior or cookie analysis. If you still want to see the challenge anyway, you can update the security preference to "Most secure" from the reCAPTCHA admin dashboard (shown below) and then open the browser tab or window in incognito mode.
Now you need to follow the same procedure to create another project in reCAPTCHA for Production and then add the respective environment variables and values to your Production environment in Vercel.
