How to implement this plugin correctly?

[iamAbdulAhad3481]

I have a Cordova React project where I had to implement the login through fingerprint and facial recognition.
The requirement is that users can log in to the system with fingerprint or facial recognition. For this user have to enable fingerprint or facial recognition the dashboard and this detail will go to the endpoint where it will go to the server. and next time user just taps and it will get its details from the server and so he can log in to the system.

I may be sounding silly but after reading how to use the info I still didn't get how to implement it

`
window.Fingerprint.isAvailable((result) => {
console.log('FingerPrint available', result);

  window.Fingerprint.show({
    clientId: "Fingerprint-Demo",
    clientSecret: "password",
    disableBackup: false,
    confirmationRequired: true

  }, (result) => {
    console.log("Authentication successfull ", result);
  }, (error) => {
    console.log("Authentication failed ", error);
  }
  )

}, (error) => {
  console.log('Error occurred', error);
})

`
My Current platform versions
Android: 9.0
Ios: 5.1.1

There are few queries

1. What is clientId and how it will be generated?
2. What unique detail will be sent to the server so he can authenticate because I'm not getting any?

Problems
1: Fingerprint scan most of the time gives BIOMETRIC_AUTHENTICATION_FAILED = -102;
2: If a scan fails or success some time prompt closes abruptly.

Can anyone help me in summarizing the whole problem that how this can be achieved and all steps?
It would be a great help. Thanks in advance

[dahyui]

I just managed to implement this within my capacitor project with plugin version 4.0.2.

I was at first also confused with the clientId fields etc, but I went into the plugin code and found the FingerprintOptions interface which is:

export interface FingerprintOptions {
    /**
     * Title in biometric prompt (android only)
     * @default {APP_NAME} Biometric Sign On
     */
    title?: string;
    /**
     * Subtitle in biometric Prompt (android only)
     * @default null
     */
    subtitle?: string;
    /**
     * Description in biometric Prompt
     * @default null
     */
    description?: string;
    /**
     * Title of fallback button.
     * @default "Use Pin"
     */
    fallbackButtonTitle?: string;
    /**
     * Title for cancel button on Android
     * @default "Cancel"
     */
    cancelButtonTitle?: string;
    /**
     * Disable 'use backup' option.
     * @default false
     */
    disableBackup?: boolean;
}

This should answer your first question, not too sure about the second.

[iamAbdulAhad3481]

@dahyui Thanks for the reply
Can you please answer how the above flow will happen as you know fingerprint authentication works?
Is anyhow a server can be involved. If it's then what should be sent to the server.
But as biometric details are only secured within the device hardware. how I can authenticate the user?

Currently, I am doing this in a way that the user login the first time it enables biometric and prompts to open and I store the user email and password as a secret inside. Now next time when he goes to login I loaded the secret and send it to API. and log in within the app.
Now if the user trying to disable fingerprint enabling I trying to delete it but didn't,t worked. I try to update it by storing null or undefined in it but it opens a prompt again for updating the secret which is not required.

[aleGuardiola]

@AbdulAhad125 If you are using a token based authentication, the most secure thing u can do is to save in the secret a key to encrypt the refreshToken, so every time the user enters in yur app un decrypt it with the secret and request a new accessToken