在生产环境中未使用 Next.js 中的 next-auth 设置会话 cookie

Question

对我的 Web 应用程序使用 next-auth，我仅在生产和托管中遇到会话 cookie 的问题。 在本地开发或生产环境中我没有问题。回调 url 和 csrf-token cookie 存在，连接后会话令牌也存在。

我的问题是，当我托管我的应用程序（在 cPanel 和子域上）时，我有安全回调 url 和 csrf-token cookie，但当我尝试连接时，我没有收到错误，并且会话 cookie 未初始化。

我尝试了很多方法，但没有任何效果，如果哪位好心人有时间陪我，谢谢！

这里有一些重现错误的代码：

我在这个项目中使用的 next 和 next-auth 的版本

    "next": "12.1.6",
    "next-auth": "^4.22.1",

我的登录表单的登录函数调用

const result = await signIn('credentials', {
            username: usernameRef.current.value,
            password: passwordRef.current.value,
            redirect: false,
});

我的 [...nextauth].js 文件

const options = {
    providers: [
        CredentialsProvider({
            async authorize(credentials, req) {

                const { username, password } = credentials;

                const response = await fetch(`${req.body.callbackUrl}api/auths`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        username,
                        password,
                    }),
                })
                if (response.status === 200) {
                    const user = await response.json();
                    return user
                } else {
                    const message = await response.json();
                    throw new Error(message);
                }
            },
        }),
    ],
    session: {
        strategy: "jwt",
        maxAge: 15 * 24 * 60 * 60,
    },
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
        async jwt(params) {
            const token = params.token;
            const user = params.user;
            if (user) {
                 ...
            }
            return token;
        },
        async session(params) {
            ...
            return params.session;
        },
    },
};

我的 auths API 文件工作正常 我的 NEXTAUTH_SECRET 环境变量设置为 32 个字符，NEXTAUTH_URL 也是类型 https://mysubdomain.mydomain.fr

我尝试将其添加到我的 [...nextauth].js 文件（带域和不带域），但没有成功。

cookies: {
  sessionToken: {
    name: `__Secure-next-auth.session-token`,
    options: {
      httpOnly: true,
      sameSite: 'lax',
      path: '/',
      secure: true,
      domain: '.mysubdomain.fr'
    }
  },

Answer 1

希望这对您的实施有所帮助。我在尝试寻找自己的答案时发现了您的问题，并认为我会将答案发布在这里，以防它对您有所帮助。对于一些上下文，如果我尝试添加自定义选项（如

httpOnly

或

secure

），我的 cookie 不会在任何环境中设置。

我看到了 this 讨论评论以及他们提供的

next.config.js

实施的变体，这最终对我有用：

const headers = [
  "Accept", "Accept-Version", "Content-Length",
  "Content-MD5", "Content-Type", "Date", "X-Api-Version",
  "X-CSRF-Token", "X-Requested-With",
];

module.exports = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: "/api/(.*)",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          {  key: 'Access-Control-Allow-Origin', value: `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}` },
          { key: "Access-Control-Allow-Methods", value: "GET,POST" },
          { key: "Access-Control-Allow-Headers", value: headers.join(", ") }
          ]
      }
    ];
  }
};`

将原点更改为

NEXT_PUBLIC_NEXTAUTH_URL

是我对原始评论所做的唯一真正的更改。希望这会有所帮助，这是我能找到的唯一能让自定义 cookie 对我有用的东西。

此外，如果它有帮助，我正在使用的版本是：

"next": "^14.0.3"
"next-auth": "^4.24.5"