Great writeup. However, I've tweaked your code a bit to fit my needs(using redux-state) instead of context, and I'm facing an issue. I'm using getStaticProps on a dynamic route which is a protected route, wrapped within AuthGuard. When I hit the protected url, I'm successfully redirected to the Signin page if I'm not authenticated, but when I inspect the network tab, I can see that the contents of the protected page are downloaded on the client (as JSON). Also, If I'm authenticated, I'm unable to reach the protected routes. Any suggestions on how do I go about this? Thanks.
Since pages are static they are always downloaded, there is no way around this except to have server-rendered pages where you check if the user is authenticated server-side, and respond accordingly.
You should not have your static pages contain any hardcoded data that is security-sensitive, rather you should load all sensitive data when the user is authenticated (by sending fetch requests to load sensitive data)
A great example of this is the Vercel dashboard.
The static pages are used for a dynamic route, meaning there could be multiple entries that would reach this page, NextJS is forcing me to use SSG using getStaticProps and getStaticPaths , and hence not able to do much after the component mounts. Regarding the data in the page, it's the data that belongs to the user, so it's pretty sensitive. Given the scenario, is server-side authentication check the only workaround?
Currently in development phase, so as of now, I'm just testing with a dummy static data within GSP, but when the database and the backend is ready, I'm planning to replace the dummy data with fetch pointing to an API endpoint.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great writeup. However, I've tweaked your code a bit to fit my needs(using redux-state) instead of context, and I'm facing an issue. I'm using
getStaticProps
on a dynamic route which is a protected route, wrapped withinAuthGuard
. When I hit the protected url, I'm successfully redirected to the Signin page if I'm not authenticated, but when I inspect the network tab, I can see that the contents of the protected page are downloaded on the client (as JSON). Also, If I'm authenticated, I'm unable to reach the protected routes. Any suggestions on how do I go about this? Thanks.Since pages are static they are always downloaded, there is no way around this except to have server-rendered pages where you check if the user is authenticated server-side, and respond accordingly.
You should not have your static pages contain any hardcoded data that is security-sensitive, rather you should load all sensitive data when the user is authenticated (by sending fetch requests to load sensitive data)
A great example of this is the Vercel dashboard.
The static pages are used for a dynamic route, meaning there could be multiple entries that would reach this page, NextJS is forcing me to use SSG using
getStaticProps
andgetStaticPaths
, and hence not able to do much after the component mounts. Regarding the data in the page, it's the data that belongs to the user, so it's pretty sensitive. Given the scenario, is server-side authentication check the only workaround?How are you getting the data for the user? There is no request/response objects in
getStaticPaths
Currently in development phase, so as of now, I'm just testing with a dummy static data within GSP, but when the database and the backend is ready, I'm planning to replace the dummy data with
fetch
pointing to an API endpoint.