👏
【Next.js】基礎から始めるNext.js API Routes【27GetToken】
【27GetToken】
YouTube: https://youtu.be/SOH1bi-q9Fw
今回はサーバーサイドでユーザーの認証情報を使用する方法について解説します。
前回の「useSession」は基本的にはクライアントサイドでのみ使用します。
サーバーサイドでは「getToken」を使用して、
ユーザーの認証情報を取得することができます。
下記ファイルの「'secretKey'」は
「[...nextauth].js」で設定しているシークレットキーです。
pages/login.tsx
import Layout from '../components/Layout'
import LoginForm from '../components/LoginForm'
import { useSession } from 'next-auth/react'
import { getToken, JWT } from 'next-auth/jwt'
import { GetServerSideProps } from 'next'
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>
)}
</div>
</Layout>
)
}
Discussion