Authenticating Users

Last modified: September 25, 2024

Introduction

Native mobile apps often need to authenticate users just like web applications. However, there are some differences between native and web when it comes to authenticating users in Mendix. In this guide, you will learn how to authenticate users in native mobile apps and what to look out for.

Setting Up User Authentication

To enable user authentication in a native mobile app, you first need to enable App Security by setting the security level to Prototype or Production.

In a web-based app, you can rely on the provided login.html file to handle showing a sign-in form to your users. This is not possible in a native mobile app. Instead, you must model the login page using Mendix. This requires three steps: model the sign-in page, enable anonymous users, and set the role-based homepage for anonymous users to the sign-in page.

You can skip the first step if you are using the Blank Native App starter template, as the sign-in page has already been created.

Model the Sign-In Page

To model your native sign-in page, do the following:

  1. Create a new native page called Login that will be used to show the sign-in dialog box to your users. Use the SignIn Phone template under Forms to get started quickly:

    Create sign-in page

    The page already contains a sign-in form but is missing a data source to store the sign-in information.

  2. Before you will model the data source, make sure to change the new page’s layout to NativePhone_TopBarOnly to remove the bottom navigation.

  3. To model the data source that will store the sign-in form data, start by creating a non-persistable entity in the Domain model called Login.

  4. Add three attributes of type String: Username, Password, and ValidationMessage:

    Login entity

  5. Since anonymous users need to edit this entity, you must set the access rights for this entity accordingly. Allow read and write access for all attributes of this entity for anonymous users:

    Entity access

  6. To use this custom entity in the sign-in page, you need to create a nanoflow that will serve as the data source. This nanoflow should create an empty Login object and return it. Name the Nanoflow DSS_CreateLoginContext:

    Data source nanoflow

  7. Connect the nanoflow to the page by setting the data source of the data view surrounding the sign-in form to it:

    Connect the data source

Do not fill the contents of the form automatically. Instead connect the Email Address input field to the Username attribute and the Password input field to the Password attribute. Make sure that Show as password is set to true for the latter. Add a Text below the input fields to show the validation message.

Finished sign-in form

  1. You need to create second nanoflow to trigger the actual sign in. Change the On click action of the Login button to Call a nanoflow and create a new nanoflow called ACT_SignInUser. Make sure the parameter Login is passed to the nanoflow.

  2. In the nanoflow, call the Sign in action (which is bundled inside the Nanoflow Commons module). Pass the attributes from the Login parameter to the action and store the response in a new variable.

    Sign-in action
    1. The response of the Sign in action reflects the HTTP Status code of the sign-in network request:
      1. If it is 200, then the sign-in was successful. In this case, your app will automatically restart and show the homepage of the user.
      2. If the response is 401, then the sign in was unsuccessful because either the user is unknown or the password is wrong.
      3. If the response is 0, then there was a network error.

  3. Use the information on responses above to inform your user about the problem by filling the ValidationMessage attribute with a meaningful error message. The following shows an example of the finished nanoflow:

    Finished sign-in nanoflow

Enable Anonymous Users

The Anonymous users role allows users use your application without needing to authenticate first. This is needed to let users access the sign-in page before they can use it to authenticate.

Anonymous users are enabled in App Security. For more information, see Anonymous Users.

Set Up Role-Based Homepages

Your final step is to set the sign-in page as the home page for anonymous users. This will ensure that if a user is not signed, then they will see the sign-in page instead of your application’s other pages.

Role-based homepages are set up in App Navigation:

  1. Open the Native mobile profile.

  2. Click on Edit next to Role-based home pages.

  3. Set the created sign-in page as the homepage for the user role Anonymous:

    Role-based home page

For more information on role-based homepages, see Setting a Role-Based Homepage.

Read More