chriskduffy77 Posts - Answer Overflow

chriskduffy77

•Created by chriskduffy77 on 6/12/2024 in #questions

Clerk auth() called on a route with file extension in T3 stack

Hi all. Having some issues with T3 and Clerk when i navigate to a route with any extension '/foo.bar'. I get the following error:

Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.

For more details, see https://clerk.com/docs/quickstarts/nextjs

Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.

For more details, see https://clerk.com/docs/quickstarts/nextjs

I assume the middleware is working correctly as clerkMiddleware shouldn't be applied to this non existent route/file. Also if i type go to '/foo' i get the correct 404 page, served by not-found.tsx. Everything else is working in my app but it's just i'm seeing on my server logs when random bots are trying '/wp-login.php' it's reporting this error. So I'm wondering if it's something to do with tRPC setup in my T3 setup? Here is my src/middleware.ts:

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher([
  "/dashboard(.*)",
]);

export default clerkMiddleware(
  (auth, request) => {
    const { userId } = auth();
    if (userId && request.nextUrl.pathname === "/") {
      return NextResponse.redirect(new URL("/dashboard", request.url));
    }

    if (isProtectedRoute(request)) {
      auth().protect({
        unauthenticatedUrl: request.nextUrl.origin + "/",
        unauthorizedUrl: request.nextUrl.origin + "/",
      });
    }

    return NextResponse.next();
  },
  { debug: process.env.NODE_ENV === "development" },
);

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

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher([
  "/dashboard(.*)",
]);

export default clerkMiddleware(
  (auth, request) => {
    const { userId } = auth();
    if (userId && request.nextUrl.pathname === "/") {
      return NextResponse.redirect(new URL("/dashboard", request.url));
    }

    if (isProtectedRoute(request)) {
      auth().protect({
        unauthenticatedUrl: request.nextUrl.origin + "/",
        unauthorizedUrl: request.nextUrl.origin + "/",
      });
    }

    return NextResponse.next();
  },
  { debug: process.env.NODE_ENV === "development" },
);

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

8 replies

Gaming

Programming