NextJS wants a session that can't be provided

Question

Cheers guys,

I am sitting on a problem for some days now and I really can't fix it. I don't know why it happens. In all guides you have to implement a session provider that takes a session as an argument. But there is no session to give it to the SessionProvider.

What am I doing wrong?

// layout tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Provider>
        <body className={inter.className}>
          <AppRouterCacheProvider options={{ key: "css" }}>
            <ThemeProvider theme={theme}>{children}</ThemeProvider>
          </AppRouterCacheProvider>
        </body>
      </Provider>
    </html>
  );
}

// Provider
"use client";
import { ReactNode } from "react";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

interface ProviderProps {
  children: ReactNode;
  session: Session | null;
}

export default function Provider({ children, session }: ProviderProps) {
  return <SessionProvider session={session}>{children}</SessionProvider>;
}

In all videos and guides I've seen no one is actively providing it to the SessionProvider but in my case I'll get

Property 'session' is missing in type '{ children: Element; }' but required in type 'ProviderProps'.ts(2741)
Provider.tsx(8, 3): 'session' is declared here.
(alias) function Provider({ children, session }: ProviderProps): JSX.Element
import Provider

[...nextauth].ts provided as a screenshot since 1000 character limit

NextJS wants a session that can't be provided

0 Replies