Building a React application to solve captchas using 2captcha

Introduction

We solved captchas most of the time while logging into a new account or registering to a website. Captchas are essential to avoid running scripts. These scripts can be used to create fake accounts, book tickets then sell at high prices, and others can be run using a script in an application. So, a captcha is a need for any application.

No doubt, Captcha is good but at the same time, it's annoying to solve the captcha. It takes time and it asked again and again if you make any mistakes. That’s why people are turning towards captcha-solving applications. This application will solve the captcha for you and provide you with code to run in the console.

So, today we are going to build our own captcha-solving React application using 2captcha. The application will take information regarding the captcha and provide you with code to run in the browser console to solve the captcha.

Let’s get started building the application.

What is 2Captcha?

2Captcha is a human-powered image and CAPTCHA recognition service. They work on solving a variety of captchas by human employees that are submitted to them. Using their API you can submit captchas of any website and they will provide you with the solution. By this, you won’t need to solve any captchas.

They support most of the captchas. A few among them are:

• text Captcha
• reCAPTCHA V2
• Grid
• hCaptcha
• Capy Puzzle
• And others

They support 19 different captchas in different spoken languages. We are going to use their’s API to build our application that will solve the captcha. You can look into the platform here.

Environment Setup

The environment setup is easy as we only just need to install React and a few dependencies for our project.

Navigate to the directory in which you want to put the project and run the below command to create a React app.
Note: To run this and the below commands, you need to have NodeJS pre-installed.

    npx create-react-app react-2captcha

As for the dependencies for our frontend. Here are those:

• Chakra UI: For building form components in our application. It is a component library for React. You can read their docs for setting up Chakra UI in React from here.
• 2captcha: This is a node package to communicate with the 2Captcha for solving the captchas.

    npm i 2captcha

• react-code-blocks: This library will be helpful to display code that users can copy and paste into the console.

    npm i react-code-blocks

Now, we are all sets to code our application.

Creating the App*l*ication

Our whole code of the website goes into App.js. So, let’s discuss the code in it.

Imports

Starting with the imports. You can look into the below code and comments to understand the purpose of the imports.

    import './App.css'; // CSS file
    import { useState } from 'react'; // for storing data in the state
    import {
      FormLabel,
      Input
    } from '@chakra-ui/react' // component for our form
    import { CopyBlock, dracula } from "react-code-blocks"; // for code block
    const Captcha = require('2captcha');  // making request to 2captcha API

After this, we need to initialize a Solver from Captcha to perform a function related to 2Captcha. For this, we need an API key from 2Captcha. You can get your own from here.
Now create a file in the root directory with .env file to store the environment variable. Add your API key with REACT_APP_2CAPTCHA_API variable name. Prefix any environment variable with REACT_APP_ to load environment variable in the fronted without the dotenv library.

    REACT_APP_2CAPTCHA_API=YOUR API KEY

For initialing the solver, we have the below code:

    const solver = new Captcha.Solver(process.env.REACT_APP_2CAPTCHA_API)

App Function

In the App function, at the top, we are having the useState for storing data. Here are those with comments explaining their use.

      const [sitekey, setSitekey] = useState('') // for storing sitekey from the user
      const [url, setUrl] = useState('') // for storing url from the user
      const [code, setCode] = useState('') // for storing code for the console

After this, we have an asynchronous function to call to the 2Captcha. Let’s look into the code first.

    const solveCaptcha = async () => {
        await solver.hcaptcha(sitekey, url).then((response) => {
          const token = response.data;
          const codeSetup = `function login() {
            setInterval(() => {
                document.body.appendChild(document.createElement \`iframe\`).contentWindow.localStorage.token = \`"${token}"\`
            }, 50);
            setTimeout(() => {
                location.reload();
            }, 2500);
        }
        login()`;
          setCode(codeSetup);
        });
      };

We are making a promise-based call to solver.hcaptcha with sitekey and url of the website as the arguments. hCaptcha is a type of captcha. It is the most popular reCAPTCHA alternative. Once the response is received, we will have a token in the response.data, which we are storing in the token variable.
The next part is the code that you need to run in the console of the browser to bypass the captcha. We are setting the state with the code having a token in it.

Return

The return statement has the following JSX:

    return (
        <div className="App">
          <div className='form-div'>
            <FormLabel>Enter data-sitekey</FormLabel>
            <Input type='text' onChange={(e) => setSitekey(e.target.value)} />
            <FormLabel>Enter URL</FormLabel>
            <Input type='text' onChange={(e) => setUrl(e.target.value)} />
            <button className='button-div' onClick={solveCaptcha}>Solve Captcha</button>
          </div>  
          <div className='code-div'>  
            {
              code && 
              <CopyBlock
                text={code}
                language={"jsx"}
                showLineNumbers={false}
                theme={dracula}
              />
            }
          </div>
        </div>
      )

div with classname form-div has the component for the form with a button for running the solveCaptch function. div with classname code-div has the code block component.

This will result in the following output:

Testing the Application

Now, it's time to test the project. Let’s run our React project. You can run the project by running the terminal from the root folder and entering the below command:

    npm run start

The command will open a webpage on your browser with the URL localhost:3000.

Now you will have the below output:

For bypassing hcaptcha of any website, you need the data-sitekey and URL. To get the data-sitekey, inspect the website’s code. In the element, search for hcaptcha security and you will find the sitekey inside the src attribute of the iframe. URL is the website’s URL.

Now enter both details in the input box. It will look like this:

After entering the details, hit the Solve Captcha button. This will make a call to 2Captcha for solving the captcha. Wait for a few seconds, and you will have the code that you can run on your machine under the console tab of the webpage.

Copy and paste the code into the console of your browser on that page to bypass the hcaptcha. This code with the unique token can be easily used to bypass hcaptcha on any website.

CodeSandBox

I have created a codesandbox where you can see the live working of the project. Make sure you add your 2Captcha API key for running the application in the App.jsx.
You can take a look at it here:

Conclusion

We have gone through all the processes for building our application. Setting up the account on 2Captcha, setting up the environment, adding code in the App.js, and testing the application. Using 2Captcha, you can build applications that can solve other captchas too. You can read their API docs to understand their process and other captchas-solving methods.

I hope this article has helped you in understand solving captchas using 2Captcha. Thanks for reading the blog post.