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.
Instructor: [0:00] Now that our user is subscribed, we want them to be able to manage their subscription. Right now, clicking this button does nothing. Let's change that in our Pricing page. The first thing we want to do is change this from a button to a link. Let's import that from next/link, and we want this link to navigate to /dashboard. Now, let's create this page.
[0:26] Navigating to this Dashboard page doesn't make sense if we don't have a user. Let's export out the getServerSideProps() function and get our user by saying Supabase.auth.api.getUserByCookie() and passing it our request. This means we need to import our Supabase Client.
[0:48] Now, if we don't have a user, we want to return an object with the key redirect, which is another object with permanent set to false and destination set to /login, and then our props set to an empty object.
[1:02] If we do have a user, then we also want to return empty props. We can test this works by logging out. If we try to go to /dashboard, we get redirected to our Login page, which then takes us back to our Landing page. Let's add a link to our Dashboard in our navbar.
[1:17] Again, we only want this to render if we actually have a user. Let's add a little bit of space between those two items. On this page, we want to show our user whether or not they're subscribed and then a little bit of information about their subscription.
[1:37] Again, this information will be based on the user who's currently logged in. Let's bring in our useUser hook and get our user in our component. Then let's wrap our H1 in a div and add a little bit of styling to each of these. Then we want to show a paragraph.
[1:57] If our user is currently subscribed, we want to show the text subscribed and then the interval of the subscription. Otherwise, we want to show not subscribed. That looks much better. Nav appears to be a little bit broken.
[2:11] Let's fix that by putting our Login/Logout button in an enclosing div and applying the styles to that element that doesn't change. That looks much better. Now we'll notice each time we refresh, it flashes with that not subscribed message before displaying the correct state of our subscription.
[2:29] Back in our Dashboard, let's only display this paragraph tag once our user is no longer fetching additional information. We can use the isLoading flag for this. When we refresh our Dashboard, we only display that subscription status once we have the data we need.
[2:48] If we were to unsubscribe our user and refresh our Dashboard, we'll see that not-subscribed message.