Eliminating CAPTCHAs once and for all in Angular: ngx-turnstile

At Verto, we've used Google's reCAPTCHA to prevent bots from booking appointments on our vaccination portals. We've had success with reCAPTCHA in mitigating these attacks, however we've received a lot of user feedback about the reCAPTCHA indicating that it harms the user experience. If you've solved a CAPTCHA (aka Completely Automated Public Turing test to tell Computers and Humans Apart), you're familiar with the stress of trying to interpret whether those several pixels of the car or crosswalk that leaked into adjacent boxes are valid.

We've been using Cloudflare at Verto Health for DDoS protection on our vaccination portals, so we were excited to hear that Cloudflare announced Turnstile, a CAPTCHA alternative that will never require a human to recognize pictures again. As all our consumer facing frontends are built with Angular, we decided it would be a good opportunity to build an easy way for everyone working with Angular to use it.

ngx-turnstile is built as a drop-in replacement for your ng-recaptcha and ng-hcaptcha usages. Here's the quickest way to migrate from ng-recaptcha to ngx-turnstile:

<!-- old -->
<ng-recaptcha
  [siteKey]="siteKey"
  (resolved)="onResolved($event)"
></ng-recaptcha>

<!-- new -->
<ngx-turnstile
  [siteKey]="siteKey"
  (resolved)="onResolved($event)"
></ngx-turnstile>

You can get started now by heading to our GitHub repo and try it out for yourself!

Check out the GitHub Repo!