React + keycloak-js：访问主页时#error=login_required循环

Question

我在基本 React 应用程序中使用 keycloak-js 和 @react-keycloak/web 执行身份验证时遇到一些问题。我的代码如下所示：

索引.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ReactKeycloakProvider } from "@react-keycloak/web";
import App from './App';
import Keycloak from "keycloak-js";

import { Routes, Route, BrowserRouter } from 'react-router-dom';

let keycloak = new Keycloak({
    url: "http://localhost:8081/",
    realm: "realm",
    clientId: "realm-public",
    loadUserProfileAtStartup: false
});

keycloak.init({
    redirectUri: "http://localhost:3000/home",
    pkceMethod: "S256"
});

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ReactKeycloakProvider authClient={keycloak}>
        <React.StrictMode>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<App keycloak={keycloak}/>} />
                </Routes>
            </BrowserRouter>
       </React.StrictMode>
    </ReactKeycloakProvider>
);

应用程序.js：

function App({keycloak}) {
    return (
        <div>
            <p> 12345 </p>
            <button onClick={() => keycloak.login()}> Click me </button>
        </div>
    );
}

当我访问 http://localhost:3000/ 时会出现此问题。我陷入了一个循环重定向到我的redirectUri（http://localhost:3000/home），并附加了一个error=login_required消息，这看起来特别奇怪，因为我没有将onLoad设置为login-required；完整网址如下

http://localhost:3000/home#error=login_required&state=0d0fffaa-66f3-4cb6-9764-26f34539b7c0

版本：

• 反应：18.2.0
• @react-keycloak/web：3.4.0
• 反应路由器-dom：6.3.0
• keycloak-js：19.0.1

如果需要任何其他信息，请告诉我。任何帮助是极大的赞赏。

编辑：从 keycloak.init() 中删除 pkceMethod 选项可以解决该问题。但是我想使用 PKCE 身份验证，因此这不是一个可行的解决方案。

Answer 1

尝试将其移除StrictMode或放在ReactKeycloakProvider周围。请参阅https://github.com/react-keycloak/react-keycloak/issues/182#issuecomment-1086440138