Xamarin.Forms - Biometric Authentication With Fingerprint And Face ID

Introduction

 

Most mobile apps implement autentication to secure data access, and most of them now offer the so-called biometric authentication, which allows for authenticating the user via the fingerprint sensor and the face ID on those devices that have these capabilities.

 

In terms of Xamarin, this should be done with native code for each platform. However, a few plugins makes it easier to implement biometric authentication using cross-platform code. In this article I will explain how to implement biometric authentication in your Xamarin.Forms apps using the Biometric / Fingerprint plugin for Xamarin by Sven-Michael Stübe which I have used in my daily work and that I think to have the highest compatibility level with the most recent Xamarin.Forms releases.

 

Project setup

 

In Visual Studio 2019 (either Windows or Mac), create a new blank Xamarin.Forms project. When ready, first of all make sure you update all the NuGet packages in the solution. The second step is installing the Plugin.FingerPrint library, that looks like the following in the NuGet interface:

 

 

The next steps are specific to Android and iOS, so let's look at the steps in details.

 

Android setup

 

For Android, you will need to install the Xamarin.AndroidX.Migration NuGet packages, because the plugin relies on the latest versions of the platform libraries. Installing this package should also automatically install other required dependencies, and the full list of packages you must have in your Android project is the following:

 

 

Once you have installed all the required NuGet packages, you need to edit the app manifest, which you can find by opening the project properties. More specifically, you need to set the minimum version of Android to 6.0 and you need to specify the USE_FINGERPRINT permission as follows:

 

 

Since the plugin uses the built-in fingerprint user interface, you need to assign the current activity instance to the resolver of the library. This is accomplished in the OnCreate method inside the MainActivity.cs file, as follows (dont't forget to add a using Plugin.FingerPrint directive):

protected override void OnCreate(Bundle savedInstanceState)
 {
     CrossFingerprint.SetCurrentActivityResolver(() => this);

     TabLayoutResource = Resource.Layout.Tabbar;
     ToolbarResource = Resource.Layout.Toolbar;

     base.OnCreate(savedInstanceState);

     Xamarin.Essentials.Platform.Init(this, savedInstanceState);
     global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
     LoadApplication(new App());
 }

That's all for Android. Now let's look at iOS.

 

iOS Setup

 

For iOS, things are easier. The only thing you need to do is providing a usage description into the Info.plist file so that the library can handle the Face ID on iOS 11.3 and higher. The node you need to add is the following: 

<key>NSFaceIDUsageDescription</key>
<string>Authenticate with Face ID</string>

No additional steps are required and we can move on creating a sample UI.

 

Example of biometric authentication

 

In the cross-platform code, change the XAML of the MainPage.xaml file as follows (then simply adding a button), 

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="adsXFBiometricAuth.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Button Text="Biometric authentication" x:Name="AuthButton"
                Clicked="AuthButton_Clicked"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

Now let's first write the code for the Clicked event handler and then I will provide the appropriate comments,

private async void AuthButton_Clicked(object sender, EventArgs e)
{
    bool isFingerprintAvailable = await CrossFingerprint.Current.IsAvailableAsync(false);
    if (!isFingerprintAvailable)
    {
        await DisplayAlert("Error",
            "Biometric authentication is not available or is not configured.", "OK");
        return;
    }

    AuthenticationRequestConfiguration conf =
        new AuthenticationRequestConfiguration("Authentication",
        "Authenticate access to your personal data");

    var authResult = await CrossFingerprint.Current.AuthenticateAsync(conf);
    if (authResult.Authenticated)
    {
        //Success
        await DisplayAlert("Success", "Authentication succeeded", "OK");
    }
    else
    {
        await DisplayAlert("Error", "Authentication failed", "OK");
    }
}

The CrossFingerprint.Current singleton class provides methods and objects to handle authentication. The first method is IsAvailableAsync, which returns bool based on the availability of fingerprint sensors of the device. This check must be certainly done before calling the UI. If not available, the code shows a message.

 

The AuthenticationRequestConfiguration contains strings that will be passed to the built-in authentication UI to display the text you wish to the user. An instance of this class is passed to the AuthenticateAsync method, whose result is stored inside the FingerprintAuthenticationResult.Authenticated bool variable.

 

Based on the result (true or false), you can determine if the user has been successfully authenticated.

 

If you run the sample app and tap the button, you will see something like this on your Android phone, and simila result on iOS:

 

 

Conclusion

 

Biometric authentication is highly demanded on mobile apps, but you might need additional logic. For example, you might want to ensure your user has the option to also login using a password. This will be a life-saver for example in case the biometric hardware is not working properly.