Tengo un problema en el que mi función Next Auth useSession devuelve indefinido en la carga inicial de la página, pero funciona cuando presiona actualizar en la página. Aquí está el código:
<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 { Componente } = 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> </> )}
cosas simples No estoy seguro de lo que está pasando. Espero que sea suficiente para trabajar.
Intente implementar Provider en App.js Aquí hay un ejemplo de la documentación para 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> ) }Debe agregar el proveedor de sesión en su archivo _app.js .