0

When using React.js and React-Auth, calling server-side functions like getServerSideProps will prevent you from exporting your project via next export. This is the content of my pages/_app.js, I copied the structure from the docs (https://next-auth.js.org/getting-started/client and also https://github.com/nextauthjs/next-auth/issues/1210#issuecomment-782630909):

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    console.log(session), // -> undefined in server- and client-console
    <SessionProvider session={session}>
      {Component.auth ? (
        <Auth>
          <Component {...pageProps} />
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  )
}

function Auth({ children }) {
  const { data: session, status, loading } = useSession({required: true})
  const isUser = !!session?.user 
  console.log(session)// -> undefined in server- but correct in client-console
  React.useEffect(() => {
      if (loading) return   // Do nothing while loading
      if (!isUser) signIn()
  }, [isUser, loading])

  if (isUser) {
    return children
  }

  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div>Loading...</div>
}

The problem here is that session will always be undefined on the server-side. After every successfull login, I get redirected to the signIn-page after my callback brought me to the desired, protected, page. However, I thought useEffect will only run in the client-side - I am therefore not sure why I get the redirect to signIn().

However, consider the following file pages/index.js:

export default function Index() {
  const {data: session} = useSession();
  console.log(session); // -> will return actual session
  // session is always non-null inside this page, all the way down the React tree.
  return "Some super secret dashboard"
}

Index.auth = false // For testing, to avoid redirect to signIn

In here I am able to read the session without any problems (even though the session seems to be re-created all the time). It seems that I have to find a way to push the session data to the pageProps.Otherwise I will get redirected to the login page after every (successfull) login.

If I add the following code to pages/index.js (it's not working inside of page/_app.js), the session data has been correctly added to the pageProps in pages/_app.js:

export async function getServerSideProps(ctx) {
  return {
    props: {
      session: await getSession(ctx)
    }
  }
}

What would be the best way to add session to the pageProps in pages/_app.js without using any server-side-function like getServerSideProps?

Kruspe
  • 626
  • 6
  • 19
  • 1
    From the [docs](https://next-auth.js.org/getting-started/client#usesession): _"`useSession()` returns an object containing two values: `data` and `status`"_. It doesn't return a `loading` property. – juliomalves Jan 11 '22 at 18:58

1 Answers1

0

There was actually a problem in the useEffect-Hook:

React.useEffect(() => {
    if (loading) return   // Do nothing while loading
    if (!isUser) signIn()
}, [isUser, loading])

loading wasn't telling the truth. I modified the block like this:

React.useEffect(() => {
    if (status === 'loading') return   // Do nothing while loading
    if (!isUser) signIn()
}, [isUser, status])

SignIn now works as expected.

Kruspe
  • 626
  • 6
  • 19