How to Protect Routes in Next.js 14 in 4 Ways - Private Routes

How to Protect Routes in Next.js 14 in 4 Ways - Private Routes - Authorization

Рет қаралды 28,635

9 ай бұрын

In this video, you will learn 4 different ways to protecting frontend routes in next.js 13.5. I will show you how to protect routes that can be client components and server components of next.js 13.5.
00:08 Overview to route protection in next.js 13.5
01:15 Build Navbar for Routes
04:55 Create a session variable
06:10 Protect client components in next.js 13.5
11:32 Protect client component with HOC in next.js 13.5
18:25 Protect server components in next.js 13.5
21:10 Protect routes with middleware file in next.js 13.5
#nextjs13 #auth #routes #authorisation #nextjs
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Begineers:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Crash Course: • Next.js 13 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368

Пікірлер: 55

@joshuaclaracay7602 8 ай бұрын

man i just watched this video along with your other tutorials and all i can say is that you explain it very well and very informative. you have gain a subscriber in me, keep it up and thank you for sharing your knowledge

@user-zi3iu5hp8q 4 ай бұрын

best video on youtube explaining public and private routing with next.js. Thank you brother. Great help!!

@user-xs6tx2lm7l 4 ай бұрын

Thank you. I searched before writing the auth code and saw it and it was so beneficial!

@Nintendinho64 4 ай бұрын

thanks mate!! your examples has perfect to understand and very simple to apply.

@abnersousa3382 7 ай бұрын

Thank you, man! This kind of content is very helpful, u know, showing many ways of doing the same thing, It's incredible, 'cause most of the time, we have to adapt our solution or one works very well but one doesn't, I hope for content like this. One more subscriber!

@user-dk1rk6ir1f 5 ай бұрын

Thank you man, Great job.

@danish2462 5 ай бұрын

Very well explained. Thank you for this tutorial. Keep it up.

@shykhfaisal1543 8 ай бұрын

Thanks Baii , Informative and well explained

@anderwilliangomes 8 ай бұрын

Best video about protected routes in nextjs on youtube! 👏👏

@ProgrammingwithUmair321 8 ай бұрын

Glad you liked it. Don’t forget to subscribe 🙂

@ElHawary 5 ай бұрын

Many Thanks. Subscribed

@adeeltechedit6760 3 ай бұрын

tnku so much appreciate your content

@yacine5046 4 ай бұрын

Bro 😂 more than 10 tutorials without any solution , and you in one video fix my whole problem with authorization love you bro

@muhammednabeel1364 4 ай бұрын

Thank you.

@edgardejesusmendozaortegon7655 7 ай бұрын

great video, great explication!!!!

@abhilashm5236 8 ай бұрын

I am following all your videos , it’s very informative ❤️. Can you also make one video about how to make a micro front ends with next 13.4+ . I haven’t seen any such videos anywhere .

@Sandeep-bx7rg 6 ай бұрын

Thanks bro

@sanjeev2525 2 ай бұрын

Amazing content

@ThugLifeModafocah 8 ай бұрын

very good tutorial with simple and straight forward example. There are some tutorials around that the person put so many not important things around the theme he wants to teach that makes the understanding of the theme just too complex. Not you. Very straight forward.

@alexisgraff2049 6 ай бұрын

Hello ! I have a question, i have a fetch that needs authorization headers for the backend, and when i try to build my next js project, it gives me an error because the api call fails. What can i do in this cases?

@chi-mf1cx 8 ай бұрын

very nice bro, I want a tut on using middleware with next auth but I the catch is I want multiple middlewares like one for auth and one for something else, hope you understand

@MokhtarKhamam 7 ай бұрын

Can I use this with redux toolkit and check if isAuth state set to false protect my route else not protect it like I do in react?

@pankajkoirala2909 6 ай бұрын

i have issue with the last one authentication . how do you manage to protect dynamic route eg 'user/id'

@AyanGhosh-vj7ui 2 ай бұрын

but in realword project session or logged in state in not stored in a file then how to do this? like I have stored jwt token in localstorage Can you help me?

@gameholic3334 4 ай бұрын

I have a question! In the withAuth hook, why did you return a function called WithAuth inside the withAuth hook !!?

@sagarmusic0798 Күн бұрын

Hi, you are reading sessionStatus from a hardcoded variable from another file, could anyone please tell me how to read variable like sessionStatus from redux, though i know redux is client side store and middleware run on server, but is there any other way to check if user is already logged in in case of real authentication system

@lizard-wizard3205 3 ай бұрын

its good tut. its clear and strait forward. the only thing I find missing is the use of typescript. you use everywhere type any. thats a shame. good luck brother

