Wrap the Pages Router with SessionProvider
In pages/_app.js, wrap the application with SessionProvider. This enables client components to call useSession(). It is a UI session provider, not a server-side security boundary.
File: `pages/_app.js`
import { SessionProvider } from "next-auth/react";
export default function App({ Component, pageProps: { session, ...pageProps } }) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
}💡 Pass an initial session through page props where you already load it server-side.