In this article, we will analyze how to use the Telerik UI for ASP.NET Core OTPInput control, which allows users to enter a one-time password (OTP) during multi-factor authentication in an intuitive manner. Let’s get started!
The purpose of this control is to provide enhanced security to applications while offering a pleasant user experience when requesting a one-time password. It can be used both as a TagHelper and with an HtmlHelper, which are wrappers for the Kendo UI OTPInput widget.
Some use cases where we could utilize this control include (among many other cases):
- Multi-factor authentication
- Verification during password reset
- Transaction authorization
- Access to restricted areas on websites
This control can be customized in terms of appearance, input type, number of elements to request, groups in the input and even the type of virtual keyboard that should be displayed if viewed from a mobile device.
Imagine we are creating a page to validate a six-digit OTP code. One of the first things you might think of to create it would be to use an input tag with some preset values, such as a maximum length of six characters.
If you want to replicate the demonstrations in this article, you should create a new project using the ASP.NET Core Web App (Razor Pages) template. You should also make sure to follow the Telerik UI for ASP.NET Core controls installation guide to have the environment ready and set up.
Once that is done, replace the content of the index.cshtml file with the following:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<style>
.verification-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5rem;
}
.verification-form {
max-width: 320px;
gap: 1.5rem;
width: 100%;
padding: 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.verification-form input {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
margin-bottom: 1.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
.verification-form kendo-button {
width: 100%;
font-size: 1rem;
}
</style>
<div class="verification-container">
<h2>Two-Factor Verification</h2>
<p>Please enter the 6-digit code sent to your email:</p>
<form asp-action="VerifyCode" method="post" class="verification-form">
<input type="text" name="otpCode" maxlength="6" placeholder="Enter the code" />
<kendo-button name="btnVerify" type="submit" theme-color="ThemeColor.Primary">
Verify
</kendo-button>
</form>
</div>
The above code specifies a form section within which we add an input and a kendo-button to simulate the submission of the code. The execution of the code looks like this:
You can see that with this approach we face several issues:
- The user can enter any character.
- If the OTP code were grouped, the interface is not intuitive for the user to recognize them.
- It is likely that on mobile devices, the virtual keyboard that appears is not the correct one.
In these cases, the ASP.NET Core OTPInput control from Telerik is the best option as it easily addresses all these problems, as we will see next.
To replace the input element with an OTPInput, we need to consider the type of project we are building to choose between using a HtmlHelper, TagHelper or even pure Html. In my case, since the example is based on Razor pages, I will be using TagHelper elements. Given that, the simplest creation of the control would look as follows:
<form asp-action="VerifyCode" method="post" class="verification-form">
<kendo-otpinput name="optCode" items="6"></kendo-otpinput>
<kendo-button name="btnVerify" type="submit" theme-color="ThemeColor.Primary">
Verify
</kendo-button>
</form>
The result of the change is as follows:
We can see that the definition of the control is quite straightforward, showcasing the new component in the graphical interface with a modern, aesthetic and functional design. The control automatically centers the focus on the corresponding box, providing an intuitive user experience.
Moreover, through the use of the items configuration, it has been very easy to indicate the number of characters the user needs to fill in, which results in a control on the UI with the ideal layout so users know at all times which item they are filling in and how many are left.
Another attribute we have assigned to the control is name, which is mandatory as it sets the HTML attributes id and name behind the scenes.
One issue we can see in the previous image is that the user can still enter any type of character in the text boxes. Fortunately, the control allows us to change this easily, which we will see next.
We can change the data type entered into the control by using the type configuration, to which we can assign one of the following values:
OTPType.Number: Allows entry only of numeric charactersOTPType.Text: Allows entry of characters in generalOTPType.Password: Allows converting characters to a password format
In our case, the most convenient method to validate an authentication code will be to limit the input to numeric values, so the definition would look as follows:
<form asp-action="VerifyCode" method="post" class="verification-form">
<kendo-otpinput name="optCode" items="6" type="OTPType.Number"></kendo-otpinput>
...
</form>
When running the application, we obtain the following result:
In the previous image, you can notice that when trying to enter a non-numeric character, the user receives immediate feedback indicating that the character is invalid.
If the OTP code to be entered requires some sort of visual grouping due to its length, it is very easy to create groups of items and even add separators between them. For example, let’s assume that the OTP code is composed of 8 digits, grouped as 3-2-3 items. To achieve the above grouping, the items configuration should be used as follows:
<form asp-action="VerifyCode" method="post" class="verification-form">
<kendo-otpinput name="optCode" type="OTPType.Number">
<otpinput-items>
<item group-length="3"/>
<item group-length="2" />
<item group-length="3" />
</otpinput-items>
</kendo-otpinput>
...
</form>
The result of the above code can be seen in the following image:
In the image, the creation of groups according to the specified configuration is visible.
Likewise, if you need to show the separation between the groups better, it is possible to add visual separators using the separator configuration as shown below:
<form asp-action="VerifyCode" method="post" class="verification-form">
<kendo-otpinput name="optCode" type="OTPType.Number" separator="-">
<otpinput-items>
<item group-length="3"/>
<item group-length="2" />
<item group-length="3" />
</otpinput-items>
</kendo-otpinput>
...
</form>
This provides a better representation of the groups, as shown below:
If you need to customize the OTPInput to fit the visual design of your application, the series of customization settings will allow you to modify the size, color application and border radius of the component.
To change the size, simply use the size option with one of the following values:
ComponentSize.SmallComponentSize.MediumComponentSize.LargeComponentSize.None
If you want to change how the color is applied to the component, you can use the fill-mode option with one of these values:
FillMode.SolidFillMode.OutlineFillMode.FlatFillMode.None
Lastly, you can modify the rounded option to change the border radius of the component by assigning one of the following values:
Rounded.SmallRounded.MediumRounded.LargeRounded.FullRounded.None
In the following example, the usage of all these properties is demonstrated:
<kendo-otpinput name="optCode" type="OTPType.Number" separator="-"
size="ComponentSize.Large"
fill-mode="FillMode.Solid"
rounded="Rounded.Full">
...
</kendo-otpinput>
The above code results in the control being displayed as follows:
Finally, it is possible to specify which keyboard should appear when using a mobile device. By default, when the application is run, the virtual keyboard that appears is the one shown in the following image:
If you want to change the keyboard, you can use the input-mode option by assigning any valid HTML5 input mode, for example, text, numeric, tel, etc. In the following example, I specified that the keyboard to be displayed is the numeric one:
<kendo-otpinput name="optCode" type="OTPType.Number" separator="-"
size="ComponentSize.Large"
fill-mode="FillMode.Solid"
rounded="Rounded.Full"
input-mode="numeric">
...
</kendo-otpinput>
The previous change shows the numeric keyboard when starting to fill in the OTPInput control:
The OTPInput control provides the Change event that allows you to control the behavior of the component. For example, you could validate whether all items have been filled before enabling a submit button. You can accomplish this through a Handler Name or a Template Delegate. Below is an example of its usage:
<div class="verification-container">
<h2>Two-Factor Verification</h2>
<p>Please enter the 6-digit code sent to your email:</p>
<form asp-action="VerifyCode" method="post" class="verification-form">
<kendo-otpinput ... on-change="onChange">
...
</kendo-otpinput>
<kendo-button name="btnVerify" type="submit" theme-color="ThemeColor.Primary">
Verify
</kendo-button>
</form>
</div>
<script>
function onChange() {
console.log("Change :: " + this.value());
}
</script>
When executing the above code, we obtain the following result:
Undoubtedly, this event can greatly assist us in performing pre-validation before submitting the information.
Conclusion
Throughout this article, you have learned what the Telerik UI for ASP.NET Core OTP control is and some use cases. You have also learned how to configure it to meet your business and design needs through customization settings and item adjustments. Now it’s your turn to enhance the security of your applications by implementing it when you need to validate one-time passwords.
If you haven’t already begun using Telerik UI for ASP.NET Core, it comes with a free 30-day trial:
Try Now
Log in
