MERN Authentication Tutorial #6 - Signing Tokens

Key Takeaways

all right then so now hopefully you know a little bit more about what Json web tokens are next we need to create them on the server so we can send them back to the browser as part of the response now we want to do that in two places in our API first in the sign up controller function once a user successfully signs up because normally when you sign up to a website you're automatically logged in or authenticated straight away so we want to send a token back in this case and then also in the login controller function after the user successfully logs in now we've not done any of the login logic yet so we'll come back to that later but we have already done all of the sign up logic so far to save users to the database so we can send a token back to the user in this response right here now in order to do that we first need to generate a token and to do that we need to use the Json web token package so let's open up a terminal and make sure you're in the backend folder and then cancel out of the current node process and then we need to type npm install Json web token all one word no spaces and press enter so once that's installed we need to require it at the top so I'm going to say const JWT is equal to require and then we want the Json web token package all right and now on this we can use a method called sign to basically create and sign a token now before we do that down here I'm going to actually create my own function called create token we set that equal to a function and the reason I'm doing this is so we can reuse this function which is going to generate these tokens for us in the login user controller function and the sign up user controller function all right so as an argument I'm going to take in the ID and I'm going to call it underscore ID because that's what mongodb cost the ID property and I just want to kind of keep it the same as that you can just call it ID if you prefer but I'm going to use underscore ID and the reason we're passing this in as an argument is because that is going to be part of the payload of the token all right so how do we create this token well we take the JWT package that we just grabbed right here and we use a method called sign and then inside the sign method we pass in three arguments the first one is an object which kind of represents the payload on the token we want to create so it has different properties and values that are going to be inside the payload now I want an underscore ID property which is equal to the underscore ID that we take in right here now since these are named the same I can just shorten this so that is the first argument you can put other things in here if you want into the payload but remember nothing sensitive and the second argument is going to be the secret remember that is some kind of secret string only known to the server so I could type it in all here but remember if I then upload this to GitHub or some other public repository then people can see this and it should be secret so instead what I'm going to do is I'm going to put this in my environment variables so I'm going to come down here and create a new environment variable called secret and this secret I'm going to copy from my repo ironically and it's just a lot of random words mushed together but to be honest you're probably better go into some kind of password generator you know making something a bit more secure but anyway we have this secret string now and then I can access that from this file by using process.env so I can see right here as a second argument process dot EnV dot secret awesome so that's the second argument the third argument is going to be basically just some options and the only option I want to set is the expires in property and that's going to be three days so basically the user would remain logged in for three days and then the token is going to expire okay and that's all we need to do we're creating this token now but we're not doing anything with it we need to actually return it from this function and therefore when we call this function it's going to return this token for us all right so we need that token down inside this controller function where we sign up a user so after we've saved them to the database let's create a token right here so I can say const token is equal to create token the function we just created up here and we need to pass in the ID of the user now we get that from this user object right here this represents the document we just saved so I can say user dot underscore ID so we're passing that in now and that's going to be on the payload of the token itself now finally I want to pass this token back as a response and we'll do that instead of the user document right here so I'll say token like so and we're passing that back to the browser now and remember this is going to be that big long string or rather those three separate strings bunched together the payload encoded the headers encoded and also the secret encoded all bunched together so let's try this out in Postman all right then so in Postman I've still got the same end point right here we're going to send a post request to that end point and I'm going to use the same data as before just to see that we get the right error back so let's send this and we can see yeah the email is already in use so let's think of another character Luigi so Luigi at netninja.dev same password and we'll send this and yeah we can see now we created that user here's the email address and here my friends is the token and you can see these three dots these are separating the three different parts of the token so we have the first part the header then we have the payload until the next dot which is right here and then finally the signature right there so now on that sign up request we are saving the user to the database we're hashing their password and we also generated a token for that user to send back to the browser to say hey look yeah that was a success and now you authenticated you're automatically logged in after signing up so we're going to use this in the front end later on but first of all for now what I'd like to do is show you how we can log in users as well