Menu
I have used keycloak as a identity provider in my react application. I have installed keycloak react dependency in my react application using npm.
Below are the dependent keycloak react npm modules with version :
"@react-keycloak/web": "2.1.4",
"keycloak-js": "^11.0.2",
I have provided keycloak configurations as below :
const keycloak = new Keycloak({
realm: "temp-local",
url: " http://localhost:8090/auth/",
clientId: "temp-local-client"
});
Everytime when I refresh the page it will refresh again (with callback url) with query parameters state, session_state and code.
For example : When I go to the page : http://localhost:8080/test it will go there but again it will refresh the page with below url.
Sample url : http://localhost:8080/test#state=45ert45-edac92ddbf2a&session_state=45ga97bbfb4-f080cvb65e59b&code=1a1a-4e6e-3fg578-4fg10b-bbafg8-652fg6c44727a4
How to avoid that keycloak refresh? Can anyone have any idea on this?
599
asked May 28 '26 23:05
I've faced it as well and what helped me was to use the silent check SSO:
index.html add a file called silent-check-sso.html with a following content:<html><body><script>parent.postMessage(location.href, location.origin)</script></body></html>
<ReactKeycloakProvider> with initOptions like: <ReactKeycloakProvider
authClient={keycloak}
initOptions={{
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
pkceMethod: 'S256',
}}
>
...
</ReactKeycloakProvider>
Unfortunately I'm not aware of the technical details of how it works (explaining comments are welcomed) but it helped me : ] Here is how it worked without silent check SSO on:
And this is with silent check SSO:
Hope it helps!
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With