CODEWITHSUNDEEP
reactjsnext.jsnext-auth
Ale
Ale

Reputation: 121

NextAuth Provider component

In the official documentation of NextAuth, they say to wrap the component with the Provider in this way:

`
 import { Provider } from "next-auth/client"

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

Is there any problem if I wrap also the Layout and the Head in this way ?

function MyApp({ Component, pageProps }) {
 // Use the layout defined at the page level, if avaiable (in my case for the QeAs)
 const getQeAsLayout = Component.getQeAsLayout || ((page) => page);
 return (
    <Provider session={pageProps.session}>
     <Head>
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     </Head>

     <ThemeProvider theme={brandTheme}>
       <Layout>{getQeAsLayout(<Component {...pageProps} />)}</Layout>
     </ThemeProvider>
    </Provider>
  );
}

Please don't consider the line about getQeAsLayout

Upvotes: 0

Views: 583

Answers (1)

honzanemecek
honzanemecek

Reputation: 122

No, there is not any problem with that. Session Provider should work properly.

Every child in Provider component should have access to session. Provider use React Context under the hood as mentioned in docs. Look at React Context Provider for more info.

Upvotes: 3

Related Questions