Cloudflare Turnstile with Livewire
Playing
02. Creating a Turnstile widget

Episodes

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

Transcript

00:00
Before we integrate Turnstile into our application, we're going to need to create a widget over on Cloudflare. So head over to the Turnstile section and let's go through the process of creating a widget together.
00:09
Okay, so the first and most obvious is going to be the widget name. Let's just call this Turnstile Livewire just to keep things simple. And the second thing that we want to do here is hook this up to a domain. Now we don't need to do this for the local domain that we're running on.
00:24
So I'm just going to hook this up to the production code course dot com domain. Next is the widget mode. So I usually choose managed here. This will decide or Cloudflare will decide whether to show an interactive challenge or not. Non-interactive is just a purely non-interactive challenge, which means users will see the widget, but it will just do it for you.
00:45
And we also have an invisible widget, which obviously will just be hidden. For the purpose of this, just so we can see the widget in action, we're going to choose managed or non-interactive. And you can always come back and change these settings later. OK, so the last thing is, do we want to opt for a preclearance cookie?
01:01
I'm not going to choose that because this is going to require us that we actually set a cookie. And I don't want to have to go through the trouble of adding this to a cookie banner. OK, let's go ahead and create this out and let's just wait for this to finish. Once this is done, we will see our site key and our secret key.
01:19
So we're going to go ahead and take these, pull these into our application. So let's go over to EMV. Not sure where we're putting them just yet. So let's just add them in here anyway, just so we have them for later. And what this will mean is we can use these with the package that we're going to pull in.
01:34
So we've got our site key and our secret here ready to go. OK, so we've created a widget. We can go back and we can edit these and see stats about them as we go through. So we can always change the settings over and access the site key and the secret again if we need to. OK, let's go ahead and get the package installed that we're going to use to get this working.

Episode summary

In this episode, we kick things off by creating a Turnstile widget over on Cloudflare. Before we can integrate Turnstile into our application, we need to set up this widget first. We go step-by-step through naming the widget (we just keep it simple: "Turnstile Livewire"), and hooking it up to our production domain. Don’t worry if you want to test locally—you can always come back and tweak these settings later.

Next, we go over widget modes. There are a few different options—managed (where Cloudflare decides whether to show a challenge), non-interactive, and invisible widgets. For now, we pick managed or non-interactive, just so we can actually see the widget in action during development.

We also talk about the preclearance cookie option, and why we're skipping it to avoid extra work dealing with cookie banners. Once the widget is created, we grab the site key and secret key provided and stash them in our project’s environment file to use with the package we'll install next.

By the end of this episode, you’ll have your Turnstile widget created and ready, and you’ll have the keys you need to move on to integrating it into your app.

Episode discussion

No comments, yet. Be the first!