I have an issue where my Next Auth useSession function is returning undefined on intial page load but works when hitting refresh on the page. Here is the code:
<Navigation />
import { useSession, signIn, signOut } from 'next-auth/client'
export default function Navigation() {
const [session] = useSession()
return (
<section className="navigation">
{!session ? (
<div onClick={handleSignin} className="loginLink">Login</div>
) : ( //Do Logged ins stuff )}
</section>
)
}
<Layout>
const Layout = (layoutProps) => (
<motion.main initial="hidden" animate="enter" exit="exit" variants={variants}>
<div className="Layout">
<Head>
<title>My Site</title>
</Head>
<Navigation />
<div className="Content">{layoutProps.children}</div>
<Footer />
</div>
</motion.main>
)
index.js
class Home extends React.Component {
render() {
return (
<Layout>
//Home page stuff
</Layout>
)
}
}
export default Home
App.js
render() { const { Component } = this.props
return (
<>
<GlobalStyles />
<AnimatePresence
exitBeforeEnter
initial={false}
onExitComplete={() => window.scrollTo(0, 0)}
>
<Component key={Router.router != null ? Router.router.asPath : '/null'} {...this.props} />
</AnimatePresence>
</>
)
}
Simple stuff. Not sure what's going on. I hope that's enough to work with.
Try implementing Provider in App.js.
Here's an example from the documentation for v3: https://next-auth.js.org/v3/getting-started/example#add-session-state
//pages/_app.js
import { Provider } from "next-auth/client"
export default function App({ Component, pageProps }) {
return (
<Provider session={pageProps.session}>
<Component {...pageProps} />
</Provider>
)
}
You should add the session provider in your _app.js file.