Next.js Middleware Explained | Basic Auth

hello everyone welcome to the video so recently I've been building this tool to generate images using Dolly 3 API because it's cheaper to have your own like tool to generate images than to pay 20 bucks for chat GPD plus plus so uh yeah I've decided to build it but also I didn't want to do like special out things I just wanted to share it and uh you you know make it easy to access it for to my of my friends and me who wants to use it but not for everyone and since it's in a public domain and everyone would like be able to access it I couldn't like allow for that uh mainly because uh yeah it would like cost me a lot of a lot of money so basically what I've done is here is an input that you have to paste uh or write the password which me and my friends like uh told each other about and here's the prompt and this video is actually about nextjs middleware because I've used it into this project and I'll will show you how uh so let's get to the code here is our middleware uh first of all I'm going to show you how to create a middleware because uh yeah I actually found it in the docks you can you can find it here routing middleware uh yeah it's like one page for the middleware and uh it's not so obvious but here's the convention and in the root of your project to Define middleware so basically you cannot put mware everywhere you want to like it's not like with the for example Pages uh like you can see it here up and like here's page DSX so yes you have to call this file middleware dots if you call it the other way it will not work and also it has to be put in like your root app directory that has a source so in my case I have a SRC directory in rout of my project so I have to keep it here if I would have the flat structure which you can choose way on the creating the nextjs app then the mwts should be in a you know root directory but probably not a not a lot of people choose it so basically it has to be put here in the SRC or in the root it cannot be put inside like up or anything like that it will just not work uh that's how they did it and also you can have only one middleware per your up so it kind of sucks but I will show you or just talk a little bit about how you can handle it so let's look at this uh middleware uh and see what it does like here's our API secret key it's the password that me and my friends like agreed on and I read it from the N you can actually go there I Chang this Valu so here's our open AI API key and here is API secret key I called it YouTube so like here when the app is deployed if you'd like to use it you have to paste your YouTube If you like past any other value it would just basically return uh 401 unauthorized so it's like the the most basic out and probably you can go like to some extent with this approach but at some point it will become so hard to maintain and like not good at all but for my case I guess it will will be fine then I basically check uh whether we've got this because as you can see here when you read from process. it written strings or undefined which is uh obviously all right then uh as far as I'm aware it doesn't really matter how you call this middleware uh yeah and now the important and actually interesting part this middleware will will be run on every single request to your nextjs instance so you might think that it will run only to your API route for example here is my API route so it's inside the SRC app image and here is Route and basically what I'm doing here is generating the image with the open AI uh SDK so what you might be thinking is well it's probably just going to run on my API routes like on the normal backend but it's not it's actually running on every single request so for example let's say someone goes to your homepage or to your about page or actually to every single page that is rendered by the nextjs it will go through this middleware so it's actually pretty interesting because you can uh do for example a little bit more complex reround in or redirections it's actually shown in the docs we can go there it's one of the first examples is like they are redirecting to the slash home or actually I'm not sure whether it's from slome to the yeah I guess it's just red direction to the slome uh so let's say if you want a little bit more like dynamic or a little bit more complex redirection system than in your nextjs config because you can do redirections there then middleware is probably a good way to go okay let's uh just end this file and talk about it uh what we do next like here is our headers and I'm reading from headers the authorization header uh like basically from the front end side I send there I can show you page. DSX here's our password and here is our mutation I give you a second to look at it so basically what it's doing is sending a post request to/ image and in headers there's authorization header and here's our password and in the body I sent prompt that's all then I read this aoriz station header and if the password that is sent from front end is not equal to this secret that I've said I'm want to use in my environment variables then I just return response unauthorized with status 401 that's all and if everything is fine I use next response. next what what if you are familiar with the backend uh architecture or anything like that next is just like U you the function will uh pass it to the like it like the middleware didn't happen uh yeah basically it's just continuing uh the things that it's supposed to do and of course if you change the headers or anything like that uh yeah there will be change in the for example in the root uh because middleware of course run before your root and the last important part in this file is the export con con config here is our matcher basically it tells to the middleware that it should run only on the slash image root and it's fine because like I don't want to get unauthorized on my homepage because I can actually show you I hope my Dev server is running that if I go here now and I'm going to refresh yeah it's loading cool yeah I get unauthorized because it actually run and with like the fetching page I don't send the authorization header so yeah this matcher basically says that it should run only on/ image also it can be an array which is helpful and also it it could be something like if you have your API routes on/ API it could be API slash uh asteris which basically says that it should run on every single route that is in the like IP directory yep so let's see if I have anything uh to talk about no like I guess that's that's all uh I think it's a really cool way to implement basic out because like of course you could have like normal uh authentication and all but I would have like to use like uh third party provider which I didn't want to use for such an Simple app or run my own off and probably my own database which also I didn't really want to use so I guess this middleware is just fine we agreed on some uh secret password and we'll put it in the input and no any stranger not any bot can uh use it use this endpoint and like use uh my token to open a guys so I guess it's a cool approach I hope you find it helpful if you did like share it with someone and see you tomorrow because I'm doing a a daily like it's my challenge so yeah keep it up keep it up and see you in the next one see you

Channel: Oskar Puchalski

Views: 274

Keywords: react.js, next.js, frontend, middleware

Id: 9-sKsn545QE

Length: 10min 18sec (618 seconds)

Published: Tue Mar 05 2024