Create Mark Authentication with airSlate SignNow

Create mark authorization

hi welcome back to the serious in the last part of the series it was refactor time and this part will add something new will add user authentication will make sure that the users which can already be created in our current setup that the users can login that we create a token for the users and that this token can then be used to authenticate users for some protected resources in our API let's get started so here is the API as I left it this is our current graph QL API and I first of all want to work on my schema and I want to add an endpoint for users to log in because creating users is already possible so that is basically our sign up logic but now we need to make sure that users can not only sign up but also sign in now this is not really a mutation which I want to add therefore because signing a user in logging in doesn't change anything here on our server or in the database of course you could have a different logic where you want to add an entry in a database or do whatever you want but for me here logging in is jnana query I'm querying for a valid token for this user and the only interesting thing about that query is that it will have some arguments namely the email address and the password which I verify on the server so therefore here I will add login as a root query and the login query will have some data that is passed along and that data will be my email which is a string that is required and a password which is all just string that is required so this is the type of data I expect on that query when a user wants to sign in the response should be data which contains a token maybe some information when the token is about to expire and also some information about the user ID we could say so I will add this new type up there maybe we'll load a user and I'll name it off data you can name it however you want and in there I want to return the user ID so dad will just be armed a unique ID not the ID which is created because we're not creating anything here we're just checking the credentials and then we create a token which we don't store on the server though but I will return the idea of the user who was offended cated I'll return the token JSON web token is what I will use here and if you're not sure what this is I do explain it in greater tell in my note rest series on his channel in my note complete guide and of course Google always is your friend at the end this is a mechanism an authentication mechanism which we can use in applications where we have a decoupled front and back end where they offer we're not using a session because the server doesn't care about the client and where we instead pass a token to the client which the client can store and attach to subsequent requests and on the server we can then validate this token because we can validate it in a way that ensures that the client can't fake it and therefore we can prove ok this client did login in the past this token is valid you have access this is the general flow we'll have here and therefore I will generate the token upon login and I will return it here and the token will just be a string and I also want you have maybe the token expiration field let's say and that should describe when this token does expire and this could be the expiry time let's say in milliseconds or in seconds or in hours and I will go for hours here I will return an integer and this will be something like 1 for 1 hour 2 for 2 hours whatever we set so this is my off data which I will return for logging in so off data is the expected response so with that I added this query to my schema but as you know this doesn't do anything on its own we need to add a fitting resolver so let's go to that off resolver file where I also create users and Dera will add login and you have to use the name login here because I used login as a name here to remember these names have to match so here I have login I'll use async/await hence I add the async keyword in front of this function there I will get some arguments by the way you can use object D structure in here too if you get some arguments and you know that will be email and password as I know it will be the case here you can of course use object D structuring here and you can use that anywhere in all the other resolvers too so here just to mix it up this new syntax with object D structuring and now in there I want to lock the user in now what does logging the user in mean what do we have to do there well we have to validate that the email and password combination is correct obviously and then we have to generate this token and return it to the user these are basically a two steps we have to do here so let's first of all find out whether that user exists in our database so I will create a new user a constant here which I can because I'm now not importing this from my merged file anymore I have no other user constant in this file so I can create it here and I will now use my user model which I am importing at the top here I will use that user model to find one user for that email we're getting as an argument now if I don't find a user here we already have the first problem so if not user then we know logging in won't be successful because that email doesn't exist so here since we don't have a user I will throw an error so old fro a new error user does not exist if we make it past as if check then we know okay there is a user so we can now validate the password as a next step for this we can use be tripped which we already import and in create user we use that to create a new hashed password with the hash function and now this password is stored as a hash in a database so comparing can't be done with a normal equality check because the incoming password will be plaintext the password stored in the database will be that hash so they won't equal but bcrypt has a function that will basically you could say generate a hash based on the incoming password and then compare the two hashes roughly a little bit different thing it does but that is how you can't think about this it has this compare function and there we pass our plain string as the first argument so I passed a password as the first argument the second argument is to hash to which you want to compare it and here this hash can be retrieved on that user object we found so there I know that user in the database of course will have a password field so I can now compare the stored password and the incoming password this is an async task so we have to await it and the result will be true or false depending on whoever they are equal or not so I will store this in a constant named is equal if this is not true whoops if is equal is not true then I know the user exists but the entered password is incorrect so here I will also throw an error where I will return password is incorrect and by the way of course you could always throw the same error message like invalid credentials to make sure that you don't give away any hints about why the validation failed so if it failed because the password is not set it's not right or if it failed because the user is not right here I do give this hint also for us to debug it but if you want to give no hints away simply use the same error message so if we make it after disick though then we know we have a user and the password is correct so now we want to create that token and for this I'll quit my development server and install a new package with NPM install - - safe and then the package name is jason web token one word no dashes no whitespace it's one word JSON web token this is a package which will help us generate JSON web token which is this token I want to return to the front-end so now here I can import this and I'll store it in a constant which I named JWT I will require JSON web token there and now I can use that in the log and function there JWT package has a sign method and this sign method now takes some configuration so we pass in an object we can put some data into that token which we can later retrieve from the token you don't have to but you can use the token to also store some data in it there will be some default data added by this package to secure the token and so on but you can also add your own data and I want to store let's say the user ID I get that from that user which I retrieved here and I can use the virtual ID gathered to get it as a string which is what I want to enclose the token I don't want to put my object ID in there and I also want to store the email let's say user email now this generates a token this is a synchronous task and we can store the result in a variable named token or in a constant however I also want to configure this a bit more the first argument is the data we want to put in a token the second argument is required this is a string which is used to to hash the token basically and this will later be required for validating it because this basically is your private key only someone who knows that key can validate this token and therefore it should be on your server and not be exposed to your clients and here I'll enter some super secret key you want to use a longer string there in production but this is now what I will use for hashing it and later for validating incoming tokens and any token that was not hashed with such a key is treated as invalid the third argument is optional but there we couldn't configure the token and here I'll set the expires in key to one hour we can set it like this and you could set it to two hours but I want to go with one hour it is a good practice to keep these tokens short-lived in case they get stolen it's not that easy to steal them they are stored in the clients browser but if someone gets access to that browser somehow then people could steal that token and since that token is the only thing you need to authenticate yourself we want to make it short lift so now we have that token and therefore at the end of this resolver here I will return an object which has to meet the requirements of my off data type here so off data has a user ID has the token and the token expiration which is an integer so let's return exactly that now so we returned a user ID to meet that first requirement here and that user ID can be retrieved from the user we got like this with that gather function then I returned the token of course and also the token expiration which I have in my schema so this field here I want to return that to and since I set it to one hour here I'll return one as an integer here and this is it this is my login resolver with that I got to login resolver and the schema setup let's now start this again and let's simply try it out so I'll go back to graphical and I'll write a new career or first of all we need to reload to get Auto completion login and then I will use some invalid credentials let's maybe start with tests at tests calm but I'll enter it invalid password this one is not the right password and I want to get all three fields token token expiration and user ID and if I hit enter I get this illegal arguments string on the find and that problem stems from my login resolver function obviously when I find one user we should use a wait here to write it's an asynchronous task and if I use async await I have to put a wait here where we used normal syntax with then and so on but using it without a wait well then we immediately continue to the next line and we try to access user password when the user hasn't been retrieved yet so with that fixed let's run this same query again and I get password is incorrect now let's say user email address which doesn't exist and I get user does not exist now let's use both correctly so an existing email address with the correct password and I get the user ID I get this token string and I get D token expiration and will later store all of that in the front-end so that we can send it to requests to authenticate ourselves now we got this token but this alone does not protect our other resources we can still send queries for all events and so on now if you want to lock down access to certain operations let's say to creating an event now it's time to also add an off middleware to make sure that we can validate incoming and see whether they have a valid token attached to them so that we can grant or deny access to our different end points based on that let's do that so I already mentioned it I want to use a middleware for this I want to use a function which basically can be added to any incoming request or which runs on any incoming request and which then gives me the information whether there is a valid token or not so that I can then block or allow access now let's first of all work on that middleware function I'll add a new folder here on the top level I'll name it middleware you can name it differently of course and in there we'll store all the middleware we will create manually I only need one for now and that ste is off mill where I'll name the file is off j/s you can also name this however you want and there I'll export a typical expressjs middleware function which gets the incoming requests gets the response object and gets this next function we can call to let the requests continue and then in this function I wanna have a look at the incoming requests at the header stare whether there is a token part of these headers and then validate you have a token and so on so let's first of all look into the incoming request headers for this I'll create a new constant and I'll name it off header and for my incoming requests I'll call the get method and look for the authorization field this sees if there is an authorization field in the incoming request now if this is not said if there is no off field then I know we are not at indicated we have no valid token but this does not automatically mean that this user should not have access to anything maybe we just want to block access to some of our resolver functions but not to all of them so for now I want to let the request to continue its journey through our API basically but I want to attach some information to the request so that everyone interested in the API every resole or function for example can check is this user authenticated who sent this request or not and I can do this by simple adding is off-field to the request and you can name this field whatever you want you should just make sure you don't overwrite an existing field it's off does not exist on the request though and I will set this to false and then I will call next and to avoid that any error code after this in this function gets executed I will return this next call so we then leave this function and the request continues with this extra metadata added if we make it past this check then we at least have an authorization header but this does not mean that there is a valid token in there so let's extract the token from that header for this and we'll access the header and I'll split it now I will expect that I get my token in the header which basically looks like this authorization and then bearer and then the token value and that bearer thing is really just there as a convention and this is how you do it on a lot of public API s and therefore I also want to implement this here this basically just signals here which type of authentication were using so I will have that format and therefore I will split my off header on the whitespace because the value in off header will not be authorization : Bearer and the token but instead it will just be the left side because we're getting your authorization header value with this line here so the value we have now is something like bearer and then a token so I now split here on this empty white space on this blank and since I split on that I get two values first value of the array should be bearer second value should be our token so now that I split I can access this second value with index 1 as you know in JavaScript and now this would be the token now obviously maybe this is not set maybe we don't have that so if not token if we have no token here or if token is equal to an empty string then I also will set request all falls and returned next if we make it past this check here though then we have something which could be a token which we should now verify to verify that we need that JSON web token package again so I'll store this in JWT and I'll require JSON web token like this and then here I can call JWT verify and pass in that token which we want to check and pass in that key you used before so that key you used for creating that token in my case that was some super secret key here in the off resolver let's use that here that is required for validating this because only tokens with that same key will be valid tokens and then what we get here is our decoded token now this actually could fail so I will wrap this in a try-catch block and I'll catch any errors I might get here and if I do get an error here I will actually set request is off to falls again and also return next so here I'll add decoded token as a variable outside of try-catch and then I'll assign a value in there and now if you make it past this try-catch block we know we have a decoded token which is then automatically a valid token because this only returns a decoded token if it is valid so now if you make it past this try-catch block we know we didn't get an error now let's also check if decoded token is really set because if it is not set that again I'll treat this as not authenticated but if we make it after this final check then we know we have a valid token and now we can something set is off on our request to true and additionally I want to add a user ID field and I want to get that from my decoded token because it really is a decoded token we can now look into the token and use the data we put in there and if you remember when we created the token I did store the user ID in there as my own custom value so now I can retrieve that here in the so I can store the user ID field or the value in that field in my request user ID field and then I call next so now we have this middleware which does a couple of checks to make sure that we have a valid token or not but it does never throw an error it just set some extra data on the request there is off property and if we are authenticated to user ID which will later help us fetch the user from the database and so on now with all that in place the question is how do we now use this middleware to protect our individual resolvers with the REST API this was simple there we had a bunch of routes and on every route we could add or not add this malware for a graph QL of course we only have one route we have this one endpoint we can add the middleware to that but then the entire endpoint is locked down or not that is the reason why I am NOT locking down on anything in this middle of where I'm never throwing an error I only set some metadata so with that since it always lets every request through but just adds the information whether that is an authenticated or an authenticated request since we have that information only I can run this malware on every incoming request so time for a general app use statement before we reach our graph QL API and here I'll import is off my own middleware from that middleware folder and there D is off file and I add it as a mail aware here just like this don't execute it just pass it as a function reference and Express will use this as a middleware since we have a valid expressed chance middleware function profile here so now this will run on every incoming request and since it will run on every incoming request we will have that request is off field on every request in every resolver so how can we now use that well let's say for creating an event we want to be authenticated for getting a list of all events we don't have to so for my events resolver I'll not change anything but for a create event I'll add a check right at the beginning I want to check whether we are authenticated or not now the cool thing here is this function does resolver function does not just receive arguments automatically but we also get a second argument there by default which is our request so here we get access to our request with that we can of course add a if check and see if request is off is true or if it is not true then I know for this rizal or function not for this one but for this one I don't want to grant access and therefore here it's now easy to throw a new error on authenticated something like this and since we throw an error the rest of the code will not execute so let's give this a try let's go back to graphical and reload and it doesn't matter if we now log in first or not because this token is not getting stored anywhere automatically so right now even if we have to token even if we copy it it'll not get used for the requests we send here I'll show you how to use it in a second for now let's simply send a mutation event here a request here create event with the event input and there let's add a quick title should not work description we are not authenticated let's add the price and let's add the date and this date here can be anything because will not make it into our resolver anyway so we'll not use that date let's fetch the idea let's hit enter and correctly we get unauthenticated now just to show that this is not the middleware but the metadata extracted by that middleware which is then used in the resolver let's also run a quick query for all events and that should still work because there I'm not checking whether we are authenticated or not and it does so now this is how we can protect our resolvers with this little check here and this request we get as an extra argument now of course we can copy that into all resolvers which we want to protect for example here in bookings um you should not be able to get a list of bookings if you're not authenticated events okay but bookings that should be restricted to authenticated users so let's add our ex I don't need that but I need the second argument the request here and then we can paste in our check the same of course for booking an event you should only be able to book an event if you are locked in so we get the RX we get the request and we add our logic here that's the second argument now cancel booking of course you should be logged in for that too so here we get the request and we check this additionally when we cancel a booking we probably also want to check whether the user who does try to cancel is the user who created that booking but that is some extra check we can add later for now adjustable at this a general authentication logic here so here I have this in place I have my bookings now all lockdown for authentication obviously creating a user and logging in should be possible without being authenticated events is what we already worked on and with that our API is secured the question now justice how can we now test whether this works for the protected hooks or for the protected resolvers because well we can query events here but that is it basically the problem is we can't attach headers in this graphical interface well first of all let's run a quick query here and let's um get D token again so enter some valid credentials which are stored in your database here whoops should of course retrieve the token and then copy that token now let's use a different way of sending requests let's use postman you can simply google for postman postman is a great tool for sending requests to REST API but we can always use it for a graph QL API you can simply download it run through the installer and once you have it installed and opened it it should look something like this now here you can enter a URL to which you want to send a request in our case that would be localhost 3000 refus'd but a post request because now we don't want to want to access graphical we want to send a request to our graph QL API instead and now here we need to configure the body set this to binary at draw excuse me and choose Jason there and now how do you send data in this post body well you enter a JSON document here and the key the first key you need is the query key then you have a string and in there you put your query now this is way more inconvenient than with graphical because for example for the log inquiry you would enter it like this escape the quotation mark test at test comm escape this one - at the password escape tester escape close that open the curly braces get the token close that it all has to be in line close that double quotation mark and then hit Send and actually my bad we should add query in front of this here - yes this can look confusing here basically we describe what is the query you want to run and then we have queries and mutations so I should wrap this all with an extra pair of curly braces and now I get back this token and now we can copy that - of course so this is how we can send requests they're not too convenient but we'll still give it a try will soon add a front end and of course there is better tooling - but this is relatively easy for this simple request we'll have a better way later now of course I don't want to send a query for logging in instead I want to send a mutation and the mutation here will go to create event - that create event endpoint then I want to get back the ID and let's say the title of that created event and here I need to pass my event input curly braces and there I'll have my titled escape the double quotation marks title will be should work let's say then I have my description escape to double quotation marks again this now works let's add a price which is let's say 39.99 and a date now before I fetch a date here with my good old trick I still have that token in my clipboard so I want to use that and we have to attach this as a header to the request and that is the one part we couldn't do with graphical so let's go to headers here in postmen and there let's add a new header which is named authorization and the value should be bearer white space and then your token like this and now we can go back to the body here I prepared a date already which I can fetch with that same trick I used earlier and this serious add that here just escaped these double quotation marks that's important with a backslash and let's give this a try right now sent as I get user is not to find which is better than not authenticated so it seems to work but let's see what is wrong user is not the find and indeed something I messed up during my refactoring and I will look there somehow here I'm using the user model here of course and therefore I should import it so let's import user by requiring that from models user like that now this should work down there and now let's save this and rerun our request this now looks better now there is one other thing we can fix right away though and the data something which is still in there deliberately in the past we hard-coded the ID of the user who created an event or we made a booking now of course we got that user ID as part of our middleware here we got request user ID I store this when we have an authenticated user so in places where I know that is off is true which I do know here when I create an event because I check it then whenever I use that idea I can just use request user ID of course to use the Real ID of the user instead of this hard-coded one so I'll do that here and then booking it's the same I check whether the user is authenticated and if the user is authenticated then here let's use that user ID we got so with that we are now taking advantage of our login functionality we are now using the token in the header to send requests to endpoints in our API which are protected and with dead we got a very good State will now add or start adding a front-end to this will also refine and tweak the backend add functionalities maybe detect some bugs but this is the current state with which I'm happy we got the core functionality set now it's time to move on and start building the front-end and then work on both front end and back end simultaneously so hopefully see you back in the next video bye