ProtectedPage.js

// PROTECTED PAGE
import React from 'react'
import { Loading } from '../components/QueryHandling'
import { useAuth } from '../lib/UserContext'

export default function ProtectedPage() {
  const { user } = useAuth(true)

  if (!user) {
    return <Loading />
  }

  return (
    <>
      ...
    </>
  )
}

UnprotectedPage.js

// UNPROTECTED PAGE
import React from 'react'
import { useAuth } from '../lib/UserContext'

export default function ProtectedPage() {
  const { user } = useAuth(true)
  const userEmail = user ? user.signInUserSession.idToken.payload.email : ''

  return (
    <>
      <div>Email: {userEmail}</div>
      ...
    </>
  )
}