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.
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