next-auth: [next-auth]: `useSession` must be wrapped in a pages folder move to inside src folder-

Description 🐜

Moving pages folder to src. Getting error [next-auth]: useSession must be wrapped in a <SessionProvider />. Working fine when pages folder on root dir.

Is this a bug in your own project?

How to reproduce ☕️

Move pages folder to inside src folder mkdir src move pages to src dir

Screenshots / Logs 📽

PFA - Error Screenshot 2021-10-29 at 1 41 07 PM

Environment 🖥

System: OS: macOS 11.3.1 CPU: (8) arm64 Apple M1 Memory: 128.27 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.8.0 - /opt/homebrew/bin/node Yarn: 1.22.11 - /opt/homebrew/bin/yarn npm: 7.21.0 - /opt/homebrew/bin/npm Browsers: Chrome: 95.0.4638.54 Edge: 92.0.902.67 Safari: 14.1 npmPackages: next: 12.0.1 => 12.0.1 next-auth: ^4.0.0-beta.5 => 4.0.0-beta.5 react: 17.0.2 => 17.0.2

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (4 by maintainers)

Most upvoted comments

In my case, the problem was related to cache. I deleted the .next folder and worked.

+38

gabrielmlinassi on Feb 18, 2022

For someone that use nextjs 13. CC @mosgizy @thadeubrito Mine is working after make a new SessionProvider components like this:

'use client';
import React from 'react'

import { SessionProvider as AuthSessionProvider } from 'next-auth/react';

type Props = {}

const SessionProvider = ({children}: {children:React.ReactNode}) => {
  return (
    <AuthSessionProvider>{children}</AuthSessionProvider>
  )
}

export default SessionProvider

And then wrap the most outer layout or root layout that usually placed in here /src/app/layout.tsx using that component like this:

import "./globals.css";
import { Inter } from "next/font/google";
import SessionProvider from "@/components/SessionProvider";

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className}`}>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

+14

nayakayoga on May 25, 2023

i’m having this issue with nextjs 13 gone through series of ways to fix it but still the same

+10

mosgizy on May 7, 2023

Then that’s the issue. Your SessionProvider has to come before LayoutWrapper.

balazsorban44 on Oct 30, 2021

For someone that use nextjs 13. CC @mosgizy @thadeubrito Mine is working after make a new SessionProvider components like this:

'use client';
import React from 'react'

import { SessionProvider as AuthSessionProvider } from 'next-auth/react';

type Props = {}

const SessionProvider = ({children}: {children:React.ReactNode}) => {
  return (
    <AuthSessionProvider>{children}</AuthSessionProvider>
  )
}

export default SessionProvider

And then wrap the most outer layout or root layout that usually placed in here /src/app/layout.tsx using that component like this:

import "./globals.css";
import { Inter } from "next/font/google";
import SessionProvider from "@/components/SessionProvider";

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className}`}>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

its working for me

BhushanPatil-121 on Jan 31, 2024

In my case, the problem was related to cache. I deleted the .next folder and worked.

you just saved me hours of frustration… thank you!

BrandonThomas84 on Feb 16, 2023

are you using useSession in your ThemeProvider, LayoutWrapper or Analytics components?

I also see some potentially unused imports like ClientReload and AuthGuard. what about those?

I just changed my _app.js to this:

import '@/css/tailwind.css'
import '@/css/prism.css'
import { SessionProvider } from "next-auth/react"
import LayoutWrapper from '@/components/LayoutWrapper'

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (

      <LayoutWrapper>
      <SessionProvider session={session}>
            <Component {...pageProps} />
    </SessionProvider>
      </LayoutWrapper>

  )
}

still same error, I am using useSession in my LayoutWrapper component.

the error appears wherever (in any components) I import this: import { signIn, signOut, useSession } from 'next-auth/react'

and use this before return: const { data: session, status } = useSession()

vahidtakro on Oct 30, 2021

could you please share your _app.tsx file?

balazsorban44 on Oct 29, 2021