(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:

Creasy

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;

Atalie

Answer 2

I managed to fix that error by adding a custom type file to my project, as I saw on NexthAuth.js Github repository: https://github.com/nextauthjs/next-auth-typescript-example/blob/main/types/next.d.ts.

import type { NextComponentType, NextPageContext } from "next"
import type { Session } from "next-auth"
import type { Router } from "next/router"

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>
    router: Router
    __N_SSG?: boolean
    __N_SSP?: boolean
    pageProps: P & {
      /** Initial session passed in from `getServerSideProps` or `getInitialProps` */
      session?: Session
    }
  }
}

Just copied that to my project and that works now. Not sure why it used to work as I never had it before.

Creasy

Answer 3

Either your type definition is wrong, or your prop destructuring is wrong.

This type definition matches your destructuring:

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

Deepdyed

If I do like this, my <Component {...PageProps}> complains with "(parameter) Component: NextComponentType<NextPageContext, {}, {}> Type '{ auth?: boolean; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)" – Creasy

Doing that way I did on my post there's no complain at Vscode level but I get the error when building the app. – Creasy

Answer 4

I use functional components and put the typing right behind the variable name, e.g. const Foo: React.FC = () => <h1>Foo</h1>;

I also use next-auth (I used create-t3-app) and I ran into this issue when upgrading to next v12.3.0. Here's how I solved it.

First you need your next-auth.d.ts set up:

declare module 'next-auth' {
    interface Session {
        user?: { id: string }; // Or whatever shape you have
    }
}

Next, we set up our next.d.ts, like so:

import type { NextComponentType } from 'next';
import type { Session } from 'next-auth';
import type { AppContextType, AppInitialProps, AppPropsType } from 'next/dist/shared/lib/utils';
import type { NextRouter } from 'next/router';

export {}; // This is here to prevent `PageProps` at the bottom from being exposed

declare module 'next/app' {
    // Customized AppType by passing the props we expect in AppInitialProps and AppPropsType
    type CustomAppType = NextComponentType<
        AppContextType,
        AppInitialProps<PageProps>,
        AppPropsType<NextRouter, PageProps>
    >;
}

type PageProps = { session?: Session };

I basically copied the AppType type from the next type definitions, which looks like this: type AppType = NextComponentType<AppContextType, AppInitialProps, AppPropsType>;, and I filled in the extra props my app receives from next-auth in the type parameters.

Now that the types are set up, we can finish by adding our new type to our app in _app.tsx:

import { SessionProvider } from 'next-auth/react';
import { CustomAppType } from 'next/app';

const MyApp: CustomAppType = ({ Component, pageProps: { session, ...pageProps } }) => (
    <SessionProvider session={session}>
        <Component {...pageProps} />
    </SessionProvider>
);

export default MyApp;

Et voilà, this worked for me!

Note: My MyApp looks a bit different; it's wrapped with the withTRPC HOC, but that's irrelevant for this example.

Bohunk

Answer 5

For anyone else not specifically using NextAuth but pageProps in a custom _app.tsx. This worked to resolve the error Property 'footerData' does not exist on type '{}

export interface CustomAppProps extends AppProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  Component: NextComponentType<NextPageContext, any, any>;
  pageProps: { footerData: FooterData; topLevelPageNames: TopLevelPageNames };
}

Neurotomy