useSession must be wrapped in a <SessionProvider />

pages/_app.tsx

// pages/_app.tsx
export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const DoeApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
  const getLayout = Component.getLayout ?? ((page) => page);
  const layout = getLayout(<Component {...pageProps} />);

  return (
    <SessionProvider session={session}>
      {layout}
    </SessionProvider>
  );
};

export default trpc.withTRPC(DoeApp);

// pages/_app.tsx
export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const DoeApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
  const getLayout = Component.getLayout ?? ((page) => page);
  const layout = getLayout(<Component {...pageProps} />);

  return (
    <SessionProvider session={session}>
      {layout}
    </SessionProvider>
  );
};

export default trpc.withTRPC(DoeApp);

pages/terms-of-service.tsx

const TermsOfService: NextPageWithLayout = () => {
  return <div>
    <div>Terms of service</div>
  </div>
}

TermsOfService.getLayout = (page) => {
  const session = useSession();
  if (session.data) {
    return <Layout>{page}</Layout>;
  }
  return <div className="min-h-screen dark:bg-black text-white">{page}</div>
}

export default TermsOfService;

const TermsOfService: NextPageWithLayout = () => {
  return <div>
    <div>Terms of service</div>
  </div>
}

TermsOfService.getLayout = (page) => {
  const session = useSession();
  if (session.data) {
    return <Layout>{page}</Layout>;
  }
  return <div className="min-h-screen dark:bg-black text-white">{page}</div>
}

export default TermsOfService;