Configuring KeyCloak with React

Getting advice
, ,
1

Hi,

I am trying to setup a Keycloak based authentication for our React app.

I have come across the following keycloak-js example. The repo contains static html pages

Gitrepo with example: GitHub - KernelFrenzy/react-keycloak: Working React Keycloak example

I could click on the following login page and was successfully logged in.

But after getting redirected to the home page, I am seeing that authentication is not successful. When I try to click on the login button to try a second login, I get the following redirects but I was never redirected to keycloak.

keycloak-js
keycloak-js2915×523 54.6 KB

Not sure if anyone has come across such issue using the keycloak-js library.

2

Make sure the version of the keycloak-js library the example is using is the same version of the Keycloak server you are using.

3

I’m working through the same issue. Something to note: keycloak.login() is now an async function. All of the react libraries for keycloak don’t take this into account. You’ll need to make sure you use an older version of keycloak.

4

If you’d like to try the react-oidc-context and oidc-client-ts libraries, checkout this sample of how to set them up with Keycloak.