Cloudflare Turnstile with Livewire
Playing
04. Rendering the widget

Episodes

0%
Your progress
  • Total: 18m
  • Played: 0m
  • Remaining: 18m
Join or sign in to track your progress

Transcript

00:00
The package that we pulled in registers a blade component, which we can use and even hook up to a live wire property. So let's go ahead and create out a new container down here, which will house our widget. And let's try to render this out on the page.
00:14
This is the turnstile widget. So we can go ahead and self-close this off. And without doing much else, let's just head over to the browser and see what happens. OK, so we do actually have an invalid domain here.
00:25
So let's go ahead and change this over in our settings. And we call this turnstile live wire dot test. OK, let's add that custom domain. Let's update this and we should see this rendered out now.
00:39
OK, great. So that's working. Now, the next job is to hook up the response that we get back from this widget to a property in our live wire component. Let's go ahead and do that now. So we can actually do this with wire model.
00:53
So let's go ahead and hook up wire model and let's call this turnstile response. Go ahead and create a property for this. That means that we can validate that within our component as well. OK, so we'll go ahead and open up our newsletter index and let's create a new property up here.
01:10
And again, we'll call that turnstile response. And let's just go ahead and dump this out within the newsletter index blade component just so we can see that this is working. So let's go ahead and output the turnstile response that we get back. And when we head over and give this a refresh, once that has validated and we get a success, we should see this massive token, which we will then use to send through to the cloud for that API to validate.
01:37
Now, one thing about the rendering of this component, the nature of live wire means that when we go ahead and say enter an email address in here or don't enter an email address and hit subscribe, the entire thing here will get re-rendered. What this means is that this will potentially change with the re-render of our component here. What we want is really this just to be run once.
02:03
So what we can do here and something that is necessary is to go ahead and use wire ignore. So I'm going to wrap this in just a single div to ignore the turnstile component. We can't apply the ignore directly to this component. But what we're saying now is just ignore this so it doesn't get re-rendered.
02:22
That's not going to have any effect on when we refresh. It's still going to work. We will still get the token back. But it means now that when we hit subscribe, this section here doesn't get re-rendered and we'll still have the same token.
02:34
Okay. So we've rendered out our widget. Now, how do we go ahead and validate this token? Let's take a look next.

Episode summary

In this episode, we're diving into rendering the Turnstile widget using the Blade component provided by the package we installed. We'll walk through setting up a new container in our view to house the widget and try rendering it out on the page.

You'll see how to handle a small hiccup with invalid domain errors by updating the allowed domains in the settings, making sure the widget appears correctly in the browser. Once that's working, we connect the response from the widget to a property in our Livewire component using wire:model, allowing us to capture the token generated by the widget.

We then set up this new property inside our Livewire component and display its value right on the page, so you can see the token coming through as expected. This helps to confirm that everything is wired up properly.

There's also a subtle but important detail: because Livewire re-renders the whole component on changes, we need to wrap the widget in a wire:ignore div. This prevents the widget from being reset or re-rendered each time the component updates (like when a user hits 'subscribe'), ensuring continuous access to the token until it's used.

By the end of this episode, you'll have the widget on your page, hooked up to Livewire, reliably passing the Turnstile token, and ready to validate it in the next step!

Episode discussion

No comments, yet. Be the first!