# Kaycloak secured quasar app

**URL:** <https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956>\
**Category:** Vue Designer\
**Created:** [July 20, 2025, 2:09pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956 "2025-07-20T14:09:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 20, 2025, 2:09pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/1 "2025-07-20T14:09:49Z")

</div>

Hi all,  
i have a keycloak secured quasar.dev based vue application.  
Can someone help me here?  
I cannot have authentication bypass, this would give errors with my backend server.  
It checks network calls for data of oy q.trees, q-tabels etc…

regards  
Thomas

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [July 21, 2025, 12:26pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/2 "2025-07-21T12:26:32Z")

</div>

Welcome to Vue Designer 🙂@tstuempfig

Are you able to kindly share some screenshots or screencast to help troubleshoot this issue? What’s backend, and what errors are you receiving at your backend?

Does your app work outside Vue Designer when starting your dev-server and testing it out in your external browser?

Meanwhile, can I recommend you to check these two threads that cover how to navigate to a page behind authentication - [Laravel + Inertia + Vue - #2 by TechAkayy](https://forum.pinegrow.com/t/laravel-inertia-vue/8449/2)

Also, you can also use Vue Devtools, access it from the State Panel, please refer to this thread for more details - [It is possible edit secret page - #4 by TechAkayy](https://forum.pinegrow.com/t/it-is-possible-edit-secret-page/9101/4)

All the best!

---

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 21, 2025, 5:48pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/3 "2025-07-21T17:48:47Z")

</div>

Hi,  
I will check the click mode. In the mentime I did uninstall the npm packages. But I will reconfigre it again.  
That keycloak will do is to have redirect the page to the login page and after successfull login redirect back to the initial login.  
If further routes are selected or browsed by the use, these will be checked again. But as there is a accesstoken in the browser the redirect does not happen anymore.  
I also checked with authenticating in the browser with an other app but I need the token… since I have server calls via rest to authenticate…

---

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 21, 2025, 6:09pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/4 "2025-07-21T18:09:03Z")

</div>

![grafik](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/87d565841215f8eda51d3f1bc02e43be056c211d.png)  
is displayed in vue designer  
expected is (next reply)

---

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 21, 2025, 6:09pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/5 "2025-07-21T18:09:53Z")

</div>

I should get this

 ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/61f826178815ea4c3d8e1982f03502800bf87bf3.png)  
and I should be routed back to the target page I entered.  
The auth mechanism is oauth2 / openid  
vite dev tools installed.

---

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 21, 2025, 6:16pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/6 "2025-07-21T18:16:18Z")

</div>

if I open an other route than the initial page, I get the following screen after entering my credentials

 ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/ccd9c6a824818522d1b56239772849cff89906bb.png)

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [July 23, 2025, 11:54pm UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/7 "2025-07-23T23:54:59Z")

</div>

Thanks @tstuempfig for the screenshot and details.

> [@tstuempfig](#):
>
> ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/87d565841215f8eda51d3f1bc02e43be056c211d.png)

Vue Designer is a nw.js based app, so the internal browser is a chrome instance. Similar to how you open devtools and check console for errors in an external browser, you can do the same in Vue Designer as well via menu Vue \> Open Devtools.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7e5666b9696505360b39c0917720017034f45c36.png)

Then, start your dev-server and once the quasar logo goes green on top right corner (in the toolbar), open your app by clicking on the button on the center of the interface. As your page seems to render just html without proper styling, it is possible you are opening the vue files directly.

Instead, you should start your dev-server, and click on the “Open the startup page”. Any issues with your app, please check the devtools console that you opened in the previous step.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f19086454fe9a80c77e14b273030fc5ca3425203.png)

.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/dc6533d00b5a4eed082452f7f3723fbc19ca060c.png)

> [@tstuempfig](#):
>
> ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/ccd9c6a824818522d1b56239772849cff89906bb.png)
> 
> grafik1544×637 41 KB

This cookie-based authentication is a limitation in Vue Designer at the moment, we are investigating and will revert back to you soon.

Please let me know how you go with the above. Thanks!

---

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 24, 2025, 6:56am UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/8 "2025-07-24T06:56:07Z")

</div>

Hi I’ll check this. Will need some time.

---

<div class="post-metadata">

**Author:** ![tstuempfig](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tstuempfig](https://forum.pinegrow.com/u/tstuempfig)\
**Post date:** [July 27, 2025, 9:46am UTC](https://forum.pinegrow.com/t/kaycloak-secured-quasar-app/10956/9 "2025-07-27T09:46:09Z")

</div>

Hi I checked, now I get the redirect We are sorry… so indeed, as long as vue designer cannot cope with SSO like oauth2/openid, I cannot use it for this project.  
The UI varies based on user properties…
