Sample "login" and "logout" page with Next.js and Amplify UI

login.tsx

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuthenticator, Authenticator } from '@aws-amplify/ui-react'

export default function LoginPage() {
  const { user, route } = useAuthenticator((context) => [
    context.user,
    context.route,
  ])
  const router = useRouter()

  useEffect(() => {
    if (user) {
      router.push('/')
    }
  }, [])

  useEffect(() => {
    if (route === 'authenticated') {
      router.push('/')
    }
  }, [route])

  return <Authenticator></Authenticator>
}

logout.tsx

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuthenticator, Authenticator } from '@aws-amplify/ui-react'

export default function LogoutPage() {
  const { user, signOut } = useAuthenticator((context) => [
    context.user,
    context.signOut,
  ])
  const router = useRouter()

  async function handleSignOut() {
    signOut()
    router.push('/')
  }

  useEffect(() => {
    if (!user) {
      router.push('/')
    } else {
      handleSignOut()
    }
  }, [])

  return <></>
}