Sign inSign up

Protect Client Rendered Pages

What you'll cover in this guide

  • ✅ Create a client rendered page and protect it using protectPage()
  • ✅ Customize the return URL
  • ✅ Set up error handling
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 client rendered page

We'll start by setting up our client-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
"use client";

import { MonoCloudUser } from "@monocloud/nextjs-auth";
import { SignOut } from "@monocloud/nextjs-auth/components";
import { protectPage } from "@monocloud/nextjs-auth/client";

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

export default protectPage(Home);

Let's review what this code does:

  1. "use client;" ensures that the component is rendered in the browser rather than on the server.
  2. We imported the protectPage() function from @monocloud/nextjs-auth/client 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.
  3. 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.
  4. Lastly, we wrap and export the client component with the protectPage() function to ensure it is only accessible to authenticated users.

See 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.

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
"use client";

import { MonoCloudUser } from "@monocloud/nextjs-auth";
import { SignOut } from "@monocloud/nextjs-auth/components";
import { protectPage } from "@monocloud/nextjs-auth/client";

const Home = (props: { user: MonoCloudUser }) => {
  return (
    <div className="flex flex-col gap-3">
      <p>Hi {props.user.email} from the Client 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.

Error handling

You can handle authentication errors by configuring the onError option in the protectPage() function. The onError function receives an Error object as an argument, which contains the cause of the error.

Let's add a simple error message to our page by modifying src/app/page.tsx as follows:

src/app/page.tsx
"use client";

import { MonoCloudUser } from "@monocloud/nextjs-auth";
import { SignOut } from "@monocloud/nextjs-auth/components";
import { protectPage } from "@monocloud/nextjs-auth/client";

type HomePageProps = { user: MonoCloudUser };

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

export default protectPage(Home, {
  onError: (e: Error) => <>Error: {e.message}</>,
});

If an error occurs during authentication, the page will display the cause of the error to help users debug any issues.

Next steps