Comments (9)
mllull
commented on May 20, 2024
1
Oh my f***ing god!! My browser was locking KCServer Cookies!!! 🤦♂️
Now its working like a charm!! Many thanks @baltom ! I will create a PR adding silentCheckSsoRedirectUri config to example-app
Thanks!
from vue-keycloak-js.
baltom
commented on May 20, 2024
This is because the example app is configured to use "check-sso" which will not automatically re-authenticate the user after a refresh. For this to work the "silentCheckSsoRedirectUri" attribute needs to be provided
You can configure a silent check-sso option. With this feature enabled, your browser won’t do a full redirect to the Keycloak server and back to your application, but this action will be performed in a hidden iframe, so your application resources only need to be loaded and parsed once by the browser when the app is initialized and not again after the redirect back from Keycloak to your app. This is particularly useful in case of SPAs (Single Page Applications).
https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter
I guess it should be added to the example as well though 🤔
from vue-keycloak-js.
mllull
commented on May 20, 2024
I already tried your solution before, but it does'nt work. If you put this config in your example-app you can see that there is no calls to silent-check-sso.html page. I don't know if is a limitation of my keycloak-js version (which is 10.0.2) or anything else.
There is my ini keycloak config:
init: {
// Use 'login-required' to always require authentication
// If using 'login-required', there is no need for the router guards in router.js
onLoad: "check-sso",
silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html"
}from vue-keycloak-js.
baltom
commented on May 20, 2024
Did you also add the "silent-check-sso.html" page to your "public" folder?
<html>
<body>
<script>
parent.postMessage(location.href, location.origin)
</script>
</body>
</html>
As that combined with the silentCheckSsoRedirectUri works for me. However there is some timing issues with the example i see where createLoginUrl is called on the keycloak object before it actually exists therefor it crashes in the route guard
from vue-keycloak-js.
mllull
commented on May 20, 2024
However there is some timing issues with the example i see where createLoginUrl is called on the keycloak object before it actually exists therefor it crashes in the route guard
Yes, I had to deal with it waiting for keycloak.ready.
Did you also add the "silent-check-sso.html" page to your "public" folder?
Yes, I previously added this file, but in Devtools > Network I was able to see any request to silent-check-sso.html. I will try it on example-app.
Can you confirm that, if you enter in secret page (and can see the token info), when pressing F5 key you still see the token info after window refresh? 🤔
from vue-keycloak-js.
baltom
commented on May 20, 2024
Yeah if i remove the router guard functionality that crashes ill get the token info on the secret page after a refresh
from vue-keycloak-js.
mllull
commented on May 20, 2024
What version of KC Server do you use? 🤔
Edit: I have tried with KC Server v10.0.2 and same error happens.
from vue-keycloak-js.
baltom
commented on May 20, 2024
We are not using keycloak directly, but redhat-sso. My test was done with the "docker-compose environment" that you get from running /examples/docker-compose.yml. So keycloak 9.0.3
from vue-keycloak-js.
baltom
commented on May 20, 2024
hehe awesome! 😄 and we appreciate a PR!
from vue-keycloak-js.
Related Issues (20)
- For my keycloak version (18), the url configuration should not have "/auth" in the vite_vue3 example HOT 1
- $keycloak with vue 3 and vue-router 4 HOT 5
- Vue3 HOT 1
- Configurable token update interval
- The Vue 3 injection Symbol should be in a separate file and exported HOT 7
- Implementing PKCE with vue-keycloak-js HOT 2
- Always Redirect with URL #error=login_required HOT 3
- [vite] Internal server error: Failed to resolve import "@dsb-norge/vue-keycloak-js/dist/types" from "src/main.ts". Does the file exist? HOT 2
- [question] Where can I get an indication that the token has expired as a basis for jumping to the login
- Vue3 Support
- Support for Keycloak v21 HOT 1
- Cannot use namespace 'Keycloak' as a type HOT 2
- [question] Why and how do I prevent a blank page when the Keycloak server is not available? Vue, Keycloak, Quasar
- Refresh the system page and automatically add a hash parameter after the URL. How to remove the following parameters
- js-sha256 warning
- vue3 enable to use HRM HOT 1
- Vue Keycloak variable is undefined.
- Issuer displayed in browser URL after login? HOT 3
- Login success but redirect again. HOT 2
- requestStorageAccess errors and keycloak init errors on Chrome HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-keycloak-js.