Login components - Android

Overview

The Weavr SDK provides a set of components for secure-input of authentication credentials for various scenarios. This section covers:

• Password-based authentication
• Passcode-based authentication
• OTP (One-Time Password) verification

Each component is designed with security features, including built-in text masking, secure handling, and proper validation.

The components allow a user to input their credentials in a secure fashion, which is converted into a user session token. This can then be used to execute requests with Weavr's API, allowing the user to interact with their financial instruments and Weavr's services.

Component types

1. Password Component (SecurePasswordEditText)

Use this component for password-based authentication (something you know). It ensures secure text input with masking and validation.

Integration

In XML layout:

<io.weavr.components.SecurePasswordEditText
android:id="@+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Password"
android:minHeight="48dp"
android:inputType="textPassword"
android:maxLength="100"
android:fontFamily="@font/your_custom_font"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Alternatively, create it programmatically:

val passwordEditText = SecurePasswordEditText(this).apply {
    layoutParams = LayoutParams(
        LayoutParams.MATCH_PARENT,
        LayoutParams.WRAP_CONTENT
    )
}
binding.root.addView(passwordEditText)

Security features

• Secure text masking
• Input type enforcement
• Maximum length validation (100 characters)
• Secure text handling

2. Passcode Component (SecurePasscodeEditText)

For passcode-based authentication (e.g. 4-digit PIN). Supports both standard and segmented input.

Standard Integration

<io.weavr.components.SecurePasscodeEditText
android:id="@+id/passcode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:ems="10"
android:hint="Passcode"
android:minHeight="48dp"
android:inputType="numberPassword"
android:maxLength="4"
android:fontFamily="@font/your_custom_font"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Alternatively, create it programmatically:

val securePasscodeEditText = SecurePasscodeEditText(this)
securePasscodeEditText.setLayoutParams(LayoutParams(...,...))
binding.root.addView(securePasscodeEditText)

Segmented Integration

For a better user experience, use the segmented version:

<io.weavr.components.SecurePasscodeEditTextSegmented
android:id="@+id/passcode_segmented"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:segment_gap_percent="10"
app:segment_height="48dp"
app:segment_border_color_active="#000000"
app:segment_border_color_inactive="#CCCCCC"
app:segment_border_width="2dp"
app:segment_corner_radius="8dp"
app:customFont="@font/your_custom_font"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Alternatively, create it programmatically:

val segmentedPasscode = SecurePasscodeEditTextSegmented(this).apply {
    segmentGapPercent = 10f
    segmentBorderColorActive = Color.BLACK
    segmentBorderColorInactive = Color.GRAY
    segmentHeight = 48
    segmentBorderWidth = 2
    segmentCornerRadius = 8f
    layoutParams = LayoutParams(
        LayoutParams.MATCH_PARENT,
        LayoutParams.WRAP_CONTENT
    )
}
binding.root.addView(segmentedPasscode)

Customisation options for Segmented version

• segmentGapPercent: Gap between segments (default: 10%)
• segmentHeight: Height of each segment (default: 48dp)
• segmentBorderColorActive: Border color when segment is active
• segmentBorderColorInactive: Border color when segment is inactive
• segmentBorderWidth: Width of segment border (default: 2dp)
• segmentCornerRadius: Corner radius of segments (default: 8dp)
• customFont: Custom font for segments

Listeners

Both styles support a TextEntryCompleteListener:

securePasscodeEditText.setTextEntryCompleteListener(
    object : SecurePasscodeEditText.TextEntryCompleteListener {
        override fun onTextEntryComplete() {
            // Called when input reaches max length
        }
    }
)

segmentedPasscode.setTextEntryCompleteListener(
    object : SecurePasscodeEditTextSegmented.TextEntryCompleteListener {
        override fun onTextEntryComplete() {
            // Called when all segments are filled
        }
    }
)

Additional for Segmented

A focus-change listener

segmentedPasscode.onSegmentFocusChangeListener =
    object : OnSegmentFocusChangeListener {
        override fun onFocusChange(fieldIndex: Int, hasFocus: Boolean) {
            // fieldIndex: 0-based segment index
            // hasFocus: whether segment gained/lost focus
        }
    }

This is useful for:

• Tracking user input progress
• Implementing custom focus-based animations
• Adding visual feedback when segments gain/lose focus
• Handling focus-based validation

3. OTP Component (SecureOTPField)

For One-Time Passwords (6 digits, segmented).

<io.weavr.components.SecureOTPField
android:id="@+id/otp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:segment_gap_percent="10"
app:segment_height="48dp"
app:segment_border_color_active="#000000"
app:segment_border_color_inactive="#CCCCCC"
app:segment_border_width="2dp"
app:segment_corner_radius="8dp"
app:customFont="@font/your_custom_font"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Common features

All components share these security features:

• Secure text masking
• Input type enforcement
• Length validation
• Secure text handling
• Tokenisation support
• Error handling
• UI customisation options

Token management

A login component is used to create a user session token; which is required when executing requests to Weavr's APIs.

Creating tokens

Single component:

binding.password.createToken(
    object : OnTokenizeListener {
        override fun onTokenizeComplete(result: Map<String, String?>?) {
            val token = result?.values?.first().orEmpty()
            // Success
        }
        override fun onTokenizeFailed(error: ErrorResponse) {
            // Failure
        }
    }
)

Group tokenization:

group1.createToken(
    fieldKeys = arrayListOf("passKey0", "passKey1", "passKey2"),
    callBack = object : WeavrResult<Map<String, String?>, ErrorResponse> {
        override fun onSuccess(result: Map<String, String?>?) {
            val firstValue = result?.get("passKey0")
            // Success
        }
        override fun onFailure(error: ErrorResponse) {
            // Failure
        }
    }
)

Setting user token

After successful login, set the user token:

UXComponents.setUserToken(
    this,
    authToken, // Token from login
    onAssociateListener = object : OnAssociateListener {
        override fun onAssociateComplete(message: String) { /* … */ }
        override fun onAssociateFailed(error: ErrorResponse) { /* … */ }
    }
)

Verifying token association

val isAssociated = UXComponents.isAssociated(this)

Security considerations

1. Always use secure input types (textPassword, numberPassword)
2. Implement proper error handling
3. Use appropriate token management
4. Follow biometric authentication guidelines when using passcodes
5. Validate input length and format