From my understanding, the stable version of Auth0 for Nextjs 13 was released this past August. Maybe that's why there aren't that many example out there, but my question is what the best practices are regarding actually auth-guarding pages (I'll explain what I mean by "actually auth-guarding").

https://auth0.com/blog/auth0-stable-support-for-nextjs-app-router/

All example out there wrap the entire app with UserProvider, and provide hooks for every child component/page, through withPageAuthRequired for SSR pages, and useUser for CSR pages. I want to know how to not only wrap the entire app so that those hooks can be used anywhere, but to also actually implement conditional logic like:

const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;

this in a root layout.tsx or page.tsx. It's confusing because auth0 is differentiating between CSR and SSR, but a root page.tsx or layout.tsx both have child componenets that can be either CSR or SSR.

Is there a way to implement that logic globally, to protect all routes?

Here is someone asking a similar question: https://github.com/auth0/nextjs-auth0/issues/1235#issuecomment-1614552306

In that example, the entire app seems to be exporting with

withPageAuthRequired

, but that doesn't seem to bring the behavior that I want, although I could have implemented it wrong. Correct me if I'm wrong - I think the example in that github issue will work if every child component of that second snippen of code is SSR, then every page will be guarded.

Some potential solutions that come to mind are using middlewares or not using auth0 at all, but I have no idea.

Thank you for your help!