Create a Client Page that Requires Authentication in Next.js Using getServerSideProps

We can create protected client pages that require a user to be signed in with Supabase to view, by exporting a getServerSideProps function from our page component. This will allow us to execute some logic on the server, before Next.js renders our component.

We will create a new page for /dashboard. It doesn't make sense for this page to be rendered unless we have a user, therefore, we can redirect the user to the /login route if they are not signed in.

We can extract our user from the Supabase auth cookie by calling the getUserByCookie function. If we don't have a user, we can redirect the request to our login page, otherwise, we can display our dashboard page.

We want it to be easy to navigate to this page if we have a user, therefore, we add a link to our <Navbar> component, and conditionally render it based on whether or not we have a user signed in.

Lastly, we implement an isLoading state and only display our user's subscription information in the dashboard.