How do I setup App router + TRPC + Lucia Auth? (protected routes)

TThimo_o

8/26/2023

I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I made a trpc context where I put lucia session and a getDefaultSession function to get the session

export const getDefaultSession = cache((req: NextRequest) => {
  const authRequest = auth.handleRequest({
    request: req,
    cookies,
  })
  return authRequest.validate()
})

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  const session = await getDefaultSession(req)

  return createInnerTRPCContext({
    session,
  })
}

export const getDefaultSession = cache((req: NextRequest) => {
  const authRequest = auth.handleRequest({
    request: req,
    cookies,
  })
  return authRequest.validate()
})

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  const session = await getDefaultSession(req)

  return createInnerTRPCContext({
    session,
  })
}

I wrote a isAuth function to make the protected procedure

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" })
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  })
})

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed)

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" })
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  })
})

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed)

and added it in my route.ts handler

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext(req),
  })

export { handler as GET, handler as POST }

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext(req),
  })

export { handler as GET, handler as POST }

But the session is not passed into ctx resulting in always getting the unauthorized error. Does someone know what I did wrong to make this work?

T.traevelliath

8/26/2023

https://www.youtube.com/watch?v=qCLV0Iaq9zU&t=0s

TThimo_o

8/26/2023

This is the video I initially followed, but it doesn't provide protected procedures. My solution was to change the serverClient into:

export const serverClient = ({ session }: { session: Session | null }) => {
  return appRouter.createCaller({ session })
}

export const serverClient = ({ session }: { session: Session | null }) => {
  return appRouter.createCaller({ session })
}

T.traevelliath

8/29/2023

Why? Look how protected procedures were implemented by Theo, for example, in his Chirp guide. And do the same.

TThimo_o

8/29/2023

It was a bit more difficult to get right on the rsc side, but I made it work in almost a similar way, I only miss the useQuery part now

Ssiobe

11/9/2023

"But the session is not passed into ctx resulting in always getting the unauthorized error. Does someone know what I did wrong to make this work?" I'm running into the exact same issue trying to get Clerk working with app router (Theo's Chirp video showed it working in pages router, not in app router). How did you manage to get the ctx to pass the request with the auth info in this line: const session = await getDefaultSession(req) With Clerk I'm trying to get the auth session with const auth = getAuth(req) and it always returns null

EEndgame1013

11/9/2023

What I’ve used in a couple projects:

import * as context from 'next/headers';

export const isAuthed = t.middleware(async (opts) => {
  const { req } = opts.ctx;
  const authRequest = auth.handleRequest(req.method, context);
  const session = await authRequest.validate();
  if (!session) throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Not authorized!' });
  return opts.next({
    ctx: {
      // 👇 infer session, auth, and authRequest as non-nullable
      session,
      auth,
      authRequest,
    },
  });
});

export const protectedProcedure = t.procedure.use(loggerMiddleware).use(isAuthed);

import * as context from 'next/headers';

export const isAuthed = t.middleware(async (opts) => {
  const { req } = opts.ctx;
  const authRequest = auth.handleRequest(req.method, context);
  const session = await authRequest.validate();
  if (!session) throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Not authorized!' });
  return opts.next({
    ctx: {
      // 👇 infer session, auth, and authRequest as non-nullable
      session,
      auth,
      authRequest,
    },
  });
});

export const protectedProcedure = t.procedure.use(loggerMiddleware).use(isAuthed);

Looking for more? Join the community!

tRPC

How do I setup App router + TRPC + Lucia Auth? (protected routes)

Join Server

tRPC

How do I setup App router + TRPC + Lucia Auth? (protected routes)

Join Server

Recommended Posts

NEXT.JS / Serverless AWSConfigured trpc locally. Everything works great. When deploying via serverless on aws - mutations do How do I set a context dynamically?I don't fully understand middleware in trpc and especially using it for adminProcedures. So my trpc How to make LoaderAndError component which is type safe?I i have a query like this `const { data, isLoading, isError } = trpc.settings.get.useQuery();` Now TRPC vanilla client load failed when called on mobile browserHi, I have created a vanilla client to use TRPC without hooks in a NextJS project: ``` import { cre `createCaller` and RSC - with next-authI've been upgrading my trpc routers and handlers to support edge+app router with drizzle and next-au useQuery always fetching when active on pageHi, I was call my procedure like this, using NextJs (page directory) const { isLoading, isError, isS nextjs app router `fetchRequestHandler`'s createContext doesn't run.Hey there, I have the following code: ```ts // /src/app/api/trpc/[trpc]/route.ts import { fetchRequ "Unable to transform response from server" when 401 error returned from middleware (sometimes)I'm trying to figure out a problem where some (a few, not most) 401 error responses result in an unc How do pass a 'blob' from frontend to backend?I'm having trouble doing this without converting an audio Blob to base64 and then decrypting it and fetch failed - error on npm start on productionI rebuild my next.js app with the npm run build command and I started it with npm start I get this Type return error when using mongoose.node - v16.15.1 npm I'm somewhat new to trpc. Using it with mongoose. Love it so far althought I do useContext won't infer type from tRPC clientI am calling tRPC endpoints from my app and it's working flawlessly. As you can see on first screens Forward client headers with createTRPCProxyClient & Server-Side HelpersWith `createTRPCNext` i had the option to tap into the `context.req` object nextjs passed in, but I I have a websocket + REST project. Should I be using splitLink like this to combine WS and HTTP?I have a backend project that uses REST for queries/mutations and Websockets for subscriptions. I j