{"id":101818,"date":"2024-03-21T00:24:18","date_gmt":"2024-03-21T00:24:18","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=101818"},"modified":"2024-03-25T15:48:56","modified_gmt":"2024-03-25T15:48:56","slug":"cloudfare-turnstile-a-new-way-to-prove-you-are-real","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/web\/cloudfare-turnstile-a-new-way-to-prove-you-are-real\/","title":{"rendered":"Cloudfare Turnstile, A New Way To Prove You Are Real"},"content":{"rendered":"

\u00a0 \u00a0 This article describes the recommended way to integrate Cloudflare Turnstile into a React application.<\/em><\/p>\n

When I first heard about Cloudflare Turnstile, I remembered the New York City subway entrances. After all, I have been commuting with the subway for over ten years and can\u2019t even count how many turnstiles there would ever be.<\/p>\n

CAPTCHAs are probably the most hated things on the internet. How often were you tired of clicking those traffic lights and motorcycles? I know I hate them. I am almost sure that you do, too. Even though we all know this, as developers, we sometimes have to show CAPTCHA in front of a user. We need our applications to be secure and keep the bots away, right? We didn\u2019t have any better alternatives until just recently.<\/p>\n

A single CAPTCHA takes 32 seconds to complete on average. Given 4.6 Billion global internet users see a CAPTCHA every ten days, would equate to 500 human years wasted every single day. This madness has to stop. Cloudflare can reduce the average verification time to about a second. A substantial reduction from 32 seconds<\/p>\n

<\/a>Cloudflare Turnstile to rescue! Drum roll, please \ud83e\udd41\ud83e\udd41\ud83e\udd41<\/h2>\n

Cloudflare Turnstile is a free, tool to replace the dreaded CAPTCHAs. Why is the hype? How are they different? Let\u2019s dive a little deeper.<\/p>\n

In order to distinguish bots from humans, turnstile checks for typical human behavior in the browser by running non-interactive javascript challenges. Turnstile uses the results of these challenges to make its judgement to identify bots from humans.<\/p>\n

How would this help us, the ReactJS developers? Let\u2019s dive into that.<\/p>\n

<\/a>Turnstile in ReactJS and NextJS<\/h2>\n

This Turnstile team has released different integration libraries for popular front-end frameworks. For ReactJS<\/a>, the recommended approach from Cloudflare is to use open-source libraries such as react-turnstile<\/a>.<\/p>\n

\"turnstile_action\"<\/p>\n

Turnstile is a powerful tool for production websites. Since for the rest of the blog, we need an easy ReactJS framework to deploy a test website and turn on Turnstile; we will be using NextJS. Don\u2019t worry; Turnstile works equally well on vanilla ReactJS as well; the addition of NextJS is only for easy deployment to Vercel, nothing more.<\/p>\n

<\/a>Create a React App with NextJS.<\/h2>\n
$ npx create-next-app@latest<\/pre>\n
This is a standard npx command you can run from your Terminal (If you have VS Code, use its Terminal). Make sure you are in the folder you want your application to be housed in before running this command. For our purposes, you will likely want to make sure you are running this command in the root directory for your github configuration (certainly for the easiest setup. This will create a directory that matches your project name that you will be checking in.<\/p>\n
Choosing the default can\u2019t be wrong here. After all, we are focused on Turnstile, not NextJS..<\/p>\n
\"A<\/p>\n
Please see the highlighted \u2018project name\u2019 in the picture above. npx <\/code>command will create a folder with this name. Make sure to move to that folder using the below command cd .\\turnstile-react-nextjs\\.<\/code> This will be the root folder of your newly created application.<\/p>\n
Test your app quickly using npx next dev<\/code> in the context of the base folder for the project (In above example, it is C:\\Code\\turnstile-react-nextjs><\/code>)<\/p>\n
Once the command finishes executing, you should see something very similar to the next images when you go to http:\/\/localhost:3000<\/code> in your browser.<\/p>\n
\"home-default\"<\/p>\n
<\/a>Deploy our new NextJS application to a public domain with Vercel<\/h2>\n
We need an actual website to create a siteKey<\/code> for Cloudflare (We need this for complete configuration). The best bet for us is Vercel. It is from the same team as NextJS, and basic deployments to a public vercel subdomain are free. So, how about we deploy the website we just built?<\/p>\n
We will not be getting to the nitty-gritty of Vercel deployments, but we will use the seamless integration by Vercel to Github to connect Vercel to our codebase. Connected a Github repository to Vercel is available on Vercel\u2019s home page after logging in using Github credentials.<\/p>\n