Mismatch in example for protecting CSR Routes in NextJS

Help
1
  • Which SDK this is regarding: nextjs-auth0
  • SDK Version: 1.3.1
  • Platform Version: 14.15.0

Hello all!

I’m new to auth0 and am currently in the process of integrating it into my NextJS app. I’ve found a discrepancy in the documentation for the NextJS SDK, and I’m wondering which version is correct.

At nextjs-auth0/EXAMPLES.md at main · auth0/nextjs-auth0 · GitHub, the following is written as an example:

// pages/profile.js
import { withPageAuthRequired } from '@auth0/nextjs-auth0';

export default withPageAuthRequired(function Profile({ user }) {
  return <div>Hello {user.name}</div>;
});

In this example, we can see that we wrap the page in withPageAuthRequired, which seems to pass our user as a prop to our page, which we then can print directly.

But in the running example of this in nextjs-auth0/profile.tsx at main · auth0/nextjs-auth0 · GitHub, we see the following code:

// ...
export default withPageAuthRequired(function Profile(): React.ReactElement {
  const { user, error, isLoading } = useUser();

  return (
    <Layout>
      <h1>Profile</h1>

      {isLoading && <p>Loading profile...</p>}
      // ...

Here the user is instead fetched with the useUser-hook, and the rendering is guarded for loading and errors.

In my experiments, the latter example is the correct one, and the first one only throws errors when trying to render an undefined user. As a side note, this also uses React.ReactElement as a type instead of NextPage, which seems wrong.

I’d love some clarity in this process, and possibly some direction before opening an issue suggesting a correction for the docs.