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

thanks!

BootesVoidOP•16mo ago

I just got a chance to try this

BootesVoidOP•16mo ago

any idea what might be the problem

teos•16mo ago

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

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

ah right I did this. Thanks

Gaming

Programming

Clerk middleware public routes