Skip to main content

Android - Native Login Module

The Native Login module is the updated, modern login experience built from the ground up using native Android with Jetpack Compose. It replaces the legacy login page with a fully native implementation that provides improved performance, better accessibility, and a more polished user experience.

Version Requirement

The Native Login module is only available in version 25.11.0 and newer. Ensure your project is using a compatible version before enabling this module.

Enabling Native Login​

To enable the Native Login module in your project, you need to add it to your settings.json file in the root of your DevApp. Add the following configuration to the sdk_modules array:

{
  "sdk_modules": [
    {
      "name": "native_login",
      "classPath": "com.q2.nativelogin.NativeLoginEntryPoint",
      "include": ":modules:authentication:nativelogin",
      "identifier": "native_login",
      "data": {
        "uiConfiguration": []
      },
      "enabled": true
    }
  ]
}

Important: Ensure that "enabled": true is set to activate the module.

Customizing the UI with uiConfiguration​

The Native Login module supports optional UI customization through the uiConfiguration property in the module's data object. This allows you to add custom buttons and links to specific areas of the login screen.

Configuration Types​

The uiConfiguration array accepts configuration objects with different type values:

  • loginButtons: Buttons displayed on the main login screen
  • ualButtons: Buttons displayed on the User Access List (UAL) screen
  • footerLinks: Links displayed in the footer area

Example Configuration​

Here's an example showing how to configure custom buttons and links:

"uiConfiguration": [
  {
    "type": "loginButtons",
    "items": [
      {
        "displayName": "_t.mob.enrollnow",
        "link": "https://your-bank.com/enrollment",
        "linkType": "url",
        "target": "self",
        "buttonStyle": "secondary"
      },
      {
        "displayName": "_t.main_page.contactUs",
        "link": "5124444444",
        "linkType": "phone",
        "buttonStyle": "text"
      }
    ]
  },
  {
    "type": "footerLinks",
    "items": [
      {
        "displayName": "Call Us",
        "link": "2813308004",
        "linkType": "phone"
      },
      {
        "displayName": "Privacy Policy",
        "link": "https://your-bank.com/privacy",
        "linkType": "url",
        "target": "browser"
      },
      {
        "displayName": "Branches",
        "link": "#/branches",
        "linkType": "url",
        "target": "self"
      }
    ]
  }
]

Configuration Properties​

Each item in the items array supports the following properties:

  • displayName (required): The text displayed on the button or link. Can be a translation key (e.g., _t.mob.enrollnow) or plain text.
  • link (required): The destination URL, phone number, or relative path.
  • linkType (required): The type of link. Valid values:
    • "url": Web link
    • "phone": Phone number
  • target (optional, for URL links): How the link should open:
    • "self": Opens in the app's webview (default)
    • "browser": Opens in external browser
    • "popup": Opens in a popup/modal webview
  • buttonStyle (optional, for buttons): The visual style of the button:
    • "secondary": Standard button style
    • "text": Text-only button (no background)
Translation Keys

You can use translation keys (prefixed with _t.) for displayName values to ensure your buttons and links are properly localized for different languages.

Learn More​

For more information about configuring modules and the settings.json file, see Configuring settings.json.