How to use React Keycloak?

Question

Did according to examples, but I get an error:

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

Here is my code:

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();

I don't think it's a server-side error, although anything is possible) The provider is too convenient a library, otherwise you have to use a clean keycloak-js

help please( How to solve this problem?

Answer 1

Add initOptions inside ReactKeycloakProvider:

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