How to Use Maui OTP Input for SMS-Based Authentication

Using .NET MAUI OTP Input for SMS-based authentication can significantly enhance security within your application. This guide provides a step-by-step explanation of implementing and managing OTP input using MAUI.

Here’s an example approach:

XAML:

<StackLayout >
    <StackLayout Padding="30" Spacing="20" x:Name="Loginpage">
        <Label Text="Login" FontSize="24" HorizontalOptions="Center" />
        <Entry x:Name="EmailEntry" Placeholder="Enter your email" Keyboard="Email" WidthRequest="250"/>
        <Entry x:Name="PasswordEntry" Placeholder="Enter your password" IsPassword="True" WidthRequest="250"/>
        <Button Text="Login" Clicked="OnLoginClicked" WidthRequest="150"/>
    </StackLayout>
    <StackLayout x:Name="ValidationPage" IsVisible="False" HorizontalOptions="Center" Spacing="25">
        <syncfusion:SfOtpInput x:Name="OtpInput" Length="6" />
        <Button x:Name="ValidateButton" Text="Submit" Clicked="OnSubmitClicked" WidthRequest="150"/>
     </StackLayout>
</StackLayout>

C#:

namespace OtpInput
{
   public partial class MainPage : ContentPage
   {
       private string generatedOtp;

       public MainPage()
       {
           InitializeComponent();
       }

       private async void OnLoginClicked(object sender, EventArgs e)
       {
           string email = EmailEntry.Text;
           string password = PasswordEntry.Text;

           if (!string.IsNullOrWhiteSpace(email) && !string.IsNullOrWhiteSpace(password))
           {
               generatedOtp = GenerateRandomOtp();
               await DisplayAlert("OTP Sent", $"Your OTP is: {generatedOtp}", "Copy"); // Use for demonstration
               await Clipboard.Default.SetTextAsync(generatedOtp);

               // Make SfOtpInput visible for OTP entry
               Loginpage.IsVisible = false;
               ValidationPage.IsVisible = true; ;
           }
           else
           {
               await DisplayAlert("Error", "Please enter both email and password.", "OK");
           }
       }

       private string GenerateRandomOtp()
       {
           Random random = new Random();
           int otp = random.Next(100000, 999999); // Generates a random 6-digit number
           return otp.ToString();
       }

       private async void OnSubmitClicked(object sender, EventArgs e)
       {
           string enteredOtp = OtpInput.Value;
           if (!string.IsNullOrWhiteSpace(enteredOtp) && enteredOtp.Length == 6)
           {
               ValidateOtp(enteredOtp);
           }
           else
           {
               await DisplayAlert("Error", "Invalid OTP. Please ensure it is 6 digits long.", "OK");
           }
       }

       private async void ValidateOtp(string otp)
       {
           if (otp == generatedOtp)
           {
               await DisplayAlert("Success", "OTP verified successfully!", "OK");
           }
           else
           {
               await DisplayAlert("Error", "Incorrect OTP. Please try again.", "OK");
           }
       }

   }
}

Output

You can download the complete sample from GitHub.

Conclusion

We hope you found this guide useful in implementing and verifying OTP input for SMS-based authentication using MAUI. For more features, visit our .NET MAUI OTP Input feature tour page. You can also explore our .NET MAUI OTP Input documentation to understand better how to present and manipulate data.

Please let us know in the comments section below if you have any queries or need clarification. Alternatively, you can contact us by creating a support ticket. We are always happy to assist!