Best practice for checking user auth and fetching user data for all pages

[adsee42]

I'm struggling with authentication in Next.js.

I would like to implement authentication with firebase, and this example helped a lot.

But I would like to check for user authentication status when user opens any page, not just index as the example shows.

And if the user is not authenticated, redirect him/her to auth page, else fetch from api server user profile and render the page. And this auth token is saved in cookie, or save as global state with user profile.

I'm used to React and still learning Next.js, so please tell me if I got this wrong: Do I have to implement a getInitialProps or getServerSideProps in _app.js? like:

// _app.js
...
getInitialProps() {
  const token = checkToken()
  if (token){
    return fetchData(token)
  } else {
    // redirect to auth page
  }
}

But getInitialProps is not recommended according to this document?

Back in React, I used to wrap all pages with an <AuthComponent> and do all the check auth thing in it. Since it's an SPA, the auth only checked once, until page got refreshed or user log out.

Is this the same in Next? Can I do this in Next?

Any instruction would be very helpful! Some example code would be better.