A Comprehensive Guide to Creating a Secure Authentication in Mendix Using Google Authentication

Every developer wants their app to be thread free for their user, as such, I planned to have two-way security for my Mendix application. Compromised passwords are more common than you think, one of the best ways to protect your account is to have a 2 way of verification in place.

Mendix gives a warm welcome to the Google authenticator to make it work very efficiently with it. We can use the Google authentication connector from the marketplace, this helps you generate a secret key and OTP authentication URL to register your application in the Google authenticator app, in addition to that it has a default validate action to validate the code from the user device. As well as download the dependencies modules like Encryption.

Follow the steps to get two-way security for your Mendix app.

Steps to be followed in a Modeler

Step:1

  • Create an entity named Credential which contains a one-on-one association with the Account entity of the administration module, do check the entity has access rules appropriately, this association will hold the user associated with the secret key.
  • Create the attribute name as such in the entity shown in the image, else it may cause some error in the java action which will be used in upcoming actions. Google authenticator by default has this authenticator.

Step:2

In the default home page of Mendix create and map the microflow named Authenticate_User, this microflow will be triggered immediately after the log-in. 

 

  • This microflow, checks whether the account has any association with the credential entity. If not, it will create the association between the credentials and the account entity along with the ga_Secretkey.

 

  • The SignIn Action button contains a microflow with the check validation action this will validate the code and show the home page for the user. As shown in Figure 8

Figure 8

Figure 8

By following these steps, you can achieve two ways of authentication for your application.

  • These newly created credentials will be sent inside an existing microflow named “Set Credentials” which is an existing microflow in the connector, which contains an action named ‘create user credentials’ this action requires a username and the name of your application(issuer) which is responsible for creating the OTP Authenticator URL which is passed inside the QR code widget.
  • These values will be reflected in Google’s Google Authenticator app on the user’s device, allowing the user to determine which code belongs to which application.
  • As shown in Figure 4, create a page called Authentication_Page. This page displays the OTP authentication URL to the user as a QR code.

Figure 4

Figure 4

Download the QR-code widget from the Appstore and do the mapping as shown in Figure5.

Figure5

Figure 5

  • In the „Next“ button call the microflow named ACT_Save_Credentials, this will save the changes as shown in figure:6. This microflow will lead us to the page to validate the code.

Figure 6

Figure 6

Step:3

Create a page named Validate_Code as shown in the image Figure 4, the user can fill in the code they get from scanning the QR code in the field named GAPasscode.

 Figure 7

 Figure 7

  • The SignIn Action button contains a microflow with the check validation action this will validate the code and show the home page for the user. As shown in Figure 8

Figure 8

Figure 8

By following these steps, you can achieve two ways of authentication for your application.