📑

【Next.js】基礎から始めるNext.js API Routes【２８Logout (終)】

2023/01/06に公開

Next.js

Prisma

tech

【２８Logout (終)】

YouTube: https://youtu.be/mSz-lB1nO2w

https://youtu.be/mSz-lB1nO2w

今回はログアウトボタンを実装します。

ここまでの動画でNextAuthの基本的な部分は実装できましたので、
「session」や「token」の有無を条件にして
コンポーネントを表示するかログインページに遷移させるかで
プロテクトページの作成も可能かと思います。

興味のある方はこちらチャレンジしてみてください。

pages/login.tsx

import Layout from '../components/Layout'
import LoginForm from '../components/LoginForm'
import { useSession, signOut } from 'next-auth/react'
import { getToken, JWT } from 'next-auth/jwt'
import { GetServerSideProps } from 'next'
import { Button } from 'flowbite-react'

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  const token = await getToken({ req, secret: 'secretKey' })

  return {
    props: {
      token,
    },
  }
}

interface Props {
  token: JWT | null
}

export default function LoginPage({ token }: Props) {
  const { data: session, status } = useSession()

  // console.log(session)
  // console.log(status)

  console.log(token)

  return (
    <Layout>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-4xl font-black font-sans p-4 mt-6">Login Form</h2>
        <LoginForm />
        <h2 className="text-4xl font-black font-sans p-4 mt-6">User</h2>
        {session && (
          <>
            <div>
              {session.user?.name}: {session.user?.email}
            </div>
            <Button className="w-60 mt-3" onClick={() => signOut()}>
              Logout
            </Button>
          </>
        )}
      </div>
    </Layout>
  )
}

【２８Logout (終)】

Discussion