Google Captcha in React || React Google Recaptcha || Captcha Authentication || ReactJS Google Auth

[Music] hey guys what's up we are back again with another video and in this one we are going to be uh looking how we can introduce uh uh google recapture in our basic login form authentication for the authentication purposes uh for the user sign-in so let's get started i have created a basic uh login form for you so we are just only focusing how we can introduce on the recaptcha part uh so that's why i know it is looking somewhat like not much that beautiful but anyways we are only focusing uh towards the recaptcha library for this video and in order to install uh in order to use this recapture library i want you to install one npm package that is react google recapture you can simply go to google and you can type react google recaptcha and it is the first link you will need to open that is react google recapture and we will be installing this i have copied it and just paste it into your terminal npm i react google recapture yeah it has been installed in just one second and now we are good to use it at our application if you will scroll down you can see in the documentation it is uh first of all we need to import this i'll import it in my top of our app.js file the basic login page and i'll copy this particular component which is offered to us from this library recaptcha and i'll paste this just after my this uh this password okay and it is giving error because on change is currently not defined so let's declare it on top of it on change i am creating an arrow function and yeah currently we are not returning anything from it it's just only us so that we can get rid of the errors and now if you go on to the screen hit refresh you can see that google recaptcha has been visually available on our login page but it is currently giving this us the error error for site owner invalid site key so how we can get rid of this we need to uh and you can see it is also giving in this in the console currently it is not but yeah so how we can get this working so first of all you need to go into you can type react not react google recaptcha okay and on the first link you need to open it and click on v3 admin console when you click on v3 admin console it all it will ask you for the verification just select the account from which you want to authentication i am going to authenticate with my another account yeah so over here as you can see i will i'll be going with the uh re recaptcha uh v2 currently because i want to include i am not a robot checkbox challenge there are recaps of e3 as well that is related to the question and answer but i will be going with recaptcha v2 this time okay and in here you need to add the domain on which you want to include your recaptcha for example your website name is www.abc.com and you want to introduce on that particular domain which your website is hosted you need to add that domain in here so i'll be using that on my localhost server so i'll be including only a local host okay and another one which i'll be including is also the localhost port number that is 127.00.0.1 so this is our localhost number and i have included it now everything is done now i'll click on submit please specify a label name okay let me type demo if it is correct let me check yeah let's accept all the terms of service click on submit and after clicking on submit you can see that our label has been registered and for in order to make this work you need to copy this site key for you for this i'll be copying this and now you need to go into your application and side key inside side key you will be pasting this inside your string let me yeah yeah hit refresh and you can see that react google recaptcha has been installed and has been included in our basic login form successfully and in order to validate through this i want you can do that as you can perform all the validations in here inside the on change method you can perform all the validations for example when user when user performs sign in as you can see when the answer is correct then you allow the user uh to log into the application as you can see hit next it is asking for traffic lights traffic lights verify yeah you can see that it has been verified and based on this particular uh authentication you can let your user sign into the application so that's pretty much for all in this for this video i hope this was a very valuable session and definitely you are going to be uh you'll be asked for such kind of requirements so uh save this video for for your future references and if you like our content kindly uh like subscribe and share our all videos in our channel so thank you so much for joining me you

Channel: Fusion Programming

Views: 13,335

Keywords: google captcha, recaptcha, reactjs auth, captcha authentication, Challenge login in react, login authentication, js, jslogin, react login, reactjs 2022 captcha, challenge, captcha challenge, google captcha v2, login captcha, Java, Google reCAPTCHA, how to register reCAPTCHA, how to create google recaptcha key, how to get recaptcha key and secret, google recaptcha sitekey, captcha sitekey, best google react recaptcha library

Id: GlJZ8Asv1-c

Length: 6min 51sec (411 seconds)

Published: Sat Sep 17 2022