Automatic OTP Verification In iOS Using Xamarin.Forms

Introduction

Passwords and security codes (OTP) are a modern necessity required for security and privacy but initially, iOS did not support the auto-read feature. iOS 12 eases the tedious aspects of account setup and sign-in by automatically suggesting and using strong, unique passwords and by bringing a one-time password to the QuickTypebar so users can fill them in one tap. Here, we’ll learn how to implement autofill OTP in our app using Xamarin.Forms.

Automatic OTP verification in iOS using Xamarin Forms

Message Format Rules

Security code only works with System keyboard. So, avoid using a custom keyboard.
Make sure the OTP message phrase has “code” or “passcode” and the message is a copied.

Create New Xamarin.Forms Application

In order to implement the Autofill OTP message, let’s start creating a new Xamarin.Forms project using Visual Studio 2019 or VS for Mac. When accessing Visual Studio 2019 Mac for the first time, you will come across a new interface for opening and creating the projects.

Open Visual Studio Mac >>Create New Project or select "Open Recent Application".

The available templates will appear on a Mac like below. Select Xamarin.Forms application with different mobile platforms.

Custom Control

The "OneTimeCode" type is available only specific to the iOS device, not in Android. So, create a Xamarin.Forms custom entry control in the .NET Standard library project, enabling developers to override the default native rendering with their own platform-specific customization.

using System;
using Xamarin.Forms;
namespace ReadOTPIOS
{
public class AutoFillControl : Entry
{
public AutoFillControl()
{
}
}
}

UI Design

The AutoFillControl control can be referenced in XAML in the .NET Standard library project by declaring a namespace for its location and using the namespace prefix on the control element. The following code example shows how the AutoFillControl control can be consumed by a XAML page.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ReadOTPIOS" x:Class="ReadOTPIOS.MainPage"
>
<StackLayout Orientation="Horizontal">
<Label
FontSize="Large"
HorizontalOptions="Center"
Text="Welcome to iOS 12 Read and Autofill OTP from SMS using Xamarin Forms" />
<local:AutoFillControl
FontSize="Large"
HorizontalOptions="Center"
Keyboard="Numeric"
Placeholder="XXXXXX" />
</StackLayout>
</ContentPage>

IOS Renderer

The following code example shows the custom renderer for the iOS platform. The call to the base class's OnElementChanged method instantiates an iOS UITextField control, with a reference to the control being assigned to the renderer's Control property.

To enable password autofill on a UITextField, we need to set the UItextContentTypeproperty as a OneTimeCode.

using ReadOTPIOS;
using ReadOTPIOS.iOS;
using UIKit;
[assembly: ExportRenderer(typeof(AutoFillControl), typeof(AutoFillRenderer))]
namespace ReadOTPIOS.iOS
{
public class AutoFillRenderer: EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
Control.TextContentType = UITextContentType.OneTimeCode;
}
}
}
}

The application source code is available on GitHub . The iOS simulator won’t allow you to send messages, so you need to try and deploy the application to an actual iOS device and send a message to the device for testing.

Summary

This article has demonstrated how to create a Read and Autofill OTP from SMS using Xamarin.Forms Entry control. I hope this article will help you. Please leave your feedback/query using the comments box, and if you like this article, please share it with your friends.