NextAuth JWT与Session回调配置失败，请求技术帮助

我正在配置NextAuth的JWT认证，目标是让后端能访问JWT，同时给Session添加额外字段，但按标准配置尝试数小时仍未成功，遇到以下问题：

• 调试时出现**「jwt required」、「checks.state参数缺失」**错误
• TypeScript类型错误：session.strategy的string类型无法赋值给SessionStrategy类型，尽管文档明确说明应传入字符串

我的authOptions配置 #

export const authOptions = {
    // Configure one or more authentication providers
    providers: [
        EmailProvider({
            server: {
                host: config.authProviders.email.host,
                port: config.authProviders.email.port,
                auth: {
                    user: config.authProviders.email.user,
                    pass: config.authProviders.email.password,
                }
            },
            from: config.authProviders.email.from,
        }),
        GoogleProvider({
            clientId: config.authProviders.google.id ? config.authProviders.google.id : "",
            clientSecret: config.authProviders.google.secret ? config.authProviders.google.secret : "",
        }),
        FacebookProvider({
            clientId: config.authProviders.facebook.id ? config.authProviders.facebook.id : "",
            clientSecret: config.authProviders.facebook.secret ? config.authProviders.facebook.secret : "",
        }),
    ],
    adapter: MongoDBAdapter(clientPromise),
    secret: process.env.NEXTAUTH_SECRET,


    pages: {
        signIn: '/login/signin',
        signOut: '/',
    },


    session: {
        strategy: "jwt",
    },

    jwt: {
        maxAge: 30 * 24 * 60 * 60, // 30 days

        // async encode({ token, secret }: { token: typeof JWT; secret: string }) {
        //     const jwt = require("jsonwebtoken");
        //     const encodedToken = jwt.sign(token, secret);
        //     return encodedToken;
        // },
        // async decode({ token, secret }: { token: typeof JWT; secret: string }) {
        //     const jwt = require("jsonwebtoken");
        //     const decodedToken = jwt.verify(token, secret);
        //     return decodedToken;
        // },


        async encode() { },
        async decode() { },

    },

    // This is for jwt stuff?
    callbacks: {
        async signIn({ user, account, profile, email, credentials }: { user: Object; account: Object; profile: Object; email: Object; credentials: Object }) {
            return true
        },

        async redirect({ url, baseUrl }: { url: string; baseUrl: string }) {
            return baseUrl
        },
        async jwt({ token, account, profile, session }: any) {

            console.log({ jwt: { token, account, profile, session } })
            return token
        },

        async session({ session, token, user }: any) {

            console.log({ sessionEx: { session, token, user } });
            return session;

        },


    },
}

export default NextAuth(authOptions)

登录页面代码 #

import { signIn, useSession, signOut } from 'next-auth/react'
import { useState, } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { BsGoogle, BsFacebook } from 'react-icons/bs';

interface Props {

}


const SignInForm: React.FC<Props> = () => {

    const [email, setEmail] = useState('');

    const { data: session, status } = useSession();
    console.log({ session, status });
    const providers = [
        {
            name: 'Google',
            Icon: BsGoogle,
        },
        {
            name: 'Facebook',
            Icon: BsFacebook,
        },
    ]

    const handleSignIn = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        e.preventDefault();
        await signIn('email', { email, })
        // push(asPath)
    }

    const handleAuthSignIn = async (name: string) => {
        // make name all lowercase
        name = name.toLowerCase();
        await signIn(name)
    }

    if (!session) {
        return (
            <div className='relative bg-white border-2 border-black rounded-md '>
                {/* <div className='relative border-8 rounded-md bg-myDarkBlue border-myDarkRed '> */}
                <form className="py-5 px-7">
                    <div className="mb-4">
                        <input
                            className="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none outline-1 focus:outline-myRed focus:shadow-outline"
                            id="email" type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
                    </div>

                    <div className="flex items-center justify-between mb-3">
                        <button
                            className="px-4 py-2 font-bold text-white rounded bg-myGreen hover:bg-green-700 focus:outline-none focus:shadow-outline"
                            type="button" onClick={(e) => { handleSignIn(e) }}>
                            Sign In
                        </button>
                        <a className="inline-block text-sm font-bold align-baseline text-myBlue hover:text-myDarkBlue"
                            href="#">
                            Need Help?
                        </a>
                    </div>

                    <div className="grid grid-flow-row grid-row">
                        {providers.map(({ name, Icon }, index) => {
                            return (
                                <div key={`${name} ${index}`} className='flex justify-start p-3 my-1 bg-white border rounded hover:border-myRed hover:cursor-pointer' onClick={() => { handleAuthSignIn(name) }}>
                                    <Icon className='m-3 ' />
                                    <p className='m-3 text-base '>Login with {name}</p>
                                </div>)
                        })}
                    </div>
                </form>
            </div>
        )
    } else {
        return (
            <div className=' bg-slate-300'>
                <Link href='/'>
                    <p className='text-xl text-center align-middle'>You are already signed in silly <span className='text-myBlue hover:text-myDarkBlue'>click to go Home</span></p>
                </Link>
                <div className='cursor-pointer text-myBlue hover:text-myDarkBlue' onClick={() => signOut({ callbackUrl: 'http://localhost:3000/' })}>Or sign out</div>
            </div>
        )
    }
}

export default SignInForm;

复现步骤 #

• 使用上述authOptions创建NextAuth配置文件
• 创建对应自定义登录路由

内容的提问来源于stack exchange，提问作者Wayne