Error when using next-auth to secure a Nextra page on the server side

[crguezl]

I have followed the next-auth tutorial at

https://next-auth.js.org/getting-started/example

and although is written for Next.js, with minor changes, everything works smoothly for Nextra. You can find my notes about those minor changes at

https://ull-mii-sytws.github.io/next-auth-getting-started/#reading-getting-started-with-nextauth-js

But when I arrive to this example about securing a page on the server side:

https://next-auth.js.org/tutorials/securing-pages-and-api-routes#server-side

The example of the tutorial does not work with nextra. Here is the Error I've got:

Expected server HTML to contain a matching <div> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

And here is the code:

➜ nextra-casiano-rodriguez-leon-alu0100291865 git:(guide) cat pages/serverSideProtectedExample.jsx

import { getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
import { useSession } from "next-auth/react"

export default function Page() {
  const { data: session } = useSession()

  if (typeof window === "undefined") return null

  if (session) {
    return (
      <div>
        <h2>Protected Page</h2>
        <p>You ({session.user.email})can view this page because you are signed in.</p>
      </div>
    )
  }
  return (<div>Access Denied</div>)
}

export async function getServerSideProps(context) {
  return {
    props: {
      session: await getServerSession(
        context.req,
        context.res,
        authOptions
      ),
    },
  }
}

Can someone help?