Theo's Typesafe Cult•2y ago

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Hi there, Recently, I was following Theo's T3 stack tutorial on YouTube. When attempting to use the Clerk getAuth() helper function in the trpc.ts file of the T3 stack application, an error is thrown stating that the withClerkMiddleware function must be added to the Next.js middleware.ts file. Prior to using the getAuth() helper function, Clerk was working fine and recognized that withClerkMiddleware had already been added to the middleware.ts file. Steps to Reproduce: 1. Follow Theo's T3 stack tutorial on YouTube. 2. At timestamp 1:21:28 in the tutorial, introduce the Clerk getAuth() helper function in the trpc.ts file to retrieve the authentication state for a user based on the NextApiRequest argument passed to it. 3. Run the application using npm run dev command from the project's root directory . 4. Observe the following error message (screenshot attached):

❌ tRPC failed on <no-path>: You need to use "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. See https://clerk.com/docs/quickstarts/get-started-with-nextjs

Expected Result: The getAuth() helper function should be able to retrieve the authentication state for a user without causing any errors. Actual Result: An error message is thrown stating that the withClerkMiddleware function must be added to the middleware.ts file, and to check that Clerk has been properly configured. Fixes Attempted: 1. Deleted .next and restarted Next.js dev server using npm run dev command. 2. Reinstalled @clerk/nextjs NPM package. 3. Reconfigured middleware.ts from scratch based on example from Clerk's quickstart documentation for Next.js. I'm kind of lost here and would appreciate any help/advice on how to fix the bug. Thanks!

Theo - t3․gg

YouTube

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

I've never worked this hard on a video before. I really hope y'all can benefit from this 🙏 GITHUB REPO https://github.com/t3dotgg/chirp DEPLOYED APP https://xn--uo8h.t3.gg/ GET A JACKET IF YOU'RE COOL LIKE THAT https://shop.t3.gg/ ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg Everything else (Twitch, Twitter, Discor...

Next.js Overview | Clerk

Clerk is the easiest way to add authentication and user management to your Next.js application

40 Replies

elpupper•2y ago

do u have middleware.ts if so lets see whats in it @roshen

roshenOP•2y ago

@elpupper yes, I created it based on the default middleware.ts template provided by Clerk. All I changed was removing the NextRequest argument passed to the callback in withClerkMiddleware (Theo did the same thing) because it wasn't being used. Here are the contents of my middleware.ts file:

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware(() => {
    console.log('middleware running...');
    return NextResponse.next();
});

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - _next
         * - static (static files)
         * - favicon.ico (favicon file)
         * - public folder
         */
        "/((?!static|.*\\..*|_next|favicon.ico).*)",
        "/",
    ],
};

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware(() => {
    console.log('middleware running...');
    return NextResponse.next();
});

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - _next
         * - static (static files)
         * - favicon.ico (favicon file)
         * - public folder
         */
        "/((?!static|.*\\..*|_next|favicon.ico).*)",
        "/",
    ],
};

Use Clerk with Next.js | Clerk

Authentication and User management for the modern web

elpupper•2y ago

where did u put the middleware.ts file?

roshenOP•2y ago

Relative to the project root, its path is src/middleware.ts

elpupper•2y ago

what does ur _app.tsx look like

roshenOP•2y ago

These are the contents of my _app.tsx file (relative file path: src/pages/_app.tsx):

import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

elpupper•2y ago

hm how did u install trpc the error is from trpc

roshenOP•2y ago

I used the Create T3 App tool (npm create t3-app@latest) and made sure to select tRPC in the installation CLI menu. I was skeptical about my installation too initially, so I recreated the entire project from scratch and still reproduced the same error.

elpupper•2y ago

what does ur [trpc].ts look like

roshenOP•2y ago

These are the contents of my [trpc].ts file (relative file path: src/pages/api/trpc/[trpc].ts). They haven't been edited since I first initialized the project:

import { createNextApiHandler } from "@trpc/server/adapters/next";

import { env } from "~/env.mjs";
import { createTRPCContext } from "~/server/api/trpc";
import { appRouter } from "~/server/api/root";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(
            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
          );
        }
      : undefined,
});

import { createNextApiHandler } from "@trpc/server/adapters/next";

import { env } from "~/env.mjs";
import { createTRPCContext } from "~/server/api/trpc";
import { appRouter } from "~/server/api/root";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(
            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
          );
        }
      : undefined,
});

elpupper•2y ago

ok and in ur server/api/trpc.ts

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

u should have this yeah? this isn't the whole file but if u go to const t

roshenOP•2y ago

