[Marketplace] Cloudflare Turnstile Widget

[Broberto]

Hello everyone, I saw that implementing any type of Captcha in WeWeb is quite a challenge for y’all. I’ve worked on this for one of my partners recently and decided to share it with you all actually.

I’ve just released a Marketplace Custom Coded Element that solves this once for all. You can now import Cloudflare Turnstile simply by dragging and dropping the widget to your WeWeb project (and of course setting your token). It also has a possibility to:

• Refresh the widget - this removes and adds a new widget, effectively generating a new captcha via the Execute component action → Re-render Turnstile
• Change language - you can select any of the many languages that are available by Cloudflare (such as Farsi, Chinese, Bulgarian etc. there is really many)
• Change the theme - Light mode, Dark mode, or Automatic selection of the theme

It exposes the token as a variable so you can bind it in WeWeb without all the work to even get it into WeWeb.

You can find the widget in the marketplace, there also is an interactive demo.
https://marketplace.weweb.io/libraries/d318f23f-789f-4229-9460-8d547cfa9f07/

[dorilama]

Congratulations for publishing the component!
Some feedback (I hope it can be useful):

• [Brotilities Turnstile] logs can be debug level logs to allow easy filtering in the dev tools
• a global property to disable every log is useful if you don’t want to show logs in the published app, make it bindable so you can easily keep logs for dev and staging)
• since you are opting for explicitly rendering the widget you may want to disable implicit rendering by appending the parameter render=explicit to the script url
• not sure if it is intentional, but there is an error because the script is loaded with instructions to run a callback (_turnstileCb) that doesn’t exists in the global scope

[Broberto]

Thanks for the feedback, I pushed the Debug property, but i haven’t re-published So yeah, fixed but not. As for the other two, they’re actually connected, in the docs, if you have a look, the explicitly loading can happen with a callback only in the string, which was the approach I went for before anything else. It didn’t work, but I forgot to swap it for the render = explicit indeed. Great catch I for some reason didn’t see the error at first. Will be fixed in a few, thanks again, useful as usually

[Vaclav]

Hi Broberto,

This is a great component that has made my work much easier, but I’m running into a few problems with its implementation. It’s probably more of a problem with the Supabase Auth plugin from WeWeb, and I’m sure you’ve encountered it too, so I just want to make sure I’ve chosen the right approach.

When a user wants to resend the OTP code to verify their email, if I select the action from the plugin, I get an error saying that I didn’t enter the captcha “captcha verification process failed”, which this action doesn’t even allow me to do, or rather, there is nowhere to enter the captcha token - I managed to get around this by re-registering the user = they get the OTP code again.

But I ran into a problem with “forgot password” and “change password”—is the solution to use the Rest API? Is it as simple to implement as when I call the Supabase function using the Rest API, or is there something I need to watch out for?

Thank you in advance for your response.

[Broberto]

Hi, I can see the issue. In the Supabase plugin from WeWeb it sometimes happens, that there is bugs where you either can’t use settings that are exposed, or they aren’t exposed at all - I’ve noticed this too. As you correctly said it’s either REST API, or you could use the Supabase instance which WeWeb exposes:

// Custom JavaScript Workflow Action
// ----------------------------------------------------

const supabase = wwLib.wwPlugins.supabase.instance

// Your OTP here
const { data, error } = await supabase.auth.signInWithOtp({
  phone: '+13334445555',
  options: {
  captchaToken: [your_variable_here]
  }
})

// ----------------------------------------------------

For the full reference, check out Supabase Docs, JavaScript API Reference | Supabase Docs

[Vaclav]

Oh, I didn’t know about the instance. It was much more convenient to implement, and it works exactly as it should. Thanks!