Next.js Get User From Session in SSR with getServerSideProsp

withSsrPropsUser.tsx

import { GetServerSideProps } from 'next';

import { getSession } from './auth/[...nextauth]';

export type AddParameters<
  TFunction extends (...args: any) => any,
  TParameters extends [...args: any]
> = (
  ...args: [...Parameters<TFunction>, ...TParameters]
) => ReturnType<TFunction>;

/**
 * Higher order function to inject the current user into the server side
 * rendering props of a page, which is probably required on all pages to make
 * sure the header is SSR rendered properly with the logged in user.
 *
 * Needs to be used in conjunction with withSsrUser() in the client component.
 */
export const withSsrPropsUser: (
  cb?: AddParameters<GetServerSideProps, [ssrUser: YOUR_USER_TYPE | null]>
) => GetServerSideProps =
  (callback = async () => ({ props: {} })) =>
  async (context) => {
    const session = await getSession(context.req, context.res);
    const sessionUser = session?.user as YOUR_USER_TYPE;
    if (sessionUser) {
      const ssrUser = await GET_SSR_USER_HERE(sessionUser.id);
      const result = await callback(context, ssrUser);

      return {
        ...result,
        props: {
          // @ts-ignore
          ...(result.props || {}),
          ssrUser: ssrUser,
        },
      };
    } else {
      return await callback(context, null);
    }
  };

withSsrUser.tsx

import { createContext, useContext } from 'react';

export const AuthContext = createContext<YOUR_USER_TYPE | null>(null);

/**
 * Higher order component to supply the logged in user via context to any child
 * components. Specifically made to avoid prop drilling the logged in user to
 * the header and footer component, but can be used anywhere.
 *
 * Requires the *page* to be wrapped in withSsrUser(). Note you can't do this
 * at the _app.ts level, because Next errors saying that it kicks all pages out
 * of static generation (which is what I want anyway).
 *
 * Use in conjuction with withSsrPropsUser() in getServerSideProps.
 */
export function withSsrUser<T extends unknown>(
  WrappedComponent: React.ComponentType<T>
) {
  const displayName =
    WrappedComponent.displayName ||
    WrappedComponent.name ||
    'withSsrUserWrapper';

  const InnerComponent = (
    props: T & { ssrUser: YOUR_USER_TYPE | null }
  ) => {
    return (
      <AuthContext.Provider
        value={props?.ssrUser}
      >
        <WrappedComponent {...props} />
      </AuthContext.Provider>
    );
  };

  InnerComponent.displayName = `withSsrUser(${displayName})`;

  return InnerComponent;
}

export const useSsrUser = () => {
  return useContext(AuthContext);
};

Usage:

Every page component that needs this data needs to wrap or create getServerSideProps, so either

export const getServerSideProps = withSsrPropsUser(async (context, user) => {
  return {
    props: {
      ...
    },
  };
});

or just

export const getServerSideProps = withSsrPropsUser();

AND that same component needs to export wrapped in the HOC, aka

const Home = () => {
  return (
    <>
    ...
    </>
  );
};

export default withSsrUser(Home);

To get the user in the component, get it from the context

const user = useSsrUser();

example

const Header = () => {
  const user = useSsrUser();
  return (
    <header>
      {user ? (user.name)  : (
        <Link href={pathTo('/sign-in')}>Sign In</Link>
      )}
    </header>
  );
};

export default Header;

Note that the GET_SSR_USER_HERE() implies that you're adding a user ID to the session. I would not recommend sending session?.user to the client directly as anything in your session cookie is now available on the page in Javascript, negating HttpOnly cookies etc.