Inicio y cierre de sesión

Les comparto como se vería el código con la librería actualizada

// components/Header/TopArea.tsx

...

const LoginLogout = () => {
  const { data: session, status } = useSession() // obteniendo status
  const { t } = useTranslation(['common'])

  if (status === 'loading') return null // si esta cargando no mostrar nada

  if (!session) return <Button onClick={() => signIn()}>{t('signIn')}</Button>

  return (
    <>
      <span>{session.user?.name}</span>
      <Button onClick={() => signOut()}>{t('signOut')}</Button>
    </>
  )
}

...

Otra clase donde se avanza por fuera del curso y no se ponen recursos en el video…

El método signIn también nos permite crear logins personalizados, como se explica en este artículo

Dejo mi commit como referencia - Commit link.

Contiene las actualizaciones de la version 4 y los tags para la seccion del login.
A la descripcion de la clase le falto ser mas clara, estuve revisando los commits y no encontre uno con el proceso exacto de la clase asi que toco hacerlo a mano.

import { signOut, signIn, useSession } from "next-auth/react"