Google reCaptcha V3 on a form that posts to NextJs API Route.

Here is simple implementation of a captcha on a form within NextJs App

Goal was to block any malicious traffic making request to NextJs API Route. Which in turn would perform some action such as send notification via email or similar.

Now we can add google code to handle actual verification.

Above you will see new submit handler called handleSubmit() which includes grecaptcha.ready() which calls Google API with your site key to get temporary token. That token is later passed inside of a promise via fetch to your NextJs API Route, in this case we have /api/contactRoute

Now here is a look at the actual API Route that listens for POST requests.

It is important to keep this key hidden from public. Hence we are using environment variable.

If response from google comes back as true that means request is valid and passed google bot vs human verification.

Related posts:

As businesses expand and interact with customers in the ever-changing digital landscape, it is crucial to find innovative ways to engage with customers and stand out from the competition. Digital…

I was pleasantly surprised to find a wide range of personalities, professions and ideologies amongst other Heathers in the world. The similarities between us all surprised me more. What did you…

Crises drive change but often one crisis alone is not enough to cement a transformation. Over the course of past 12 years, the world has witnessed an era of radical changes in the way central banks…