Cloudflare Turnstile with Livewire
Playing
05. Validating the Turnstile response

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've installed gives us a custom rule that we can use to take the turnstile response from this property and send it over to Cloudflare to validate. Because this is under a custom rule object, we can't use attributes to do this. So, for example, ideally, we would do something like this, rule, and then in here, we would use the Laravel rule class to go ahead and use the turnstile method that's been registered.
00:29
Now, aside from the fact that we will have a duplicate class name in here for the import, this just isn't going to work. So what we're going to need to do is rethink how we validate this particular form now that we've got the turnstile response. And I'm actually going to go ahead and set that while we're here to an empty string. OK, so an alternative way and the old style way to register rules within a LiveWire class is to define out a rules method.
00:54
From here, we can just go ahead and return an array with any of the rules that we want for the properties that we have inside of here. So for the email, let's go ahead and set this up a little bit more properly now and say required an email. And now we can go ahead and validate the turnstile response once this gets submitted. So to do this, let's say that this is required, but then we're also going to use the Laravel rule object.
01:18
So let's pull this in from illuminate validation. We can even at this point, since we're not using the LiveWire rule, get rid of that as well. And we could just go ahead and import this property at the top like so and pull that in. And we just have a really simple method already registered via this package called turnstile.
01:38
So we're saying that the turnstile response is required and this rule will go ahead and validate this with the Cloudflare API. OK, let's go ahead and try this out. And we'll also try to manually make this wrong so it doesn't work. OK, so I'm going to go over and I'm going to enter my email address.
01:56
It's asked us to verify that we're human here. So we're going to go ahead and click this. Once we get a success on that, that should add that response to that property. And when we hit subscribe, that should go ahead and validate that.
02:08
There's going to be a slight delay because it's going to be hitting the Cloudflare API. But we now know that this works. Let's go ahead and try and fail this. So to do this, we can come over to the template here and we can get rid of wire model and we could set our own value to this.
02:21
So over in newsletter index, let's set the response we get back to ABC, which is clearly not the right token. OK, if we come over and refresh this, let's go and try this out. So let's render that out and enter our email address, hit subscribe and nothing happens. So the rule has now failed.
02:41
Let's output the validation under our newsletter index. So just below this, let's go ahead and use the same error helper here for the turnstile response. And actually, let's just go ahead and copy and paste all of this just to save a bit of time. So let's put that in there and we'll do this for the turnstile response and dump the message out.
03:05
OK, let's just take a look at what the message gives us. And you can see here the response parameter is invalid or has expired. We're going to be customizing that soon. OK, so let's bring back the wire model hookup into here for that turnstile response.
03:19
And let's go back over to our index and get rid of ABC. So now we're successfully validating this with Cloudflare. And that means that if this is incomplete or just doesn't work, we're not going to be allowed through. OK, let's go ahead and look at doing a little bit of customization.

Episode summary

In this episode, we focus on how to actually validate the Turnstile response within our Laravel Livewire application. We start out by trying the usual Livewire way—wanting to add a custom rule using attributes. However, because the Turnstile rule comes from a package and is a custom validation rule, it doesn't fit neatly into Livewire's standard validation attributes.

So, instead, we switch to the classic approach: defining a rules() method right on the component. This method returns an array configuring validation for our form, like making sure the email is both required and correctly formatted. We also add the Turnstile response to our rules, marking it as required and using the custom rule from the package to actually check it with Cloudflare.

After getting the basics set up, we actually submit the form to see it in action. We try the happy path, passing validation after successfully completing the Turnstile challenge. Then, we purposely send an invalid response to see what happens, confirming that the validation fails as we expect (and no bad data gets through).

Finally, we make things a bit friendlier by outputting the actual error message that comes back when the validation fails, so users get feedback like “the response parameter is invalid or has expired.” We wrap things up by cleaning up the test code, confirming we’re all set for the next step where we’ll look into customizing these error messages.

Episode discussion

No comments, yet. Be the first!