👏

【Next.js】基礎から始めるNext.js API Routes【２７GetToken】

2023/01/05に公開

Next.js

Prisma

tech

【２７GetToken】

YouTube: https://youtu.be/SOH1bi-q9Fw

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>
  )
}

【２７GetToken】

Discussion