React + Node.js | SMS Phone Number Verification

hi everybody my name is Victor and today I'm going to be showing you how to verify your users phone numbers from your react application easily and really really quickly so this video shouldn't take more than five to ten minutes to complete and it's pretty beginner friendly so for starters I've already made a registration form this is just pretty simple HTML CSS stuff and the first input is for user to input their phone number with an international prefix as this says and some random password for this example so let me show you the code quickly so yeah this is the first step that hosts the register button plus the inputs for phone number and password on click function for this button invokes the same code function which is currently unoccupied and it's going to be implemented shortly and the second div is for the verification verified code function and we'll also Implement that shortly this little consent variable is just so that when we send the code to our user uh when they receive it we get set to true and actually switch the screens so we don't have to use any routers in this example so this is just some simple styling I mean all the code code will be available on GitHub and the link will be in the description and of course feel free to use this as your starter for the back end we'll be using node plus express some pretty simple stuff through an Implement methods currently exported routers for perfect code and send code each corresponding to their functions as you can see we're exporting the router into server.js it's running import 5005. we're using course this origin star is just for testing purposes of course because it would be a security Hazard to actually use this in a real production application so we'll also use app that use experts.json just so we can parse Json bodies so okay let's begin but uh first things first we have to install some packages so navigate to your server terminal I'll do it again like this and just run first npm I of course okay by the way I already have all of these modules installed installed but I'm doing it again for the purpose of the video and the last one we'll need is probably the most important it's actually the package will be using to send the messages it's textflow dot JS and it's it's pretty simple to use and it has Snippets and libraries for almost every programming language and you get a couple of free messages so yeah that's that's who I chose it for this store so now that we've got that covered let's just quickly navigate to their page here it's here this is the command we used since it this is a node library and like the same goes for reactor and grid framework this is what you'll need for first yeah let's just put here okay now we've required textbook.js and this will do in just a minute so the next method will need this one it's OTP verification and this is just an example using this the user has sent his phone number for verification that's what this does when the user sends their phone number by clicking register this function should be invoked on our backend to send a verification code to this number with verification options which I'll also explain in just a moment so we'll read this and let's just put it in the result okay and now for verification options verification options is an object that actually um tells the text flop service number one what is your service name that's the name that's actually going to be displayed to your users in their messages let's call it my super cool app and seconds is the number of seconds the token will prevent let's use 600 for example by the way this isn't the necessary option you could uh just as well send a request without this okay one little thing we forgot to actually get the stuff from the body so we're sending a phone number and we're sending password and it's in request.body Okay so I just my super cool app yeah that's better so let's just check their documentation for this but I think I think this is correct service name yeah and seconds great okay so this is pretty much done so now let's actually if result dot okay three resulted okay let's actually uh I think we can do this a bit better solid state is that Json result Dot message okay we don't even need this actually since the result already has all the characteristics we need so yeah this this shall suffice and this of course we don't want to send message to a generic phone number yeah this seems all right and now just one little last step is to actually make an account and get our own API key this should be like pretty quick just sign in with Google whatever is best for you and now let's go to the API and copy our key of course do not share this key with anyone since it's select your account and your payment process okay got it let's just check again verify codes and code okay this is on the right resulted status okay now we should actually just put this here I will I'll just copy a snippet like this is a pretty simple function it's just a fetch post request with the body you'll see in just a moment yeah so just to make this a bit cleaner let's just use server IP yeah so method is post we got some headers except content type applications Json and in the body we're putting the phone number and the password I mean you could also put phone number just like this but for the purpose of this video since I don't know how many beginners we have let's just put it like this so it's simple and now if response is okay we just alerted Verification codes and successfully that I just put a little else else alert oh no we have an error yeah that's pretty much it let's just check whether it works okay our front end is already running oh there's this receive SMS online just to get a message it's easier to show for the browser for the password let's click register okay okay verification code sent successfully great let's go here update messages I just got to wait a moment I guess here it is your verification code for my super cool app is 351-9206 I just paste it here and now before we actually click the button we have to implement the methods so for the verificate function we'll take a look again at the text flow code Snippets and yes it seems this is the one we actually need so we're just gonna wait text flow dot verify code and again we'll need something similar to this this wait a moment yeah uh instead of password again just passing actual user's phone number and instead of this user entry called string let's just pass the real code okay now let's see if result dot valid is true then the number is verified okay great so let's just use if result dot valid this return as the state is 200.json result message right and now only thing left is just to handle this little thing if it's not valid resulted status that adjacent result that message okay great this seems all right just go through it phone number code result verify code if result valid and greatest things okay this corresponds to this endpoint slash API slash verification code and this is very difficult each call has a prefix API because of this line because we said slash API which is the best practice for implementing this sort of stuff so now the only thing actually left is to implement something similar to this here so it's not sent code it's verification it's also post again and instead of password we're passing in the code code yeah so we won't be needing this now verification code sent successfully the number verified number verified successfully else let's keep the same alert oh no we have another okay great so now this is we just need one more server restored and that should be it cloudserver.js server listening okay guys let's let's see if we've got the end result right number verified successfully and that's it thank you guys for watching today's video um and yeah see you in the next one goodbye

Channel: Viktor Vujicic

Views: 5,576

Keywords:

Id: Kd2ofGb83HU

Length: 13min 50sec (830 seconds)

Published: Sun Feb 12 2023