Use separately for each page instead of _app #6

export const authenticated = (Component) => {
  return withLayout(<AuthGuard><BaseLayout /></AuthGuard>)(Component)
}

export const public = (Component) => {
  return withLayout(<BaseLayout />)(Component)
}

const AuthCheck = ({ children }) => {
  const [isChecking, setChecking] = React.useState(true)
  const router = useRouter()
  const actions = useActions()
  const state = useState()

  React.useEffect(() => {
    tryAuth()
  }, [])

  React.useEffect(() => {
    if (state.authenticationCheckFailed) {
      redirect()
    }
  }, [state.authenticationCheckFailed])

  React.useEffect(() => {
    if (state.authenticationCheckTried && state.isAuthenticated) {
      setChecking(false)
    }
  }, [state.authenticationCheckTried])

  const redirect = async () => {
    const r = router.pathname.slice(1)
    const redirectTo = r === 'login' ? '/' : '/' + r
    router.push(`/login?r=${redirectTo}`)
    // setChecking(false)
  }

  const tryAuth = async () => {
    await actions.checkAuth(null)
  }

  if (isChecking) {
    return (
      <Centered>
        <LoadingSpinner $style={{ borderTopColor: theme.colors.primary }} />
      </Centered>
    )
  }

  return children
}

export default AuthCheck