Search

How to Add Cloudflare Turnstile to Login Form in WordPress (without Plugin)

By incorporating Cloudflare Turnstille into your WordPress login form, you can enhance security by effectively differentiating between human users and bots, all without subjecting users to the cumbersome task of solving CAPTCHAs. This additional layer of protection verifies the authenticity of individuals attempting to log in, effectively thwarting brute-force attacks.

These attacks involve automated scripts relentlessly guessing passwords, which can result in compromised user accounts, unauthorized access to sensitive data, and even complete website takeovers. With Turnstille, you can fortify your website’s defenses and safeguard against these malicious activities.

This tutorial will show you how to implement Cloudflare Turnstile to your WordPress login form without using any plugin.

Adding Cloudflare Turnstile to WordPress Login Form

Step 1: Acquiring the Site Key and the Secret Key

The first step for implementing Cloudflare Turnstile on your website login form is to get the required keys. Start by creating a Cloudflare account from the sign-up page. And once you’re logged in, on the Cloudflare dashboard, click on the Turnstile menu to start adding your site.

On the Add Site page, add your Site name, and site Domain, and then select the Managed option for the Widget Mode. Once you’ve filled out all the required fields, click on the Create button to get the keys.

Now, your Site Key and Secret Key are ready for setting up Cloudflare Turnstile on your website.

Step 2: Adding Custom Codes

The next step is adding custom code and the keys you obtained from the previous step to implement Cloudflare Turnstile on your website login form. Navigate to Appearance → Theme File Editor from your WordPress dashboard and then select the functions.php file.

Before you start adding the snippets to your theme files, you might want to back up your site to avoid breaking your theme. Or, you can use a child theme or create a plugin yourself for the snippets to avoid losing your changes when you update or change your theme.

Continue by adding the following code to the bottom of the file editor and then replacing "your-site-key" and "your-secret-key" in the code with the site key and secret key you obtained before.

// Add CF Turnstile JavaScript on login page
function wpp_login_script() {
    wp_register_script('login-turnstile', 'https://challenges.cloudflare.com/turnstile/v0/api.js', false, NULL);
    wp_enqueue_script('login-turnstile');
}
add_action('login_enqueue_scripts', 'wpp_login_script');

// Add CF Turnstile on login page
function add_turnstile_on_login_page() {
    echo '<div class="cf-turnstile" data-sitekey="your-site-key"></div>';
}
add_action('login_form','add_turnstile_on_login_page');

// Validating CF Turnstile on login page
function turnstile_login_check($user, $password) {
$postdata =$_POST['cf-turnstile-response'];
   //add secret key
    $secret = 'your-secret-key';
    $headers = array(
        'body' => [
            'secret' => $secret,
            'response' => $postdata
        ]
    );
    $verify = wp_remote_post('https://challenges.cloudflare.com/turnstile/v0/siteverify', $headers);
    $verify = wp_remote_retrieve_body($verify);
    $response = json_decode($verify);
    if($response->success) {
        $results['success'] = $response->success;
    } else {
        $results['success'] = false;
    }
    if(empty($postdata)){ 
        wp_die(__("<b>ERROR: </b><b>Please click the challenge checkbox.</b><p><a href='javascript:history.back()'>« Back</a></p>")); 
    } elseif(!$results['success']){ 
        wp_die(__("<b>Sorry, spam detected!</b>")); 
    } else {
        return $user;
    }   
}
add_action('wp_authenticate_user', 'turnstile_login_check', 10, 2);

Once the code with your site key and secret key is in place, click the Update File button to get the Cloudflare Turnstile up and running to protect your login form.

The Bottom Line

Implementing Cloudflare Turnstile on your WordPress login form could help you prevent brute-force attacks that involve automated scripts relentlessly guessing passwords, which can result in compromised user accounts, unauthorized access to sensitive data, and even complete website takeovers. And all without subjecting users to the cumbersome task of solving CAPTCHAs. This tutorial shows you how to implement Cloudflare Turnstile to your WordPress login form without using any plugin at all.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Add Cloudflare Turnstile to Login Form in WordPress (without Plugin)”

    • Hi Anton,
      Thanks for your comment! It seems we’ve already covered that topic in detail in our previous article. Feel free to give it a read and share your thoughts with us once again. We appreciate your engagement!

      Reply

Leave a Comment