A Custom OTP Data Fetch Component is a form field that handles sending, receiving, and verifying OTPs (One-Time Passwords) while optionally fetching or validating data from a backend endpoint. It is commonly used for user verification, phone number confirmation, or validating sensitive application data.
The Custom OTP Data Fetch Component provides a secure and interactive mechanism for OTP-based validation in forms. Key features include:
endpointCode or URL.populateRelativeToRootForm.runAction and runningAction track the OTP request and verification process internally.Complete JSON Object
{
"key": "otpgeneric",
"type": "customotpdatafetch",
"props": {
"url": "/integration/v1/fetch/sync",
"label": "OTP Demo",
"disabled": false,
"required": false,
"otpLength": 5,
"populates": [],
"payloadKey": "payloadKey",
"useBaseUrl": true,
"placeholder": "Enter email, telephone(078****) or application number",
"endpointCode": "TEST_FETCH",
"allowOtpNumbersOnly": false,
"inputRegexValueValidation": "^([0-9A-Z]{10,22})|(07\\d{8,8})|(\\w+[@{1}]\\w{3,15}[\\.{1}]\\w{3,10})$"
},
"fieldArray": null,
"validation": {
"show": true,
"messages": {
"required": "field is required",
"otpExpired": "OTP expired.",
"otpInvalid": "Please enter a valid OTP.",
"otpRequired": "Please enter the OTP digits sent to the recipient.",
"dataFetchFailed": "Failed to complete data fetch. Please try again.",
"dataFetchPending": "Please wait while the information is retrieved.",
"requestOtpFailed": "Failed sending OTP request. Please try again.",
"pendingRequestOtp": "Request for an OTP to be sent to the recipient to proceed.",
"recipientNotFound": "Recipient not found",
"invalidRecipientEntry": "Please enter a valid recipient",
"otpVerificationPending": "Please submit the OTP for verification to proceed.",
"endpointCodeNotConfigured": "Endpoint code is required on this field.",
"otpVerificationRequestFailed": "OTP verification failed."
}
},
"validators": null,
"expressions": {},
"defaultValue": null,
"expressionProperties": {}
}
OTP to validate phone number without fetching details from an endpoint.
{
"key": "APPLICANT_PHONE_NUMBER",
"type": "customotpdatafetch",
"props": {
"label": "Phone Number",
"required": false,
"defaultRequired": true,
"otpLength": 5,
"payloadKey": "phoneNumber",
"useBaseUrl": true,
"placeholder": "Enter your phone number",
"clearRecipient": false,
"allowOtpNumbersOnly": false,
"isRecipientReadonly": false,
"messageDataFetchComplete": "Information retrieved successfully.",
"inputRegexValueValidation": "^07\\d{8}$",
"inputRegexValueValidationMessage": "Phone number should be 10 digits."
},
"expressions": {
"hide": "(formState?.APPLICATION_STATE === 'PENDING_RESUBMISSION')",
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"show": true,
"messages": {
"required": "This field is required.",
"otpExpired": "OTP expired.",
"otpInvalid": "Please enter a valid OTP.",
"otpRequired": "Please enter the OTP digits sent to the recipient.",
"dataFetchFailed": "The ePoBox associated with this phone number had it's postal office changed recently , try again within three months' time.",
"dataFetchPending": "Please wait while the information is retrieved.",
"requestOtpFailed": "Failed sending OTP request. Please try again.",
"pendingRequestOtp": "Request for an OTP to be sent to the recipient to proceed.",
"recipientNotFound": "Recipient not found",
"dataFetchIncomplete": "Otp verificationa and data fetch incomplete.",
"invalidRecipientEntry": "Please enter a valid recipient",
"otpVerificationPending": "Please submit the OTP for verification to proceed.",
"endpointCodeNotConfigured": "Endpoint code is required on this field.",
"otpVerificationRequestFailed": "OTP verification failed."
}
}
}
Note: you can add an optional "populateRelativeToRootForm":true property in props to able to populate fields in different blocks and section. Ensure to specify the full path for the targetKeye.g sectionkey.blockkey.fieldkey
Allowed Custom Properties
Allowed Validations
invalidGenericInput
invalidInput
The component automatically generates props and expressions in the formly e.g:
props.runAction and props.runningAction : These are used internally to track the api fetch initialisation and completion."props.runningAction": "field?.props?.runAction" : This is added internally to also trigger and monitor the props above.The component shows specific messages for each stage in the OTP request. These messages can be configured to override their default text by overriding the message keys in field.props
{
props: {
"key": "otpgeneric",
"type": "customotpdatafetch",
"props": {
"url": "/integration/v1/fetch/sync",
"label": "OTP Demo",
...
...
"messagePendingRequestOtp": "Request for an OTP to be sent to the recipient to proceed.",
"messageOtpRequired": "Please enter the OTP digits sent to the recipient.",
"messageOtpVerificationPending": "Please submit the OTP for verification to proceed.",
"messageDataFetchPending": "Please wait while the information is retrieved.",
"messageDataFetchComplete": "Information is retrieved. Data fetch successful."
...
...
}
...
...
}
}