Sign inSign up

Protect Server Rendered Pages

What you'll cover in this guide

  • ✅ Create a server-rendered page and protect it using protectPage()
  • ✅ Customize the return URL
Using the Next.js Page Router instead? See the Page Router version of this guide.

Before you get started

This guide assumes you have a Next.js project set up and running. If you haven't set up authentication in your Next.js App Router project yet, please refer to the quickstart guide.

Create and protect a server rendered page

We'll start by setting up our server-rendered page and making sure it's only accessible to authenticated users.

Open src/app/page.tsx in your editor and replace the contents with the following code:

src/app/page.tsx
import { MonoCloudUser, protectPage } from "@monocloud/nextjs-auth";
import { SignOut } from "@monocloud/nextjs-auth/components";

const Home = (props: { user: MonoCloudUser }) => {
  return (
    <div className="flex flex-col gap-3">
      <p>Hi {props.user.email} from the Server Rendered Page</p>
      <SignOut>Sign Out</SignOut>
    </div>
  );
};

export default protectPage(Home);

Let's review what this code does:

  1. We imported the protectPage() function from @monocloud/nextjs-auth which protects the page by redirecting the user to the Sign In page if they're not already authenticated. It also injects the authenticated user's profile data as a prop to the page component.
  2. We use the user property to retrieve the user's email and display a customized greeting to the authenticated user, along with a Sign Out button.
  3. Lastly, we wrap and export the React server component with the protectPage() function to ensure it is only accessible to authenticated users.

See it in action by running:

Terminal
npm run dev

Then visit http://localhost:3000. Since we protected the root page, you'll be redirected to the sign-in page. Sign in and then try signing out.

Customizing the return URL

After sign-in, the default behavior is to redirect the user back to the page which triggered the sign-in process.

For server-rendered App Router components, the monoCloudMiddleware() is necessary to ensure the user is redirected back to the triggering page. Without monoCloudMiddleware(), the user will be redirected to the application's root page after signing in.

You can change that by passing the returnUrl option to the protectPage() function, which will determine where to redirect the user after a successful sign-in.

Let's try it in the page we just created. Add { returnUrl: 'custom' } as the second parameter to the protectPage() function:

src/app/page.tsx
import { MonoCloudUser, protectPage } from "@monocloud/nextjs-auth";
import { SignOut } from "@monocloud/nextjs-auth/components";

const Home = (props: { user: MonoCloudUser }) => {
  return (
    <div className="flex flex-col gap-3">
      <p>Hi {props.user.email} from the Server Rendered Page</p>
      <SignOut>Sign Out</SignOut>
    </div>
  );
};

export default protectPage(Home, { returnUrl: "custom" });

Now, after a successful sign-in, the page will redirect to http://localhost:3000/custom.

Next steps