Protect Routes using the Middleware

What you'll cover in this guide

• ✅ Create an API endpoint to protect
• ✅ Add the MonoCloud middleware to the Next.js app
• ✅ Explore ways to specify which routes to protect
• ✅ Run a simple demo to see it in action

Using the Next.js App Router instead? See the App 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 Page Router project yet, please refer to the quickstart guide.

Create a protected API

First, we need to create the API endpoint we want to protect with MonoCloud.

Inside the directory src/pages/api, create a file named protected.ts and insert the following code:

import { NextApiRequest, NextApiResponse } from "next";

export default function Protected(req: NextApiRequest, res: NextApiResponse) {
  return res.json({ secret: "The secret" });
}

This endpoint will return a JSON response with the payload: { "secret": "The secret" }.

Add the MonoCloud Middleware

Create a file named middleware.ts in the src directory and enter the following code:

import { monoCloudMiddleware } from "@monocloud/nextjs-auth";

export default monoCloudMiddleware();

export const config = {
  matcher: ['/', '/(api)(.*)', '/((?!.*\\..*|_next).*)'],
};

The matcher configuration ensures that the middleware will only process requests for main user-facing pages and API routes, while excluding static files and Next.js-specific resources.

By default, the MonoCloud middleware protects all routes in your application. Later, we'll see how to customize this behavior to protect only specific routes.

Fetch data from the API and display it

Now that we have an endpoint, let's see it in action. We'll trigger a call to the protected API when a button is clicked.

Open src/pages/index.tsx and replace the existing code with:

import { SignIn, SignOut } from "@monocloud/nextjs-auth/components";
import { useUser } from "@monocloud/nextjs-auth/client";
import { useState } from "react";

export default function FetchData() {
  const { isAuthenticated } = useUser();
  const [data, setData] = useState();

  const handleFetch = async (url: string) => {
    const response = await fetch(url);
    setData(await response.json());
  };

  return (
    <div className="flex flex-col gap-3 max-w-sm">
      <div className="flex flex-col gap-1">
        <p>Data from route: {JSON.stringify(data, undefined, 2)}</p>
      </div>
      <button className="outline p-2" onClick={() => handleFetch("/api/protected")}>
        Fetch Protected Data
      </button>
      {isAuthenticated ? <SignOut>Sign Out</SignOut> : <SignIn>Sign In</SignIn>}
    </div>
  );
}

Let's review what this code does:

1. When the Fetch Protected Data button is clicked, it triggers the handleFetch() function.
2. The handleFetch() function calls the /api/protected endpoint we created earlier.
3. The response body text is stored in the state.
4. Then we display the stored data in a <div> above the button.

See it in action by running:

npm run dev

Then visit http://localhost:3000.

Since we've protected all routes, including the root, you'll be redirected to the sign-in page.

Once you're signed in, click the Fetch Protected Data button. You should see the secret data retrieved from the protected API: { "secret": "The Secret." }.

Choosing which routes to protect

It's likely that you'll want to protect some routes while leaving others open to everyone. For example, you might have a public homepage or a contact page that doesn't require authentication.

We can configure monoCloudMiddleware() to protect specific routes selectively.

The SDK gives you multiple ways to configure which routes to protect:

• Provide a list of routes to protect
• Pass a custom function to create a dynamic list of protected routes
• Create your own middleware that runs before monoCloudMiddleware()

Let's look at each one in turn.

Add an unprotected route

By default, the monoCloudMiddleware() protects all routes. However, when you specify particular routes to protect using one of the three methods described earlier, any routes not explicitly listed will remain unprotected. This approach allows you to secure specific parts of your application while leaving others accessible to all users.

We can put this to the test by creating a new route that will be unprotected by the middleware.

First, create a file named route.ts under src/pages/api/unprotected and add the following code:

import { NextApiRequest, NextApiResponse } from "next";

export default function Unprotected(req: NextApiRequest, res: NextApiResponse) {
  return res.json({ message: "Open access" });
}

The /api/unprotected endpoint returns { "message": "Open access" } as the response body.

Next, add a second button to fetch data from /api/unprotected. In your src/pages/index.tsx file, place this new button next to the existing Fetch Protected Data button:

import { SignIn, SignOut } from "@monocloud/nextjs-auth/components";
import { useUser } from "@monocloud/nextjs-auth/client";
import { useState } from "react";

export default function FetchData() {
  const { isAuthenticated } = useUser();
  const [data, setData] = useState();

  const handleFetch = async (url: string) => {
    const response = await fetch(url);
    setData(await response.json());
  };

  return (
    <div className="flex flex-col gap-3 max-w-sm">
      <div className="flex flex-col gap-1">
        <p>Data from route: {JSON.stringify(data, undefined, 2)}</p>
      </div>
      <button className="outline p-2" onClick={() => handleFetch("/api/protected")}>
        Fetch Protected Data
      </button>
      <button className="outline p-2" onClick={() => handleFetch("/api/unprotected")}>
        Fetch Unprotected Data
      </button>
      {isAuthenticated ? <SignOut>Sign Out</SignOut> : <SignIn>Sign In</SignIn>}
    </div>
  );
}

The second button will fetch data from the /api/unprotected route and display it on the page.

Fire up your Next.js application by running:

npm run dev

Once the app is running, visit http://localhost:3000. This time, you won't be prompted to sign in because we've explicitly protected some routes, leaving all others unrestricted.

If you fetch data from the unprotected route /api/unprotected, you'll see the message { "message": "Open access" }.

However, if you're not signed in and attempt to fetch data from a protected route, you'll see the message { "message": "unauthorized" }.

Try it out and then sign in by clicking the Sign In button. Once you're back at the Next.js application, click the button to fetch data from the protected route. This time, you'll see the data { "secret": "The secret" }.

And that's how you can use the monoCloudMiddleware() to protect specific routes in your Next.js application.

Next steps

• Protect Server Rendered Pages
• Protect Client Rendered Pages
• Protect API Routes