React keycloak integration not redirect to login page

user_5780969 0
Viewed 6704

I am using @react-keycloak/web for react app securing using keycloak. But the react loading page has no effect on it. Is there I missed something to setup or what is the issues? Here is my code...

keycloak.js

import Keycloak from 'keycloak-js'

const keycloakConfig = {
  url: 'http://localhost:8080/auth',
  realm: 'my_local',
  clientId: 'test_client',
  onLoad: 'check-sso'
}

const keycloak = new Keycloak(keycloakConfig)

export default keycloak

My index.js

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

<ReactKeycloakProvider
  authClient={keycloak}
  onEvent={eventLogger}
  onTokens={tokenLogger}
>
<App />
</ReactKeycloakProvider>

enter image description here

keycloak reactjs openid-connect
2 Answers

I solved this problem by moving the onLoad parameter in the provider. I had the same problem and found this solution by chance.

import Keycloak from 'keycloak-js'

const keycloakConfig = {
  url: 'http://localhost:8080/auth',
  realm: 'my_local',
  clientId: 'test_client',
}

const keycloak = new Keycloak(keycloakConfig)

export default keycloak

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

<ReactKeycloakProvider
  initOptions={{ onLoad: 'login-required' }}
  authClient={keycloak}
  onEvent={eventLogger}
  onTokens={tokenLogger}
>
<App />
</ReactKeycloakProvider>
user_116876630

I think you need to change the config onLoad value from check-sso to login-required. That should make it hit your keycloak login page rather than just checking if already authenticated.

user_144525910
Related