how does Next.js know to run this function as a middleware? Does it know automatically because you named the file middleware? what if you wanted to add multiple middleware functions?
you cannot add multiple middleware functions. `middleware` file can only have one function exported that will run on every route change unless you filter middleware function for specific routes using `matcher`.
What's gonna be alternative approach if we are on next 9, I'm on next 9.3.6 and updating cause a lot of issues. What do you suggest in that case? Thanks in advance for the consideration!
I am trying to implement here a middleware because the project I am working on was configured to be only on client side so every time I try to use the middleware I keep getting: Middleware cannot be used with "output: export". Do you know a workaround for that?
I've been trying to make a mongoose connection in middleware, but it errors. Trying to figure out if this kind of operation may take place in middleware.js..
I have a question. What happens if a user sets cookie by himself from the browser console. Would not that let him visit protected routes without logging in?💁
Yap! The code above is very basic just to show you guys the fundamentals. In a real application, to prevent what you described, you would set your cookie to a jwt token and check to see if that jwt token is valid, then if it is valid, you let the user view the protected routes. This is one way of doing it.
@@devar1133 yeah.. I noticed it, you could set verify to verify secret using jwt and token fetched.. Great tutorial though it help understand the logic
You should set cookies in the backend with HttpOnly flag. So the cookies gets to be accessible only from the server. Client can't read the HttpOnly flagged cookies.
Hey ! Thank you for the tutorial. I actually imported NextRequest from the path you've used in your code and it didn't work. I also tried importing it fron "next/server" and that didn't help either. Anything I could be doing wrong ? I'm copying the exact same code that you're writing.
I just found out that the new way to do this is like so export default function middleware(req) { const authenticated = req.cookies.get("authenticated"); const { pathname, origin } = req.nextUrl; if (!authenticated && pathname === "/") { return NextResponse.redirect(`${origin}/user/login`); } if ( (authenticated && pathname === "/user/login") || pathname === "/user/signup" ) { return NextResponse.redirect(`${origin}/`); } } Happy to help
I used another approach but it has a similar logic so when i deployed it on vercel on hobby plan sometimes vercel serverless functions crushes do you have any idea why this happens
Bro, speak up!!
Firstable thank you bro, but why are whispering ? More confidance an louder pls)
cookie is shared between tabs. i want like session storage. every new tab, user need to log in. is any approach there
Can this approach be used with firebase?
Can we use localStorage access token here?
but you are using the old pages router, is there a way to do this in app router?
It's works for me. And you help me a lot. Thank you so much!
hey sweety
Thank you so much. Great video. If I have to protect multiple routes than what should I do?
how does Next.js know to run this function as a middleware? Does it know automatically because you named the file middleware? what if you wanted to add multiple middleware functions?
you cannot add multiple middleware functions. `middleware` file can only have one function exported that will run on every route change unless you filter middleware function for specific routes using `matcher`.
@@farrukhahmad1430 thanks for clarifying
@@farrukhahmad1430 where he has configuration to use middleware in the video, bro
What's gonna be alternative approach if we are on next 9, I'm on next 9.3.6 and updating cause a lot of issues. What do you suggest in that case? Thanks in advance for the consideration!
Great video sir. Learned a-lot. You made it simple to understand. Thanks.
Does relative path work for middleware? Such as "/" for home page and "/dashboard" for dashboard page
They do!
Thanks bro
I am trying to implement here a middleware because the project I am working on was configured to be only on client side so every time I try to use the middleware I keep getting:
Middleware cannot be used with "output: export".
Do you know a workaround for that?
simple and great
Thanks 👏👏...... spent quite some time trying to find a simple tut as like this one
I've been trying to make a mongoose connection in middleware, but it errors. Trying to figure out if this kind of operation may take place in middleware.js..
How can we hide / show header based on the cookie ?
I have a question. What happens if a user sets cookie by himself from the browser console. Would not that let him visit protected routes without logging in?💁
Yap! The code above is very basic just to show you guys the fundamentals. In a real application, to prevent what you described, you would set your cookie to a jwt token and check to see if that jwt token is valid, then if it is valid, you let the user view the protected routes. This is one way of doing it.
@@devar1133 yeah.. I noticed it, you could set verify to verify secret using jwt and token fetched.. Great tutorial though it help understand the logic
You should set cookies in the backend with HttpOnly flag. So the cookies gets to be accessible only from the server. Client can't read the HttpOnly flagged cookies.
Thanks man
but if cookie is set from backent , and cookie is a jwt token, then how to check?
how it will work for multiple pages in protected routes ? is any method ?
Thank you so much bro you are awesome I hope you get 10000 subscribers on youtube
Hey ! Thank you for the tutorial. I actually imported NextRequest from the path you've used in your code and it didn't work. I also tried importing it fron "next/server" and that didn't help either. Anything I could be doing wrong ? I'm copying the exact same code that you're writing.
What version of Next.js are you on. You'll need version 12 or higher
I just found out that the new way to do this is like so
export default function middleware(req) {
const authenticated = req.cookies.get("authenticated");
const { pathname, origin } = req.nextUrl;
if (!authenticated && pathname === "/") {
return NextResponse.redirect(`${origin}/user/login`);
}
if (
(authenticated && pathname === "/user/login") ||
pathname === "/user/signup"
) {
return NextResponse.redirect(`${origin}/`);
}
}
Happy to help
Thank you so much
how can i do this with JWT in localStorage?
Is there another way to do this without using cookie?
thank you very much sir.❤
Short and simple
Can you use this approach with Firebase?
Perfection thank you sir you made my day
I Love you man!
wah dude, this is amazing
Excelent basic example, thanks!
please make new next.js video
thanks, very helpful
I used another approach but it has a similar logic so when i deployed it on vercel on hobby plan sometimes vercel serverless functions crushes do you have any idea why this happens
Amazing! Thank you so much, you deserve so many more subscribers! This was easy to understand and straight to point! Love it, keep it coming
Thank you!
thank you you went straight to the point
thank dear
Thank you for sharing valuable video bro
smooth
Lets see how it goes with this approach
Thank you for making it simple to understand and open for us to tweek its conditions 🎉❤
this is the most straight forward and simple tutorial with good implementation
clean!
💎 gem
bravo.