Nextjs 14 ReCAPTCHA Setup (FULL GUIDE With V3)

using Google recapture is one of the easiest ways to protect your nextjs site against spammers I created a tutorial a few months ago using version two however I didn't cover the server side integration because most of the stuff on this channel is front and focused so today what we're going to do is we're going to implement version three which the invisible version so that there's a little less friction with your users and we're going to verify using an API route within nextjs itself so let's jump over to the code and let's get started okay so I'm here in vs code in a new NEX js14 application I'm using typescript and tail one by the way the only thing things I've done so far is I've cleared out the uh homepage of all the boilerplate as well as got rid of all the other boilerplate CSS that's not related to Tailwind the first thing that we're going to do is we're going to install the npm packages that we need so the first one is react Google recapture version 3 so I'm going to install that perf perfect and then the next thing that we need is axios so I'm going to install the latest version of axios as well perfect okay so to get a recapt a public and private key we're going to go to google.com recapture slab and it will bring you to this page if you type in recapture on Google this will come right up then what we're going to do is we're going to go to the V3 admin console and since this is probably also your first time making one of these if you're watching this video um it will take you right to the form to register a new site so what we're going to do is I'm just going to call this tutorial uh V3 and then here you're going to get a choice of score based or challenge the in the other tutorial we did challenge in this one we're going to do score based with version three and what we're going to do here is we're going to add the domains that we want to use um for verification so here since I'm just doing it all within Local Host I'm just going to add Local Host um if you have if you're if this site's running a production or you're using it with something else you're going to have to add the domain or recapture won't work um so let's submit this and here we go perfect so now we have our uh client side key and server side key so let's jump back over to the code and we're going to input these okay so the next thing that we're going to do is we're going to create our environment variables so what we want to do is in the root directory of our F our project I'm going to create a file called environment. local the local just means that's not going to be push your GitHub and it will be ignored and what we're going to do is we have to create a variable for both of our uh public and private keys so I'm going to do next public that is the convention since next 13 that you want to if if you're willing to show the key on the client's side where anyone could find it you want to you have to flag it with next public and then I'm going to call it recapture uh key and I'm going to go over here and this is for our servers and this is nope this is our client side and this is our server side so I'm going to copy the client side key I'm going to put that right here and then I'm going to go here and I'm going to call this recapture secret key and then I'm going to copy the secret key and I'm going to paste it right here so what I did is I just created a very basic form that we'll use for our recapture submissions um I I'll just quickly walk you through it you might want to pause a video here and if you're coding alongside uh write all this down or check my GitHub repo but I just have a use client directive because we need to render the JavaScript on the client side the reason for that a little bit out of the scope of this video but just add use client to the Top If you don't understand then what we are doing is we're just creating a form that asks for first name last name an email and then we have a submit button and we also have here I created a stateful variable called submit and this will show a status of submission once we have our um recap just set up and here's what this looks like pretty basic little form doesn't do anything yet so now what we're going to do is we're going to start adding some more functionality to this and actually make this form do something so to start what I'm going to do is I am going to import some packages so I'm going to grab the use Google recapture that's very important and I'm also going to import axios so we're going to need that for communicating with our API route okay now that we have our Imports what I'm going to do is I'm going to create our handle submit function so this will be an onsubmit for an onsubmit event for this form here so let's get started with that so I'm going to call the function handle submit and it will be an asynchronous function and oh I'm also going to have to take in a form event as a parameter for that and so with that form event the first thing we'll do is we'll prevent the default action what is refreshing the browser and I will set submit equal to just an empty string once again in case we had a value in there already now what I'm going to do is I'm going to make sure that that we are ready to execute our recapture so in order to do that I'll grab this line right here from my notes we have to use the use Google recapture hook that come that we imported before and here we're going to get a function called execute recapture so first we want to make sure that we have this um execute recapture function actually loaded before we're uh trying to execute anything so we're just going to make sure that we have that by negating that the falsy value of that and then we're going to console.log I'll just say uh not available to execute recapture for example something like that and then I'm just going to return to take us out of this function perfect so now what we need to do is we will do const G we'll call it g recapture token so what we're going to do now is we're going to get our token that we're going to send to our API route to verify that our recapture is properly set up so I'm going to do await and I will do execute recapture and then in here this is just for analytics sake we're going to give it a string so that we can look at our analytics later and see what it is I'm just going to um and see where the calls are coming from I'm just going to call it inquiry submit pretty simple okay so now we have our recapture token that's processed on the client side so what we need to do now is we need to create an API route on our server where we can then verify this token so we're going to do that by using API routes within nextjs so I'm going to go over to our app directory and I'm going to create a new folder I'm going to call Api and then I'm going to create another folder in there called we'll call it recapture submit and inside of recapture submit I'm going to create a file called route. TS so the first thing that we're going to need is we're going to need the next response um object from next server as well as we're going to also need axios technically you could do all this without axio but I really like it um then we're going to export an asynchronous function and it's going to be called post because we need to create a post request and the parameters for this will be request and response perfect so now what we're going to do is we're going to get our secret key secret key and this is going to be equal to process dot m dot what did I call it over here I call it recapture secret key yeah okay process. end that recap secret key okay we're going to have that and then we're going to do uh post data what is going to be equal to the request and the Json that's passed to it now we're going to do we're going to destructure the uh Google recapture token from that so capture token and this will be equal to um yeah post data yep and then from there I'm going to create just a simple holding variable called res and I'm going to then get our form I'm going to copy this line for my notes because this is kind of long we're going to grab this form data or my apologies where we're intending on sending this so we have that and then I am we're going to have to do a try and catch block because here's where we're going to make our axio call to the uh to Google in order for them to verify this token so what we're going to do is we'll do res response res you want to call it equals await axos dopost and in here we will we are sending the post request to this endpoint right here and then we have our we're going to give it the form data as an extension as well as then we are going to give it this header that we need to have this is just from the documentation don't don't worry about the details of it perfect so now that we have try we need catch obviously and what we will do here is we will return a next response response Json and we will just say success equals false perfect so yeah we just want success true or false we're going to get a success as well as a score for a recapture back from this function so yeah um so we H the catch now now what we're going to do is I'm going to just copy this block and explain it because it's a little bit long to write but what we're doing here is we're saying does um um this res variable exist what it does is the data success so that true or false value that we were just talking about and is the score over 0.5 so recapture will return a score and it will be anywhere between zero and one and the way that you should check if the um user is a bot or an actual human being is if if they give a score of above .5 then that means that Google believes that this result is a human so that's what we're going to use so yeah that's our entire route one other thing I realize that we have to do unfortunately is I have to change the name of what I called the variable because it pulls it by default so we just need to make this next public recapture site key instead of key that's just from the the npm package you installed hey Ben from the future here just realized you don't need to actually change that uh variable's name you can make it whatever you want as long as it's passed to the recapture raer that will make in a couple minutes I just confused it with a different package my bad don't worry about that back to the video um now what we're going to do is we're going to go back to our route and we're going to create the call to the rout so I'm I'm going to just grab a block of code here and I'll explain it briefly how it works um so everything below this is what I just copy and pasted so what we're doing is we're creating an uh axio response to um this endpoint right here what is our the value we created recapture submit and our data is a recapture token and here are the headers we're going to use the headers in this case don't really matter because it's with our it's within our own application and then what we're going to do is is response data a success and if it's a success then we're going to just console log this to the console and we're going to say set submit recapture verified and form submitted else so if it's not a success then we're going to return um we're going to say fail to verified recatch and you must be a robot and we're also going to console log the score to the console okay so now the last thing that we need to do is we need to create a wrapper and this is going to go right inside of our um layout we'll put it right inside of the body we'll we'll put it right around the children object here so I'm I'm just going to copy and paste this because it's pretty straightforward and if you made it this far in the tutorial you probably probably understand this sort of thing already so I'm just going to do Google capture rapper. TSX and paste this in and what we're going to do is what what we do here is we're getting this Provider from the same package we had before and we're taking in a child of a react node which is again going to then be the children and we're getting our recapture key from our environment variables here and we're passing it in to the recapture provider it's we're we're checking if it's not null or not but it's it's never going to be nullable unless you mess something up within your configuration when you're deploying it on versell or something like that so we don't really need to worry about that and what we're going to do now is I'm just going to save that file and I'm going to come in our body here and Google capture wrapper and we will put it right in here and with that in mind now everything should work and we should be ready to go and I'm glad to see this right here so this little thing shows that our site is protected by recapture and this also gives us enough information to know that we set it up correctly on the recapture um website there because it would it would be shouting at us right here saying that the domain's invalid or something like that so what I'm going to do is I'm just going to type in my name and email and then let's click submit and see what happens oh I made ignore that I made a bit of a mistake here I forgot to add the onsubmit call and that should be right here and that is handle submit so that's all we need to do and now it should work perfectly so auto fill my data click submit let's see what we get so recapture verified and form submitted so let's check our console here and successful score of 0.9 I don't know if you can see that I'll zoom in a bit but yeah that we can we can see that our recapture is is now working correctly one thing that is a bit of a pain so if I go to analytics you're going to see we're not going to see it right now and you're not going to see it because it is quite delayed and you're going to see that the score for this site might not be accurate before running with some uh with sufficient traffic and this is something you're going to see until you make a few hundred requests on it you're going to get a lot of scores of 0.9 what is kind of annoying however the thing is is recapture especially with the version three invisible version you need to really calibrate with your site so if you can have the recapture wrapper right here we have a surrounding our whole site however you probably don't want it on everything you probably just want it on like maybe a login form and a sign up form for example maybe you want to put it on your homepage too so that recapture can get more data from the user and it will help you get rid of this little warning a bit quicker so yeah that's really all for now that's all that you need to do in order to set it up properly so I I hope you found this video insightful and it was quite helpful I'm sorry it's took forever to make because I was getting a lot of emails and comments about setting this up I'm also going to still make the Shopify headless um video series it's just a ton of work um so you're going to just have to be a little bit patient with me I'm getting a lot of comments about that too but yeah that'll be coming soon hopefully within the next month or so and I'm also waiting in case there's any new um templates or deployments from the versell team with nexj S14 because the last one I did going over the pros and cons of using a headless architecture was with uh NEX s13 so yeah that's all hope you found this beneficial and if you did like And subscribe and yeah have a good one

Channel: Ben Haig

Views: 3,342

Keywords: typescript, javascript, programming, nextjs, web development, frontend, backend, fabled web solutions, seo, spam, recaptcha, captcha, nextjs14, npm, yarn, pnpm, html, jsx, coding, tailwind, css, app router, app directory, api, google, web development 2024, recaptcha v3

Id: pcxh7cpeboU

Length: 19min 20sec (1160 seconds)

Published: Sat Dec 16 2023