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.

Enabling Native Login​

There are two steps to enable Native Login: adding the dependency to your build.gradle and configuring settings.json.

1. Add the Dependency​

In your DevApp's build.gradle, add the Native Login dependency to the dependencies block alongside your other Q2 dependencies:

dependencies {
    implementation "com.q2.app.core:core:$q2Version"
    implementation "com.q2.nativelogin:nativelogin:$q2Version"
    // ... other dependencies
}

2. Configure settings.json​

In your DevApp's settings.json, you need to do two things:

a) Add the Native Login module 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
    }
  ]
}

b) Set the nativeLogin flag to true at the top level of the JSON:

{
  "applicationName": "Dev App",
  "package": "com.q2.devapp",
  "nativeLogin": true,
  "sdk_modules": [
    ...
  ]
}
tip

Make sure both the "enabled": true property inside the module config and the top-level "nativeLogin": true flag are set. Both are required for Native Login to activate.

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.