Effortless Protected Routes In Next.js Using Middleware

Github project: github.com/cod...
In this engaging tutorial, we dive into the world of Next.js to explore the powerful role of middleware in creating secure, protected routes. Tailored for both beginners and seasoned developers, the video offers a concise yet comprehensive guide, demonstrating step-by-step how to implement middleware for route protection in Next.js applications.

[@Keeptheflameband]

I have been loosing sleep trying to run some middleware with token auth and this is just what I needed thank you very much! From: a self learning developer.

[@coderyan]

Happy it helped!

[@cesarpizarra1773]

Man, thank you for this tutorial! I was stuck for hours trying to figure out why my middleware wasn't working. I had placed the middleware file in the app folder and tried debugging it, but nothing worked. Then, I found your video and learned to place the middleware outside the app folder-and it worked!

[@coderyan]

Happy it helped!

[@marie-elizeventer7080]

This was just what I needed. Thank you very much. Simple and easy to understand.

[@zb2747]

No bs with an example and straight to the point. Thank you!

[@coderyan]

You’re welcome!

[@sandrotabatadze3768]

short and understable! without any unnecessary things! thanks man!!

[@coderyan]

You’re welcome!

[@yushankkashyap7771]

Man you are a saver. I have wasted so much time on this and you explained it so well. I was stuck due to middleware being in the app folder. Thank you!😄

[@samnmeje3486]

So straight forward and easy to understand. Thank you

[@coderyan]

You’re welcome

[@csdevelops7]

Thanks for doing this video Ryan. I was stuck on this for 2 days lol

[@coderyan]

Happy it helped!

[@MuhamadAzizPrasetyo]

Thank you so much. Very clean and this is what I needed!

[@coderyan]

Happy to hear it!

[@AHMED-dl5hn]

thanks a lot man, simple and efficient

[@coderyan]

Happy it helped!

[@joze.rios44]

Hey, i like this, so easy to make, thanks bro, greetings from Argentina.

[@coderyan]

You’re welcome!

[@abdilaahimowliud7556]

Thank you so much. Very clean

[@coderyan]

Happy it helped!

[@tigana]

This is a really helpful compliment their docs. Thank you!!

[@coderyan]

You’re welcome!

[@Alim-yo3sc]

Thank you for such a simple tutorial

[@coderyan]

You’re welcome

[@fabio9311]

Super helpful! Thanks for creating this

[@mrjessan2343]

Crazy, so that fixed my JWT authentication protected route problem

[@israelzorzor5805]

Really helpful better than the HOC approach

[@pritishmendhekar360]

Thanks very helpful😶‍🌫

[@fillipeamg5877]

Thanks. Good feature

[@rahulram4300]

This was very helpful indeed to understand how we can protect the routes. But I have a doubt here, if the user is already authenticated, he should be navigated to the mainPage instead of signIn page. We can write a condition for that here and add signIn page to the matcher but wouldn't it make the middle ware run infinitely because it will rerun the mainPage because user exists?

[@hankersoree]

how do i make it dynamic? without changing user manually in middleware

[@benjaoliva3383]

export const config = { matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'] }; With this you can run your middleware on every request

[@thatsalot3577]

@@benjaoliva3383 he's asking how do you know whether the user is logged in or not

[@tigana]

If you have a src folder, try placing it in there. My middleware didn't run until I did that.

[@morgan24TH]

D@mn true, I appreciate ya

[@habitathomies6049]

Legend! I was stuck on this for ages, thanks!

[@danielcaro1020]

ohh thanks!

[@MrSeredan]

If I have a middleware with localization and a middleware with route protection, how do I make different configurations for the application?

[@minhaz3193]

what if i want to have multiple middleware functions? where would they go since we have only one middlware.js file and one export for config

[@benjamingoller6267]

I am frustrated at the moment. I am using server actions eg for database queries. However, whatever I do, I cannot protect the server function from being accessed from anyone from the client side. The function is in a folder utils alongside app. The can use it from client side but so can anyone! I have looked everywhere, but I cannot seem to find how to handle that…

[@DickyFirmansyah-u9o]

so i have setup my middleware and redirect to login page if its not logged in and after login i setup an encodedOriginUrl to go back to that requested page, but can i check if theres a page exist or not in my apps inside middleware? so the user should not go to login page and after login they found that the page is not found, so i just want the user just directly redirect to not found page and not login page if the page doesnt exist in my apps

[@VishalMewada-jq4qk]

but while creating a build the middleware.ts file doesn't work then what will be the solution for that edge case ?

[@EseosaOsayi]

Winter is coming, 😂 i spy a game of thrones fan

[@devrano48]

Middleware making the routing slower, any solution?

[@ThanHtutZaw3]

My Cookies are exist in normal api call but when I call 2nd api call in service worker notification FCM , I don't get firebase cookies in Next.js api . Is it cross origin issue ?

[@adnanrruka5152]

thnx

[@coderyan]

You’re welcome

[@rithikguleria8278]

Wonderful🤍

[@coderyan]

Thank you!