Next.js Discord

Discord Forum

What is the best way to protect pages?

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I am new to Next.js and working on a dashboard and need to protect the pages. I already have an API in Python and to check if the user is authenticated there is a route /account/info that returns the user info, otherwise it returns a 401. I need the app to only make 1 API request and then cache the user info somehow, so if I navigate around in the dashboard, no additional API requests are made. What would be the best way to achieve this?

Thanks

38 Replies

@Sun bear I am new to Next.js and working on a dashboard and need to protect the pages. I already have an API in Python and to check if the user is authenticated there is a route /account/info that returns the user info, otherwise it returns a 401. I need the app to only make 1 API request and then cache the user info somehow, so if I navigate around in the dashboard, no additional API requests are made. What would be the best way to achieve this? Thanks
B33fb0n3
save a token inside your cookies that contains the user information. Like that you only need to request once and have all the needed data everytime you want it throught the cookies. Then just check in your page if the user has this cookie. If not, return notFound or unauthorized or whatever you like. Else show the page
Sun bearOP
how would i do it, if i want to save the user with zustand and then minimize the api requests needed while navigating in dashboard?
dont really wanna save the user in cookies
rather a zustand store
i tried middleware, but then ofc it requests on every route change, but what about doing it in layout?
@Sun bear rather a zustand store
B33fb0n3
this won't be available on the serverside. And like that content is flashed and the user can even see it, if he is not authorized. So that would be good, to reduce the requests, but it won't be good for your content
@Sun bear i tried middleware, but then ofc it requests on every route change, but what about doing it in layout?
B33fb0n3
checking the auth inside your layout can also leak through
@Sun bear wbu a useEffect inside layout and not display the page before its verified that the user is logged in
B33fb0n3
everything that is clientside can be bypassed by the user. Only if you check it serverside, it can't be bypassed
Sun bearOP
so like they can access dashboard the dashboard without being authorized? if they are not authorized while loading the dashboard page, just redirect them to /login? how can they bypass this
so to do it correctly it needs to be on the serverside?
@Sun bear so like they can access dashboard the dashboard without being authorized? if they are not authorized while loading the dashboard page, just redirect them to /login? how can they bypass this
B33fb0n3
when you check that serverside and redirect them, when they not authorized (everything serverside), it's fine and nothing will leak. When you check the auth on the client, the data can be leaked
Sun bearOP
only way to handle this would be updating the api to store the user in cookies?
kinda dumb
@Sun bear kinda dumb
B33fb0n3
that#s how auth works: https://docs.intersystems.com/irislatest/csp/docbook/images/roars_iam_jwt_overview_flow.png

I hope we both talking about JWT, don't you?
Sun bearOP
session based
i cant really change the api
i was just told to make the dashboard and im trying to figure out the best way to handle this case
they told me that i can just do that on the client side but idk if thats the best approach
feels like the only approach in this case
B33fb0n3
well... technically you can do that on the clientside, but that's insecure.
Session based auth has one big downside: the client saved only the session id and nothing else. Every other information need to be request everytime
Sun bearOP
i mean i cant really do that on the serverside without a lot of requests if im not missing something
what would be the best way to do it on the clientside? just inside layout?
@Sun bear what would be the best way to do it on the clientside? just inside layout?
B33fb0n3
I don't want to advise you on unsafe methods
@Sun bear i mean i cant really do that on the serverside without a lot of requests if im not missing something
B33fb0n3
as said: that's one downside of session based auth. JWT auth would be the other way: most data is saved on the client and only validated when there is a request
Sun bearOP
but what does bypassing it give to the users
if they can see the dashboard
but not interact with it?
@Sun bear but not interact with it?
B33fb0n3
would it be cool for your, if I would see all of your personal information including name, address, creditcard information, ...

But I can't interact with it? NO, that still wouldn't be good if I have read only access to it
Sun bearOP
there is no sensitive information
also how would they see that info if the api doesnt even send it to them
B33fb0n3
I wouldn't do it. That's my advice. Feel free to do it however you like. I gave you my advice for that you asked for. Now you can decide what you want to do
Sun bearOP
so your advice is to use jwt or save it to the cookies?
B33fb0n3
my advice is, to check auth serverside instead of clientside.

How you do that is described here: https://nextjs-forum.com/post/1326537469851729951#message-1326554345864433767
@B33fb0n3 I wouldn't do it. That's my advice. Feel free to do it however you like. I gave you my advice for that you asked for. Now you can decide what you want to do
Sun bearOP
no but really, how would they see any information in the dashboard, if the api provides none
B33fb0n3
I will unfollow this thread for now as my advice will stay the same. Feel free to ask other questions and I will help you further