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

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

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!

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

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

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

Thank you man, Great job.

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

@ProgrammingwithUmair321

9 ай бұрын

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

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

Thanks Baii , Informative and well explained

Many Thanks. Subscribed

tnku so much appreciate your content

great video, great explication!!!!

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

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?

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?

Thank you.

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

how would you protect a dynamic route using the middlware

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?

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 .

Amazing content

Thanks bro

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

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.

can i check token in middleware??

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

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

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

8 ай бұрын

yess i aslo wanted to know this!!

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

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

8 ай бұрын

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

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

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

@alexeyfedorovich9769

14 күн бұрын

because any HOC should return Component that wraps your target component. That's why we have WithAuth Component and its name starts with capital letter which is typical characteristic of all the components)

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

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.

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

9 ай бұрын

Sure, I will.

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

sir can we use middleware to protect client components as well

@ProgrammingwithUmair321

22 күн бұрын

Yes

@ProgrammingwithUmair321

22 күн бұрын

Yes

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

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