🔌
NextAuth 型.Adapterを型.Adapterに割り当てることはできませんエラー
症状
Next.js14(App Router)とNextAuthを使ってGoogleとGitHubアカウントを利用したOAuthを実装したのち、セッション情報をDBを使って管理したいと思いました。
以下のAuth.jsの設定ファイル（自分の場合はapi/auth/[...nextauth]配下のroute.ts）に対してAdapterの情報を追加したところ、Adapterに赤波線を引かれてエラーが出てしまいました。
route.ts
import NextAuth from 'next-auth';
import GithubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"
const handler = NextAuth({
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID as string,
clientSecret:a process.env.GITHUB_SECRET as string,
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID as string,
clientSecret: process.env.GOOGLE_SECRET as string,
}),
],
});
export { handler as GET, handler as POST }
route.ts(変更後)
import NextAuth from 'next-auth';
import GithubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"
// 追加
import { PrismaAdapter } from "@auth/prisma-adapter";
import prisma from "../../../lib/prisma";
const handler = NextAuth({
adapter: PrismaAdapter(prisma), // 追加(ここでエラー)
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID as string,
clientSecret:a process.env.GITHUB_SECRET as string,
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID as string,
clientSecret: process.env.GOOGLE_SECRET as string,
}),
],
// sessionの設定も追加
session: {
strategy: "database",
maxAge: 60 * 60 * 24 * 30, // 30 days
updateAge: 60 * 60 * 24, // 24 hours
},
});
export { handler as GET, handler as POST }
エラーの内容は以下のとおりです。
エラー
型 'import("/<作業ディレクトリ>/node_modules/@auth/core/adapters").Adapter' を型 'import("/<作業ディレクトリ>/node_modules/next-auth/adapters").Adapter' に割り当てることはできません。
解決
エラーの内容でググったところ以下のGitHubのスレッドに行き当たり、こんなコメントを発見。
import type { Adapter } from 'next-auth/adapters';
...
adapter: TypeORMAdapter(connection) as Adapter,
こちらを追記して以下のように修正したところエラーが解消されました。
route.ts(修正後)
import NextAuth from 'next-auth';
import GithubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@auth/prisma-adapter";
import prisma from "../../../lib/prisma";
import type { Adapter } from 'next-auth/adapters'; // 追加
const handler = NextAuth({
adapter: PrismaAdapter(prisma) as Adapter, // 追加
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID as string,
clientSecret:process.env.GITHUB_SECRET as string,
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID as string,
clientSecret: process.env.GOOGLE_SECRET as string,
}),
],
session: {
strategy: "database",
maxAge: 60 * 60 * 24 * 30, // 30 days
updateAge: 60 * 60 * 24, // 24 hours
},
});
export { handler as GET, handler as POST }
原因？
as ~は型アサーションという文法で、TypeScriptが推論した方を任意の型で上書きできる機能のようです。修正前だとNextAuthがAdapterに対して期待している型とPrismaAdapter(prisma)から推論される型の情報が合わないことによるエラーだったのでしょうか、、？
TSも認証も初心者なのでしっかりとはわかっていませんが、型アサーションでAdapter型であることを指定することで無事解決できました。
参考
Discussion