🔥 Say Goodbye to Annoying CAPTCHAs! Secure Your React Site with Effortless reCAPTCHA Enterprise 🚀

Discover the secret to securing your login using reCAPTCHA Enterprise, all while keeping your users free from the dreaded “I am not a robot” checkbox! 🤖🔓

My computer looking delicious 🤤

Problem

We were attacked by a bot that attempted to drain our cash by continuously hitting our login page, which uses a passwordless start (where we send our users a one-time password). The bot was inputting random information, causing OTPs to be sent to users who did not even request them.

To solve this issue, we took several steps. First, we switched our endpoint to confuse the attacker, forcing them to attack the wrong endpoint for a while. This allowed us to collect a lot of data about them, including their IP address and client information.

Phase 1

In Phase 1, we decided to rate limit our sensitive endpoints by IP to prevent the attacker from sending a barrage of requests. However, they soon recognized this and began to use multiple IP addresses to attack us.

Phase 2

In Phase 2, they attacked us from a large number of IP addresses, making it challenging for us to limit their attempts. We decided to limit the number of times a single account could receive an OTP code.

Phase 3

In Phase 3, the attacker went through an entire contact list using multiple IP addresses. We responded by turning off our messaging services for a few hours to brainstorm a solution.

Solution — reCAPTCHA Enterprise

Now, this seemed to be the solution to our problem — if we could detect bots/suspicious users, we could fend them off, regardless of their IP addresses!

However, there was hardly any documentation available for setting it up. So, here’s a quick tutorial!

Client Side

<script src='https://www.google.com/recaptcha/enterprise.js?render=site-key'></script>

// Depending on your react - using `await grecaptcha.enterprise` could work!
recaptchaToken = await window.grecaptcha.enterprise?.execute(
            'site-key',
            {
              action: 'LOGIN'
            }
          )

const res = await axios.post("link", {loginInfo, recaptchaToken})

Server Side

Create a Recaptcha Enterprise Service Client based on your backend.

reCAPTCHA Enterprise client libraries | Google Cloud

Here’s a little JS example in case you’re having trouble.

// This code uses the RecaptchaEnterpriseServiceClient to create
// a risk assessment to detect suspicious users or bots.

// The recaptcha_client object is instantiated,

// The projectPath method is called to generate the path
// for the client's project.


const recaptcha_client = new RecaptchaEnterpriseServiceClient()
const projectPath = recaptcha_client.projectPath('12345')

const request = {
      assessment: {
        event: {
          token: req?.body.recaptchaToken,
          siteKey: 'site-key' // shared on client and server
        }
      },
      parent: projectPath
    }

// Create a risk assessment
const [resp] = await recaptcha_client.createAssessment(request)

// analyse the risk and act accordingly :)
if (resp?.riskAnalysis?.score < 0.5 || resp.tokenProperties.action !== 'LOGIN') {
      // Send reason back
      return res.status(40x)?.json({
        message: 'Suspicious client',
        reason: resp.riskAnalysis?.reasons,
        recaptcha_failure: true
      })
    }

Result

The number of bad requests fell to a very small number, and we’re done :) No more bots (hopefully).

Next Steps

I will not go into details but here are some more enhancements you could make:

• To allow users to verify themselves in case of false positives, you could provide a fallback mechanism, such as a CAPTCHA challenge, which allows the user to prove they are not a bot.
• To deal with different reasons for failure differently, you could implement a dynamic blocking mechanism that assesses the severity of the risk score and takes appropriate action. For example, if a user has a low risk score but has failed multiple times, you could temporarily block their IP for a short period. If a user has a high risk score, indicating a high likelihood of malicious activity, you could block their IP permanently or flag their account for further investigation.

I’m sure there are more enhancements that one could make to help improve the accuracy and effectiveness of a system in detecting and preventing malicious activity while minimising the impact on legitimate users. Hoping to hear from anyone who has more suggestions!