使用react-oidc-context集成Keycloak刷新页面报错No matching state found in storage

可能的原因及解决方案 #

1. 临时关闭React Strict Mode验证

React Strict Mode在开发环境会触发组件双重挂载/渲染，可能干扰oidc-client-ts的状态存储逻辑。先尝试关闭验证是否解决问题：

ReactDOM.createRoot(document.getElementById("root")!).render(
  // 移除<React.StrictMode>包裹
  <AuthProvider {...oidcConfig}>
        <App />
  </AuthProvider>,
);

如果关闭后问题消失，说明是Strict Mode的双重渲染导致状态被重复处理，生产环境可保留Strict Mode，或后续调整初始化逻辑适配。

2. 完整配置状态与用户存储

确保明确指定stateStore和userStore，正确初始化WebStorageStateStore（之前的尝试可能未正确传入配置）：

import { AuthProvider } from 'react-oidc-context';
import { WebStorageStateStore } from 'oidc-client-ts';

const oidcConfig: AuthProviderProps = {
  authority: import.meta.env.VITE_OIDC_AUTHORITY,
  client_id: import.meta.env.VITE_OIDC_CLIENT_ID,
  redirect_uri: `${window.location.origin}/`, // 需与Keycloak配置完全一致
  post_logout_redirect_uri: `${window.location.origin}/`,
  // 明确配置状态存储到localStorage
  stateStore: new WebStorageStateStore({ store: window.localStorage }),
  // 配置用户存储到localStorage
  userStore: new WebStorageStateStore({ store: window.localStorage }),
  // 添加静默刷新配置，避免令牌过期触发错误
  silent_redirect_uri: `${window.location.origin}/silent-renew.html`,
  automaticSilentRenew: true,
};

需在项目public目录下创建silent-renew.html文件：

<!DOCTYPE html>
<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/oidc-client-ts@latest/dist/oidc-client-ts.min.js"></script>
    <script>
      new Oidc.UserManager().signinSilentCallback();
    </script>
  </body>
</html>

同时在Keycloak客户端的Valid Redirect URIs中添加对应地址（如http://localhost:5173/silent-renew.html，根据实际开发地址调整）。

3. 确保redirect_uri完全匹配

Keycloak客户端配置的Valid Redirect URIs必须和代码中redirect_uri完全一致，包括是否带斜杠、路径等。例如代码中是window.location.origin + '/'，Keycloak里也要配置带斜杠的对应地址。

4. 页面加载时等待认证状态初始化

在App组件中等待AuthProvider完成初始化后再渲染内容，避免状态未就绪时触发错误：

import { useAuth } from 'react-oidc-context';

function App() {
  const auth = useAuth();

  if (auth.isLoading) {
    return <div>加载中...</div>;
  }

  if (auth.error) {
    // 针对state不匹配的错误，尝试重新触发认证
    if (auth.error.message === 'No matching state found in storage') {
      auth.signinRedirect();
      return <div>重新认证中...</div>;
    }
    return <div>认证出错：{auth.error.message}</div>;
  }

  return (
    // 你的应用内容
    <div>已登录：{auth.user?.name}</div>
  );
}

5. 检查浏览器存储清理设置

确认浏览器隐私设置未开启"关闭页面后清除数据"，这类设置会清空localStorage/sessionStorage中的state数据，导致刷新页面时无法匹配。

内容的提问来源于stack exchange，提问作者Fabrizio Paolo Petrelli