JWT + Next.js Authentication Demo: Master Next.js Tutorial #17

hey everyone welcome back and in this video let's just go ahead and build a very very simple jwt based authentication inside next.js so first things first what i'm going to do is i'm going to go ahead and actually install i'm going to say npm install json web token right so because this is a this is a package which would enable us to actually do a lot of fun stuff with json web tokens so i'm going to install the types for this as well as far as i remember they are available so let's just go ahead and do that because that would enrich our experience of working with the package and yep so here we are i'm just gonna minimize this what i want to do is on let's get rid of the page one for now i'm gonna go ahead remove this and i'm gonna create a very very simple form back back in 80s like that input type text value admin let's just keep that and password has value admin as well right just give it a little br because i'm too lazy for um actual css and input type summit value login right we can give it a form method post and let's see i'm gonna say action is slash api slash login right so once we do that what we're gonna see is actually let me just get rid of these as well once we do that and go to our home page we get a nice little form with us which is absolutely destroyed by my password manager so let's just leave that but what's going to happen is if i go ahead and rename this to login.ts and if i go ahead and just do a console.log of request.body so as to see what we are getting let's just refresh this hit login and in the console we see we get nothing because i think i did not really save it let's just refresh this one more time and we still did not see anything but we were submitting i think we have we are not really submitting anything as well so to do that we have to actually give the name as username and password right and now one more time if we try to login what we are going to see is username as admin and password as admin which is perfect right so what we really want to do is we want to extract out username and password from our request.body right first of all i'm just going to say if request.body is not available then i'm just going to say rest dot status code is 404 and rest dot end error rate and return because we don't want any further processing otherwise we are you know inside this then what i want to do is i just want to say that a token in this case is going to be jwt that is the package which we are going to import now so import jwt from json web token jwt dot sign and i'm going to say user name is whatever it is and i'm going to say it is admin or not on the basis of username is in fact equal to admin and password is in fact equal to admin right we're just gonna just set the admin field to true if that is a fulfilled criteria otherwise not and for the key i'm just gonna go ahead and just you know be lazy about it and just write just smash my hair on the keyboard so this way we are just creating a signed json token which we are returning using an api and yup if i refresh this you can see we get a nice little token for us which is which is a json web token and if i go ahead and copy this whole bad boy and go to jwt.io which can be used for decoding json web tokens which is basically a base64 only but you know it's still convenient so if i go ahead and paste it here you can see that this is the data which we have and in fact this is an admin because username and password were both admin but if we go ahead and try to log in with something else oops oh i think we made sure that this is always admin so this should be actually default value not value admin 123 and log in and then if we go ahead and take a look at this what we're gonna see is that this is admin false right and we cannot really change it on the client side because jwt tokens are secure so first things first let's just move from 1980s to 2020 so i'm gonna say that on click let's just make this a button first of all on click i'm going to say summit form and what this summit form is is that it's going to perform a request to our backend server so i'm going to say my response from the api is fetch api and what do we have login right i'm going to say method is post our body is json.stringify username password and again because we are in 2020 now let's just make use of the react state with us right so i'm going to say a similar thing for password set password and let's just import this bad boy and finally we can switch back to value one more time this is username and this says password nice and easy right one last thing which you want to do is say on change the event should set user name to e.target.value and a similar thing should happen for password as well that is set password awesome so now once we have the response from the server we want to convert it into json response because our server is also responding us inside json and then we can finally take out the token by saying rest.token because that is essentially what we get back from the server but an object which has a key which is the token for us right so i can just go ahead and say that if we have in fact a token what we what we can do is we can just go ahead and update the message message set message is used for you state a string which is empty message you are not logged in and i can just go ahead and say we have a message in terms of h1 at the top right and once we have set message with us what i can do is i can first of all go ahead and import jwt from json web token again because we can use a single package on server and client as well why shouldn't we so i'm going to say my json is json jsonjwt.decode my token right and i'm going to say json i'm going to just say welcome to json.username and you are and i'm gonna just say json dot um let's see i think we need to wait for this oh not really this is synchronous as well but we can just uh you know return it as a combination of object whose key is string and the value is also string so yeah actually let me just go ahead and remove this welcome json.username and you are and we're just going to check json.admin is true an admin otherwise not an admin that's it right else set message something went wrong whatever all right so once we have that in place let's just go ahead and take a look at our home page now so we are we have a message you are not logged in let's just try admin admin as the combination we get welcome undefined and you are not an admin fair enough so let's first of all console.log our json what we are getting and let's just move to console lists oops console click on login and we get admin as false and that is the case i think yeah that is because we are not really setting the headers um to content type application json right here because we are transferring json data right so we need to make sure the backend knows that now if i click on login yeah that's the right response now so we see welcome admin and you are an admin right however if i try to do something like username something login we get welcome username something and you are not an admin similarly if i have admin here but the password is incorrect we have welcome admin and you are not an admin but once we do admin admin we are an admin right so again very simple dumb example of jwt tokens with next.js api um just showing you a simple use case of that because you know you cannot really fake the integrity of jwt tokens unless you don't really have the key from the server and because the key is on the server you cannot change response now on the basis of this what you can do is for example you can have a secret dot ts key and what we can just do is say export default function right here i can say const token from request.body request is next api request request and response is next api response right and i can say you know just take out the admin field out of jwt dot verify import jwt from json web token i can say token and key right and we can just for the time being being lazy we can just import it like that and i can just say as an object which is having string as keys and string gas values right so i can just say or rather boolean as the value right in our case so i'm just gonna say if admin is true rest.json secret admin code one two three four five right else rest.json admin false so once we have that in place what we can do is we can go ahead and on the client we can just implement um a secret like the following so again we can have a secret message set secret and we can just make sure this is empty at the moment and finally what we can do is if we have a token obviously we can say await um again this whole thing actually so i'm just going to copy this but this time this should be secret we have a application json and now we are just passing in the token for the further request so this would be our token because we already have access to the token and then i can say if rest dot secret is available to us secret admin code actually i can just say set secret as rest dot secret admin code else said secret nothing available right and i can just say secret as secret all right so now if i go ahead and try to log in with admin admin hit login you're going to see we get welcome admin and you add an admin and i guess secret one two three four five but if i make a mistake you're gonna see that we do not have anything available as a secret so you can basically just go ahead and store this json token json web token and use it for further requests um you know a very popular approach for authentication stuff like that so yeah i mean that's that's pretty much it for this quick little demonstration hopefully this would be useful this is not really a nexus project we have next year's projects later on down the line if you're watching this course on code dam where we'll create e-commerce and you know all those blogs and fun stuff but yeah this is just a quick dirty implementation of something with nexus and next year's api routes so that you get a idea about how things are working and of course you might have seen that you know most of the thing is react only even with next year's plus the only added advantage uh the actual good advantage is that you know you get all these all this html right off the box from next year's framework so yeah that's pretty much it for this video i'm gonna see you pretty soon in the next one

Channel: codedamn

Views: 85,657

Keywords:

Id: PfR88Eeugy4

Length: 15min 5sec (905 seconds)

Published: Fri Aug 21 2020