javascript - Turnstile do not show on safari - Stack Overflow

admin管理员组

文章数量:1122846

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:

this how it looks in safari

本文标签： javascriptTurnstile do not show on safariStack Overflow