React集成Keycloak Public Client认证触发重复初始化错误

你在useEffect中手动调用了keycloak.init()，但<ReactKeycloakProvider>组件内部会自动对传入的authClient执行初始化操作，这就导致同一个Keycloak实例被初始化两次，触发了"A 'Keycloak' instance can only be initialized once"错误。

移除手动初始化逻辑，让ReactKeycloakProvider负责Keycloak的初始化，并通过它的属性传递配置：

1. 删除useEffect中的初始化代码
2. 将初始化配置通过ReactKeycloakProvider的initOptions属性传入
3. 子组件中通过useKeycloak钩子访问Keycloak实例及认证状态

修改后的代码：

import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { HomePage } from './layouts/homePage/HomePage';
import React, { useMemo } from 'react';  
import Keycloak from 'keycloak-js';
import initOptions from './config/keyCloak';
import { ReactKeycloakProvider, useKeycloak } from '@react-keycloak/web';

// 在子组件中获取Keycloak实例
const HomePageWithAuth = () => {
  const { keycloak, initialized } = useKeycloak();

  React.useEffect(() => {
    if (initialized) {
      console.log(`User is ${keycloak.authenticated ? 'authenticated' : 'not authenticated'}`);
      console.log(keycloak.token);
    }
  }, [keycloak, initialized]);

  return <HomePage />;
};

function App() {
  const keycloak = useMemo(() => {
    return new Keycloak(initOptions);
  }, []);

  // 初始化配置传给Provider
  const providerInitOptions = {
    KeycloakResponseType: 'code',
    redirectUri: 'http://localhost:3000/',
    checkLoginIframe: false,
    pkceMethod: 'S256',
    onLoad: initOptions.onLoad,
  };

  return (
    <ReactKeycloakProvider 
      authClient={keycloak}
      initOptions={providerInitOptions}
      // 可选：全局监听认证事件
      onEvent={(event) => {
        if (event === 'onAuthSuccess') {
          console.log('用户认证成功');
        }
      }}
    >
      <Router>
        <Routes>
          <Route exact path="/" element={<HomePageWithAuth />} />
        </Routes>
      </Router>
    </ReactKeycloakProvider>
  );
}

export default App;

• ReactKeycloakProvider会自动完成Keycloak实例的初始化，无需手动调用keycloak.init()
• 任意子组件都可以通过useKeycloak钩子获取Keycloak实例、初始化状态及认证信息
• 可通过ReactKeycloakProvider的onEvent、onTokens回调全局处理认证相关事件

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