Phemium Fingerprint Auth

Description

Package of component, pipe and service to handle Fingerprint authentication on Angular apps.

Installation

Run npm i -S @phemium-costaisa/fingerprint-auth

Configuration

1. Add the FingerprintAuthModule.forRoot() to app.module.ts:

import { FingerprintAuthModule } from 'fingerprint-auth';

@NgModule({
  imports: [
    FingerprintAuthModule.forRoot({
      mobile: environment.platform === 'mobile'
    })
  ]
})
export class AppModule {}

2. Add FingerprintAuthModule.forChild() where the biometricLoginActive needs to be used:

import { FingerprintAuthModule } from 'fingerprint-auth';

@NgModule({
  imports: [
    FingerprintAuthModule.forChild()
  ]
})
export class LoginMobilePageModule {}

Biometric Activator component usage

To use the <app-biometric-activador> just import the BiometricActivator component in the module you need it.

But, if you need to make it as routing page, you must create a Wrapper module for it, like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BiometricActivator } from 'fingerprint-auth';

const routes: Routes = [
  {
    path: '',
    component: BiometricActivator
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class BiometricActivatorPageRoutingModule {}

FingerprintService usage

Just import the FingerprintService wherever you need it:

import { FingerprintService } from 'fingerprint-auth';

@Component()
export class MyComponent {
  constructor(
    private fingerprintService: FingerprintService
  ) { }
}

The FingerprintService is well documented in-code, but I'll give a few examples:

1. To login

if (await this.fingerprintService.checkIfNeedsBiometric(email)) {
    this.fingerprintService.showBiometricActivator(email, password, 'dashboard');
}

2. To configure Biometric:

this.fingerprintService.showBiometricPrompt(user).then(result => {
    this.login(result.user, result.password, true);
});

3. Profile page switches:

biometricFace = new FormControl(false);
biometricTouch = new FormControl(false);

ngOnInit() {
    this.fingerprintService.isBiometricActive(this.userService.user.email, 'face').then(active => this.biometricFace.setValue(active, { emitEvent: false }));
      this.fingerprintService.isBiometricActive(this.userService.user.email, 'touch').then(active => this.biometricTouch.setValue(active, { emitEvent: false }));
      this.fingerprintService.retrieveDeviceBiometrics().then(biometrics => {
        if (biometrics.face || biometrics.touch) {
          this.showBiometric = true;
        }
      })
    }
    this.biometricFace.valueChanges.subscribe(enable => this.biometricChange('face', enable));
    this.biometricTouch.valueChanges.subscribe(enable => this.biometricChange('touch', enable));
}

async biometricChange(biometricType: keyof BiometricsAvailable, enabled: boolean) {
    if (enabled) {
      await this.fingerprintService.clearBiometricData(this.userService.user.email, biometricType);
    } else {
      await this.fingerprintService.disableBiometricData(this.userService.user.email, biometricType);
    }
}