Implement reCAPTCHA in htmx + expressjs

Let's start with the most obvious question, why we need it? because reCAPTCHA is using advance risk analysis techniques to detect frau, thus protecting your websites or mobile app from fraudulent activities and security risks such as:

• Spam.


• Abuse.


• Credential stuffing¹.


• Account takeover (ATO).


• Automated account creation.


• Password breach.


• Leak detection.

Here we wana use Google's reCAPTCHA which I believe is the most popular out there:

• It has:
  
  
  
  
  • Mobile app SDKs.
  
  
  • Multi-factor authentication (MFA).
  
  
  
  
  
  



• It interacts with your:
  
  
  
  
  • Backend.
  
  
  • Clients (web pages or mobile applications).
  
  
  
  
  
  

UX -- User journey

So here is how our users probably use our app, well you know how things usually end:

Credits for this image goes to google doc.

In which layers we can add reCAPTCHA?

• In our websites.


• In mobile apps.


• Or in the and made the most beautiful UI.
  
  
  

  
  

  Important:

  
  
  

  The most important part is where I added a hidden input. That's how I am sending the token I got from Google reCAPTCHA service to my backend.

  
  

  
  


• 
  

  I wrote all the logics that I were not able to implement in htmx in what they call it hypermedia friendly in a separate JS file called ).



• 
  hx-sync which looked it might be able to help me in one way or another but the more I looked at it the more I realized that it was not up to the task. You can have more complex logic in it but it won't wait until it is resolved and then make the forms request (.
  
  
  



• Told htmx to send the req: event.detail.issueRequest.









• 
  

  Add reCAPTCHA to which stands for Application Default Credentials. And here I decided to use API keys. But you can definitely go with what suits you're requirements most.

  
  
  

  On a side note, not every API can be called with API keys. But we know for sure that create assessment can be called based on what is written .

  
  
  
  
  
  
  1. Creating a client -- new RecaptchaEnterpriseServiceClient().
  
  
  2. Constructing our request -- projectPath, and request variables.
  
  
  3. Sending the req to get a score for the user action -- client.createAssessment.
  
  
  4. Performing some verifications before returning the score -- isTokenValid, isTheExpectedAction, and isNumeric.
  
  
  5. 
     

     Lastly we are closing the open connection we've created just a few steps ago (step #1).

     
     
     

     
     

     Note:

     
     
     

     Please read the JSDoc I wrote for the client
     

  
  
  6. Facebook:
     
  
  
  7. YouTube:
     
  
  
  8. Dev.to: https://dev.to/kasir-barati
     
  
  

1. 
   

   Credential stuffing: when the attacker collects stolen account credentials. ↩

   
   



2. 
   

   Verdict: An opinion/decision made after judging the facts that are given. ↩