Theo's Typesafe Cult•2y ago

Clerk middleware public routes

I have an ecommerce website with the / route being public, and I'm fetching categories from a publicProcedure, but it doesn't work if I'm not logged with clerk.

11 Replies

Sturlen•2y ago

make sure you Clerk middleware isn't matching for public routes. not much more to go on unless you can post the code

BootesVoidOP•2y ago

So I fixed it by adding the specific trpc routes to publicRoutes,

import { authMiddleware } from "@clerk/nextjs";
import { redirect } from "next/navigation";
import { prisma } from "./server/db";

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
export default authMiddleware({
  publicRoutes: ["/api/webhooks/user", "/", "/api/trpc/category.getCategories", "/api/trpc/category.getSubCategories", "/api/trpc/category.getAllSubCategories"],
});

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

import { authMiddleware } from "@clerk/nextjs";
import { redirect } from "next/navigation";
import { prisma } from "./server/db";

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
export default authMiddleware({
  publicRoutes: ["/api/webhooks/user", "/", "/api/trpc/category.getCategories", "/api/trpc/category.getSubCategories", "/api/trpc/category.getAllSubCategories"],
});

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

but I dont want to do this for every route, why is this happening even though im using a publicProcedure. So I added these three, "/api/trpc/category.getCategories", "/api/trpc/category.getSubCategories", "/api/trpc/category.getAllSubCategories"

Sturlen•2y ago

a better solution would proably to let tRPC handle the route protection by itself and not running a seperate clerk middleware. create T3 app with next-auth handles this by default. I don't have an example at hand but the docs might have one. just replace the next-auth enforceUserIsAuthed with clerk's

Josip•2y ago

Any idea how to let tRPC handle route protection without Clerk middleware? As soon as middleware is removed, hitting tRPC routes errors out:

tRPC failed on <no-path>: You need to use "authMiddleware" (or the deprecated "withClerkMiddleware") in your Next.js middleware file. You also need to make sure that your middleware matcher is configured correctly and matches this route or page.

Sturlen•2y ago

according to the docs, using /api/trpc/* as a public route in your middleware should let tRPC handle it instead of Clerk. https://clerk.com/docs/references/nextjs/auth-middleware#making-pages-public-using-public-routes

authMiddleware() | Next.js | Clerk

The authMiddleware() method allows you to protect your Next.js application using middleware.

BootesVoidOP•2y ago

thanks!

BootesVoidOP•2y ago

I just got a chance to try this

BootesVoidOP•2y ago

any idea what might be the problem

teos•2y ago

Without the code, it'll be difficult to help you

Kenzo•2y ago

are u using ?

export default authMiddleware({
  publicRoutes: ["/", "/api/trpc(.*)"],
});

export default authMiddleware({
  publicRoutes: ["/", "/api/trpc(.*)"],
});

it creashes if you use directly /api/trpc/*

BootesVoidOP•2y ago

ah right I did this. Thanks

Gaming

Programming

Clerk middleware public routes

Did you find this page helpful?