[keycloak-user] Incorporate Keycloak-Login into react-base SPAs (and ideally cordova-based mobile apps as well)

[Göttlich, Thomas]

Hi, we're currently evaluating Keycloak for our systems that use react-based SPAs as well as servlet/JavaEE-based applications.
Additionally we're planning to add cordova-based mobile apps for iOS and Android as well, hence the addition in the title, though how to incorporate Keycloak into our react-based SPAs has priority.

For the servlet-based applications it's working quite well by using KeycloakOIDCFilter.
However, there's the question on how we'd add your SPAs to that.

As far as I understand it Keycloak doesn't provide an authorization api for good reasons.
Thus when a user needs to log in they're redirected to Keycloak's login page and then back to the application.
According to our SPA devs that would mean leaving the SPA and restarting it later, potentially losing any already loaded or entered data, especially if the user needs to re-login.
As an example think of an email client where the user starts to write an email, gets distracted and after returning to the application the SSO session has timed out and a re-login is required.
Losing the email in doing so wouldn't be something our SPA devs would accept.

Hence the question: how would one go about that, i.e. how would one allow the SPA to display the login page without having to reload or restart the SPA itself?

I'm no expert here but I'd guess we could use an iframe or browser window (popup/tab/new window) to redirect the user to Keycloak and after successful login we'd redirect the user to a page tells the browser or SPA that the iframe or window can be closed and the user is now allowed to continue using the SPA.
Would that be a viable way to do it? How are you doing it?

Thanks in advance,

Thomas