Playing
05. Validating the Turnstile response

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.
6 episodes 18 mins

Overview

In this mini-course, we’ll walk through setting up and adding Cloudflare Turnstile to our Livewire forms.

Turnstile is a reCAPTCHA alternative, and thanks to a handy package, we’ll have it set up in no time, ready to apply to any form.

Once we’re done, we’ll take a look at configuring the widget and adding custom validation rules to display to the user if the verification fails.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!