Login page with SPA

I’m creating an app and I need to have a very customised login theme, similar to what I could do with a single page application (SPA - such as vueJs, angular 2x or reactJs). I have an external user storage SPI. I my case I want to use react to design and validate my form. I’ve then thought about these options:

  • Have an external SPA which will replace Keycloak but will call keycloak’s API for login. In this case, the registration will call the external database for user-registration directly

  • Have to customise all login templates inside the login theme folder and add theme all reactJs. For this case, I’ve made some researches and found out, that there are two issues:

  1. I found this library and I can’t use it for managing other templates, to for example, navigate to another page. Why? Because Keycloak manages it’s pages itself so no need for routing provided and managed by react. Which implies everytime i’ll be posting all forms, also while using react.

  2. I like SPA. I want to build reusable components. With Freemarker it’s also possible. But when build, Freemarker becomes pure HTML and putting in a react app will not permit initial values provided by Keycloak on Freemarker build, as react won’t mounted at time. So I’ve thought about html data tag, but it’ll be another framework development time only for that feature.

As reminder, all this is just for validation and theme. I can also do the same using vanilla javascript and html, but it’s going to take too much development time (because adjusting to every browser versions and all, call polyfill…).

After reading all of this, does anyone has an idea on how I could better manage theme on my login screen?

This project has made an effort to make writing Keycloak login themes with React more feasible.