Integrating reCAPTCHA with Next.js

• recaptch-with-next

  1 20 0.0 JavaScript

  A demo explaining how to integrate reCAPTCHA with NextJS

I will be using a plain starter built using create-next-app with a simple form. If you want to follow along, you can get the initial state from this commit. The initial setup looks like this, and it just shows your email in an alert when you click on register

• react-google-recaptcha

  2 997 1.5 JavaScript

  Component wrapper for Google reCAPTCHA

We would be using a library called react-google-recaptcha, a wrapper around reCAPTCHA v2 that provides access to its APIs via a React component. Let's install it -

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• node-fetch

  92 8,646 1.7 JavaScript

  A light-weight module that brings the Fetch API to Node.js

  

For simplicity, I have installed a package called node-fetch, which is a light-weight wrapper that provides the window.fetch like API in Node environment.

• react-hcaptcha

  1 342 7.4 JavaScript

  hCaptcha Component Library for ReactJS and Preact

  

They also have a React wrapper component called @hcaptcha/react-hcaptcha, which also has a very similar API to the React component we used for reCAPTCHA. These are the only changes (apart from renaming reCAPTCHA variables) I had to integrate the component on the client in pages/index.js :

Suggest a related project