index.tsx

import * as React from 'react'
import { NextPage } from 'next'
import { useAuth0 } from '../lib/auth0-spa'

interface Props {}

const Page: NextPage<Props> = () => {
  const { isAuthenticated, loginWithRedirect, logout, user } = useAuth0()

  return (
    <div>
      <h1>Initial Page</h1>

      <div>
        {!isAuthenticated && (
          <button onClick={() => loginWithRedirect({})}>Log in</button>
        )}

        {isAuthenticated && (
          <div>
            <p>{user && user.nickname}</p>
            <button onClick={() => logout()}>Log out</button>
          </div>
        )}
      </div>
    </div>
  )
}

export default Page