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:
 
Xamarin.Forms - Biometric Authentication With Fingerprint And Face ID
 
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:
 
Xamarin.Forms - Biometric Authentication With Fingerprint And Face ID
 
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:
 
Xamarin.Forms - Biometric Authentication With Fingerprint And Face ID
 
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):
  1. protected override void OnCreate(Bundle savedInstanceState)  
  2.  {  
  3.      CrossFingerprint.SetCurrentActivityResolver(() => this);  
  4.   
  5.      TabLayoutResource = Resource.Layout.Tabbar;  
  6.      ToolbarResource = Resource.Layout.Toolbar;  
  7.   
  8.      base.OnCreate(savedInstanceState);  
  9.   
  10.      Xamarin.Essentials.Platform.Init(this, savedInstanceState);  
  11.      global::Xamarin.Forms.Forms.Init(this, savedInstanceState);  
  12.      LoadApplication(new App());  
  13.  }  
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: 
  1. <key>NSFaceIDUsageDescription</key>  
  2. <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), 
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.              mc:Ignorable="d"    
  7.              x:Class="adsXFBiometricAuth.MainPage">    
  8.     
  9.     <StackLayout>    
  10.         <!-- Place new controls here -->    
  11.         <Button Text="Biometric authentication" x:Name="AuthButton"    
  12.                 Clicked="AuthButton_Clicked"    
  13.            HorizontalOptions="Center"    
  14.            VerticalOptions="CenterAndExpand" />    
  15.     </StackLayout>    
  16.     
  17. </ContentPage>     
Now let's first write the code for the Clicked event handler and then I will provide the appropriate comments,
  1. private async void AuthButton_Clicked(object sender, EventArgs e)  
  2. {  
  3.     bool isFingerprintAvailable = await CrossFingerprint.Current.IsAvailableAsync(false);  
  4.     if (!isFingerprintAvailable)  
  5.     {  
  6.         await DisplayAlert("Error",   
  7.             "Biometric authentication is not available or is not configured.""OK");  
  8.         return;  
  9.     }  
  10.   
  11.     AuthenticationRequestConfiguration conf =   
  12.         new AuthenticationRequestConfiguration("Authentication",   
  13.         "Authenticate access to your personal data");  
  14.   
  15.     var authResult = await CrossFingerprint.Current.AuthenticateAsync(conf);  
  16.     if (authResult.Authenticated)  
  17.     {  
  18.         //Success  
  19.         await DisplayAlert("Success""Authentication succeeded""OK");                  
  20.     }  
  21.     else  
  22.     {  
  23.         await DisplayAlert("Error""Authentication failed""OK");  
  24.     }  
  25. }  
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:
 
Xamarin.Forms - Biometric Authentication With Fingerprint And Face ID
 

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.