(NextAuth) Type error: Property 'session' does not exist on type '{}'

Question

I'm using NextAuth on a NextJs project and I'm getting the error "Type error: Property 'session' does not exist on type '{}'.". I'm adding the session property to my _app.tsx as suggested here:

https://next-auth.js.org/getting-started/example

I've also added that property to my custom MyApp type interface but I still get the error. Follow my code:

import { NextComponentType } from "next";
import { Session } from "next-auth";

export interface CustomAppProps extends AppProps {
  Component: NextComponentType & { auth?: boolean; session?: Session };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  //...
});

How can I fix it? Thanks!

Edit #1 (adding MyApp with my current code):

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {

  return (
    <>
      <CookieConsentProvider useCookieConsentHooksOptions={{ consentCookieAttributes: { expires: 360 } }}>
        <SessionProvider session={session}>
          <AppContextProvider>
            <Component {...pageProps} />
          </AppContextProvider>
        </SessionProvider>
      </CookieConsentProvider>
    </>
  );
}

Edit #2:

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <>
      <CookieConsentProvider useCookieConsentHooksOptions={{ consentCookieAttributes: { expires: 360 } }}>
        <SessionProvider session={pageProps.session}>
          <AppContextProvider>
            <Component {...pageProps} />
          </AppContextProvider>
        </SessionProvider>
      </CookieConsentProvider>
    </>
  );
}

Using the code above I still get the TS error:

Answer 1

In the latest release of next.js v12.3.0`, https://github.com/vercel/next.js/releases#:~:text=Compare-,v12.3.0,-Latest,

The interface AppProps takes a generic for pageProps as shown in the details of this merged PR (https://github.com/vercel/next.js/pull/38867)

I encountered the same problem and solved it by passing a session type to the AppProps generic.

Note: There is no need to define new custom files for type declarations in this case.

import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

function MyApp({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;