reactjs - How to make next-auth User Session Data Globally accessible from _app.js server-side?

Question

What is the best way to make next-auth user data in session globally accessible in all pages server-side?

or do I need to manually add getServerSideProps to every page to get the session user data?

<Provider session={pageProps.session}></Provider> is in _app.js return function so do I need a hoc wrapper component for this?

I tried using getInitialProps:

function MyApp({ Component, pageProps, initialLoginStatus }) {

   console.log(initialLoginStatus);

   ....

  return (

     <React.Fragment>

          <Provider session={pageProps.session}>
             ...
          </Provider>

     </React.Fragment>

  )
}

MyApp.getInitialProps = async ( ctx ) => {

  if (typeof window === "undefined") {

    return {
      initialLoginStatus: `test`
    }

  } else {

    return {
      initialLoginStatus: `error`
    }
  }

}

but I get this error: TypeError: Cannot read property 'session' of undefined for <Provider session={pageProps.session}>

Answer 1

如果您在“pages”文件夹中没有“_app.js”文件，则必须通过将其放入其中来创建一个：

import {Provider} from 'next-auth/client'

export default function App({Component, pageProps}) {
    return (
        <Provider session={pageProps.session}>
            <Component {...pageProps} />
        </Provider>
    )
}

然后在您的页面中，您必须使用它来使用会话：

import {useSession} from 'next-auth/client'

&

const [session, loading] = useSession()

您可以通过以下方式获取用户名：

session.user.name

例如，这将在您提供的代码中给出：

import {useSession} from 'next-auth/client'

function MyApp({ Component, pageProps, initialLoginStatus }) {

   const [session, loading] = useSession()
   
   console.log(session.user.name)
   console.log(session)

   console.log(initialLoginStatus);

   ....

  return (

     <React.Fragment>

          <Provider session={pageProps.session}>
             ...
          </Provider>

     </React.Fragment>

  )
}

MyApp.getInitialProps = async ( ctx ) => {

  if (typeof window === "undefined") {

    return {
      initialLoginStatus: `test`
    }

  } else {

    return {
      initialLoginStatus: `error`
    }
  }

}