Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
This error shows even though my entire app is wrapped in a SessionProvider, why?
RootLayout:
Component where useSession is used:
RootLayout:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<SessionProvider>
<html lang="en">
<body
className={`${jbm.variable} antialiased`}
>
{children}
</body>
</html>
</SessionProvider>
);
}Component where useSession is used:
export default function PageContent() {
const { data: session } = useSession();
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
const page = document.getElementById('page');
const path = window.location.hash.substring(1);
if (page) {
page.innerHTML = '';
if (!session && path !== 'login' && path !== 'register') {
redirect('#login');
} else {
const pageContentMap = {
'': <Home />,
'profile': <Profile />,
'search': <Search />,
'inventory': <Inventory />,
'shop': <Shop />,
'settings': <Settings />,
'register': !session ? <Register /> : null,
'login': !session ? <Login /> : null
};
const content = pageContentMap[path as keyof typeof pageContentMap];
if (content) {
return content;
} else {
redirect('');
}
}
}
}
return null;
}Answered by Transvaal lion
after like hours of searching, im losing hope on this, nextauth docs has basically nothing useful for how to do this with app router in clientside components, not to mention that im probably better off rebuilding my whole project in scratch in plain expressjs, html, css, and js since most of the project itself has been mangled from trying to set up nextauth, alongside the fact that i get tickets like this or like my other one where i was told to go back to the initial project for learning nextjs and never got my issue resolved which then made me open this ticket which has been buried by numerous other tickets receiving greater attention
seriously, ive been trying to learn nextjs so i can make these cool projects, but if its going to be this difficult, i dont think i can continue from here
seriously, ive been trying to learn nextjs so i can make these cool projects, but if its going to be this difficult, i dont think i can continue from here
23 Replies
Transvaal lionOP
i found out, there may be an issue with the fact that two components both use useSession, but im not sure if theyre related
returned page:
return (
<>
<div style={{ display: 'flex', margin: '0px' }}>
<div style={{ width: '200px', backgroundColor: '#111111', margin: '0px', height: '100vh', marginRight: '10px' }} id='sidebar'>
<SessionProvider>
<SidebarContainer />
</SessionProvider>
</div>
<div style={{ flex: 1, margin: '0px' }} id='page'>
<SessionProvider>
<PageContent />
</SessionProvider>
</div>
</div>
</>
);SidebarContainer:
export default function SidebarContainer() {
const { data: session } = useSession();
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', backgroundColor: '#111111', color: '#fff' }}>
<div style={{width: '200px', backgroundColor: '#111111', margin: '0px', height: '100vh', marginRight: '0px', position: 'fixed', top: '0', left: '0', marginTop: '5px'}}>
{session ? <Sidebar /> : <Sidebar2 />}
</div>
</div>
);
}@Transvaal lion SidebarContainer:
tsx
export default function SidebarContainer() {
const { data: session } = useSession();
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', backgroundColor: '#111111', color: '#fff' }}>
<div style={{width: '200px', backgroundColor: '#111111', margin: '0px', height: '100vh', marginRight: '0px', position: 'fixed', top: '0', left: '0', marginTop: '5px'}}>
{session ? <Sidebar /> : <Sidebar2 />}
</div>
</div>
);
}
Transvaal lionOP
to be clear, this component works just fine, but the other creates the error even though they are both in a session provider
@Transvaal lion create only one session provider. To clear things easily:
1. Remove ALL session providers
2. Add one session provider here (see attached: around the children)
3. Add the session to your session provider:
1. Remove ALL session providers
2. Add one session provider here (see attached: around the children)
3. Add the session to your session provider:
// must be serverside
const session = await getServerSession(authOptions)
// ...
<SessionProvider session={session}>
// ...@B33fb0n3 <@756987131569897559> create only one session provider. To clear things easily:
1. Remove ALL session providers
2. Add one session provider here (see attached: around the children)
3. Add the session to your session provider:
tsx
// must be serverside
const session = await getServerSession(authOptions)
// ...
<SessionProvider session={session}>
// ...
Transvaal lionOP
the page.tsx is client only due to the use of useEffect, cannot use getServerSession
shouldve mentioned that
@Transvaal lion the page.tsx is client only due to the use of useEffect, cannot use getServerSession
but the layout is serverside?
@B33fb0n3 but the layout is serverside?
Transvaal lionOP
oh-
yea
@B33fb0n3 but the layout is serverside?
Transvaal lionOP
Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-contexton
const session = await getServerSession(authOptions)when moving it into the RootLayout function, await doesnt work due to it not being async, and even then you cant use server modules in react contexts
you cant use server modules in react contextscan you clarify this?
Transvaal lionOP
my bad, said it wrong, react context isnt available in server components
@Transvaal lion my bad, said it wrong, react context isnt available in server components
getServerSession(authOptions) doesn't rely on any react related@B33fb0n3 getServerSession(authOptions) doesn't rely on any react related
Transvaal lionOP
im saying when you put it in the RootLayout, youre using it in a react context
when moving it into the RootLayout function
either way, what do i do to fix the issue with it being called outside a request scope?
I guess there is a too big language barrier between us and this can lead to multiple misunderstandings. And with them it's a lot of effort to resolve your initial issue. I am sure someone else will help you. All the best 🙂
Transvaal lionOP
alright, thank you for trying to help tho :3
Transvaal lionOP
after like hours of searching, im losing hope on this, nextauth docs has basically nothing useful for how to do this with app router in clientside components, not to mention that im probably better off rebuilding my whole project in scratch in plain expressjs, html, css, and js since most of the project itself has been mangled from trying to set up nextauth, alongside the fact that i get tickets like this or like my other one where i was told to go back to the initial project for learning nextjs and never got my issue resolved which then made me open this ticket which has been buried by numerous other tickets receiving greater attention
seriously, ive been trying to learn nextjs so i can make these cool projects, but if its going to be this difficult, i dont think i can continue from here
seriously, ive been trying to learn nextjs so i can make these cool projects, but if its going to be this difficult, i dont think i can continue from here
Answer
@Transvaal lion after like hours of searching, im losing hope on this, nextauth docs has basically nothing useful for how to do this with app router in clientside components, not to mention that im probably better off rebuilding my whole project in scratch in plain expressjs, html, css, and js since most of the project itself has been mangled from trying to set up nextauth, alongside the fact that i get tickets like this or like my other one where i was told to go back to the initial project for learning nextjs and never got my issue resolved which then made me open this ticket which has been buried by numerous other tickets receiving greater attention
seriously, ive been trying to learn nextjs so i can make these cool projects, but if its going to be this difficult, i dont think i can continue from here
Transvaal lionOP
for the record, im not saying that i should be automatically given support at all, let alone expecting support, i get it, its not easy, but if im just going to get responses that arent helpful, or even dig me deeper into a pit of issues like this ticket, i simply cant find a reason to even ask for help