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