Secure pageProps
Unanswered
Selkirk Rex posted this in #help-forum
Selkirk RexOP
Hi all. Using v13 with next-auth v4, I'm sending data to the client from SSR using pageProps.
I want to send a user's role to the page to do some conditional rendering (such as show a 'delete' button if they're an admin -
I've got this working, but I can obviously override pageProps using dev tools. I handle my auth on the apis the buttons call, so they can't actually do anything, but still I want to make it a lil' more secure (defense in depth I guess).
Is there a way to 'secure' pageProps, or am I to assume anything sent to the client can be edited and overridden and I need to change my approach.
Appreciate any advice, I'm not strong in react, maybe this is completely the wrong place to handle this sort of thing.
I want to send a user's role to the page to do some conditional rendering (such as show a 'delete' button if they're an admin -
{pageProps.roles.includes('admin') && <Button></Button>}). I've got this working, but I can obviously override pageProps using dev tools. I handle my auth on the apis the buttons call, so they can't actually do anything, but still I want to make it a lil' more secure (defense in depth I guess).
Is there a way to 'secure' pageProps, or am I to assume anything sent to the client can be edited and overridden and I need to change my approach.
Appreciate any advice, I'm not strong in react, maybe this is completely the wrong place to handle this sort of thing.
9 Replies
The data sent to the client can be edited client-side yeah, but with no real impact on the server
so if you want a page to be totally innacessible to the user, you can't do that client-side
This is from Blitz but basically in most web apps, you secure "data", not "pages"
so what matters the most is that unauthorized user cannot query data from your database
if they "hack" the client they still won't be able to do much if the server part is correctly secured
client-side check never ever protect you against an attacker
Selkirk RexOP
Yeah it's all just component rendering - they make calls to the API which check auth serverside, so it's no big deal. I also do checking for protetcted pages serverside.
Think like... nav bar, if admin show x,y,z - they can override pageProps to set themselves as admin and see the buttons, but if they click they get 403'd.
I'll take a look at the blog post, thanks Eric - appreciate the reply!
Think like... nav bar, if admin show x,y,z - they can override pageProps to set themselves as admin and see the buttons, but if they click they get 403'd.
I'll take a look at the blog post, thanks Eric - appreciate the reply!