Auth in context is initially null leading to TRPCClientError: UNAUTHORIZED

import { api } from '@/app/_trpc/server';
import Images from '@/components/images';

export default async function Home() {
  void api.main.getImages.prefetch();

  return (
    <main className="container flex flex-col pt-8">
      <Images />
    </main>
  );
}

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const session = await auth();

  return {
    db,
    session,
    ...opts,
  };
};

export const protectedProcedure = t.procedure
  .use(timingMiddleware)
  .use(({ 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 },
      },
    });
  });