Research

Using hCaptcha with React

November 8, 2018

Share

This is a multi-part series that details the business and technical architecture of HUMAN Protocol, an approach to human-level machine intelligence allowing machines to ask us for the data they need.

Introduction

If you’re using the React framework, you are likely used to dropping in handy components for many common needs.

We are happy to announce React components for our hCaptcha.com platform are now available for you to use (GitHub).

Backend modules for Node, Express, Flask, and others are also available to make server-side hCaptcha integration easy.

Tutorial: hCaptcha for React

Today, we are going to create a simple form with each framework. This will help you in creating your first application with React using hCaptcha as your anti-bot and anti-abuse platform.

With NPM installed, let’s run `npm install -g create-react-app`. This will install React, and allow us to use the CLI tools to easily scaffold a “Hello World” app!

Now, let’s run `create-react-app my-first-app-with-hcaptcha`

A lot of the boilerplate will be done for us here. There’s a list of NPM commands to run, and let’s cd into our project and then start the server.

Unless otherwise specified, your app will run on localhost:3000. React will start the development server and open a browser window for you.

Success!

Okay, let’s start hacking.

We see this in our /src directory.

The first thing we are going to do is delete the base of this app.

Before:

import React, { Component } from ‘react’; import logo from ‘./logo.svg’; import ‘./App.css’; class App extends Component { render() { return ( <div className=”App”> <header className=”App-header”> <img src={logo} className=”App-logo” alt=”logo” /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className=”App-link” href=”https://reactjs.org" target=”_blank” rel=”noopener noreferrer” > Learn React </a> </header> </div> ); } } export default App; ``` After: ``` import React, { Component } from ‘react’; import logo from ‘./logo.svg’; import ‘./App.css’; class App extends Component { render() { return ( <div className=”App”> </div> ); } } export default App; ``` Save and go back to your browser window. You should see a blank page. Let’s make a form! import React, { Component } from ‘react’; import ‘./App.css’; class App extends Component { render() { return ( <div className=”App”> <h1>Sign Up Today!</h1> <form> <input type=”text” placeholder=”Enter your email!”/> <button type=”submit”>Sign Up!</button> </form> </div> ); } } export default App;

Awesome! We did it!

Now, let’s run `npm install @hcaptcha/react-hcaptcha — save`

This will install react-hcaptcha, our custom component for hCaptcha, and add it to our packages. You will need to signup at hCaptcha.com to get a personal sitekey.

Now, let’s add it to our app:

import React, { Component } from ‘react’; import ‘./App.css’; class App extends Component { render() { return ( <div className=”App”> <h1>Sign Up Today!</h1> <form> <input type=”text” placeholder=”Enter your email!”/> <hCaptcha sitekey=”00000000–0000–0000–0000–000000000000" onVerify={this.onVerifyCaptcha}/> <button type=”submit”>Sign Up!</button> </form> </div> ); } } export default App; ``` Okay, it won’t render just yet on hot reload because we haven’t made an onVerifyCaptcha callback. Here, we will keep it simple. Let’s just have it print it to the console. ``` import React, { Component } from ‘react’; import ‘./App.css’; class App extends Component { onVerifyCaptcha (token) { console.log(“Verified: “ + token) } render() { return ( <div className=”App”> <h1>Sign Up Today!</h1> <form> <input type=”text” placeholder=”Enter your email!”/> <hCaptcha sitekey=”00000000–0000–0000–0000–000000000000" onVerify={this.onVerifyCaptcha}/> <button type=”submit”>Sign Up!</button> </form> </div> ); } } export default App;

Open your browser, and you should see our widget in your form. If you try to sign up, you will need to complete the captcha first. When you do this, you will see the token verified response in the console.

Implementing Backend Support

Now that the frontend is sending back an hCaptcha passcode, you’ll just need to submit the form data to your server as usual and then have your server check the passcode token handed to see if it’s valid.

You can use one of the pre-existing modules for Node, Express, Flask, etc, or follow the docs at hCaptcha.com to implement the simple /siteverify endpoint call, sending the user’s passcode and your secret key back to us to see if it’s correct.

Congrats! You have made your first hCaptcha-using app with React!

‍

hCaptcha is a new way to monetize site traffic. If you already serve captchas and would like to be compensated for the effort, sign up at hCaptcha.com.

And if you’re feeling inspired by the possibilities here, perhaps we should be working together! We’re hiring ML scientists and senior developers in SF and worldwide. You’d be joining a team of seasoned folks working on research and implementation for products and services used at scale by the largest companies in the world. Details at https://www.intuitionmachines.com/jobs

Subscribe to our newsletter

Stay up to date on the latest trends in cyber security. No spam, promise.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

← Back to blog

Attack Prevention

Passkeys Offer Both Benefits and New Attack Surfaces

Be careful when implementing passkeys. They can offer a more secure alternative to passwords when implemented correctly, but provide many ways for implementers to shoot themselves in the foot.

March 12, 2024

Announcements

As Google raises prices on reCAPTCHA, hCaptcha remains the ROI leader

Google has raised reCAPTCHA prices yet again, nearly eliminating its free tier. hCaptcha delivers higher performance and better ROI with unchanged tiers.

January 30, 2024

Research

Report: Cybercrime Groups choose Black Friday and Cyber Monday to Debut New Attacks

November brings discounts from popular retailers, and for many merchants the 24th to 27th is a substantial percentage of their annual sales. Here are some of the attack trends we saw in 2023.

November 30, 2023