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

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

BootesVoid•9mo 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•9mo 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•9mo 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•9mo 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.

BootesVoid•9mo ago

thanks!

BootesVoid•9mo ago

I just got a chance to try this

BootesVoid•9mo ago

any idea what might be the problem

teos•9mo ago

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

Kenzo•9mo ago

are u using ?

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

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

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

BootesVoid•9mo ago

ah right I did this. Thanks

Gaming

Programming

Clerk middleware public routes