Le0Developer / react-turnstile

A very simple React library for Cloudflare Turnstile.
https://turnstile-demo.pages.dev/
MIT License
106 stars 15 forks source link

Turnstile Pre-Clearance mode with the Cloudflare WAF (preClearanceObtained flag) #28

Closed antonaavik closed 4 months ago

antonaavik commented 5 months ago

Besides onVerify passing token, preClearanceObtained flag should also be passed.

https://blog.cloudflare.com/integrating-turnstile-with-the-cloudflare-waf-to-challenge-fetch-requests

turnstile.render('#turnstile_widget', {
  'sitekey': ‘YOUR_TURNSTILE_SITEKEY',
  'error-callback': function (e) {
    overlay.style.display = 'none';
    reject(e);
  },
  'callback': function (token, preClearanceObtained) {
    if (preClearanceObtained) {
      // The visitor successfully solved the challenge on the page. 
      overlay.style.display = 'none';
      resolve();
    } else {
      reject(new Error('Unable to obtain pre-clearance'));
    }
  },
});

Maybe

callback: (token: string, preClearanceObtained: boolean) => inplaceState.onVerify?.(token, preClearanceObtained, boundTurnstileObject)

or (ensuring backward compatibility)

callback: (token: string, preClearanceObtained: boolean) => inplaceState.onVerify?.(token, boundTurnstileObject, preClearanceObtained)
antonaavik commented 5 months ago

Another solution would be to keep onVerify as is and create another callback function like onSuccess and include it with Turnstile callback function