Protect Your API - Next Auth Middleware

recently i made a video about next year's authentication where you can render a custom sign-in form and ask your user for email and password and if they provide valid credentials only they will be allowed to visit this protected page but now i'll show you how you can make your epa route private using nextgs middleware to add middleware inside nexus app we have to add a file called middleware.ts at the root directory of our project and here is a little disclaimer even though there are a lot of tutorials on which and i will show you you can add your middleware file directly to these pages directory to apply only for certain routes don't try that this technique don't work at least for now if you try to do this then you will get this error called nested middleware is not allowed you can read more about this inside the space to apply middleware inside nextgs you just have to export a function called middleware inside this function you will get the next request object using this object you can read or write cookies you can read the paths or you can do other bunch of cool stuff which you can do with request object but the main important thing inside this middleware function is that you have to return next response back but if you notice here we just have this next request to get this next response we have to import this next response from inside next server and we can use the methods like rewrite or redirect from inside this next response i think the redirect is pretty clear for everyone this means we are just changing the direction or the request from one end point to another and rewrite is like redirect but here is the twist with rewrite we are not going to change the end point we are just rewriting the response confused right let me explain what it means you have a route called your app.com slash admin where you are rendering the admin panel and you have another route your app dot com slash posts now if you send the request to your api to read post but inside your middleware what you did you rewrite the response but to the end point slash admin now your app will obviously render post but not inside your slash post route instead it will render it inside slash admin means we just rewrite the response to different route and if you are still confused then just think it like this rewrite is a way to send a success response and if you don't want to change the route just use your original routes that's it as we already know for this project we are using next auth to authenticate our users and the great thing is that next odd also provides its own middleware functions which is a great choice if you want to make your api private so let's import this default middleware from next earth middleware and export it and trust me ladies and gentlemen that's it all of your api is now protected only the logged in user can visit your app and these are not my words this is coming from the documentation itself but this is not how real world works right now if you try to run your project like this then you will see this error and this is the very simple fix that we can do we just have to add this thing called next or secret inside our dot env file and obviously you have to create this one if you don't have the dot env file and now let's try to rerun our project and boom you will see another error and even though here documentation says that's it that's not it okay we have to also specify the routes where we want to use this auth middleware so let's export this config matcher here i will use this home route and the admin route and if we try to visit this app slash admin or home we will be inside this login page but wait a minute what if we want to check the role of these authenticated users because it's a pretty common feature for these kind of applications right so let's look at that so for that we are simply going to get rid of all these things and we are going to import this new method called with all and you will import this with auth from that same endpoint next odd slash middleware again we have to export it as default but this time there will be this error and that is because inside this function we have to pass two things the first thing will be the actual middleware function which will return the response like before and the second thing will be a config options where we will pass this callback and the name of this callback will be authorized now only if you read untrue from inside this authorized callback this middleware will come to an action so from inside this authorized function we can distribute the token and check if the role of this token or this user is equal to admin only then we are going to return true and again if you are confused from where i caught this token.troll then please don't be because i am about to explain this right now if you remember in the previous video we made this special file called next auth where we have all of our authentication logic if we found the correct user we are returning this object as the success response so let's change this we are going to now add this role as admin in real world application you will have these roles stored inside your database now if you think that's it no it's not because of the security region next auth will not pass down these extra information inside token so we have to tell this next auth to also include this user role inside our token so because here we are using jwt as our session strategy to sign the auth token we can now pass this jwt call back and we can update the token the main important thing about this function is that from inside this function we have to return the final token but if you are a curious person like me and want to know what are the things that is available inside those params then these are the things but the main important thing here is this user we want this user because inside this user will have this role and this user will be available only for the first time whenever your user is signing in with their email and password so let's add this little if condition if there is this user dot role then we will change the role of this token to user.group and at the end don't forget to return this token from inside this callback and that's it now if the role of this user is admin this middleware will fire so we will use this next response.rewrite method and here we have to now pass our url so for that we have to use this new url and pass the url where you want to rewrite this response and also you have to join this with this request.url and this request is the same next request and now currently if we try to run this application there will be an error and now you already know what this error means so let's export this config where you will have your matcher and again i'm going to use this home route and the admin route let's log in with your valid credential and now if you try to visit your app again then you will be inside your admin panel and make sure you have this page called admin inside your app or whatever route that you are returning or rewriting from inside this next response and that's it this is how we can protect our ap end point using next year's middleware and if you think this video was helpful then you know the drill like share subscribe at least to one thing so that i can get that fuel to create this kind of video in future as well

Channel: Full Stack Niraj

Views: 20,921

Keywords:

Id: ollnut-J47s

Length: 8min 5sec (485 seconds)

Published: Mon Aug 08 2022