The last few months I’ve had the opportunity to help implement the new built in pin functionality for one of our customers. For this functionality, you have to use Mendix 6.9 or higher.
What is the Mendix mobile pin functionality?
The pin can be used to replace the password login of Mendix, it makes logging into the app much easier for your end-users. Enabling the pin is easy, just download the phonegap.zip file from the Mendix Developer portal and open the index.html in your favourite text editor.
The download button is hard to find, but if you go to the tab “Publish” and press the button “Publish for mobile App Stores” you are getting close. In the next screen you have a green button with the same name as the previous step which will end you up on a screen as shown below.
At the bottom of the index.html file, you can change the code so that var requirePin = true; and you are good to go. Make a ZIP from your updated code and upload this version through your PhoneGap Build account.
How secure is it?
The biggest weakness of the pin is that this is much easier to guess than a password. If you have very sensitive data, then protecting this with only 5 digits will be a bad idea regardless of the technical implementation.
The default logic will revert to a password login if you enter you pin incorrectly more than 3 times. Which gives basic protection against brute force attacks. Additionally you can add a custom runtime setting com.mendix.webui.HybridAppLoginTimeOut at the advanced tab in the Mendix Developer portal to determine how many minutes your token is valid.
The authentication that is done server side by Mendix is not based directly on the pin code, but on a token. This token is created during the first successful login on the device using a password. The token is stored on the server and on the mobile device. The pin code is never stored on the server but is used on the mobile device to protect the token.
As with all clients, they wanted something slightly different to what was offered by the out of the box functionality. Luckily we could change the phonegap package to accommodate their wishes.
The styling of the Pin screen can easily be done using the login.css and adding classes to the index.html that you can find in the phonegap package.
Pin code check
The first functional wish was to help protect the users from themselves to stop them making easy to guess pin codes. About 1 in 5 people use either ‘1234’, ‘1111’ or ‘0000’ as their code. If a user sets a weak code, then he should get a warning about this.
User experience changes
Additionally, I saw our end users getting frustrated by the need to keep pressing the confirm button after entering the last digit of the pin. The entering of the last digit needed the same event linked as the confirm pin button.
Every time the confirmPinButton.addEventListener was called I added the same event to the userInput . I also needed to remove the event again when the confirmPinButton has its event Listener cleaned. Forgetting this will lead to strange behaviour.
As seen in the screenshot, the client wanted the keyboard to contain only digits when typing the pin code. I did this by replacing the switchKeyboard( *, “number”) to switchKeyboard( *, “tel”)
Change pin widget
Since users expect to be able to change their pin when logged in, we build a custom Mendix widget that changed the value of the PIN.
The Mendix mobile pin functionality is great if you want to improve the user experience, but it does have its security implications. Making you own changes does require a more technical skillset than just plain Mendix modeling. However, I hope that with these tips you are able to quickly implement and customize this functionality.