NextJS static SSG authentication

Question

Use case

I am creating a paid blog website, where people can pay to bloggers to see their blogs.

Solution i Chosen

I have chosen NextJS to build static content( SSG ). With fallback option, static content can also built after site is deployed.

Problem

Now, the problem is authentication. We can not authenticate any incoming request on server like SSR .

The only way to check authentication is present on client side. Use useEffect hook to check if the current user is authenticated or not.

But, the problem with this approach is that, any user can disable javaScript on client side to view the content.

Is there any way to authenticated SSG page request on server side.

I don't want to use SSR because increased cost.

Answer 1

You can you use a service called Auth0 to implement static site authentication. It is free up to several thousand requests per month and has React components you can use. Make sure to follow the tutorial for auth0-react and NOT nextjs-auth0 (this is for SSR).

Here is the link to Auth0: https://auth0.com/

Answer 2

You could return null if the user is authenticating on SSG. If you're not loading any content via an API, then the user would be able to see it in the code (but not many users would be doing this). There is the option of Vercel Edge Functions now if you haven't managed to fix this issue yet.