**Implementing One-Time Password Verification with TypingDNA**

In this video, we'll be exploring how to implement one-time password verification using TypingDNA's new Verify API. This is a relatively straightforward process that involves creating two routes for verify and result pages, as well as handling the payload callback function.

First, let's create our root route for the /verify endpoint. We'll need to install Express.js and TypingDNA by running `npm init` and then adding them to our package.json file. Then we can start setting up our routes. We'll create a new file called verify.pug and add an H2 tag with the text "Message". Below this, we'll render the value of data.message.

```pug

h2= message

br

p= message

```

We'll also add a catch block to handle any errors that might occur during the verification process. We can use `e` to represent the error and then render it in our page.

```javascript

app.get('/verify', (req, res) => {

const otp = req.query.otp;

const oneTimePassword = req.params.oneTimePassword;

// Send a request with the OTP to TypingDNA's API

axios.post('https://api.typingdna.com/callback', {

'otp': otp,

'one_time_password': oneTimePassword,

})

.then(response => {

const data = response.data;

res.render('verify', { message: data.message, status_code: data.status_code });

})

.catch(error => {

console.log(error);

res.render('result', { error: 'Error' });

});

});

```

In the above code, we're sending a POST request to TypingDNA's API with the OTP and one-time password. We then check if the verification was successful by checking the status_code in the response data.

Next, let's create our result page. We'll add an H2 tag with the text "Message" and render the value of data.message.

```javascript

h2= message

br

p= message

```

We can also add a catch block to handle any errors that might occur during the verification process.

```javascript

app.get('/result', (req, res) => {

const otp = req.query.otp;

const oneTimePassword = req.params.oneTimePassword;

// Send a request with the OTP to TypingDNA's API

axios.post('https://api.typingdna.com/callback', {

'otp': otp,

'one_time_password': oneTimePassword,

})

.then(response => {

const data = response.data;

res.render('result', { message: data.message, status_code: data.status_code });

})

.catch(error => {

console.log(error);

res.render('error', { error: 'Error' });

});

});

```

In the above code, we're sending a POST request to TypingDNA's API with the OTP and one-time password. We then check if the verification was successful by checking the status_code in the response data.

**Logging**

Finally, let's talk about logging. If you go to the dashboard and click on logs, you'll see all of the requests that were made to TypingDNA's API. This can be helpful for debugging purposes.

```javascript

// Verify endpoint

app.get('/verify', (req, res) => {

// ...

});

// Result endpoint

app.get('/result', (req, res) => {

// ...

});

```

**Conclusion**

That's it! With these two routes and the payload callback function, you should be able to implement one-time password verification using TypingDNA's new Verify API. Remember to check the status_code in the response data to determine if the verification was successful.

If you have any questions or need further clarification on how to set up this code, feel free to leave a comment below. And don't forget to like and subscribe for more videos on developer topics!

