Next.js Route Protection with @triyanox/next-middleware

@triyanox/next-middleware is a user-friendly, type-safe package designed for route protection in your Next.js applications. It can be applied to pages, apps routes, and API routes.

Installation

You can install the package using your preferred package manager:

1# pnpm
2pnpm add @triyanox/next-middleware
3
4# bun
5bun add @triyanox/next-middleware
6
7# npm
8npm install @triyanox/next-middleware
9
10# Yarn
11yarn add @triyanox/next-middleware

How to Use

Here are the steps to effectively use @triyanox/next-middleware for route protection:

1. Define the Data Type for Route Checks

Firstly, you need to specify the type of data that will be used for route checks. Here we use User as an example, but you can replace it with your own data type.

1type Data = User; // Replace User with your own data type

2. Import Dependencies

Next, import the Middleware class, the RuleFunction type, and the Routes type from the package. If you wish, you can also import the routes object from @triyanox/next-routes to generate the routes object. Nonetheless, you can provide your own routes object or type as long as it fulfills the Routes type.

1import Middleware, { RuleFunction, Routes } from "@triyanox/next-middleware";
2import { routes } from "@/lib/link$";

To use @triyanox/next-routes for generating the routes, refer to the documentation for more information.

3. Define Route Protection Rules

You will then define the rules for route protection using the RuleFunction type. For cleaner code, you can define these rules in separate files and import them into the main file. You can also define rules for specific routes using the RuleFunction type with the route path as the third type argument for added type safety.

The RuleFunction type has three type arguments:

• Data: The type of data for route checks.
• Routes: The type of the routes object.
• Path (optional): The path of the route for type safety.

The RuleFunction type takes an object with the following properties:

• data: The data for route checks.
• next: A function to proceed to the next rule or route.
• redirect: A function to redirect to a specific route.
• params: An object containing the route parameters if the rule is for a specific dynamic route.
• path: The current path of the route.

These rules can be asynchronous functions. Here's an example of defining rules:

1const isLoggedIn: RuleFunction<Data, typeof routes> = ({ data, next, redirect }) => {
2  if (data) {
3    return next();
4  } else {
5    return redirect("/login");
6  }
7};
8
9const isAdmin: RuleFunction<Data, typeof routes> = ({ data, next, redirect }) => {
10  if (data.role === "ADMIN") {
11    return next();
12  } else {
13    return redirect("/login");
14  }
15};
16
17const isOwnWorkspace: RuleFunction<Data, typeof routes, '/dashboard/workspaces/[workspaceId]'> = ({
18  data,
19  next,
20  redirect,
21  params,
22}) => {
23  if (data.workspaces.includes(params.workspaceId)) {
24    return next();
25  } else {
26    return redirect("/login");
27  }
28};

4. Construct the Middleware and Perform Checks

Create a middleware using the Middleware class and perform the route checks. The Middleware class needs:

• Routes: The type of the routes object.
• Data: The type of data for route checks.

It also takes an object with the following properties:

• fetch: An async function to fetch the data for route checks, which will be passed to the rules.
• rules: An object where the keys are the paths of the routes and the values are arrays of rules for the routes. The paths can be specific routes or route patterns (We support wildcard paths for the current version we plan to add regex support in the future).
• authPaths: An array of base paths where the rules should be applied.
• onError: An async function to handle errors and redirects.

Here's an example of constructing the middleware:

1import env from "@/env";
2import { NextResponse } from "next/server";
3import { isNotLoggedIn, isLoggedIn, isAdmin, isOwnWorkspace } from "@/lib/rules";
4import { routes } from "@/lib/link$";
5import type { Data } from "@/types";
6import Middleware from "@triyanox/next-middleware";
7
8const middleware = new Middleware<typeof routes, Data>({
9  fetch: async (req) => {
10    // Fetch and return the data for route checks
11    // call an API or a serverless function/db to fetch the data (note that the middleware file is not running on a node.js environment so you can't use things like prisma, mongoose, etc. directly in my case I make an API call to fetch the data)
12  },
13  rules: {
14    "/login": [isNotLoggedIn],
15    "/dashboard/*": [isLoggedIn, isAdmin],
16    "/dashboard/workspaces/[workspaceId]/*": [isLoggedIn, isAdmin, isOwnWorkspace],
17  },
18  authPaths: ["/login", "/dashboard"],
19  onError: async (req) => {
20    // Handle errors and redirects
21    const path = new URL(req.url).pathname;
22    if (path === "/login") {
23      return NextResponse.next();
24    }
25    return NextResponse.redirect(env.NEXT_PUBLIC_URL + "/login");
26  },
27});

5. Export the Middleware

Finally, export the middleware and the config object for use in your Next.js app. In this example, we bind the handle method to the middleware instance and export it as the default export. However, you can create your own handler function and export it by wrapping the middleware instance in your function.

1export default middleware.handle.bind(middleware);
2
3export const config = {
4  matcher: ["/((?!api/|_next/|_proxy/|_static|_vercel|[\\w-]+\\.\\w+).*)"],
5};

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions

We welcome contributions! Feel free to open an issue or submit a pull request if you have ideas or suggestions for improvement.