@phemium-costaisa/fingerprint-auth/README.md

Automatic plugin to work with FaceID and TouchID authentication

# 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:

```typescript
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:
```typescript
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:

```typescript
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:

```typescript
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

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

2. To configure Biometric:

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

3. Profile page switches:

```typescript
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);
    }
}
```