Cloudflare Turnstile with Livewire
Playing
01. Introduction and setup

Episodes

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

Transcript

00:00
In this mini course, I'm going to show you how to get CloudFlare turnstiles set up with your LiveWire components. We'll look at a really simple example of this newsletter form, where we go ahead and enter an email address and hit subscribe.
00:13
And we have the CloudFlare widget here, which is validating that we are not a bot. When we hit subscribe here, at the moment, we're just dying and dumping. But what's happened behind the scenes here is this has gone over and validated this with CloudFlare's API. We're going to keep this really simple and put in a package that allows us to do this.
00:30
We'll look at a couple of customization options, and we'll talk about some of the issues we'll get around using this with LiveWire and how we get around that. So let's just give the page a refresh, just so you can see how this works. And you can see at the moment, it's asking me to verify I'm human. So everything that you would expect, but we're going to get this done really, really quickly, make it work really nicely.
00:50
Once you're done, you can apply this to any of your other forms. OK, so now that we know what this looks like and how it works, let's jump over and create this form out if you don't have one already. OK, so if you already have a form that you want to protect, feel free to go ahead and skip this on to the next episode. But I'm just going to take some time to set up a really simple example here from scratch, just so you can see what we need to do.
01:13
OK, so I have a fresh project installed with Laravel Breeze. Obviously, I've chosen the LiveWire stack here. Let's go ahead and create out a full page component to get this working. So let's go ahead and use LiveWire here to make out a newsletter index.
01:28
Let's imagine we're signing up for a newsletter. Let's go ahead and create that out. Let's go over to our web routes and register this as a full page component. So let's say route gets and we'll stick this under the newsletter URL.
01:42
Let's reference that newsletter index that we've just created and we'll just leave it at that for now. So over in here, let's make sure we use the base layout here from Breeze. So let's say layouts and app. So let's pull that in and we're just going to copy over, say, the dashboard just to give the same design.
02:02
So let's move that over to the newsletter component that we have here and just get rid of the app layout that's wrapped by default here and put everything in. OK, so we should be able to now, if we just modify the title here, head over to newsletter in our app and we've got a nice fresh page. OK, let's just build out something here. It's not going to look great, but that's fine.
02:23
So let's use the X text input that comes with Laravel Breeze and this will be for the email. So let's go ahead and add in a placeholder here so we can see what we're doing. And we'll hook that up with a model. So let's say wire model and that's going to be the email address.
02:39
And then down here, let's go ahead and create our a submit button. So let's say primary button. And that's going to be to subscribe or sign up to the newsletter. OK, so now that we've done that, let's just wrap this very quickly in a div so we can add some validation underneath.
02:56
Let's go over and check this out. OK, so it doesn't look great. Let's just space these things out. So let's do a space YF6 and let's go ahead and make this full width just so we've got something that we can work with.
03:09
OK, so there we go. We can go ahead and enter an email address in there and hit subscribe. And let's just finish that off really quickly. OK, so over to the component itself, let's go and add in a property here that we're going to use for the email address.
03:23
So we can type in that to string as well. And that's just going to be an empty value by default. And then we want some sort of form submission. So let's go ahead and just create our a submit method in here.
03:37
And we want to validate this so we don't have any validation rules just yet. But let's go ahead and validate that now. And then let's just die dump and say subscribe just so we know this has come through. OK, so over to the newsletter index, let's hook this up as a form.
03:53
So we'll switch that over to a form and we'll say wire submit and we'll go through to that submit method. So now we should be able to enter an email address, have that validated once we add our rules. And when we hit subscribe, we should get a die dump. OK, so we don't have any rules at the moment.
04:09
Let's just add them in really, really quickly. And we're going to add the rule here as an attribute. But a little bit later, we're going to have to change over the way that we validate when we use this package that works with Cloudflare turnstile. So let's go ahead and just add a rule here for now as an attribute.
04:27
And we'll switch that up a little bit later. So let's just say that the email address is required. OK, so when we hit that now, nothing is going to work. But when we enter something in here, sure enough, that goes through and die dumps.
04:40
Just really quickly add in a validation message in here just so we can reuse this later for our capture. And we're just going to use the error helper here for the email address. And let's just create out a really simple wrapper for any of the errors that we get here. So let's give this a class of text small and we'll just say text red 500.
05:01
Just keep it simple. OK, great. So now we have a working form, which is good. Let's go over and start to integrate Cloudflare turnstile into our form.

Episode summary

In this episode, we're kicking things off by introducing what you'll learn in this mini course: how to protect your Livewire-powered forms with Cloudflare Turnstile, a user-friendly and privacy-focused alternative to other captcha solutions. The example we'll work with is a simple newsletter subscription form where you'll be able to see exactly how Turnstile fits into the process.

First, we demo the Turnstile widget in action and peek behind the scenes at how it talks to Cloudflare's API to check whether the form submission is coming from a human. We'll also mention the package we're using to make this integration really easy.

Next, we set up a basic Laravel app using the Breeze starter kit with the Livewire stack. Step-by-step, we scaffold a newsletter sign-up page and create a full-page Livewire component. We then set up the form UI—adding an email input, a subscribe button, and basic form submission logic. We'll add some quick validation to make sure the email address is required, show inline error messages, and connect the form to Livewire's data flow.

By the end of this episode, you'll have a working newsletter signup form in place and be ready to integrate Cloudflare Turnstile in the following lessons. If you already have an existing form you'd like to protect, you can skip ahead, but this walkthrough is a great foundation for seeing how everything connects!

Episode discussion

No comments, yet. Be the first!