Use Fingerprint Authentication In A NativeScript Angular Application

More than a year ago, before I started using Angular, I had written a tutorial on the topic of fingerprint authentication in a core NativeScript application. Since then, I’m doing almost all of my mobile development with Angular which means that the previous article deserves an upgrade.

I recently released a mobile application called Solar Flare for Cloudflare that protects your account with device level fingerprint authentication. We’re going to see how I included fingerprint authentication, sometimes referred to as touch id, in a NativeScript with Angular application.

The basis of this example is going to be simple, just like seen in the vanilla NativeScript example. Going forward it is important to understand that not all devices have a fingerprint readers. While common for iOS devices, it is uncommon for Android. However, what we do will be valid for both platforms.

In the above animated image we have a button that will toggle fingerprint authentication. This toggle saves the information in local storage. If fingerprint authentication is enabled and it fails, an alert dialog will show.

Create a NativeScript with Angular Project for Android and iOS

While this project is going to be very simple in features, we want to keep it easy to understand. For this reason, we’re going to create a fresh project.

Assuming that you have the NativeScript CLI installed and configured, execute the following command:

tns create fingerprint-project --ng

The --ng flag in the above command indicates that we are creating an Angular project rather than a core NativeScript project.

Like with the previous example, this project will use the same NativeScript plugin created by Eddy Verbruggen. To install it, execute the following command from the command line:

tns plugin add nativescript-fingerprint-auth

The the project created and the plugin installed, we can focus on adding our application logic and XML user interface.

Including Fingerprint Authentication Logic

We’re going to be creating a single page application. If authentication is enabled, we’ll require it only when the application launches. A toggle within the application will decide whether or not it is enabled.

Open the project’s app/app.component.ts file and include the following TypeScript code:

import { Component, OnInit } from "@angular/core";
import { FingerprintAuth } from "nativescript-fingerprint-auth";
import * as ApplicationSettings from "application-settings";
import * as Dialogs from "ui/dialogs";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {

    private fingerprintAuth: FingerprintAuth;

    public constructor() {
        this.fingerprintAuth = new FingerprintAuth();
    }

    public ngOnInit() {
        let isFingerprintEnabled = ApplicationSettings.getBoolean("enabled", false);
        if(isFingerprintEnabled) {
            this.fingerprintAuth.available().then(available => {
                this.fingerprintAuth.verifyFingerprintWithCustomFallback({
                    fallbackMessage: "Enter Your Device Password",
                    message: "Authenticate via a Fingerprint"
                }).then(() => {
                    console.log("Fingerprint was OK");
                }, () => {
                    Dialogs.alert("The fingerprint was not valid");
                });
            });
        }
    }

    public toggleFingerprint() {
        let isFingerprintEnabled = ApplicationSettings.getBoolean("enabled", false);
        ApplicationSettings.setBoolean("enabled", !isFingerprintEnabled);
    }

}

In the ngOnInit method we check to see if we’ve previously enabled fingerprint authentication. If we’ve enabled it, we check to see if it is available on the device. If it is available, we start the verification process and if it fails we’ll throw an alert dialog.

In a production scenario, you’ll probably want to do something more realistic in a pass or fail result.

The toggle button will simply toggle the local storage value that is used in our ngOnInit Angular lifecycle event.

This brings us to the simplistic NativeScript XML that pairs with the Angular TypeScript class. Open the project’s app/app.component.html file and include the following HTML markup:

<ActionBar title="{N} Fingerprint Example"></ActionBar>
<StackLayout>
    <Button text="Toggle On / Off" class="btn btn-primary" (tap)="toggleFingerprint()"></Button>
</StackLayout>

The XML only consists of an action bar and a button where the button will toggle the authentication requirement.

Conclusion

You just saw how to add fingerprint authentication to your NativeScript mobile application built with Angular. This is an alternative to the vanilla NativeScript example that I had explored previously titled, Add Touch ID Authentication Support to Your NativeScript App.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.