Overview

A configurable OTP input widget tailored specifically for Mendix Native applications.

Optimize your application's authentication workflow with this customizable widget designed to capture One-Time Passwords (OTPs). Configure OTP length, select between numeric or text input types, and choose from distinct input styles ("box" or "line") to match your app’s design. Seamlessly trigger custom actions once the OTP is fully entered, enhancing security and user experience.

Key Features:

• Configurable OTP length

• Numeric or alphanumeric input options

• Multiple input styles ("box" or "line")

• Action-triggering upon OTP completion

• Built specifically for Mendix Native applications

Documentation

Typical Usage Scenario

The OTP Input widget enables Mendix developers to streamline and secure user authentication workflows within native applications. It simplifies capturing One-Time Passwords (OTPs), commonly used for secure login processes, transaction confirmations, or account verifications. Developers can customize the widget to match the design and functional requirements of their Mendix Native apps, thereby enhancing user experience and security.

Features and Limitations

Features:

• Configurable OTP length (default is 6 digits)

• Supports numeric or alphanumeric OTP input types

• Two customizable visual input styles: "box" or "line"

• Action triggers upon OTP entry completion

• Fully compatible with Mendix Native apps

Limitations:

• This widget is specifically built for native mobile applications; it does not support web applications.

• Requires building a custom Mendix Native mobile app due to React Native package dependencies.

Style Properties

The widget’s style properties are as follows:

• container: Includes all ViewStyle properties. Defines the overall styling of the widget container.

• input: Includes all ViewStyle and TextStyle properties. Used for styling the individual OTP input elements.

• inputError: Includes all ViewStyle and TextStyle properties. Applied to OTP input elements when they are in an error state.

• validationMessage: Includes all TextStyle properties. Defines the style for validation message text shown below the OTP inputs.

// Custom style class for OTP Input widget

export const otpInputCustomStyles = {

    container: {  

        // ViewStyle properties   

    },   

    input: {

        // ViewStyle & TextStyle properties   

    },   

    inputError: { 

        // ViewStyle & TextStyle properties   

    },   

    validationMessage: { 

        // TextStyle properties   

    }

};

Dependencies

This widget depends on external React Native packages. Ensure your Mendix application is configured to build a custom Make It Native app. Required packages will automatically be integrated when building your app.

Known Bugs

Currently, there are no known bugs. Please report any issues encountered during usage.

Frequently Asked Questions

Q: Can this widget be used in Mendix web applications?

A: No, this widget is explicitly designed for native mobile applications.

Q: Do I need to build a custom Make It Native app to use this widget?

A: Yes. The widget requires specific React Native dependencies, which mandates a custom Make It Native app build.