"WEBVTTKind: captionsLanguage: enhello everybody and welcome to the youtube video so in today's video i'm going to be showing you how we can use typing biometrics as a form of two-factor authentication to verify users that are signing in or creating accounts on our website or platform now this technology is really really cool a company called typingdna has two apis one called the authentication api another called the verify api and in this video i'm going to be showing you their new api which is the verify api which is a much simpler version of what i'd actually shown previously on this channel which was their authentication api so if you're a little bit confused essentially what this means or what i'm going to be showing you here is how you can have a two-factor authentication method that does not involve the user constantly having to type in two-factor authentication codes so sms codes or email codes it actually uses their typing pattern and they're typing biometrics to verify them now of course if that verification fails there will be a two-factor authentication code sent to the user but this is great and there's a lot of advantages behind using this typing biometrics as your kind of default two-factor authentication rather than constantly sending two-factor authentication codes now i do need to mention that this video is sponsored by typing dna they have paid me to create this but i've been working with typing dna a lot recently i think we've done maybe three or four different collaborations already they're a great company they have great technology and i think you guys are going to be excited to see what we can do here and how simple it is especially compared to the last api which was their authentication api which again if you want to check out the video for i have a link in the description i'll kind of throw up the thumbnail and a card for it on the screen right now regardless let me just kind of show you how this working works sorry and then talk to you about some of the advantages so let's actually just go and look at the demo so what i'm going to do is just go over here to typing dna verify and start the demo okay so the first thing you need to do here is enter a phone number or enter an email now what i'm going to do is enter kind of a dummy email that i set up previously that i just use for videos like this it's called code racer live stream app at gmail.com i'm going to start the demo it says okay you want to verify with typing dna yes i do so i'll press verify with typing dna a pop-up comes up it asks me to type in the following and notice as i'm doing this it is tracking my typing pattern so yellow toothbrush socks firearm okay let's verify this time only to register you have to type two more times okay so let's do that yellow toothbrush socks firearm okay and then yellow toothbrush socks and firearm now notice i spelt this wrong so i need to go back and fix this okay i agree and now next all right let's see what it says here almost there email verification a six digit code was sent to your email enter the code below i'm gonna grab that code i'll be right back okay so i've got the code i'm going to press next and now you're going to see that it verified me successfully so what i just did here was enroll my typing pattern kind of create an account with typing dna if you want to think of it like that and now every time i try to sign in so let's actually go ahead and do this i'm going to try to sign in with my email here you're going to see that it's going to actually use my previous typing patterns to authenticate me here so now this time when i type yellow toothbrush socks and then firearm of course i'm going to make typos there i'm going to press verify and then it says my verification was successful my typing pattern here matched the typing patterns i enrolled with it previously all right so that was kind of the demo and explanation of typing dna verify now our implementation here is going to be using node.js express and then pug for the front end you can see the front is extremely simple if you don't know any of those technologies don't worry we're hardly using them it's just to have a really basic web server running and what we're going to do here is have a button it's going to say verify with typing dna and then same way as before you're going to type in your stuff okay notice i typed this wrong so i need to fix it i'm going to press verify and then you're going to see that it's going to verify the typing pattern now the reason it's not asking me to insert an email is because the email is hard coded in the back end but if you wanted to not have the email hard coded that's super simple again this is just meant to give you the simplest implementation so then you can go and extend it and add to it and actually maybe add it into an app that you already have there you go so that's what we're going to be doing again we're using express nodejs and then pug for the front end but really minimally for all of those okay so what i'm going to do now is just quickly show you i'm going to go back to just the typing dna website i just want to quickly show you some of the core advantages of actually doing this of having this type of authentication so if i go to verify and i press learn more it's going to redirect me here and i'll just kind of go through the website because they laid out pretty nicely but first of all this is a much better user experience when you have people just able to type something in really quickly and have them authenticated from that rather than having them have to go to their phone or open their email or whatever wait for a code to come in and then insert that code it also keeps your sms costs low right and it uses the sms codes or the email code sorry as the root of trust not the de facto authentication so it's not the default method it's only what you go to when the actual verification fails from typing and then of course this is state of the art authentication this is actually really good i'm always really impressed at how well this typing biometric stuff actually works i don't know exactly how it's implemented the technology behind it but i know it's very advanced proprietary and well just quite good okay anyways that is enough about this itself now what i want to do is start walking us through how we can actually implement this we're going to have to install and set up a few things let's go through those steps now all right so the first step here is going to be to create an account on typing dna now typing dna is completely free for the first year that you're using it for so don't worry about that just go to the typing dna website i'll have a link to it in the description and what you're gonna do is create an account so go to the verify page right and then press start for free and then what you're going to see is that it would bring you to a page we need to create an account now for me it's bringing me right to my dashboard because i've already created an account so at this point in time if you don't have an account pause make one and then resume the video and i'm going to go through the steps we need to follow once we're in our dashboard all right so we're in our dashboard now i've just set up a kind of brand new fresh account so i can go through the steps with you the first thing that we need to do here is we need to connect an sms gateway gateway sorry or an email gateway to our dashboard now the reason we need to do this is because we have to have either sms or email as kind of our two factor method right so if the verification fails from the typing biometrics we need to be able to send a code either via sms or via email to the user so we have to pick one of these or both of them if you want the users to be able to sign in with both phone or email in our case we're just going to do email here but if you wanted to do phone it'd be the exact same steps and i'll show you later in the video how you do this using sms the only change is that you're going to connect your twillow or twilo or however you say that rather than connecting the send grid okay but we're going to connect the send grid and the thing with this is this one is free if you use the sms it's going to cost you about 20 bucks to actually get started so let's go and connect an email gateway and notice it's telling us we have to type in a grid api and then our sender identity so this means we need to go to the send grid website so we're going to go to send grid like that and we're going to make a new account so i've already made account on sendgrid i'm going to sign into it here but for you guys what you'll need to do and let me just sign into this first is make a new account on sendgrid and then i'm going to show you once i get in here how you do all the configurations of course after i put in the two factor code okay so i'm in the send grid now again i already have an account created you guys have to make one first but once you make one it's going to ask you a few different setup steps most of them are intuitive i'm not going to walk through everything but what you do need to do once you're in the account and once you've verified your email and you've created your sender email and all of that is need to create an api key now the first thing i'm going to do is just see if i can go to the account details or the setup guide here and just make sure i can walk you guys through any steps that maybe are not intuitive so the first thing you need to do is create a sender identity i think this is pretty straightforward to walk through but you need to do that create a sender identity you can use the same email you used to sign up here i just made a random gmail email and use that as my sender identity next what you're gonna need to do is uh well actually not send your first email you're gonna need to verify that sender identity so you're gonna have to have access to that email account press the email it sends you and then you should be good you should have the sender thing set up once you've done that again you need to make an api token so what you're gonna do is go to settings you're gonna go to api keys and then you're going to make an api key now i'll just make one here so let's go ahead and do this i'm going to name this tutorial okay and then give it full access okay so give it full access make a tutorial and then it's going to show you this token now it only shows it to you one time so make sure you copy it immediately you're going to copy this token go over to your dashboard on typing dna and then you're going to paste that token in here okay next what you're going to do is type the email that you put in as the sender from send grid so it's possible to have an account with send grid that has a different sending email so if this email you're sending emails from is different then you're going to put that one here in my case they're both the same but whatever you put into uh send grid to actually send the emails to people that's the one that you want so here what i'm going to do is put in my email so this was what was it code racer live gotta spell that right live stream app at gmail.com okay code racer livestream app at gmail.com looks good and then you're gonna press this little upload button here it's gonna sync make sure it's all good and then if it says email gateway key saved you're good you see a little check mark and you've hooked up send grid so that's how you hook up send grid again pretty intuitive i figured this out pretty easily on my own but those are kind of the steps okay i'm going to press done now and then you'll see i have two api keys here it's fine you guys will just have one okay now what we're going to do is we're going to actually create an integration with typing dna so we have our client id and our client secret which we need but we also need an application id and this is because you can have multiple applications connected to typing dna so what i'm going to do is add my first integration this is really just like connecting an app to it and then what i'm going to do here is put the name so i'll just do tutorial and then the domain that this is going to be connected to so unfortunately we cannot use localhost for our development or testing for this we do need to use some real domain that is https so it needs to be ssl certified it needs to be https and so what we're going to do now is we're going to install a program called ngrok or ngrok sorry that's going to allow us to actually have this kind of temporary domain that points to localhost that we can use in development so we're going to do is go to ng rock we're going to download this tool i'll leave a link to all of this stuff in the description so just go and press download download for windows mac or whatever system it is that you are on and then what it's going to do when you download it let me just download this here to my downloads okay so let's download it here okay so once it's downloaded it's going to have a zip folder so what you're going to do is open up the zip folder you're going to see there's an application here and then you're going to cut this application out and you're going to put it somewhere that it's easily accessible so in my case i'm just going to go to the desktop i'm going to go to my typing dna tutorial folder i'm going to paste it inside of here so that i have ng-rock this exe application in the folder that i use when i start writing some code okay so that's going to take a second once that's done i don't know why that's lagging then we have ng-rock what we're going to need to do is now use ng-roc to create our domain so let's go ahead and do that all right so i've just opened up the folder where i have ng rock now this is pretty easy to do or pretty easy to use but what you're going to need to do is open up a command prompt or terminal that is in the same directory as this file it doesn't matter where it is you just need to know where it is so you can open up a command prompt or terminal so i'm just going to open it in windows explorer i'm going to go to this top bar here i'm going to type cmd and that's going to open up my command prompt now what i'm going to do is type ng rock http and then 3000. now what this will actually do is it will create a temporary url i believe this url lasts for about two hours that actually forwards all of the requests from it to a port on your local machine so in this case we're going to run our server on port 3000 this is going to be http this is the protocol that we're using and so what this will do now is create a domain for us that accepts http requests and then forwards all of them to our local host and then the localhost will go back to the domain and the domain will return to wherever it was requested from so this will give us access to an https domain that we can use for testing purposes so if you do this and you run you're going to see that it says okay the session expires in two hours you have a version region a web interface and then what you want to look for here is this https domain so i'm going to copy that you want to copy this whole thing here and what we're going to do is notice by the way it's going to localhost 3000 we want to go back to typing dna and we want to insert our domain here but we want to make sure we remove the https so you just want the domain so all of these kind of random numbers and letters dot ng-grok dot io so put that there then you're going to say create integration and it's going to show you the application id perfect we now have all the three things that we need to actually start working on our application so we've set up sendgrid we have ng rock going we have our client id our client secret and then this is known as our application id now what we need to do is actually start writing some code so the next thing we're going to need to do sorry is install node.js so i forgot you do need node.js so go to node.js again i'll link this in the description download the latest version if you don't already have that and then what i'm going to do is open up vs code i opened that folder that you saw i have ng rock inside of and this is where we'll set up our actual server and start doing all of the development so you can use whatever editor you want obviously vs code is just my preferred one so that's why i'm using it now what i'm going to do though is i'm going to open up the vs code terminal and i'm going to create a kind of starting or template express application in node.js so you can see here i've opened up my terminal notice it's in the typing dna tutorial folder again do this wherever you want i'm just doing this on a folder on my desktop what i'm going to type now is npx and then this is going to be express hyphen generator like that no i think i spell generator correctly yes it does or yes i did sorry and then i'm going to give this a name i'm going to call this website so what we're doing is we're going to use this kind of shortcut here that comes from node.js so npx express generator website and this will create a new folder for us named website that has all of the node stuff that we need to actually have an express application now a lot of the stuff in here we're not going to actually need and i'll show you how we can clean that up in a second but this will just save us a little bit of time okay so we did that and now notice it's going to create this website folder for us and there's a bunch of stuff inside of here now the first thing we're going to do is we're just going to start deleting stuff that we don't need so we're actually going to delete all of these folders here except for views so we're going to delete all of these bin public and roots we don't need those and then we're going to have to change some stuff in some of the other folders as well okay we're now going to go to views we're going to delete all of the files inside of views but we'll keep that directory because we will use that directory in a second then we're going to go inside of app.js and we're just going to start deleting stuff that we don't need so we don't need this cookie parser we don't need this logger we don't need these this index router or this user router we'll leave this for now we don't need any of this stuff right here so we can get rid of all of that we don't need any of these lines any of these app.uses we'll get rid of those we can leave this catch actually i'm thinking if we need this or not okay so actually i lied we are going to delete more stuff we're going to delete all of this okay and we are going to delete this create error thing and then this is what our file should look like for now really we could have probably just written this file from scratch on our own but it's fine i figured we could just use the shortcut and maybe it would save us a bit of time maybe not okay so now that we've done this we're just going to leave the file like this for now we're going to come back to it in a second but this but this is where we're going to write a lot of our code this is going to be kind of our server our back end and then i'll show you how we can set up the templates in the front end in a minute okay so now what we need to do is we need to install all of our node modules so we have this package.json and this has all of the dependencies that we need and actually if we go inside of here we can see that some of the stuff we don't need for example we don't need morgan we can remove that we don't need http errors we can get rid of that we do need debug but we don't need cookie parser okay so these are the three dependencies that we need for right now now uh what we can actually do is we can go and cd into our website folder so cd website and we can do npm install like this and what this is going to do is install all of these dependencies right here for us then we're going to add a few dependencies here that we need specifically related to typing dna and we should be good to go okay so you can see that was pretty fast we installed all the dependencies all of them are inside of the node modules folder now next what we're going to do is we're going to install puck so we're going to say npm install we're going to do hyphen capital s to save and then we're going to type pug pug is what we're going to use as our kind of templating engine in the front end so npm install hyphen s pug okay that one's going to take a second and then once that one is done what we need to do is install the typing dna verify client which is a nodejs package or npm package so now we're going to type npm install and then typing dna hyphen verify hyphen client okay so let's install that give that a second now it's worth noting here that if you are not going to be using javascript there is some other clients i believe there's one for php i think there's one for c-sharp as well and i believe more are being created so there's a lot of different ways to do this you don't just have to do this from an express or node application but this is definitely the simplest way and again even if you're not using this programming language i'd recommend you just follow along because this is going to explain a lot of stuff and probably save you a good amount of time going forward okay so we've installed all of the stuff that we need i'm just making sure we don't need anything else and at this point in time i think we're actually ready to start doing some development so we've got all of our package packages story installed and now what we are going to do is start working in this file right here so there's a few things that we need to set up here related to express the first is which a router so we need some way to actually handle all of our traffic and create different routes right so like slash home slash verify slash result etc so what we're going to do here is say var router is equal to and then this is going to be express dot router like that okay next what we are going to do is at the bottom of our program we're going to say app.use and then we're going to put a slash here and we're going to say router so this should give all of the traffic that's going to the slash root to the router so then it can handle what different routes we have on our website okay the next thing we need to do is we need to make this app actually start listening on a specific port so we need to actually run the server here so we're going to say app dot listen and then we're just going to put inside of here port 3000 sorry not 30 000 3000 and then we can just do a console.log here so console.log and we can say listening on port 3000 just so we know this is running we don't need the module that exports so we'll get rid of that and now we can actually just test this and see if it's working so far now right now it's not going to do anything we don't have any roots set up but we should be able to see if this is working so to run this what we're going to do is say node and then we are going to put the name so app.js okay it says listing on port 3000 we are all good that means this is working fine now we can start setting up some of our views and routes all right so now we're going to start setting up some of the templates and the different views of our application once we have the view set up then of course we can integrate typing dna we'll add that typing dna button and i'll show you how all that stuff works what we need to do though is we need to change our rendering engine here to be pug instead of jade so we're going to go ahead and make that change and then see we have this views folder this is where we're going to put all of our pug templates now if you're unfamiliar with pug templates don't worry i won't explain them a ton but they're pretty simple and easy to understand what i'm going to do is make a new file inside of views i'm going to call this verify.pug okay you should see that you're getting that little pug logo which i think is hilarious and now we'll just start creating our first template so this is pretty straightforward what you can do is do html the indentation is important here so make sure you keep the indentation i'm going to say head and then i'm going to put my body tag like that and then what i'm going to do here is just say h1 i'm going to say welcome to typing dna demo okay that's going to be my first template super simple all i'm showing is just this h1 tag that says welcome to typing dna demo and i'll show you how we can actually pass values into these templates when we render them from app.js all right so we're going to create our first route here so what we're going to do is say router dot get this means we're going to accept a get request for this specific route we're going to say slash verify is the endpoint or the url that we want to go to and then we are going to create a function so we're gonna do the uh two brackets like this we're gonna do an arrow we're gonna take the request and then the response yes i believe that's correct and then inside of here is where we're actually gonna code out what we should do when we go to the slash verify endpoint so all i want to do right now is i want to say res which stands for response dot render and i'm going to render my pug template so i'm just going to render verify like that and that's all i need to do right now so what this does when i say res.render is it looks inside of my views folder which has already been set up here so we've kind of added this path looks for the verify template and then it's going to render that template or return that template as the response when we go to the slash verify endpoint so we can test this pretty simply we're going to run our application now what we'll do is we will go to our browser which browser should i go to i guess i can just go to this one and we'll go to localhost colon 3000 and we are going to go to slash verify okay and when we go to slash verify notice we get our h1 and says welcome to typingdna demo perfect now i did not forget about ng rock so i'm going to show you that now notice how ng rock this url is redirecting to localhost 3000 so what i can do is i can also go to this url so i'm going to copy this https url i'm going gonna go to my browser i'll go a new tab here press enter and then same thing i need to go to slash verify because we don't have a default route and then it brings me to the same page there you go pretty straightforward that's how it works so from now on we'll use this url we can use localhost1 that's fine but this one is preferred and actually to make sure it's all going to work with typing dna i believe we do actually have to be on this url but at this point in time we're not using typing dna yet and so it's not an issue okay nice so now we've set up our first route so what i want to do is i want to start integrating typing dna ideally we're going to have a button on this screen and then what the button is going to do is it's going to render that kind of pop-up you saw before that's all handled by typing dna we don't need to code any of that and then verify our user for us so the first thing we need to do is we need to create or actually kind of import here the typing dna client so i'm going to say var typing dna and then client like that and we'll just specify this that is the verified client so typing dna verify client is equal to and then we are going to require and this will be the typing dna hyphen verify hyphen client let me make sure that's correct looks like it is all right so now that we have required the correct resource here we need typing dna verify client we're going to create an instance of it and then pass through all of our credentials so the application id the client id and the client secret the three things that we need to actually kind of you know verify our application with typing dna so we're going to say var and then this is going to be typing dna clients like that is equal to new and then this will be typing dna client uh sorry typing dna verify client and then what we are going to pass here is an object that has the following the first thing that we need is the client id we then need the client secret or is it just called secret let me see what i've called here okay it's just secret okay so just secret like that and then lastly we need the application id okay so we have all of these three values uh they're on the typing dna website so we're gonna open that up i'm gonna go that's the wrong browser i have too many browsers here this is the correct browser i'm going to go to my verified dashboard here and then notice i have my client id secret and then the application id so i'm going to grab the client id i'm going to put it inside of here make sure it's in a string okay there we go now we need to go grab the rest of them so we'll grab the client secret i'm going to expose mine for now obviously by the time you guys watch this i will have deleted this account so that you guys can't hack me okay so we'll put our secret in and then lastly we need the app id we can go ahead and grab that one all right okay so let's paste that there this looks good i messed something up here okay save that and there you go nice auto format beautiful now we have the id the secret and the application id we've created the typing dna client and we've kind of instantiated this module and you know hooked up typing dna at least from the kind of beginning all right so there's two sides to typing dna we have the back end and we have the front now the back end is responsible for sending requests to typing dna to get information that we need to render the front end button properly so the only thing we're showing on the front end relevant to typing dna is a single button that has some special information on it and then that button will render a pop-up and that pop-up is completely handled by typing dna specifically by this verify client and that deals with the two-factor authentication codes and all of the stuff that we don't want to look at however we do need to send a request from the back end to typing dna to get some attributes that we need to pass to the button in the front so i'm going to show you how we can do that but i want to go to the verify documentation and just quickly walk you through it so everyone's clear on what's going on so you go to the dashboard and you go to documentation it will bring you to a new page and now i'm just going to kind of show you how exactly you do this and by the way you can refer to this in case there's anything here that i don't show you so notice you have a back end and a front it's saying get the verify client we have that already okay initialize the verified client we just did that we put in the id the application id and the secret obviously you would keep the secret secret but for our purposes just tutorial that's fine and then it says pass user data to the front okay so once initialized the next step is to retrieve the end user data in the back end for encryption and linking with the front end button created in the next step so what we need to call is this get data attributes method and we pass uh the email phone number or whatever it is either or to typing dna then what it's going to return to us is three things it's going to return to us i believe the client id the application id and then it's going to give us a payload now all three of those things we need to actually render our front end button because based on those pieces of information the button is going to show a different pop-up so you can kind of read through this and see exactly how it works but essentially this is telling us hey once you figure out what user it is that's signing in whether you have their email or their phone number you got to send that to us we're going to send you something back and then you can use that to render your front end button so that's really the main step in the back end is to use this okay next though we need to render the front end button and the way we do this is we integrate this script in our html so we put this in the head of our html document and then we need to put this button on the screen with the appropriate information so this right here returns to us these three things right the client id the application id and the payload and then we pass the name of a function that we want to be called once the authentication is done so once the authentication is done it's going to have a callback method that it calls this is a method or function that we implement ourself and then from there we can handle you know any errors or pop-ups or whatever it may be okay hopefully that's clear but that's kind of the process pretty straightforward what i'm going to do though is actually i don't need to copy this we'll just write it from scratch okay so what i want to do because i want to keep this super simple as as soon as i go to this verify page here i want to immediately send my email to typingdna and get the three pieces of information the id the application id and the payload that i need to render my front end button i then want to pass those pieces of information to my front end template here and then i can actually display the button on the screen and then when i press the button i can well be verified so let's do this so what i'm going to do here let me just look at my cheat sheet is say let actually i don't even need a let i think i can say const typing dna and then this will be data attributes is equal to and this will be typing dna client notice not verify client it's typing dna client dot and then this is get data attributes you can see we're getting that completion there and then inside of here we're passing an object and what we want to pass is the following want to pass an email want to pass an optional phone number the email is optional as well if you pass the phone number you need one of the two and then we can optionally pass the following a language which is going to be en for english and then a mode now explain the mode in a second but for now we're just going to use standard okay so what we can do here is we can either pass an email or a phone number we don't have to pass them we can pass both but we have to either have an email or phone number in my case i'm just going to do an email so for the phone number i'll just leave it blank so i'll just put it as an empty string and for the email i'm going to use that same email that i've been using for everything so code racer live stream app gmail.com so this is where you would put the user's email so usually you would collect an email from them and then you would put that into this field but since i don't even want to deal with doing that we'll just hard code in an email we'll always have this user here okay so let's save that that's good these two things are optional you can change the language right now i think it's only english that's supported in the future they will have more languages and then there's another mode here that's not standard called show otp now otp is that one time password right so let me go to verify here and let's see if it says anything about the mode all right so i've found the two modes here now you guys can pause and read these if you like again they're in the documentation though which i'll link in the description essentially the show otp mode just means that you are actually going to be shown what the one-time password is so the user will get shown that and they'll have to type that in to the field so you can see it says after the verification process is finished and the user has inserted the code into the input field on your front end a request to the back end is made so they'll get the one-time code and then they have to insert it manually whereas here the one-time code will just automatically be applied so they don't have to type it in again read through if you want all the details standard mode is just simpler i would just recommend you go with standard mode but some cases you might need to use this mode okay so now that we understand that what we're going to do is leave the mode as standard obviously and we are going to actually check if this is working and we're going to have a look at what the typing dna data attributes the attributes sorry r so i'm going to go here and just say console.log i'm going to log the typing dna data attributes and i am going to end my server by hitting control c and re-running okay so now what i will do is go here i will refresh and then notice here we get this we get a client id application id and a payload so these are the three things that are being returned to us now all three of these things we need on the button that we're going to render on the screen so now what we're going to do is render that button so we're going to go to our verify.pug template i'm just going to go back to the documentation here i'm going to start copying some of the things that we need so notice here we need this script so i'm going to copy this script it comes from a cdn so it's really easy to use so copy this all right so we're in the template what i'm going to do now is use the pipe operator and then put my script i'm going to put a tab here so the indentation is correct what this does is this makes it so this is read as plain text and essentially this just means that we can embed html tags in this kind of weird syntax pug template i'm definitely not an expert with pug but you just put this and then it forces this to actually be read as html which is what you want okay nice so we have that the next thing that we need to do here is we need to actually add a button so if we look here at the documentation this is the button that we need so let's just copy this button for now and then we'll modify it as we need so we're going to copy the button and notice this is not kind of showing up properly here right and the reason for this is that when we're inside of pug the syntax is a bit different what we actually need to do instead is say button open parentheses and then closing parentheses like this and then after this closing parenthesis this is where we can put the name of our button so in this case it's verified with typing dna so i'm going to put verify with typing dna okay i'm going to remove that last angle bracket i'm going to save that and now what we need to do is change these attributes here so for now i'm going to make all of these empty strings and also inside of this kind of templating language here you need to separate all these attributes with commas so that's really the only change we need to make we will fill these in in a minute but i have to show you how we can pass values to the template so we have typing dna verify that needs to be the class make sure that's the class of this button otherwise it won't work and then you're going to put these four things and then we'll implement the callback function in a minute we'll actually just do it right up here okay so now that we have that let's stop our server let's rerun it and let's see if we get a button showing up on the screen when we refresh now okay so when we refresh we get verified with typing dna when we press the button notice nothing's happening that's because we don't have the client id application id or payload and if we go to the console of our page we go inspect and we look at the console notice it tells us it's missing the application id great so we now need to figure out how to pass those things through so what we're doing here is as soon as we go to this route we're immediately getting the information that we need the typing dna data attributes we now need to pass this to our template so what we're going to do is we're going to create an object we're going to slowly kind of extract all of this stuff inside of here so we're going to say that the client id and actually now that i think about it what we can do here instead is we can just pass the typing dna data attributes so what resda render takes is it takes the name of the template and then an object of key value pairs to be passed as kind of parameters or values to the template that can be used inside of the template and so typically you would do something like you know message and then hello and then inside of this template you can directly access this variable hello and that allows you to use it inside of the template so here since this is already an object that has client id application id payload we can just pass this and i think this will work i might be incorrect but i believe that will work so we'll leave it like that for now now though we need to go inside of the verify template and the way that we're going to access all of these things is we're actually going to use back ticks we're going to use a dollar sign and then the two or the curly parentheses sorry and inside of here we'll use just the name of what's in the object so client id application id and payload to access those respective values so we're going to say client id i'm going to copy this actually you know it's probably easier if i just retype it so dollar sign like that i'll just copy that line and then this will be application id so let's say application id and then finally this is going to be the payload okay so if we save this now this should allow us to access these values and use them directly as the value for these kind of properties of the button hopefully that's all clear let's restart this so let's close the app rerun it let's now go here and refresh okay and now notice if we look at the source that we're actually getting the client id the application id and the payload all right so what we can do now is we can just test this the button is showing up we have all the stuff in the source here we have the payload the application id and the client id let me just refresh this one more time and you'll notice that every time i refresh this the payload should change the reason for that is every time i do this we're sending a new request to typingdna we're getting a new payload now though let me press verify with typing dna when i press it notice this appears pop-up is here that means all is working we can you know have a sigh of relief all of our hard work has paid off and now i can start typing okay so yellow toothbrush socks and fireman okay let's verify and there you go verified now the thing is we actually don't know like if that verified or not now we do know it verified because it would show us a message but we haven't implemented the callback function so for now let's implement the callback function and let's just print out what's actually being sent to the callback function so we can see what's going on after this button is pressed so what i'm going to do is i'm just going to make a script here i'm going to do actually in plain text again i'm going to say script and then script like that i'm just going to write some very basic javascript i'm going to make a function i'm going to say function and we are going to call this function callbackfn you can call it whatever you want but if you call it something else you have to change this to be whatever the name of it is so notice these are of course the same this is taking a payload and then all we'll do is just say console.log payload like that okay so let's just do that let's restart the server and now we will refresh the page okay verify with typing dna we'll type yellow toothbrush socks fireman okay i don't know how i managed to mess that up verify and then notice it gives us success when success is equal to one that means yes this was successful and the otp which is the one-time password now i'll show you how we can use this in a minute to do an additional verification but that means that we all look good okay now let me try to make this fail so let's go and i'll just type with one hand okay i'm actually going to type with my pinky and then hopefully this will mess it up okay toothbrush socks fireman okay verify and verification failed please position yourself naturally and try again okay so i'm gonna try to fool it because i want to show you how it sends me the one-time code okay to brush socks and then fireman okay verify typing verification fail okay so now it's saying all right a six digit code was sent to your email enter the code below so let me just go refresh my email and grab the code here all right so i was having some issue with my email there so i ended up just closing out of that pop-up doesn't matter just want to show you what actually happens when you fail the typing biometrics what i'm going to do now is show you how we can add one extra layer of security here and what we're going to do is we're going to go inside of our callback function and we're actually going to render a new page and this new page is going to show us the result of what just happened in the pop-up because you see that after we close the pop-up right or after we do the verification the screen doesn't change we don't see anything and what's actually being sent to our callback function is whether or not that thing was successful whether or not the verification was successful and the one-time password the thing is we want to make sure that the one-time password sent to our callback function is actually correct and so we're going to do an additional verification with typing dna there's a method that we can use very simple we're going to send the one-time password to typingdna and just ask it hey is this the correct one-time password after we've gone that one-time password from the typing biometrics authentication so the basic flow is click the button you know do your typing verification one-time password is sent through the payload to the callback function callback function renders a new page new page verifies that the one-time password is correct and then we're good your user is authenticated so let's do that now the thing is i need to send this one-time password to the new page that i can actually verify right and the way i'm going to do that for my callback function is i'm just going to change the location of the window so i'm just going to redirect us and using one of the query parameters so the things that shows up in the address bar i'm going to pass the one-time password and i will pass the success message so the way i'm going to do this is i'm going to say window dot location is equal to window dot origin and then this is going to be plus slash result and let me just save this okay i might just have to keep scrolling that's fine window location is equal to window.origin plus result plus question mark this is going to be otp equals plus and then payload dot otp plus and then this is going to be ampersand success equals and then plus and then this is going to be payload dot success so what this will end up looking like uh and sorry let me just scroll so you guys can see this here is the following so pause that if you want to see that but it's going to look like this so let me go down here we're going to have whatever the origin of our pages so just the root domain so let's just say for now it's localhost colon3000 this is going to be slash result and then equal sign denoting that there's parameters we're going to have otp equal to some numbers okay ampersand success equals one or zero whether we failed or whether we succeeded in the verification then this way from app.js we'll be able to set up a new route called slash result we'll be able to grab all of those query parameters and we'll be able to send the request to typing dna so let's actually do that now we're going to say router dot and get this is going to be slash result we're going to do the same thing request uh response sorry arrow function goes to this okay and then inside of here for now we are just going to say res.render and we'll have a new template this template will be result and for now we're not going to pass anything to it so just go back to verify.pug you can see that we are doing window.location that just changes the route so that's just going to redirect us redirects us to the result page we then set up the result root we now need to make the new template which is going to be results.pug okay so in result.pug we'll keep it simple we'll go html we'll go body we don't even need a head and for here we'll just say h1 results for now just that we see something okay so let's rerun our server and let's refresh this okay refresh and now we're going to go verify with typing dna and now we're going to just type this in yellow toothbrush socks fireman verify okay good brings us to the result page nice so now we need to actually look at these parameters notice we have result we have our otp and we have our success so we're going to look at those parameters we're going to pass them to the template and we're going to display them here so we can see what the one time password is and we can see whether we were successful or not and then of course we're going to send that verification to typing dna just to be like okay was this one-time password correct so we can actually start with that when we go to the result page i need to look here what we're going to do is we're going to get the one-time password and the success we're going to say const otp is equal to and this will be request dot query dot otp query holds all of our query parameters the things you see in the url address bar and then we're going to say const success equals request dot query dot and this will be success nice now we can pass these through so we can just say otp comma success and i think we might have to do this so i'll just do this otp otp and success success now if we go to the result template here what i can do is i can say h2 is equal to and i can just put the name of the otp so put otp and then i can say h2 is equal to success like that okay so what this is doing is it's actually going to use this right here it's going to use whatever otp is that i pass through and whatever the success is so you'll actually see the one-time password and you'll see the success uh that's kind of how the syntax works for pub okay so let's restart this i'm gonna go here refresh okay and now notice when i refresh it's showing me that one-time password and it's showing me the success message nice now though what we will do is we will send this kind of validation to typing dna so the way we do that is we say typing oops like this typing dna and this will be client and then this is going to be dot validate otp and we're going to pass here the email of the user we want to validate the one-time password for so in this case it will be the same email we passed before okay if you were using phone number you would pass the phone number here and let me just look at my cheat sheet to make sure i'm not messing this up yeah so we can put optionally phone number empty string and then you could make this a valid phone number obviously the phone number of the user you wanted to validate and then you're going to pass as a separate parameter notice these are two different parameters here there's an object and then the one-time password you're just passing the one-time password okay so that will send the request but then what we need to do is wait for a response we're going to say dot then we're going to say data like that and then what we're going to do is have a function here where we actually look at this data so for now i'm just going to say console.log data but in a minute we'll actually use this data okay so there we go now as soon as we go to the result page we're actually going to validate sorry the otp like that and then we'll pass the email of the user we want to validate for or the phone number and then of course the one-time password which we're getting from that page nice so let's go now and let's just start the process again so let's go to slash verify okay we're going to verify with typing dna we're going to type this in yellow toothbrush socks fireman i don't know how i keep making the same spelling mistake but there you go okay and then notice we get results uh two four seven six five six one but i didn't see anything logging ah sorry that's because i didn't restart the server okay gotta restart the server and we'll redo this again okay so let's go back to slash verify let's go verify with typing dna yellow toothbrush socks farm okay verify and then we're still not getting anything printing out okay this is interesting that i'm not seeing this so give me a second guys and i'll be right back okay so it turns out i was thinking for some reason that it was gonna show this on the web page but instead it's showing it right here so this actually is working we're seeing it says success 1 code 19 message otp given matches shows us the session id and gives us the status code so we are getting this so what we're going to do now is we're going to pass through this message that's really the only thing we care about from this to our result page and display that message so what we need to do is we need to put the res.render inside of here and then what we're going to do here is say that the message is equal to data dot message okay all right so let me save this and now what's going to happen is we're going to pass through a message which is whatever the data dot message is and then we'll display that message so let's go ahead and do that i'm going to go to verify sorry result.pug i'm just going to say h2 is equal to message and now we should see the message of course after we send this response nice now just for good measures here we'll add a catch so we'll say catch we'll say e and then we'll do the same thing we'll say res.render but this time for the message we'll just render e so whatever e is i need to get rid of that so whatever the error actually is we'll just display that nice uh and actually i think we have to say e.message let me check if that's the way to do it no i think it is just actually e okay nice so i think we've done almost all of the code i'm going to restart the server here and let's just do this again from the beginning so let's go to our website let's go to oops slash verify all right and now let's verify with typing dna okay so yellow toothbrush socks fireman okay verify and then notice it brings us to this page we get results we have the one-time password one and we have the otp given matches after we send that request nice now the last thing i want to show you is the logs here so if you go to typing dna and you go to the dashboard and you go to logs you will see all of the stuff that you have sent so notice the stuff in red is things that were not verified right and then you have the stuff in yellow which have been partially verified and then you have green which means you are good to go because you validated the otp so after the otp was received you sent it back to typingdna it validated that it was indeed correct and then it was like okay you're good you have successfully authenticated your user so that is kind of the flow there you need to make sure you do that last step which is you send the one-time password that you receive in the payload of the callback function back to typing dna it gives you a response you can look at that response and then determine whether or not that one-time password is correct okay so let me zoom out here just you guys can view all this code all this will be on github so you can check it out from there as well but this is kind of what we're looking at here we have our first root which is for verify we have our other one which is for result and then of course all the other stuff we need to do for the setup pretty straightforward for our result page we're just displaying some of those variables we're passing through and rendering uh and then we have verify.pug we need to make sure we have this script inside of here we have our payload callback function again you can change the name of this if you change this here we then are showing this button this button has all the important information that we need if you didn't have this information well you saw you get an error and then when we press this button it starts that whole process right and i think with that i'm going to conclude the video so there's not really much more that i can talk about i know this was a simple integration and that you know it might have taken a long time for me to explain but wanted to make sure i really got through everything and made sure you guys weren't running into any errors at all with this so let me know what you guys think but one last thank you here to typing dna again they have sponsored this video but we have a great relationship and they really are just an awesome company that is really developer focused and wants to help you guys be able to implement this stuff as fast as possible that's why they've made this new verify api again reminder i have a video on the original authentication api this is a little bit more difficult to use but it is a bit more versatile whereas the verify api is just super simple and you see it brings this nice pop-up and everything just works nicely all alright so with that said if you guys enjoyed make sure you leave a like subscribe to the channel of course check out typingdna from the link in the description and we'll see you in another youtube video\n"