-
Notifications
You must be signed in to change notification settings - Fork 133
Browser looping when using keycloak-js
v11
#93
Comments
I'm facing the same issue with @react-keycloak/web v2.1.4 & keycloak-js v10.0.1. |
I tried to change versions of react-keycloak and/or keycloak-js but that did not change anything. So, for now I disabled the component and tried to code it until the bug is fixed. |
Thanks for your feedback, I tried looking into this issue but cannot seems to be able to reproduce it. I created a new React app from scratch and integrated the latest versions of I made different tests on The Could you please provide more details about your setup? |
Hi @panz3r, Thanks for investigating our issue. I tried to use the version 3.0.0-alpha.1, but I still have the same issue. By the way, I got an error while using this version:
Do you think that the issue may come from keycloak bad configuration ? Thank you a lot for your help. |
That's very weird but I don't have this issue anymore, I didn't change anything but clean my node_modules ¯\_(ツ)_/¯ I'm still using @react-keycloak/web v2.1.4 & keycloak-js v10.0.1 BTW. |
Hi @obouchta ,
To fix this TS error you should upgrade
I'll have a look at this as soon as possible, in the meanwhile can you try doing what @floweb suggested in his latest comment? |
I just tried @floweb suggestion and it worked fine. So there is what I did in details:
After my successful test, I removed the coockies from my browser and did again the same steps with moving the version of keyckoak-js to 11.0.2. After returning back to keycloak-js v10.0.1 (same steps) without removing the coockies from the browser. It worked fine again. I tested the keycloak-js v11.0.2 without react-keycloak/web and it worked great. I'm available for further questions 😄 Thanks for your help guys. |
Hi @obouchta , Thanks for your detailed feedback, I had a look at the changes between I'll investigate further to understand why this is causing issues, another thing I need to know is how did you setup the |
Currently using I will be testing the Thank you for your time guys! |
Hello @panz3r I was using the default value. Thank you, |
I made some more tests and found out some new details. I could reproduce the looping on Firefox by blocking cookies for both the app URL (e.g. The setup I used is:
For the records, this is a screenshot of the Keycloak configuration used for the test app I also tried by using At this point this issue does not seems to be strictly related to I also had a look at In the meantime I would recommend using the older |
Hi @panz3r , Thanks a lot for your investigation. I confirm that using keycloak-js v10 is fixing my issue. Waiting for keycloak team to fix that issue. Thanks again. |
Hi guys. I faced with same issue. The setup I used is: keycloak-js: v10.0.1 I fond some warning in browser between redirects: When I set SameSite in chrome://flags/ it helped But it's not solution. Could you help me figure out how to settle this? |
I know this is an old ticket, but I had exactly the same problem today with the following versions:
However, I noticed something very very strange: const keycloak = Keycloak({
realm: 'XXXX',
clientId: 'XXXX',
'auth-server-url': 'XXXX',
'ssl-required': 'external',
resource: 'XXXX',
'public-client': true,
'confidential-port': 0,
}); However, when I loaded exactly the same configuration via a JSON file, everything worked without any problems: const keycloak = Keycloak('/keycloak.json'); Maybe this will help someone to solve the problem. |
I was running into similar issue. Changing the responseMode to 'query' stopped the looping. That is less recommended, still.... |
TL;DR - find option to disable preventing access for third party cookies in your browser Longer version
Our temporary solution for development was to disable privacy setting for your browser. Exact steps depend on your browser, you can check for example here: https://akohubteam.medium.com/how-to-enable-third-party-cookies-on-your-browsers-f9a8143b8cc5 I hope that at least it will help with development. For production you need probably host both application and keycloak server on the same domain, so access by iframe won't fall into category of "third party cookie access". |
For everyone else who's still struggling - I configured my asp net core web app to receive CORS. This means you should configure both Keycloak and you application (web server) to trust cross origins. |
We're having the same issue: Affected browser versions (as identified so far): Keycloak init: {
"flow": "hybrid",
"onLoad": "login-required",
"checkLoginIframe": false
} This issue sometimes (seemingly random) occurs only for our Chrome users on Apple. The same version on Linux for example will work as expected. I have tried reproducing the issue on linux chrome with blocking 3rd party cookies and enabling default I have already tried setting |
I can confirm that this is still an active issue. This issue should be reopened. Keycloak: 11.0.2 keycloak init {
onLoad: 'login-required',
checkLoginIframe: false.
enableLogging: true
} I was able to get it to work with versions 2.1.4 and 10.0.2 of react-keycloak/web and keycloak-js respectively. Reverting to these versions worked first time. |
I encountered this same behaviour and got it to work after I removed everything from config except const keycloak = Keycloak({
realm: 'realm',
url: 'https://url',
clientId: 'client-id'
}); Versions I used: |
I think the issue is mainly with the Versions used: |
Why is this closed? The problem persists : ( |
Searching through the keycloak issue tracker, a solution is apparently on the works on KEYCLOAK-14102 |
Anybody has solved this issue?? I have been searching through for a long time now. |
No, it is still broken for me in the same way : ( |
I am trying with lates keycloak-js also. No luck still.
…On Sun, 17 Apr 2022 at 2:34 AM, Eugene Dementiev ***@***.***> wrote:
Anybody has solved this issue?? I have been searching through for a long
time now. Iam using "keycloak-js": "^11.0.2" with "react": "^18.0.0" ..
still when I set onLoad: 'login-required' in keycloak.init the browser
keep reloading .. appreciate any help on the matter.
No, it is still broken for me in the same way : (
—
Reply to this email directly, view it on GitHub
<#93 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABQEALDOVJVCINKIDSVY3DDVFMB2VANCNFSM4Q44U77A>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
Be careful when answering via email - your signature is included. You probably don't want that. Edit: I have the login loop issue too with React 18. |
Thanks :) |
i am having the same issue this is my package.json |
For the time being I decided not to use react-keycloak and use just keycloak-js and write my own component with context and use 'check-sso' to check and redirect if needed. Hopefully they fix the issue asap. |
Found a solution for the issue here when upgrading to React 18: Strict mode now causes components to render twice in development to ensure reusable state. This probably causes the component to reload for some reason. Remove or move the StrictMode to solve infinite reloading. |
You are right @dreamwave .. It works when we remove the Thanks again 👍 |
WORKS HERE! |
Unfortunately removing strict mode does not work for me... I tried many different combinations of versions, including keycloak-js v11, v17 and v18 which is the latest. None of those work and I don't have strict mode at all in my app. I also tried different init options in the provider, including checkLoginIframe: false, onLoad: 'login-required' / 'check-sso', and no effect. Also, I tried using React v18.0.0 and v18.1.0. I didn't try with React 17 yet. It feels like there is definitely something going on in this library. I see that it isn't really updated, dependencies in this repository are pretty old. Is anyone taking care of this? EDIT: Forget about it guys, I was using some stuff with keycloak completely wrong... turns out some of these fixes do work. |
@frle10 Which specific fix solved your issue? I'm also dealing with the refresh issue on React v18. EDIT: Issue solved! The following post describes the issue that was causing my app to reload twice and trigger this login loop, it was related to webpack-dev-server. |
The issue appears to be related to |
Removing |
I had the same problem because my site had an initial redirect to the home page. But keycloak js checks if the user is authenticated by the url hash, so when I add the current hash to the redirect path, the problem solved |
I had the same issue
|
me too. with below versions: |
Apparently there are some incompatibility issues with the react-keycloak lib: react-keycloak/react-keycloak#93 (comment)
Thanks, it's working for me. I had the same issue on Brave, or Firefox with privacy (strict) setting enabled. |
Still having this problem. package-json: {
"name": "keycloak-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-keycloak/web": "^3.4.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.58",
"@types/react": "^18.0.20",
"@types/react-dom": "^18.0.6",
"keycloak-js": "^19.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
} index file: import * as React from "react";
import ReactDOM from "react-dom";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./keycloak";
import "./index.css";
const eventLogger = (event: unknown, error: unknown) => {
console.log("onKeycloakEvent", event, error);
};
const tokenLogger = (tokens: unknown) => {
console.log("onKeycloakTokens", tokens);
};
ReactDOM.render(
<ReactKeycloakProvider
authClient={keycloak}
onEvent={eventLogger}
onTokens={tokenLogger}
initOptions={{
onLoad: "login-required"
}}
>
aaaaaaaaaaaaa
</ReactKeycloakProvider>,
document.getElementById("root")
); keycloak.ts: import Keycloak from "keycloak-js";
// Setup Keycloak instance as needed
// Pass initialization options as required or leave blank to load from 'keycloak.json'
const keycloak = new Keycloak({
url: "http://localhost:8080",
realm: "myrealm",
clientId: "myclient",
});
export default keycloak; The flag |
@Rafael-Ramblas maybe try adding back |
Nevermind folks, this was a problem with anti-tracking included in browsers and keycloak not correctly configured to send the right value of |
I had the same issue. I removed the
|
I have the same problem. React renders every 10 seconds on Brave browser. I have only I have added init part
|
Describe the bug
I'm facing a strange issue.
When navigating into my http://localhost:3000/#/hom, the provider create a infinite loop. It keep looping from http://localhost:3000/#/home to the following url :
http://localhost:3000/#/home&state=30692c6b-e9e0-407a-b522-e0bdec324d66&session_state=e1ec5e6e-463c-43dc-9f7e-e7170a4f7422&code=7f5c9f74-efd2-4014-a7b6-819f06647cda.e1ec5e6e-463c-43dc-9f7e-e7170a4f7422.300185e4-3ad6-4e7d-8967-f9a4c617cad8
When using the keycloakProvider and Keycloak-js 11.0.2
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Init the component.
Desktop (please complete the following information):
Additional information:
I suspect that the keycloak.init() return something not expected by the provider and that cause a new request to initialize the keycloak instance again and again.
The text was updated successfully, but these errors were encountered: