Next.js protected routes & JWT verify (Updated video link in description)

all right so today we're going to be verifying our jvt token that's inside the http on the cookie and we're going to protect some routes that we want to let's say hide from a user that's not authenticated now i'm using this code from the previous video i'll put it in the link down below in the description and you can follow along with me now let's start we want a login page okay so we're going to move this form to a new login page and we're going to create a new protected page that we don't want anyone accessing without being logged in so let's go to our pages and let's say login.js we're going to import react and we're going to export default function we're going to say login okay we're going to need use date and let's copy this over to there okay so we're going to copy this of course we need to return it we're gonna copy the handle submit function we're gonna copy the form style we're gonna copy the use state hook okay that's all nice we don't need use state and we're gonna need axios okay now when we go to our login page we have the login page right here okay that's nice now we want to redirect our user when when he when he's successful he enters a good data so we're going to say import next router i think yeah it's next router i'm going to say cons router is equal to next next route it's it's use router from not next dot so we're going to say use router and we're going to say use router and now we want to push if the user is all right so we're going to say user.status is equal to 100. let's say you return something else and you want it to be 200 instead of i don't know instead of 401. we're going to say router.push and we're going to go to let's say dashboard and let's say user so we're gonna create that create that page we're gonna say dashboard and inside of dashboard we're gonna say user.js and now we're gonna do the same thing we're gonna import react and we're gonna create page export default function user and let's return h1 sensitive data okay and now let's login we continue and there we go we're pushed to this route dashboard slash user now we still didn't check if we're logged in we know that we're logged in because we're probably programming this but this is a this is this is horrible right you can just go from index you can say dashboard user and there you go you're there we want to check if the request sent to this has a cookie and inside that cookie is a valid jvt so we can do this by writing a middleware function okay next.js has a middleware middleware component thing that we can use to check each request what it has and which url it is so let's create that we're going to say middleware.js and now we want to import next response we want to import verify because we're gonna be verifying our token not like that we're gonna put like this and we want to have our secret here let's say construct secret plus c and v and now let's export default async that's in the age it's gonna be like this function middleware and we're gonna put a request there okay now we need to get cookies and we need to get our jvt and get the url so we're gonna get all the cookies from the request we're going to have our jvt extracted from this cookies and we're going to have a url now we want to see if the user is out we want to protect this route everything that's after dashboard we want to protect right so we can do that by checking the url so we're going to say if the url includes and let's say dashboard right let's spell it correctly dashboard yes so we want to check if the url includes dashboard and we want to check if we have our jvt first so if jvt is equal to undefined we're just going to redirect the user so we're going to return a next response that's that's going to call redirect and we're going to give it a login and if a jvt exists then we need to see if it's valid the jvt is all right we're going to put it inside a try catch and we're going to say verify we're going to give it token that's the jvt and we're going to give it the secret so see it asks for the token and the secret or public key we don't need options so we need this okay it's going to verify and if it if it passes we're going to return next response dot next so it can follow the request and it can go to this page but if it fails and it's gonna say invalid token if it fails we're gonna return the same thing we're just gonna say no this is not good you need to go back to login and try again and if everything else is all right we're just going to return a next next response down here and say it's all right so we reload we have our token now let's say you go out for you go out somewhere and someone comes into your cookies and messes it up so let's say our token is not valid anymore okay we change the token we reload it redirects us right because a token is not good anymore we we messed with the token now let's say we delete the token again we can go to dashboard slash user we can't see it just moves us to the login page now if we go to admin admin we log in there you go that's that's all right because we have the token here you go to application and the token is here now we also because we're logged in we don't want to go to login we don't want to be able to do this so again it's pretty simple you can check the url you can say if dot url includes url that includes slash login and if it does you can check this again and you can move this to a function i recommend using this moving it to a function we can check if jvt is all right if it exists and if we can verify it so if jbt is all right we don't need you don't need to be at the login page you can't log in two times so we're going to say if jvt and we're going to try to verify it and if it's all right we're gonna redirect to i don't know let's say slash index but if it's not all right we can just remove it and we can you know do anything you want here basically so let's say we have the login we redirect there you go because we are logged in you cannot go to the login page again that's because we have our cookie so we go log in login doesn't work let's log out and now we go to login page and we're there we go to admin admin we log in we go to the dashboard we want to go back to the login page we can't one more thing if you want to get the username here that we set the payload you're gonna need to do this const dot i don't know let's say user is equal to verify and you can console.log the user so now let's say we go to dashboard slash user there you go expiration username and everything else you want so you can get the payload by doing this if you don't want the payload you can just call verify like this but if you do want the payload you should get the payload here and you can do whatever you want with it okay and that's it that's how you can protect your routes and verify your tokens

Channel: Tenacity Dev

Views: 62,056

Keywords:

Id: DHZSYYTCTbA

Length: 9min 7sec (547 seconds)

Published: Sat Feb 05 2022