00:00 Let's go to our sign up form right here and we can get rid of this We're going to be using our form data and in our sign up route. We want to render a hidden div Within which we will place our label and our input. So let's make a div and

00:17 These bots these spam bots are really most of the time not very sophisticated in there It's too expensive to run them at their scale and actually evaluate the JavaScript on the page So they don't do a whole lot of parsing. So for the most part, it's actually safe to just say style display none and

00:35 Where like clearly the browser is not going to display this to users and all of that It is possible that there are some spam bots that are a little bit more sophisticated and will actually compute whether a field is visible But in my experience just having a display none or having something positioned well off the screen is sufficient

00:54 So let's also add a label doesn't need to look nice because obviously like it's not going to look like anything It's not going to show up, but we're going to add a label. Anyway, this is going to say please leave this field blank Again, these spam bots are not very smart. They're not going to read that label what they care about is the

01:14 Name of the field. So we're going to add an input with a name name. This would be like the first name When I have done this on my website, I'll see these spam bots sending this data with just some random name so that's what they're looking at is What is the name of the input and I will put something that's sensible

01:34 You could also put like home page or email or phone Or whatever and they will just fill it in with some random thing that matches up with that You could even do something like name double underscore confirm And so I confirm your name is what the bot kind of interprets that to mean and they'll they'll just fill it in with the name

01:52 Again, like these bots will can evolve on everything and that's why using a library is a good idea Which we will get to in a second, but I want you to understand kind of what the library is doing here we're also going to say type is text and Let's associate this properly because in the unlikely event that a screen reader does read this out to a user

02:13 It would at least be nice for us to make that experience good so that the screen reader user knows oh, we're not supposed to fill out this field, so we'll say HTML 4 and We'll say this is our name input and then we'll have ID name

02:28 Whoops input. There we go. And that takes care of the UI side of all this So now we've got our input right there. It's display none It's not going to show up there and then we just need to check if the name exists and if it does then we're going

02:46 To throw a 400 response and you may recall that we actually have a utility called invariant response Which defaults to throwing a 400 response so we can just say form data get name and if that Exists at all if that's truthy then we're going to say form not submitted properly

03:07 I try to avoid sending back anything that sends honeypot anywhere because I don't want their logs to see Oh this person like this site Point on a honeypot. We will send our more advanced spam bot over to them. We'll just say

03:23 Something went wrong and and they'll just see that in their logs and be like, okay, I guess we did it wrong No, what no big deal, whatever so it's kind of difficult to get into the mind of these spam bot authors because I'm personally not a spam bot author, but It seems to me that at least looking in my logs and and of the things that I have done and things that I've read that

03:44 Doing like this basic minimal stuff gets you The you are no longer the low-hanging fruit. That's kind of the idea there. Okay, so with that we can add Just actually first probably good to make sure that it still works So you say a at B dot C or com whatever we're getting 400 form not submitted properly and that is because yes

04:06 I did this invariant and incorrectly So if it is not equal to or if it is equal to an empty string, then that's good Otherwise, we'll throw this. So let's try that again a at B comm and that works just fine and then if I say

04:25 a at B comm and then update this In the same like submit where we're basically trying to simulate what a bot would do And even though the bot is not going to actually pull up a full browser and execute this typically They'll just do us some sort of script

04:44 We're going to simulate that by going to the console and we'll say zero dot value equals hello And then when I create account form not submitted properly, they'll get that and they'll be like, oh I our bot just wasn't good enough, but these bots get errors all the time because they're not very smart and so this would be kind of an

05:04 Expected thing for them. They just move on So a really quick review a honeypot field is really pretty straightforward and simple It's just a field that a regular user would not possibly could not or would not fill in It is a good idea to give it a proper label that tells the user don't fill this field in

05:24 But it's even better or on top of that you just make it so that the user won't Focus on this thing by putting display none that focus won't happen. You could also add a tab index of zero Or sorry of negative one so that they can't tab into it that would also

05:45 be helpful, but again The the fundamental concept here is just an input that a bot would probably fill in but a user would not and then you check whether that input has been filled in and if it has then you can assume that it was a bot and that is the basic implementation of

06:04 Doing a honeypot field. You definitely probably want to do like a library, which is what we're going to do next So hope that was fun. Let's move on