React-Keycloak集成后页面持续刷新问题求助

我用@react-keycloak/web和keycloak-js保护React应用，配置如下：

Keycloak Provider 配置 #

<ReactKeycloakProvider
  authClient={keycloak}
  onEvent={eventLogger}
  onTokens={tokenLogger}
>
  <Foo></Foo>
</ReactKeycloakProvider>

Keycloak 实例初始化 #

const keycloak = new Keycloak({
  url: "http://XXX.XXX.XXX.XXX:8080",
  realm: "testrealm",
  clientId: "testclient",
});

问题表现：未登录时能正常跳转到Keycloak登录页，但登录后返回应用，页面开始持续刷新，URL一直是这种格式：

http://localhost:3000/#state=6b9c8273-3e7a-46d8-81e6-89d83a539d81&session_state=cb1b6069-b99a-4346-b0bf-6ea37e80900c&code=2b1ce5bb-ec49-4c1e-942e-9b70c74c36ee.cb1b6069-b99a-4346-b0bf-6ea37e80900c.d8e66d53-2283-4ead-b4f4-c11ddd5aa2a6

已尝试的操作：

• 添加初始化选项 initOptions={{ onLoad: "login-required"}}
• 添加初始化选项 initOptions={{ checkLoginIframe: false }}
• 更换@react-keycloak/web@3.4.0、keycloak-js@19.0.1的新旧版本

以上操作均无效，查官方示例也没发现遗漏配置，不确定是Bug、配置缺失还是其他问题。

解决思路与方案 #

1. 检查Keycloak后台客户端配置（最常见原因） #

• 打开Keycloak控制台，找到testrealm下的testclient客户端
• Valid Redirect URIs 必须包含http://localhost:3000/*，不能只写根路径，否则回调路径不匹配会触发重复跳转
• Web Origins 设置为http://localhost:3000，开发环境可临时设为*，生产环境需严格限制

2. 修正Keycloak初始化参数 #

给ReactKeycloakProvider补充完整初始化配置，强制开启PKCE流程避免回调循环：

<ReactKeycloakProvider
  authClient={keycloak}
  initOptions={{
    onLoad: "login-required",
    checkLoginIframe: false,
    pkceMethod: "S256",
    redirectUri: "http://localhost:3000" // 明确指定回调地址，与后台配置保持一致
  }}
  onEvent={eventLogger}
  onTokens={tokenLogger}
>
  <Foo></Foo>
</ReactKeycloakProvider>

3. 清理浏览器缓存与Cookie #

清空浏览器中Keycloak域名下的Cookie和应用缓存，避免旧认证状态干扰，之后重新登录测试。

4. 检查React路由模式 #

如果使用BrowserRouter，哈希格式的回调参数可能和路由冲突，可临时切换为HashRouter测试；或在Keycloak客户端将Access Type改为public（仅开发环境临时使用）。

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