@haidertest1809 8 ай бұрын

Hi Umair, can you please make some tutorials for Spring boot + React Project with Microservice Architecture. As there are not many end to end project tutorials on the internet , it will really be helpful.

@ProgrammingwithUmair321 8 ай бұрын

Sure, I will.

@adeniyitaofik3832 5 ай бұрын

how would you protect a dynamic route using the middlware

@traconisek 19 күн бұрын

Very good tutorial, but how to link it with the next-auth i.e. how to get session details in a first place?

@TemmyCodingLifestyle 7 ай бұрын

Thank you for this tutorial. Can I check if the session is available in the layout which automatically checks every time a page is called? is this a good practice?

@user-lo7ge5qg1k 7 ай бұрын

yess i aslo wanted to know this!!

@emsj 8 ай бұрын

Congratulations on the video! I would like to ask a question, is it possible to protect a group of example routes (folder)? Let's say I have a group of routes like: (public) - Home - About (private) - Dashboard -Users If possible, what is the best approach? Using middleware?

@void_int 7 ай бұрын

you can just pass the private routes in an array and check if the array includes the route you are visiting

@whatyoumissed9994 7 ай бұрын

this is not the appropriate way to do it, you can create layout file where you pas all the children, you check if session is true if not redirect them, its simple just 4 lines of code,@@void_int

@i_ve_given_up 6 ай бұрын

And how to change the variable sessionStatus for example after successful login. Because I want to let user use these routes after login.

@brianrahmarela6552 6 ай бұрын

how to protect all page routes without writing all routes one by one in middleware? like: const protectedRoutes = ["/", "/clientside","/middlewareside"] is that possible? and change root routes with /clientside when running npm run dev

@user-jk8wj8ho8r 8 ай бұрын

hi dev this process is too god but if i using next auth this all methods are useless i cant use this please make a separate video about this using next auth its my humble request

@monirithhuot2858 8 ай бұрын

example I access to localhost:3000/dashboard but the sessionStatus = false so it will redirect(localhost:3000/) but it try to render dashboard page before it check sessionStatus ? so is there any way around to check sessionStatus first if sessionStatus == false -> redirect back to ('/') else go to '/dashboard'

@ProgrammingwithUmair321 8 ай бұрын

Hi, as shown in the video. It won’t happen on server components. Or you can do it using HOC as shown in the video.

@monirithhuot2858 8 ай бұрын

I use server side@@ProgrammingwithUmair321

@monirithhuot2858 8 ай бұрын

I try to write url query to pass not click button like that@@ProgrammingwithUmair321

@monirithhuot2858 8 ай бұрын

I do something like this localhost:3000/dashboard -> it will display loading screen + my navbar before it redirect back to login screen @@ProgrammingwithUmair321

@dolapoajayi2156 7 ай бұрын

Can I make an api request in the middleware.ts file to get current user instead of getting it from next-auth

@Storytelless 6 ай бұрын

you can do api requests inside middleware, but beware: they will slow down the rendering of all affected pages. You have to be sure you only affect necessary routes and only in cases when you can't do API calls from your client components.

@sahilsaksena3199 2 күн бұрын

sir can we use middleware to protect client components as well

@ProgrammingwithUmair321 2 күн бұрын

Yes

@ProgrammingwithUmair321 2 күн бұрын

Yes

@tanmaypatra4896 8 ай бұрын

implementation of middleware is nor 100% correct. NextJs provides a dedicated variable for comparing route names. Please use that

@amcheachamroeun2716 8 ай бұрын

I try to use with user login and get cookie can you help me

@ProgrammingwithUmair321 8 ай бұрын

Can you plz share some code? How are to storing cookie and using it for protecting routes?

@amcheachamroeun2716 8 ай бұрын

@@ProgrammingwithUmair321 in login page const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const router = useRouter(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { const response = await fetch("api", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, password }), }); const data = await response.json(); console.log(data.data.accessToken); if (data.data.accessToken) { Cookie.set("token", data.data.accessToken, { path: "/", expires: 7, }); } if (response.ok) { router.push("/dashboard"); } } catch (err) { console.log(err); } }; in uitils/session.ts import Cookie from "js-cookie"; export const sessionStatus = () => { return !!Cookie.get("token"); }; and I want to protect my dashboard import { sessionStatus } from "@/utils/session" import { redirect } from "next/navigation"; const Dashboard = () => { const session = sessionStatus(); if (!session) { redirect("/"); } return Dashboard; }; export default Dashboard;

@amcheachamroeun2716 8 ай бұрын

@@ProgrammingwithUmair321 I want to set if we have cookie so we can access dashboard page like that