How to create a smart and personalised self-service portal without reimplementing all of the common functionality? This was the challenge we faced while creating a self-service solution for one of our customers.

The goal of the online desk was to offer a self-service portal for frequently used services. The entry point for existing and potential clients should be as easy as possible. Meaning, existing customers can log in with their existing e-banking accounts, while potential customers can register themselves without calling a hotline or sending an email.

The system should offer the usual services such as changing your address or managing your 2 factor devices and also be smart and unobtrusive. For instance, the online desk reminds customers when their mortgage is about to expire. It indicates to the customer to contact the advisor they signed their mortgage with. If the customer has already been in contact with one or more advisors, these advisors are prioritised throughout the website. This reduces triaging efforts and also offers personalisation to the user.

Integration of existing solutions

The online desk uses the customer’s existing IAM system called Keycloak. This allowed us to leverage existing functionalities like authentication, authorisation, password reset processes, etc. without reinventing the wheel.

Keycloaks built-in user interface did not fit the client’s website’s user interface (UI). Additionally, it was a separate system, yet they wanted a portal-like experience where the customer would not notice switching between different systems.

To solve this problem, we decided to develop a custom theme for Keycloak using the client’s existing component library based on VueJS. Keycloak did not support all of it’s features through APIs yet. We had to figure out how to make the existing Keycloak server side rendered user interface work with a modern Javascript framework that usually only talks to APIs through a REST or GraphQL framework.

We ended up creating multiple small VueJS applications — one for each page of the Account Management interface. To load data into VueJS, we passed it with a JS object from Keycloaks FTL templates to the state of the VueJS application. To send the user’s input back to Keycloak, we made sure to keep the original structure of Keycloaks form and submit it back to the same endpoints. This way, our VueJS Theme would submit the data back to Keycloak just like the original form, while the user experiences a better UI and an improved UX.

Retrieving customer data

To suggest relevant actions to customers, we needed to access the customer's data. The client had been developing REST endpoints together with their other supplier. These endpoints allowed the retrieval of mortgages, pillar 3a accounts and advisor relations. As these endpoints were also leveraging the existing Keycloak Infrastructure, it was possible to access these endpoints with the end-customer's JWT token safely. This way, the customer can seamlessly switch between different applications after a single login with the e-banking or self-registered account.

To make data retrieval easier for the frontend and only expose what was really necessary, we developed a GraphQL API facade in front of the existing endpoints. Depending on the different response times, the frontend could independently decide which endpoints to retrieve in a singular request and which to defer after the initial page load.