Proposing New Component - OTP INPUT - Areteans

[s-thutupalli]

Title: OTP INPUT

Overview:

An OTP Input Component is a user interface element designed for capturing One-Time Passwords (OTPs) or verification codes typically sent via SMS, email, or an authentication app. The component allows users to enter OTP codes in a segmented input field, enhancing user experience with intuitive interaction, validation, and error feedback.

For banking and insurance domain applications, OTP component is critical as it ensures secure and seamless user authentication. Account login, transaction authorization, password recovery and device verification are most common use cases.

Usage:

This component is commonly used in authentication flows, such as login, sign-up, or password recovery processes. It supports customization options to align with the branding and behavior of your application. Provision given to make the length of the OTP dynamic through configuration. Validations with respect to length are already in place.

Props:

Label – will be used as an input label for the control.

Length – integer value to determine the length of the OTP

Dependencies:

 UUID (Universally Unique Identifier)

 npm install uuid

Styled Components ---> npm install styled-components

Component benefits:

1. Enhanced User Experience ---> OTP controls automatically move the focus to the next input field as users type, making the process smoother and faster.

2. Customization and Styling –--> can be customized for appearance and behavior, allowing developers to match the UI with the application's branding.

3. Popular Use Cases -->
   Two-Factor Authentication (2FA): OTPs sent via SMS, email, or authenticator apps.
   Account Verification: Verifying user identity during sign-up or login.
   Transaction Confirmation: Confirming sensitive actions like financial transactions.

Attached the component code and detailed description with images below.

OTP_Input_Component.docx
OTPInput.zip

[ricmars]

adding this component makes sense - I will take the source code and refactor the code and add it to the gallery - Thanks for your contribution!

[ricmars]

Thinking more about this - What is the use case in a Pega application for showing this component? All authentication is done by an external IDP provider and they will implement the page showing the OTB input - I have never seen a use case where a user enters the OTP input inside an assignment - this is all done before loading the portal.

In all your popular use cases:
Two-Factor Authentication (2FA): OTPs sent via SMS, email, or authenticator apps.
Account Verification: Verifying user identity during sign-up or login.
Transaction Confirmation: Confirming sensitive actions like financial transactions.

the Pega Platform is not mark of the authentication flow and does not render the screen.

At this point I don't think there is real value adding this component to the repo - if the use case is to enter a 5 digit input fields - the OTP input might be useful but it become a more generic PinCodeinput component