使用react-auth-kit无法存储Cookie的技术问题求助

以下是针对你遇到的问题的具体排查和解决步骤：

1. 修正Cookie Domain配置错误 #

Cookie的domain属性不能包含端口号，你当前配置的cookieDomain: '192.168.1.21:3000'不符合浏览器规则，会直接导致Cookie存储失败。修改为仅保留IP地址：

const store = createStore<UserData>({
  authName: '_auth',
  authType: 'cookie',
  cookieDomain: '192.168.1.21', // 移除端口号
  cookieSecure: false,
  debug: true,
});

2. 确认signIn函数的正确导入 #

确保你是从react-auth-kit官方包中导入signIn，错误的导入会导致函数无法获取AuthProvider的上下文，进而无法写入Cookie：

import { signIn } from 'react-auth-kit'; // 正确的导入路径

3. 利用debug日志定位问题 #

你已经开启了debug: true，打开浏览器控制台：

• 查看react-auth-kit输出的调试信息，是否有Cookie设置失败的明确提示
• 切换到Application面板，检查Cookies列表中是否存在_auth相关条目

如果signIn返回true但Cookie未出现，基本可以确定是Cookie配置参数违反了浏览器安全规则（比如domain错误、secure设置与当前HTTP环境不匹配）。

4. Next.js环境下的全局Provider配置 #

由于你计划使用@auth-kit/next做页面保护，必须确保Providers组件包裹整个应用：

• 如果你用的是App Router，在app/layout.tsx中全局引入：

import Providers from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

• 如果你用的是Pages Router，在pages/_app.tsx中引入：

import Providers from '../components/providers';

function MyApp({ Component, pageProps }) {
  return (
    <Providers>
      <Component {...pageProps} />
    </Providers>
  );
}

export default MyApp;

5. 排除浏览器端拦截因素 #

检查浏览器是否开启了第三方Cookie拦截，或者当前站点的Cookie权限被禁用：

• 在浏览器地址栏点击锁形图标，进入站点权限设置
• 确保允许该站点存储Cookie

测试流程 #

1. 修正上述配置后，重启React开发服务器
2. 清空浏览器中该站点的所有现有Cookie
3. 重新执行登录流程，查看Cookie是否成功存储

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