Cypress测试Next Auth登录Keycloak时出现State cookie缺失错误求助

可能的原因 #

• 跨域安全限制拦截：Cypress默认启用Chrome的跨域安全策略，当从Keycloak（第三方域名）重定向回NextJS应用时，跨域场景下的next-auth.state cookie被浏览器安全机制拦截，未随请求发送到应用。
• Cookie的SameSite属性不兼容：若next-auth.state的SameSite属性设为Strict或Lax，Cypress测试环境中跨域重定向时，浏览器不会携带该cookie，导致Next Auth检测不到。
• Cookies白名单配置缺失：Cypress默认仅保留当前测试域名的cookie，未显式指定保留next-auth.state，导致重定向后cookie未被持久化。
• Next Auth的Cookie配置与测试环境不匹配：比如next-auth.state的域名、路径设置为生产环境值，和测试环境的localhost不匹配，应用无法识别该cookie。

解决办法 #

1. 禁用Cypress的跨域安全限制 #

在cypress.config.js中添加配置：

export default defineConfig({
  e2e: {
    chromeWebSecurity: false,
  },
});

该设置会关闭Chrome的跨域安全检查，允许跨域场景下的cookie传递。

2. 配置Cookies白名单 #

在cypress/support/e2e.js中添加：

Cypress.Cookies.defaults({
  preserve: ['next-auth.state'],
});

如果测试涉及多域名，可指定域名范围：

Cypress.Cookies.defaults({
  domain: 'localhost', // 替换为你的测试域名
  preserve: ['next-auth.state'],
});

3. 调整Next Auth的Cookie配置 #

在Next Auth的配置文件（如pages/api/auth/[...nextauth].js）中修改cookie的SameSite和Secure属性：

export default NextAuth({
  cookies: {
    state: {
      name: 'next-auth.state',
      options: {
        sameSite: process.env.NODE_ENV === 'production' ? 'Lax' : 'None',
        secure: process.env.NODE_ENV === 'production',
        domain: process.env.NODE_ENV === 'production' ? '.your-domain.com' : undefined,
        path: '/',
        httpOnly: true,
      },
    },
  },
  // 其他OAuth、Keycloak配置...
});

测试环境下SameSite设为None，Secure设为false（因为测试环境通常用http），确保cookie能被浏览器正常保存和传递。

4. 手动强制同步Cookie（临时方案） #

如果以上方法无效，可在重定向回应用后手动设置cookie：

// 在登录重定向到应用后执行
cy.getCookies().then(cookies => {
  const stateCookie = cookies.find(c => c.name === 'next-auth.state');
  if (stateCookie) {
    cy.setCookie('next-auth.state', stateCookie.value, {
      domain: window.location.hostname,
      path: '/',
      secure: false,
      sameSite: 'Lax',
      httpOnly: true,
    });
  }
});

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