Next.js Discord

Discord Forum

NextAuth authenticating

Answered
Shawty posted this in #help-forum
Open in Discord
Avatar
ShawtyOP
i am attempting to get the session and check if it exists or not (if they are logged in)
but ive been getting this error even thought i already wrapped it;

error:
Unhandled Runtime Error
Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />


page.tsx:
"use client";
import Hero from "@/components/Hero";
import MainNavbar from "@/components/MainNavbar";
import Features from "@/components/Features";
import Footer from "@/components/Footer";
import {SessionProvider, useSession} from "next-auth/react";

export default function Home() {
    const {data: session} = useSession();

    return (

        <SessionProvider session={session}>
            <main className='overflow-hidden'>
                <MainNavbar session={session}/>
                <Hero/>
                <Features></Features>
                <Footer></Footer>
            </main>
        </SessionProvider>

    )
}
Answered by Shawty
so you mean like this?
export default function RootLayout({
                                       children,
                                   }: {
    children: React.ReactNode
}) {
    return (
        <SessionProvider>
        <html lang="en">
        <body className={inter.className}>
        {children}
        </body>
        </html>
        </SessionProvider>
    )
}
View full answer

6 Replies

the SessionProvider is providing the session to useSession and you're using it in a component which is not wrapped with it
it will throw an error
Avatar
ShawtyOP
so you mean like this?
export default function RootLayout({
                                       children,
                                   }: {
    children: React.ReactNode
}) {
    return (
        <SessionProvider>
        <html lang="en">
        <body className={inter.className}>
        {children}
        </body>
        </html>
        </SessionProvider>
    )
}
Answer
Avatar
ShawtyOP
nevermind i solved it