nuxt-modules / turnstile

🔥 Cloudflare Turnstile integration for Nuxt
https://cloudflare.com/products/turnstile
MIT License
215 stars 17 forks source link

Unknown error loading NuxtTurnstile in the page #311

Open XStarlink opened 1 month ago

XStarlink commented 1 month ago

🐛 The bug

Hello, Thank you for your work on this module!

  1. I have a problem when I load NuxtTurnstile in my login page, I had to use the technique described in this issue (https://github.com/nuxt-modules/turnstile/issues/250#issuecomment-1869102103) otherwise it wouldn't load at all and there was an error that crashed the page. The problem is that even with this trick, there's are errors.

    I made a Stackblitz reproduction, I don't know exactly why but the trick I use above isn't necessary in Stackblitz, but it is in my app. (I think there must be a Race condition in a real app due to the fact that there are several things loading, whereas in Stackblitz there's only the NuxtTurnstile component).

  2. However, in Stackblitz we can also see a second problem, which is that the NuxtTurnstile component generates 3 invisible errors. There are three console errors created when the component is loaded, but no content or message.

To reproduce this:

  1. Open Stackblitz reproduction
  2. Open the console
  3. Click on "Go to Login"
  4. View console errors
Capture d’écran 2024-05-09 à 13 33 43

Thank you for your help!

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-trkpmx?file=nuxt.config.ts,pages%2Flogin.vue,pages%2Findex.vue

🌈 Expected behaviour

  1. Consistent loading of NuxtTurnstile component, without tricks
  2. No error in console

ℹ️ Additional context

No response

dargmuesli commented 1 month ago

I'm not sure if those invisible errors are caused by this module or by Turnstile itself. If there is some way to find that out, we can keep this issue open, otherwise it seems to me to be more or less a duplicate of #250, right?

XStarlink commented 1 month ago

@dargmuesli Thank you for your prompt reply, unfortunately, I really think these errors are caused by this module. Originally, I didn't want to create a duplicate issue because the invisible errors weren't mentioned in the other one. But it turns out that the main problem is really the module's unreliable loading.

I installed Turnstile following an attack by bots that created a lot of accounts on my site, Since I installed this module, I've had a lot of feedback from users who have problems logging in my app or creating an account,

I've done several tests and there's definitely a big loading problem with this module, Sometimes it's when you come from another page, (Login -> Signup) the module creates a console error and doesn't load, so the Turnstile token isn't created and so my Signup button isn't activated.

Capture d’écran 2024-05-14 à 15 28 26 Capture d’écran 2024-05-14 à 15 28 33

Sometimes it's when you refresh the page that the module doesn't load. If I refresh the page several times, there are times when there's an error and the module doesn't load.

After reloading a page normaly:

Capture d’écran 2024-05-14 à 15 47 35

I just reloaded the page and the module doesn't load and creates an error

I saw the PR that will add Nuxt scripts (https://github.com/nuxt-modules/turnstile/pull/306) but I didn't take the time to fully understand it, is it supposed to solve the module loading problems?

I'd like to help you find a solution to these problems so that the loading of this module is 100% reliable

dargmuesli commented 1 month ago

Yes, I see good chances that the Nuxt scripts integration would resolve those loading issues.