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. Look how we turned to Cloudflare Turnstile.
Eliminating CAPTCHAs once and for all in Angular: ngx-turnstile
Eliminating CAPTCHAs once and for all in Angular: ngx-turnstile
In: open source, frontend

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.

Some of our appointment booking widgets are now validating user inputs with Cloudflare Turnstile.

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!


If you're interested in the problems we're solving and the things we do, check out Verto's Career Page.

Written by
Emily Chang
Emily is a Junior Full Stack Developer co-op at Verto Health. She is currently studying at University of Toronto.
Aleksander Bodurri
Team Lead, Development at Verto Health | Angular Team Member
More from Verto Blue Team
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Verto Blue Team.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.