How to make protected routes in nextjs appdir
Hello! So I’m doing authentication and I want to make it so I fetch the user data on first load, but then reuse this data to check on all protected pages. How do I go about this? .
I thought about fetching this data each time they go to protected routes but isn’t that ineffective (spends more time)
Solution:Jump to solution
Hello! So I’m doing authentication and I want to make it so I fetch the user data on first load, but then reuse this data to check on all protected pages. How do I go about this? .
I thought about fetching this data each time they go to protected routes but isn’t that ineffective (spends more time)...
29 Replies
You don’t do that
You always check
Okay 👌. I see it’s an architecture problem.
Thank you!!
Okay but I’m still curious. Imagine this wasn’t for authentication but for some kind of data (let’s say posts) I want this data accessible on all routes. How do I go about it?
I tried creating a context and wrapping the
children of “layout.tsx” on the root dir. But it doesn’t seem to work at alltrpc and nextauth 😉
basically you would have to recreate the same logic nextauth has. with a auth context provider and a custom react hook. Depending on the auth method u will use. probably jwt?. i would advise you to use supabase or nextauth or another auth provider which will make everything easier.
Okay. The thing is. I’m learning node/express. I already created an express server with all the db and jwt logic. I just want to use this server on the client. Using next/auth would totally defeat the purpose of my server
Uhh if you use nextjs u can litereally use the built in functionality of a server without any problems heh. but okay.
do you have a jwt middleware ?
inside express
Yes. Every thing is set up. And it’s works very well
You will need a react context provider to handle data across components
Okay. I tried that though. Maybe I’m not doing it correct in the app dir.
What do I wrap the context with? Layout.tsx children?
Also where do I load this initial data first time and store in the context?
There are many ways with statemanagement. u can use redux or the built in context provider.
yes you need to wrap the children with context provider
u can load the data with useeffect
on render basically
Okay thanks. I’ll try that. I think the entire confusion has to do with the server components.
Thanks mate.
In the worse case, I’ll only use client components all through to avoid confusion
Depends what is the purpose of the application
u will not be able to get client events from server components
like on click etc..
The purpose of the application is just to call my backend server. That’s all. Nothing more I’m doing. And yes, I’ll do in clicks too
u can use react query on the front end to fetch the data.
react query will give you access to the state of the api call you make like error, is fetching, data etc... so you can make everything bulletproof
Yh. I’ve used it a few time. Similar to Swr too. I guess either works
Yes. You can also use trpc with express if you ever want to transition to it.
Oh okay. I heard it lags support of newer nextjs versions so I guess i should do without it for now
Yeah but ur not even using nextjs backend features. There is support for app dir but there are no official examples
Hey man. I found a way. So I eventually ended using server lol. It's cool
I created a getUser function that runs on the server and fetches the user and also redirects to the login page if the user is not logged in. Now I can just import this getUser() function on any protected route. Works like magic not
yeah u can also use a custom hook.
"use server" at the top "server-only" works?
Oh yh. I'll have to change it to
useUser so it becomes clear what it's doing. But normal hook don't work in server components right?U will not be able to get any of the browser api functions and lifecycle hooks
'use server' is not supported by turbopack sadly. The normal dev server is extremely slow
oh okay.
wait can you use server components inside a client component?
Yh I get that. I'll probably just create client component and pass the user data when I want to. The main aim of the server component is to verify the user
Exactly. You can pass the data down and it's comes on the client like it didn't load at all. No useEffect nonsense. Now I see how cool this is
try to use onClick or any other event in the component to see
its cool if that works yeah.
ON the client component?. I have.
This is the Homepage component. I have a log out function that has an onCluck. On this one, I delete the session on the express server and navigate to the login page
and it works well too
cool cool