如何使用反作用斗篷？

Question

根据示例的说法，但我得到了一个错误：

http://localhost:3000/#error=login_required&state=19004288-e312-4782-ac23-9dc038cd7bb0

这是我的代码：

keycloak.ts

import Keycloak from 'keycloak-js';

const keycloak = Keycloak({
url: 'http://192.168.1.179.xip.io:8080/auth',
realm: 'howtowork',
clientId: 'how-to-pay',
});

export default keycloak;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ReactKeycloakProvider } from '@react-keycloak/web';
import keycloak from './backend/keycloak';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Loader from './components/authLoad';
import event from './types/eventLog';
import token from './types/tokenLoger';

ReactDOM.render(
  <React.StrictMode>
    <ReactKeycloakProvider
      authClient={keycloak}
      LoadingComponent={<Loader />}
      onEvent={event}
      onTokens={token}
    >
        <App />
    </ReactKeycloakProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

我不认为这是服务器端的错误，尽管任何事情都是可能的)提供者是太方便的一个库，否则您必须使用干净的keycloak-js。

请帮忙(如何解决这个问题？)

Answer 1

在initOptions中添加ReactKeycloakProvider

<ReactKeycloakProvider
    initOptions={{ onLoad: 'login-required' }}
>