Next.js Discord

Discord Forum

Accessing the session from an intercepted + parallel route doesn't work

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
anyone has an idea on why I can't access the session in my component through the intercepted route although I have wrapped the root layout with SessionProvider?
Answered by LuisLl
Your <SessionProvider> is only wrapping children. The slots auth and info are being rendered outside the scope of it. Just move them inside of the provider and it’ll work as expected.
View full answer

6 Replies

West African LionOP
here's my root layout
export default async function RootLayout({
  auth,
  info,
  children,
}: Readonly<{
  auth: React.ReactNode;
  info: React.ReactNode;
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full w-full`}
      >
        <main>
          {auth}
          {info}
          <SessionProvider>{children}</SessionProvider>
          <Toaster />
        </main>
      </body>
    </html>
  );
}

//the page.tsx from the intercepted route
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  console.log("hello");
  const userId = (await params).slug;
  const teacher = await getTeacher(Number(userId));
  if (Object.keys(teacher).length === 0) notFound();
  return (
      <Modal>
        <TeacherInfo formData={teacher} />
      </Modal>
  );
}
here's the error.
it works when I add the SessionProvider to the page of the intercepted route like this
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  console.log("hello");
  const userId = (await params).slug;
  const teacher = await getTeacher(Number(userId));
  if (Object.keys(teacher).length === 0) notFound();
  return (
    <SessionProvider>
      <Modal>
        <TeacherInfo formData={teacher} />
      </Modal>
    </SessionProvider>
  );
}

but I wanna know why I have to do it twice
LuisLl
Your <SessionProvider> is only wrapping children. The slots auth and info are being rendered outside the scope of it. Just move them inside of the provider and it’ll work as expected.
Answer
Krishna
<SessionProvider> use on root layout
LuisLl
@West African Lion any updates?
West African LionOP
Sorry I didn't see the message .. yeah that makes sense now .. appreciate it