Serialized user is only provided to the page component

[pvorona]

Hi there and thanks a lot for everything you've done.

If the page component exports getServerSideProps wrapped with withAuthUserSSR calling useAuthUser at the client side will return AuthUser correctly at the page level [1] but will return empty AuthUser when calling it deeper down in the component tree [2][3].

I'm wondering if it's intended behavior and if so is there a way to make user available for all components on SSR pages to prevent flash on unauthed content within means on this package?

[1] At first it'll contain only parsed version without firebaseUser and once firebase inits AuthUser object will be updated to contain firebaseUser
[2] Empty user means user without id and any other info
[3] Of course nested component is wrapped in withAuthUser

Here is the example:

import { withAuthUser, useAuthUser, withAuthUserSSR } from 'next-firebase-auth'

export const getServerSideProps = withAuthUserSSR()()

export default withAuthUser()(function Parent() {
  const user = useAuthUser()
  console.log('parent', user)

  return <Child />
})

const Child = withAuthUser()(function Child() {
  const user = useAuthUser()

  console.log('child', user)

  return null
})  

And the output:

[kmjennison]

You should only wrap the page in withAuthUser, not any child components. That'll set context that can be used anywhere in the React tree. Does it work if you remove the child's withAuthUser wrapper?

[pvorona]

Yes it works. Thanks a lot @kmjennison! For some reason I though I have to wrap every component that needs a user.