Блог

Я использую Keycloak для аутентификации пользователя в моем приложении React с помощью keycloak-js и @react-keycloak / web libs.

Когда я запускаю приложение, оно перенаправляет меня на страницу входа в keycloak, а затем обратно после ввода логина / пароля.

Я получаю токены: доступ, обновление и т. Д. И устанавливаю для них значение cookie.

Но затем, когда срок действия токена доступа истекает, я думаю, начинается что-то странное для меня: скриншот сети Chrome devtools

Приложение получает токен, но со страницы учетной записи (http://localhost:8080/auth/realms/my_pim/account ) он получает статус 401 (несанкционированный). После этого он не может получить новый токен, но затем каким-то образом получает его и снова получает 401 со страницы учетной записи. И проходит через бесконечный цикл перенаправления. В консоли сервера keycloak я вижу это.

Я не знаю, что с этим делать.

Мой код:

keycloak.ts

 import keycloak, { KeycloakInstance } from 'keycloak-js';


const currentConfigName = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';

const keycloakClient: KeycloakInstance = keycloak(`/keycloak/config.${currentConfigName}.json`);


export default keycloakClient;
  

config.dev.json

 {
   "realm": "my_pim",
   "auth-server-url": "http://localhost:8080/auth/",
   "ssl-required": "external",
   "resource": "pim_test",
   "public-client": true,
   "confidential-port": 0
}
  

App.tsx

 import { ReactKeycloakProvider } from '@react-keycloak/web';
import keycloak from './keycloak';

import Cookies from 'universal-cookie';


const App = (): any => {
  const dispatch = useDispatch();

  const cookies = new Cookies();

  const eventLogger = (event: unknown, error: unknown) => {
      console.log('onKeycloakEvent', event, error);
  };

  const tokenLogger = (token: any) => {
      if (token.token) {
          console.log('onKeycloakTokens', token);
          cookies.remove('user_token');
          cookies.set('user_token', token.token, { path: '/' });
          dispatch(actions.setAuth(true));
      }
  };

  return (
      <BrowserRouter>            
          <ReactKeycloakProvider
          initOptions={{ onLoad: 'login-required' }}
          onTokens={tokenLogger}
          onEvent={eventLogger}
          authClient={keycloak}>
              <div className="app-wrapper">
                // my components here
              </div>
          </ReactKeycloakProvider>
      </BrowserRouter>
  );
};

export default App;