📑
【Next.js】基礎から始めるNext.js API Routes【28Logout (終)】
【28Logout (終)】
YouTube: 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>
)
}
Discussion