Documentation for next-auth (version 4) indicates that we need to put the service provider in:
pages/_app.js
I am following the example: https://next-auth.js.org/getting-started/example
If I'm using the experimental app directory instead of the pages directory in nextjs 13, where do we put that _app.js file?
Unfortunately, you have to have two implementations.
In experimental app directory you have to wrap root layout.
// app/provider.js
"use client";
import { SessionProvider } from "next-auth/react";
export default function Proiders({ children }) {
  return <SessionProvider>{children}</SessionProvider>;
}
then in root layout
import Provider from "./provider";
export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}
similarly you have to wrap _app.js too
import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
api file is the same directory. pages/api/auth/[...nextauth].js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With