Mobile usage - Ionic / Capacitor

[javialon26]

Hey, nice initiative, it's great to have modern options because keycloak-js is heavy and will be deprecated. Thanks.

Do you consider the possibility of adding adapters to use the library in other contexts, like mobile apps? In this case, we need to open an in-app browser instead of redirecting the user. I have created an adapter for Keycloak-JS for Capacitor, using the Capacitor App plugin (listener for app URL open) and the Capacitor Browser (listener for browser closed by user) but it's something internal.

Let me know what's are your thoughts.

[garronej]

Hello @javialon26,

Thanks!

At the moment this library makes the assumption that it is being run in a browser environement and no effort has been made to support other runtime.
It is at the moment and OIDC client for Single Page Web Application.

I'm open to contribution but I don't have any experience with Ionic. I don't know exactly what would need to be abstracted away to make this work.

[javialon26]

Hi @garronej, sorry for my late response.

Supporting mobile apps like Ionic (which is essentially a web app inside a webview; everything that works on the web should work here) requires some abstraction:

Redirection Phase:
When the user is redirected to the auth server, it must open a browser using the Capacitor Browser plugin, which offers more functionality than window.open but has a simpler API.

Callback Handling:
The application is always in the background when the user is presented with the auth server in the browser (opened in the foreground). Once the authentication is completed, the browser closes, and the application comes to the foreground again. At this moment, the only option to handle the callback is using the Capacitor App plugin, which allows us to react to an incoming URL with the following listener. The main difference here is that the application never restarts; it is just waiting for the listener.

Keycloak-JS has custom adapters to cover this, but some cases can't be covered due to the lack of access to more internal APIs from the adapter, as mentioned in keycloak/keycloak#25736.

Thanks

[garronej]

Hello @javialon26,

Thanks for the details!
Right now, we’re focusing on supporting TanStack Start and Next.js.
We can look into Ionic afterward, but that would be a matter of months.

[mariomurrent-softwaresolutions]

Hi @garronej, sorry for my late response.

Supporting mobile apps like Ionic (which is essentially a web app inside a webview; everything that works on the web should work here) requires some abstraction:

Redirection Phase: When the user is redirected to the auth server, it must open a browser using the Capacitor Browser plugin, which offers more functionality than window.open but has a simpler API.

Callback Handling: The application is always in the background when the user is presented with the auth server in the browser (opened in the foreground). Once the authentication is completed, the browser closes, and the application comes to the foreground again. At this moment, the only option to handle the callback is using the Capacitor App plugin, which allows us to react to an incoming URL with the following listener. The main difference here is that the application never restarts; it is just waiting for the listener.

Keycloak-JS has custom adapters to cover this, but some cases can't be covered due to the lack of access to more internal APIs from the adapter, as mentioned in keycloak/keycloak#25736.

Thanks

Any updated on when this will be exposed?

[garronej]

Hello @mariomurrent-softwaresolutions,

Thanks for your interest!
My last message was less than a week ago. I'm still working on TanStack Start / Next.js support, and it's currently my top priority.
If you'd like to help prioritize it, consider sponsoring: https://github.com/sponsors/garronej