I am getting Error: [next-auth]: `useSession` must be wrapped in a . with next 13

Question

This is my layout.js where I am wrapping everything with the auth or trying to do so like this :

"use client";

import Navbar from "./components/Navbar";
import { UserProvider } from "./context/UserContext";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
import { useSession } from "next-auth/react";

export const metadata = {
  title: "",
  description: "",
};

export default function RootLayout({ children }) {
  const session = useSession();
  return (
    <html lang="en">
      <body>
        <SessionProvider session={session}>
          <UserProvider>
            <Navbar />
            {children}
          </UserProvider>
        </SessionProvider>
      </body>
    </html>
  );
}

Not sure whats wrong here and how to solve it

Orinoco Crocodile · Accepted Answer

You shouldnâ€™t use â€œuse clientâ€ in the layout file. Move the SessionProvider to another file which is use client and import it into the layout wrapping it around where you currently have SessionProvider

I am getting Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />. with next 13

2 Replies