admin管理员组

文章数量:1287164

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.

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.

  • javascript
  • next.js
  • next-auth
Share Improve this question asked Nov 29, 2021 at 4:45 MomasVIIMomasVII 5,0818 gold badges40 silver badges64 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

The same thing happened to me. Here is how I solved it. From Next-Auth docs:

useSession() returns an object containing two values: data and status:

data: This can be three values: Session / undefined / null. When the session hasn't been fetched yet, data will be undefined. In case it failed to retrieve the session, data will be null. In case of success, data will be Session.

You get undefined because the session hasn't been fetched yet. You can solve it by using useEffect and adding "session" to its dependencies:

import { useSession, signIn, signOut } from "next-auth/client";

export default function Navigation() {
  const [session] = useSession();

  useEffect(() => {}, [session]);

  return (
    <section className="navigation">
      {!session ? (
        <div onClick={handleSignin} className="loginLink">
          Login
        </div>
      ) : (
        <p>Do logged ins stuff</p>
      )}
    </section>
  );
}

When the session finishes getting fetched, it will trigger a re-render and change the content. With this approach it is very likely that the content you want to hide will show in the screen while the session is getting fetched.

With that being said, from the Next-Auth docs, it could be better to use "getServerSession" in getServerSideProps instead of useSession(). With this approach your session data will be available from the start and you won't have the need to make another request and re-render.

Hope it helped you.

Try implementing Provider in App.js. Here's an example from the documentation for v3: https://next-auth.js/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.

本文标签： javascriptNext Auth useSession returning undefined on initial page loadStack Overflow

版权声明：本文标题：javascript - Next Auth useSession returning undefined on initial page load - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741287249a2370343.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。