Building a React application to solve captchas using 2captcha
Tags: react, javascript, beginners, webdev
Published: 2022-11-07 11:30:00

# 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](https://2captcha.com/) 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**](https://2captcha.com/2captcha-api).

# 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*](https://nodejs.org/en/download/) *pre-installed.*

```bat
    npx create-react-app react-2captcha
```

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

- [Chakra UI](https://chakra-ui.com/): 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](https://chakra-ui.com/getting-started/cra-guide).
- 2captcha: This is a node package to communicate with the 2Captcha for solving the captchas.
```bat
    npm i 2captcha
```
- react-code-blocks: This library will be helpful to display code that users can copy and paste into the console. 
```bat
    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.

```jsx
    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](https://2captcha.com/enterpage). 
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.
 
```bat
    REACT_APP_2CAPTCHA_API=YOUR API KEY
```

For initialing the solver, we have the below code:

```jsx
    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.

```jsx
      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.

```jsx
    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:

```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:

![Solve Captcha](https://paper-attachments.dropboxusercontent.com/s_056BA3BF1F4FBE64C212E2E1A5ABF3D4174820766231AF48A271615DA5589738_1666938541110_image.png)

# 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:

```bat
    npm run start
```

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

Now you will have the below output:

![Solve Captcha](https://paper-attachments.dropboxusercontent.com/s_056BA3BF1F4FBE64C212E2E1A5ABF3D4174820766231AF48A271615DA5589738_1666938541110_image.png)


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.
 

![Sitekey of discord](https://paper-attachments.dropboxusercontent.com/s_056BA3BF1F4FBE64C212E2E1A5ABF3D4174820766231AF48A271615DA5589738_1666951920683_mdxArtboard+1.png)


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

![After entering detail](https://paper-attachments.dropboxusercontent.com/s_056BA3BF1F4FBE64C212E2E1A5ABF3D4174820766231AF48A271615DA5589738_1666952462418_Screenshot+2022-10-28+155040.png)


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. 
 

![](https://paper-attachments.dropboxusercontent.com/s_056BA3BF1F4FBE64C212E2E1A5ABF3D4174820766231AF48A271615DA5589738_1666952574212_image.png)


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: 

{% codesandbox 2captcha-react-ye7m5g %}

# 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](https://2captcha.com/2captcha-api) 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.