TTC
Theo's Typesafe Cult•3w ago
Tenshi

How to get Auth.js 5.0.0 beta middleware to work with Next + tRPC

I have a long time project with Next, tRPC, Prisma and NextAuth, that worked flawlesly on Next 14, Prisma 5.x and NextAuth 4.x. Now I initialized another create t3 app and I'm trying to figure it out for hours already. I was using middleware before to handle my route protection, but this time middleware, according to the official docs, will in the end have to use the authConfigthat has PrismaAdapter (@prisma/client) inside, and thus it throws an error, saying that Prisma can't work in runtime. My tRPC procedures are protected with the default protectedProcedure that comes out of the box with create t3 App, but I just can't figure it out how to use the middleware in Auth.js 5.0 Procedures example: 
export const protectedProcedure = t.procedure.use( //.. rest
export const protectedProcedure = t.procedure.use( //.. rest
I have think of a "solution" that apparently works, but I'm not sure if it's good enough, or will it have some unpredictable issues that I haven't forseen. What I did is, I created a app/(protected) directory, and added a simple layout in it, that only checks for session, and redirects to api/auth/signin if there is no session.user. My plan is to put all my pages there, for example (protected)/users/page.tsx 
app/(protected)/layout.tsx

export default async function ProtectedLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const session = await auth();

  if (!session?.user) {
    redirect("api/auth/signin");
  }

  return <>{children}</>;
}
app/(protected)/layout.tsx

export default async function ProtectedLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const session = await auth();

  if (!session?.user) {
    redirect("api/auth/signin");
  }

  return <>{children}</>;
}
For client pages, I wrapped my root layout with SessionProvider where I pass the session down. 
export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const session = await auth();
  return (
    <SessionProvider session={session}>
    //...
    </SessionProvider>
  );
}
export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const session = await auth();
  return (
    <SessionProvider session={session}>
    //...
    </SessionProvider>
  );
}
So, when I test the basic functionalities, everything seem to work, but it feels kinda hacky compared to my last project. Can anyone give some feedback or possible solutions?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?