Yes, I have that exact function (was created automatically during project initialization)

elpupper•2y ago

import { getAuth } from "@clerk/nextjs/server";
export const createTRPCContext = (_opts: CreateNextContextOptions) => {
  const { req } = _opts;
  const sesh = getAuth(req);

  const userId = sesh.userId;

  return {
    prisma,
    userId,
  };
};

import { getAuth } from "@clerk/nextjs/server";
export const createTRPCContext = (_opts: CreateNextContextOptions) => {
  const { req } = _opts;
  const sesh = getAuth(req);

  const userId = sesh.userId;

  return {
    prisma,
    userId,
  };
};

roshenOP•2y ago

Here's what my createTRPCContext function looks like. It isn't the same as yours because I haven't completed the tutorial (encountered the error at timestamp 1:21:28):

import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { prisma } from "~/server/db";
import { getAuth } from "@clerk/nextjs/server";

/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const user = getAuth(req); // Clerk auth error (introduced at 1:21:28)

  return {
    prisma,
  };
};

import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { prisma } from "~/server/db";
import { getAuth } from "@clerk/nextjs/server";

/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const user = getAuth(req); // Clerk auth error (introduced at 1:21:28)

  return {
    prisma,
  };
};

elpupper•2y ago

u should continue watching i think he gets the same error maybe but in package.json

roshenOP•2y ago

Hm, I'll try watching further ahead, but I do remember him refreshing the app after making these changes, and the posts loaded without any errors

elpupper•2y ago

whats ur clerk/nextjs in dependencies for me its

"@clerk/nextjs": "^4.11.14",

"@clerk/nextjs": "^4.11.14",

roshenOP•2y ago

Here's mine: "@clerk/nextjs": "^4.16.4", It auto-installed the latest stable version, I think

elpupper•2y ago

try with ^4.11.14 just to see

roshenOP•2y ago

Alright, I'll try it and get back to you Just tried it and reinstalled node_modules, the same error is still showing up

elpupper•2y ago

its time to bring the real boys in then cause i have no clue 😭 @James Perkins check this one out

roshenOP•2y ago

Lmao thanks for your help tho, I appreciate it @elpupper

elpupper•2y ago

tried my best. No problem might have to wait for a while since he is probably sleeping

roshenOP•2y ago

No problem

James Perkins•2y ago

can you change your matcher to this

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

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

roshenOP•2y ago

@James Perkins Wow, that worked! The error isn't showing up anymore, and the posts are loading and rendering as they should Could you explain why the change in the regex was necessary?

James Perkins•2y ago

👍 It's almost like I've seen this 100 times and it is documented. The trpc routes are different then api routes, they use trpc/example.hello for example. It causes Next.js defaults to mess up, so we advise to be specific and state you want it to run on trpc routes and then make sure it runs on the home page.

roshenOP•2y ago

@James Perkins I see. From my understanding of the config.matcher property in middleware.ts, it specifies the paths on which the middleware should run. The previous matcher RegEx (/((?!static|.*\\..*|_next|favicon.ico).*)) was filtering out _next, static, favicon.ico and public but matching all other paths right? Wouldn't that mean it should also match tRPC routes? Is there a reason we need to specifically mention that we want it to run on tRPC routes?

James Perkins•2y ago

Yes because it breaks due to the period in there. We say "include tRPC" exclude everything else

roshenOP•2y ago

Alright understood, thank you for your help! It's strange that the error doesn't occur on Theo's system during the tutorial though

James Perkins•2y ago

Yup, I think since he dropped that video, I answer about 20-50 a week. Also a lot has changed since he dropped that video in middleware (outside of Clerk) Before we didn't need to include "/" Now we do.

roshenOP•2y ago

I see, I'll be sure to go read up on the new updates to Next.js middleware Thank you again for your help I can't seem to mark the solution though, the bot keeps failing

elpupper•2y ago

damn i was kinda close good to know i didnt notice

BootesVoid•13mo ago

I used this and still get this error: tRPC failed on <no-path>: Clerk: getAuth() was called but Clerk can't detect usage of authMiddleware(). Please ensure the following: - 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.

James Perkins•13mo ago

You probably need to talk to the Clerk team a lot has changed in 7 months and I don’t work there anymore

elpupper•13mo ago

nooo james 😦

James Perkins•13mo ago

I got my own company now it’s all good 😀

elpupper•13mo ago

Lets goo what is it?

James Perkins•13mo ago

https://unkey.dev/

unkey.dev

Unkey

Accelerate your API Development

elpupper•13mo ago

going to have a look now! im happy for you

Gaming

Programming

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized