I’m facing a problem with turnstile integration, I need it to be initially rendered on my page not depending on browser I use. Everything works perfectly on chrome browser, but when I try to open login form on safari my turnstile just don’t appear on page. Sometimes it loads as expected or when I switch pages, but it takes about 30seconds, but it works only 2 out of 10 tries. Stack is: Next.js + js
I thought there were problems with useEffect or with next-turnstile, but found out that problem is not there, I tried cleaning cookies and browser storage, even opened in incognito, nothing helped to debug the problem.
How I load turnstile initially
useEffect(() => {
function loadTurn(){
if(!useEffectCheck){
setShowTurnstile(false); // Make Turnstile visible again
setTimeout(() => {
setTurnstileStatus("required"); // Reset status and show Turnstile after a delay
setShowTurnstile(true); // Make Turnstile visible again
}, 1000); // Optional delay before showing Turnstile again
}else{
return
}
}
loadTurn()
setUseEffectCheck(true)
}, []);
How my turnstile looks:
<Turnstile
siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
retry="auto"
refreshExpired="auto"
theme="auto"
key={showTurnstile + "harry"}
onError={() => {
setTurnstileStatus("error");
console.log("Security check failed. Reload the Page.");
}}
onExpire={() => {
setTurnstileStatus("expired");
console.log("Security check expired. Reload the Page.");
}}
onVerify={() => {
setTurnstileStatus("success");
setError(null);
}}
onLoad={() => {
setTurnstileStatus("required");
}}
/>
On safari it looks like that, when it’s not loaded:
