DevVault

How to Set Up Convex Authentication Middleware

Important

Before implementing this middleware, ensure you've properly set up Convex Auth in your project. If not, please refer to the Convex Auth Setup.

Step 1

Creating the Middleware

This middleware will handle authentication by redirecting unauthenticated users to the login page. Public routes, such as login and home, do not require authentication.

middleware.ts

import { createRouteMatcher, isAuthenticatedNextjs, nextjsMiddlewareRedirect, convexAuthNextjsMiddleware } from "@convex-dev/auth/nextjs/server";

// Define public routes (pages that do not require authentication)
const isPublicRoute = createRouteMatcher(["/auth", "/"]);

// Define middleware to check if a user is authenticated
export default convexAuthNextjsMiddleware((req) => {
  if (!isPublicRoute(req) && !isAuthenticatedNextjs()) {
      // Redirect unauthenticated users to login
      return nextjsMiddlewareRedirect(req, "/auth");
  }
});

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

Step 2

Adding Public Routes

If you have additional public routes (pages that do not require authentication), you can easily add them by extending the isPublicRoute array. Here's how:

middleware.ts

const isPublicRoute = createRouteMatcher(["/auth", "/", "/about", "/contact"]);

In the above example, pages like `/about` and `/contact` are accessible without login, making them public routes.

Awesome! You've just taken another huge step by understanding how to manage authentication middleware. Keep going! You're well on your way to mastering Convex in Next.js!

Next Steps

Learn how to use Convex Functions in your application.

Convex Functions

Learn how to use the Convex Functions to manage your data.