🐛

Auth.js (Next.js)でセッション情報を追加した際のTypeScriptの型エラーについて

2023/01/20に公開約1,500字

Auth.js (旧 NextAuth.js)では、セッション情報として name,image,email をデフォルトで取得できますが、任意の情報を以下のように追加できます。

[...nextauth].ts
export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id, // 追加
      },
    }),
  },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
}

export default NextAuth(authOptions)

しかしこうした場合、Next Auth の型が追加されていないため、型エラーが発生しました。

Property 'id' does not exist on type '{ name?: string | null | undefined; email?: string | null | undefined; image?: string | null | undefined; }'.

Property 'id' does not exist on type '{ name?: string | null | undefined; email?: string | null | undefined; image?: string | null | undefined; }'.

そのため、公式ドキュメントを参照した所、型を拡張する必要が分かりました。types/next-auth.d.ts に新たにファイルを作成し、以下のように指定します。

next-auth.d.ts
import NextAuth from "next-auth"

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      /** The user's Id. */
      id: string
    }
  }
}

これで型エラーが解消されました。

参考文献

https://github.com/nextauthjs/next-auth/discussions/2979

GitHubで編集を提案

Discussion

ログインするとコメントできます