Adding extra input field to the login screen

I have a use case where I have overridden the login mechanism by following this link: I want to add an extra input field on the login screen apart from the username and the password fields. I tried overriding the login.js code to pass an extra field to the XAS call, but I am not sure how I can consume it on the server side: Has anybody tried this before? Or has any ideas to do this?
2 answers

I think the best way to extent the login functionality nowadays is to follow this guide:


Just use a page in your app as a login page with anonymous user role allowed to enter that page.

Add this login page in a specific module, so you can limit the impact of this anonymous user role in your app.

In this way, you can add as much input fields and business logic to your login flow as you need.


Hi Ridhwik,


The custom stuff Bart describes in his blog do not contain extra input fields, but are based on the given 2 parameters: username and password.


If you need an extra field (domain), there are several solutions possible, but all are require quite some customization.

  • The easiest solution is what Peter states, allowing Anonymous users and use a LoginHelper entity with your 3 fields and your own custom logic in microflows to switch the session from anonymous to a specific logged in user. The microflow for the login action then should be allowed for anonymous users. Personally I would stay away from anonymous users for the best security in your app.
  • A safer, but more hacky-solution would be to make that third field visible as-if it's a separate field, but just encapsule it in the username or password. I once did this by making the username field hidden and show 2 other input fields. On every keystroke the 2 fields were concatenated into the username with a simple javascript. If needed, you can concatenate with a special character and use the solution of Bart if you want to extract it into 3 fields again in Java.
  • The most advanced solution, is to build your own login.html page and for example let it POST or GET to your own published REST API. For example expose /api/login-api/v1/login and capture 3 query parameters into your microflow and build a page like this. In the microflow that is called, create a User Session and redirect to index.html.

Good luck!