I’m facing the following issue:

Fetching the user session on the server side is not a problem, but when I tried to do so in a client component, I always get an error.

I tried wrapping the children in my layout.tsx in a SessionProvider as told in the docs:

import { auth } from "@/auth";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
import { SessionProvider } from "next-auth/react";

const DashboardLayout = async ({
    children
}: {
    children: React.ReactNode
}) => {
    const session = await auth();

    return (
        <SessionProvider session={session}>
            <div className="h-full">
                <div className="h-[80px] md:pl-72 fixed inset-y-0 w-full z-50">
                    <Navbar />
                </div>
                <div className="hidden md:flex flex-col w-72 fixed inset-y-0 z-50">
                    <Sidebar />
                </div>
                <main className="pt-[80px] md:pl-72 h-full">
                    {children}
                </main>
            </div>
        </SessionProvider>
    )
}

export default DashboardLayout;

As soon as I do so, I get the following error: error log in console

AuthJS is thowing me a 404 with a ClientFetchError. I’m using Next Auth 5.0.0 Beta (AuthJS).

I would be very happy if someone knew what could be the problem in that case as I wasn’t able to find out.

I was expecting to be able to access the session via the useSession hook in the client component, but as soon as I wrap a component or the layout with a session provider, I’m facing a weird error.