🔥

NextAuth.jsでセッション取得時にuseridを含める

2023/09/09に公開

確認します。NextAuth.jsでログインしてクライアント/サーバでセッション情報を取得するとデフォルトでは
以下のように名前とメールアドレスを取得します(next-auth": "4.23.1")。

NextAuthのuseSessionのデフォルト
{
  user: {
    name: string
    email: string
    image: string
  },
  expires: Date
}

NextAuth.jsはemailを一意に扱うので重複はしないのですが、検索などで抽出条件に利用することも考慮してuseridを取得するようにします。セッションのコールバック時にsessionにuseridを追加します。
https://next-auth.js.org/configuration/callbacks

pages/api/auth/[...nextauth].ts
・・・
callbacks: {
    async session({session, user}) {
      if (session?.user) {
        session.user.id = user.id;
      }
      return session;
    },
・・・

このように追加することでクライアント側でuseSessionした時、サーバ側でgetServerSessionした時にuseridも取得できるようになります。

画面上で試す

index.tsx
import Layout from "../components/layout"
import { useSession } from "next-auth/react"

export default function IndexPage() {
  const { data: session } = useSession()
  console.log(session)
  return (
    <Layout>
      <h1>test</h1>
    </Layout>
  )
}

想定通り取れています

Discussion