Property X does not exist on type 'GetServerSidePropsContext<ParsedUrlQuery, PreviewData>'

Question

I have the following:

type Session = {
  bearer: string,
  firstName: string,
  lastName: string,
  etc...
};

interface ServerContext extends GetServerSidePropsContext {
    session: Session,
};

export type ServerProps<P extends { [key: string]: any } = { [key: string]: any }> = (
    context: ServerContext
) => Promise<GetServerSidePropsResult<P>>;

export const requireAuth = (gssp: GetServerSideProps) => {
  return async (ctx: GetServerSidePropsContext) => {
    const { req } = ctx;
    const session = req?.headers?.cookie ? await getSession(req?.headers?.cookie) : null;

    if (!session) {
      return {
        redirect: { permanent: false, destination: '/login' }
      };
    };

    const serverSession = { ...ctx, session };

    return await gssp(serverSession);
  };
};

And then whenever its required, I use it as follows:

export const getServerSideProps: ServerProps = requireAuth(async _ctx => {
  const { session } = _ctx;

  let account = session;
  let stats = {};

  try {
    stats = fetchSomeData
  } catch (error) {
    console.log('Pages/Index Fetching Error: ', error);
  }

  return {
    props: {
      account: account,
      stats: stats,
      navbar: true,
      footer: true,
    },
  };
});

Issue: const { session } = _ctx outputs the following error: "Property session does not exist on type 'GetServerSidePropsContext<ParsedUrlQuery, PreviewData>'"

Workaround: If I go to node_modules/next/types/index.d.tsx and I just add session: Session to GetServerSidePropsContext, it works just fine, but if I try to extend the interface as above, it does not seem to work.

Answer 1

export const requireAuth = (gssp: ServerProps) => {
  return async (ctx: GetServerSidePropsContext) => {
    const { req } = ctx;
    const session = req?.headers?.cookie ? await getSession(req?.headers?.cookie) : null;

    if (!session) {
      return {
        redirect: { permanent: false, destination: '/login' }
      };
    };

    const serverSession = { ...ctx, session };

    return await gssp(serverSession);
  };
};

Should have used ServerProps instead of GetServerSideProps