Theo's Typesafe Cult•15mo 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•15mo 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•15mo 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•15mo 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•15mo 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•15mo 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•15mo ago

thanks!

BootesVoidOP•15mo ago

I just got a chance to try this

BootesVoidOP•15mo ago

any idea what might be the problem

teos•15mo ago

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

Kenzo•15mo 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•15mo ago

ah right I did this. Thanks

Gaming

Programming

Clerk middleware public routes