2 steps to add invisible reCaptcha to your contact form
With React, AWS Lambda, SES & API Gateway
In this post we will go throw 2 steps to enable Google invisible reCAPTCHA v2 in our contact form. This is a follow up tutorial from the 7 steps to build a serverless contact form. If you haven't seen that tutorial go ahead and do so as we will be building on top of the existing code.
What are we building?
Useto add a React component for invisible reCAPTCHA v2
to our contact form.
We will update the existing Lambda function to accept and verify the Client's response.
Upon validation we will send out the email using AWS SES.
Before we start, you will need to have the following:
An AWS account
Sign up for an API key pair. We will use the site key on thecomponent and the secret key to verify the client's request in the Lambda function.
Step 1: Setup your Form with Invisible reCaptcha
In the codesanbox bellow we are import the ReCAPTCHA component and then create a reference
recaptchaRef = React.createRef()
Step 2: Verifying the client's response in our AWS Lambda function.
secret: This is the secret key which you should have got when you Sign up for an API key pair. Go ahead and add that as an environment variable so you can use it in your lambda function like this:
response: The client response token provided by the reCAPTCHA on our contact form.
Notice that we are now waiting for the
Your form should now be able to validate your users requests before sending out the email in your inbox 🎉.