I am creating an authentication for every route and I wanted to have the value of the user available in every route, that's why I used context.

I made a layout component which I import in the app right after the context like this:

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    if (router.pathname == '/' || router.pathname == '/_error') {
      router.push('/login')
    }
  }, [])
  return (
    <AuthProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AuthProvider>
  )
}

export default MyApp

Here's my layout component:

const Layout = ({ children }) => {
  const {loggedInUser} = useContext(AuthContext)
  const router = useRouter()
  useEffect(() => {
    if (router.pathname == '/' || router.pathname == '/_error') {
      ...
    }
  }, [])

  return <div>{children}</div>
}

export default Layout

Here's my context:

export const AuthContext = React.createContext()

function AuthProvider(props) {
  const [loggedInUser, setUserLoggedIn] = useState()

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (!currentUser) {
        setUserLoggedIn(currentUser)
      } else {
      }
    })
  }, [])

  return <AuthContext.Provider value={{
    loggedInUser,
    setUserLoggedIn
  }}>{props.children}</AuthContext.Provider>
}

export default AuthProvider

When I try to enter a route I get this error TypeError: Cannot destructure property 'loggedInUser' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined.

I hope you can help me!