Next.Js- Error when implementing SessionProvider

Next.js
1

Hello,

Section: Next.js/Authentication with Next Auth/Accessing Sessions on the Client

I am implementing Auth from the Next.Js tutorial. When adding an AuthProvider wrapper around SessionProvider to use in app/layout.tsx I am getting this error:

Error: React Context is unavailable in Server Components

Here are some files for context:
Provider.tsx
layout.tsx

Additional Information:
I have had no issues thus far.

TIA
Karla

2

I was able to fix this:
Provider.tsx

"use client";

import { SessionProvider } from "next-auth/react";
export default SessionProvider;

and imported that SessionProvider in the layout.tsx:

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import NavBar from "./NavBar";
import SessionProvider from "./auth/Provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-theme="winter">
      <body className={inter.className}>
        <SessionProvider>
          <NavBar />
          <main className="p-5">{children}</main>
        </SessionProvider>
      </body>
    </html>
  );
}

Also learned there is a difference when referring to imports with {} and not.