"secret" static pages, that are only accesible via an internal route

[diegopelusa]

Hi everyone!

PROBLEM TO SOLVE
I would like to have a static page which checks for authentication before being shown to the client.

MY CURRENT KNOWLEDGE -> NEED FOR A SOLUTION
As much as I know, I could do authentication check in a SSR page, which would then in the server side do the authentication check with an external server. And afterwards the page would be built at the server side and sent to the client.
But I cannot do an authentication check in a static page, because the static page would be shown to the client at the first step, without any previous interaction to the user, like a check of a cookie for authentication purposes.

PROPOSED SOLUTION
It would be nice to combine the two powers of SSR and Static Page, by having a combination of boths. I try to show it in the following pictures.

The user types a URL, then in the server there is first an Auth check, and if it succeeds then the user is redirected to the Static Page.

PROBLEMS TO SOLVE IN THE PROPOSED SOLUTION
1- User trying to access directly to the "secret" URL

If the user types the "secret" URL of the page, then NextJs should not show that page to the client, but redirect to a predefined page. That means that the NextJs shall know about the "secret" static page.
After redirecting to the predefined page, the normal situation would happen, where there is an Auth check and afterwards the redirection to the Static Page.

DISCUSSION

Does it make sense what I have been thinking?
Is it possible to solve the proposed problem with the current state of NextJs?

Many thanks for your comments
Diego

[lfades]

What you're asking for is not possible. Static files have to be public in order for the website to be accessible to your visitors. Static pages are also static files (HTML, css and js) that are created at build time. You shouldn't be trying to hide static files but data instead. E.g in a profile page you want to generate a static page that shows a loading state, and once an user enters that page, do a request to your API (and authenticate the request with a cookie) so it returns the private data of the user and replaces the loading state with his data. Note how the page is still static and public (a loading spinner is not a security issue).

TL;DR: static pages have to be public or otherwise a browser can't fetch them. You should be securing your data, not your static files.

[diegopelusa]

Thanks Luis for your answer.

I have the issue that I have pages which:

• access to a big and complex database (answer time > 3 seconds)
• pages are called by many users (users per day > 1000)
• only authenticated users can see the pages.
• database stable, changes to it around 1 per week.

Until now I was using Redux to maintain a copy of all the data in the clients browser, but the data is getting bigger and bigger, and I think static pages would resolve the issue very cleanly, leaving to the server in build time to access the database and then serve quickly to the users the pages.

At the same time, many of the pages are private, ie only for registered users. For those pages I need to authenticate the user. But I don't see the way to authenticate the user in a static page.

I could think of other ways of caching locally the data and then reduce the time to access to the database.
But I think, a static page which could be previously check for authentication, would be the most clean way I can imagine to design the system.

It seems there are other people having similar thinking about this topic.

#14890 (reply in thread)

At the moment the only solution seems to be a SSR solution. But I think there are use cases where a combined static page with a previous check would be ideal.

Thanks for your comments!

[dolie]

Hello @lfades ,

I can't hear that I must keep the UI public, and datas private...
For security concerns, the UI of my private pages must be hidden!
Do you have any clue of how to hide private pages?
I have seen custom servers (maybe I could implement auth middleware + rerouting), but there is a lot of performance issues:

A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

I cannot find threads that detail those performance issues and how to resolve these.

[dolie]

I finally have come up with an answer:

1. Public website with few private pages, I will use : RFC: Returning redirects from getServerSideProps / getStaticProps #14890
2. Public website with all private pages : simple React.js pages behind Express.js server with auth middleware (no need for static optim)
3. Private website : same as 2. (or 1.) , and place it behind proxy to only accept whitelisted (local network's) IPs.

[jembach]

Hi,

recently I came up with the same issue. My problem is that I have some secret pages that only authenticated users are allowed to access. I’m storing the session for security reasons as a cookie as http only. The pages itself are all static sites and I would let them static for performance.

After thinking about the problem I came up with the following solution:

1. every page can exports a function like: onAccessPage(ctx)
2. the Page is statically builded on conditions of automated static site optimisation
3. When the page is accessed the onAccessPage will be called as middleware.

Depending of the features that should be available by this approach the following scenarios could be possible:

• static/dynamic page will be served
• Redirect occurs
• (Data will be injected that does not impact the rendering like tokens)

In the end this approach is just an optional middleware for the standard next server that will be compatible with static site optimisation.

[bennettdams]

With Next.js 12, protected static sites are now possible out of the box with middlewares.