Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
Answered
Red-billed Tropicbird posted this in #help-forum
Red-billed TropicbirdOP
I need help with my Next.JS 14 regarding the useSession():
Here is where it is occuring:
5 | export const useCurrentUser = () => {
7 | return session.data?.user
8 | }
9 |
Here is where it is occuring:
5 | export const useCurrentUser = () => {
6 | const session = useSession()| ^
7 | return session.data?.user
8 | }
9 |
Answered by B33fb0n3
add the
<SessionProvider>{children}<SessionProvider/> component to your tree18 Replies
add the
<SessionProvider>{children}<SessionProvider/> component to your treeAnswer
Red-billed TropicbirdOP
Here is the file where I use it
Red-billed TropicbirdOP
Would I do this in the layout.js
and when I make it a "use client" it breaks
Ok I useed it thanks
create a component called
GlobalProvider for example (if you have no provider yet) and then add the mentioned code to it. After that you can add your globalprovider component to your layoutRed-billed TropicbirdOP
I actually just used what u said and it worked thanks
yeah here it is
import * as React from "react"
import { SessionProvider } from "next-auth/react"
import { Footer } from "@/components/nav/footer"
import { Header } from "@/components/nav/header"
interface LandingLayoutProps {
children: React.ReactNode
}
export default function LandingLayout({
children,
}: LandingLayoutProps): JSX.Element {
return (
<div className="flex flex-col overflow-hidden">
<Header />
<SessionProvider>
<main className="flex-1">{children}</main>
</SessionProvider>
<Footer />
</div>
)
}
import * as React from "react"
import { SessionProvider } from "next-auth/react"
import { Footer } from "@/components/nav/footer"
import { Header } from "@/components/nav/header"
interface LandingLayoutProps {
children: React.ReactNode
}
export default function LandingLayout({
children,
}: LandingLayoutProps): JSX.Element {
return (
<div className="flex flex-col overflow-hidden">
<Header />
<SessionProvider>
<main className="flex-1">{children}</main>
</SessionProvider>
<Footer />
</div>
)
}
it worked just like this
Red-billed TropicbirdOP
How do i do that
where is that button
you on mobile?
Red-billed TropicbirdOP
no pc
then right click the message thats the solution. I guess its: https://nextjs-forum.com/post/1249792378081116210#message-1249794522288754688
then click on
then click on
Apps and then click on Mark Solution