React 17迁移至18遇页面无响应：SameSite Cookie属性异常

问题现象 #

将UI应用从React 17升级到React 18后，页面加载异常且按钮点击无响应，Chrome控制台无明显报错，但Network面板的Issues中提示：Because a cookie’s SameSite attribute was not set or is invalid。

仅做了以下修改：

1. 更新package.json中的React依赖版本
2. 修改index.js的根渲染方式为createRoot
3. 调整App.js中useEffect的异步写法
   未改动其他业务代码，应用使用Auth0身份验证，自身代码未设置Cookie。

修改的依赖版本 #

// 旧版本
{
  "react": "17.0.2",
  "react-dom": "17.0.2"
}

// 新版本
{
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

新旧代码对比 #

index.js #

旧代码

import { Auth0Provider } from "@auth0/auth0-react";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Auth0Provider
      domain={YOUR_AUTH0_DOMAIN}
      clientId={YOUR_AUTH0_CLIENT_ID}
      authorizationParams={{
        audience: YOUR_AUTH0_AUDIENCE,
        redirect_uri: window.location.origin,
      }}
    >
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Auth0Provider>
  </BrowserRouter>,

  document.getElementById("root"),
);

新代码

import { createRoot } from "react-dom/client";
...

const app = document.getElementById("root");
const root = createRoot(app);

root.render(
  <BrowserRouter>
    <Auth0Provider
      domain={YOUR_AUTH0_DOMAIN}
      clientId={YOUR_AUTH0_CLIENT_ID}
      authorizationParams={{
        audience: YOUR_AUTH0_AUDIENCE,
        redirect_uri: window.location.origin,
      }}
    >
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Auth0Provider>
  </BrowserRouter>
);

App.js代码片段 #

旧代码

import { useAuth0 } from "@auth0/auth0-react";
const App = () => {
  const { isLoading, error, isAuthenticated, loginWithRedirect } = useAuth0();
  const { getAccessTokenSilently } = useAuth0();
  const [permissions, setPermissions] = useState();
  useEffect(
    () =>
      (async () => {
        setPermissions(
          isAuthenticated
            ? decode(await getAccessTokenSilently())?.permissions || []
            : [],
        );
      })(),
    [getAccessTokenSilently, isAuthenticated],
  );
  ...

新代码

import { useAuth0 } from "@auth0/auth0-react";
const App = () => {
  const { isLoading, error, isAuthenticated, loginWithRedirect } = useAuth0();
  const { getAccessTokenSilently } = useAuth0();
  const [permissions, setPermissions] = useState();
  useEffect(
    () => {
      const asyncFn = async () => {
        setPermissions(
          isAuthenticated
            ? decode(await getAccessTokenSilently())?.permissions || []
            : [],
        );
      };
      asyncFn();
    },
    [getAccessTokenSilently, isAuthenticated],
  );
  ...

解决建议 #

• 排查Auth0 Cookie的SameSite配置：Auth0认证过程中会生成Cookie，SameSite属性无效会导致浏览器拦截认证请求，进而影响页面功能。登录Auth0控制台，在应用设置中检查Cookie的SameSite属性（建议设为Lax或Strict，根据跨域场景调整），也可以在Auth0Provider中添加cookieSameSite配置项指定属性值。
• 升级@auth0/auth0-react版本：React 18的并发特性可能与旧版本Auth0 SDK不兼容，查看当前SDK版本，升级到支持React 18的最新版本。
• 为useEffect异步逻辑添加错误捕获：避免异步请求失败导致状态更新异常，影响页面渲染，修改后的代码示例：

useEffect(
  () => {
    const asyncFn = async () => {
      try {
        setPermissions(
          isAuthenticated
            ? decode(await getAccessTokenSilently())?.permissions || []
            : [],
        );
      } catch (err) {
        console.error('权限获取失败:', err);
      }
    };
    asyncFn();
  },
  [getAccessTokenSilently, isAuthenticated],
);

• 测试React.StrictMode的影响：React 18开发环境下StrictMode会双重执行某些生命周期函数，可能触发Auth0 SDK的异常。暂时移除<React.StrictMode>标签，验证页面是否恢复正常，再针对性处理SDK兼容性问题。
• 确认跨域请求配置：预请求返回204是正常状态，但需检查后续认证请求是否发送。若请求未发送，需确认Cookie的Secure属性（HTTPS环境下必须开启）、跨域域名配置是否符合浏览器安全要求。

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