authMiddleware()

The authMiddleware() helper integrates Clerk authentication into your Next.js application through middleware. authMiddleware() is compatible with both the App and Pages routers.

Usage

Create a middleware.ts file. If your application uses the src/ directory, your middleware.ts file should be placed inside the src/ folder. If you are not using a src/ directory, place the middleware.ts file in your root directory.

middleware.ts
import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware();
 
export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

With the recommended matcher, all routes are protected by Clerk's authentication middleware, with the exception of internal /_next/ routes and static files. Static files are detected by matching on paths that end in .+\..+. If your middleware needs to run on all routes but you don't want Clerk to protect every route, use the ignoredRoutes option.

Using afterAuth() for fine-grained control

Some developers will need to handle specific cases such as handling redirects differently or detecting if a user is inside an organization. These cases can be handled with afterAuth().

middleware.ts
import { authMiddleware, redirectToSignIn } from '@clerk/nextjs';
 
export default authMiddleware({
  afterAuth(auth, req, evt) {
    // handle users who aren't authenticated
    if (!auth.userId && !auth.isPublicRoute) {
      return redirectToSignIn({ returnBackUrl: req.url });
    }
    // redirect them to organization selection page
    if(auth.userId && !auth.orgId && req.nextUrl.pathname !== "/org-selection"){
      const orgSelection = new URL('/org-selection', req.url)
      return NextResponse.redirect(orgSelection)
    }
  }
});

Using beforeAuth() to execute middleware before authentication

If you need additional middleware handlers to execute before Clerk's authentication middleware, use beforeAuth(). An example where the middleware handler from next-intl is executed can be seen below.

middleware.ts
import { authMiddleware } from "@clerk/nextjs";
 
import createMiddleware from "next-intl/middleware";
 
const intlMiddleware = createMiddleware({
  locales: ["en", "el"],
 
  defaultLocale: "en",
});
 
export default authMiddleware({
  beforeAuth: (req) => {
    // Execute next-intl middleware before Clerk's auth middleware
    return intlMiddleware(req);
  },
 
  // Ensure that locale specific sign-in pages are public
  publicRoutes: ["/", "/:locale/sign-in"],
});
 
export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

Making pages public using publicRoutes

By default, Clerk's authMiddleware() treats all routes as private if the middleware runs. If you need to make specific routes public, use the publicRoutes option.

middleware.ts
import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware({
  // "/" will be accessible to all users
  publicRoutes: ["/"]
});
 
export const config = {
      matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

If you are building your own sign in pages, you don't need to add these pages to your publicRoutes. They will be inferred from your .env file:

.env
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

Execution order of beforeAuth, publicRoutes, and afterAuth

If you define an afterAuth function, it will run even if the request corresponds to a private route and no user is signed in. If you don’t define an afterAuth function, a redirect response to the signInUrl will be returned automatically. This diagram explains how and when the two handlers are invoked in the runtime.

Options

The authMiddleware() method accepts an optional object. The following options are available:

Last updated on November 22, 2023