Biometrics - Flutter

Get started

The Weavr Flutter SDK helps you add Weavr Biometric authentication to your flutter app. Before you can use Weavr flutter SDK in your mobile app you must acquire all the required keys from the Embedder portal. You can find your UI key on the API Settings screen in the Weavr: portal. Please add the values in a configuration file or wherever convenient you can store securely in your app.

UI_KEY= "Your UI key goes here"
API_KEY= "Your API key goes here"
OWT_PROFILE_ID= "Your profile id goes here"
SEND_PROFILE_ID= "Your send profile "

Initialize SDK

Optionally, you can Import the libraries wherever you use the components like

import 'package:weavr_components'

And, initialize the Weavr component SDK by,

WeavrComponents().uxComponentsInitialise(ENV.sandbox, uiKey!);
WeavrComponents.psa.initialize(ENV.sandbox, uiKey);

Once you have installed and initialized the SDK you need to include the components in your app. This can be achieved either by importing the components directly or by adding the components via code. Using the Weavr secure password components requires you to create tokens. You can also group components to facilitate data matching or tokenization. This can be achieved either by importing the component directly by adding the Secure Passcode Field component to your app.

late SecureEditTextController _secureEditTextController;

var secureEditText = SecurePasscodeEditText(
   textColor: Colors.red,
   placeholderColor: Colors.grey,
   hintColor: Colors.blue,
   textSize: 14,
   font: "weavr_font", // pass the font name here

   onTextViewCreated: (SecureEditTextController controller) {
      _secureEditTextController = controller;
   },
);

Embed the Passcode Component on screen

....
Container(
   height: 48,
   padding: const EdgeInsets.symmetric(horizontal: 8),
   child: secureEditText,
),....

Create a token by,

_secureEditTextController.createToken()
   .then((String text) {
      tokenisedPasscode = text;
   });

At this point, If you hit flutter run lib/main.dart , you can see the password mobile component in your device/Simulator

Enrol a device

To enrol a device, Weavr secure login is required. It then enables re-enrolment of the device to use biometric authentication.
A customer gets authenticated via email/passcode login and receive non-biometric auth token via Weavr secured login until Jan 31, 2024
Afterwards, secure login is used to trigger a webhook, which then provides the auth token.
Non-biometric auth token must be exchanged for a biometric access token.
It then provides access to biometric features such as renew expiration time, unique signatures etc,.

To perform Weavr secure login,

var res = await WeavrComponents().weavrSecureLogin(
   _textEditingController.value.text, tokenizedPassword!);

Token exchange

Exchange the token shared by Weavr webhook after weavrSecureLogin by

final response = await WeavrComponents().setUserToken(authToken);

iOS only: APNS to FCM conversion

static Future<String> convertAPNSToken(String apnsToken) async {
    String? googleAPIKEY = dotenv.env['GOOGLE_API_KEY'];
    return WeavrComponents.psa
        .convertAPNSTokenToFirebaseRegistrationToken(
            "io.weavr.weavrComponentsExample", apnsToken, googleAPIKEY!, true);
}

WeavrComponents.psa.startBiometricLogin(context,
       onSuccess: (res) async {
   await TokenService().getToken((tokenObj) {
       Fluttertoast.showToast(
           msg: tokenObj.token, backgroundColor: Colors.grey);
   }, (errorMessage) => debugPrint(errorMessage));
   }, onFailure: (err) {
   Fluttertoast.showToast(
       msg: err.toString(), backgroundColor: Colors.grey);
   }, onForgotPasscode: (forgotPasscodeMessage) {
   Fluttertoast.showToast(
       msg: forgotPasscodeMessage.toString(),
       backgroundColor: Colors.grey);
});

### Initiate a challenge – Receive a push notification
Considering a push notification has been requested or sent to a mobile device, that is counted as a challenge.  Please refer to the documentation [Weavr:Multi](../start/multi-welcome.md).
To start a challenge for biometric push notification,

```dart
WeavrComponents.psa.startChallenge(context, message.data, appPnsToken,
   onSuccess: (res) {
 Fluttertoast.showToast(
     msg: res.toString(), backgroundColor: Colors.grey);
}, onFailure: (err) {
 debugPrint(err.toString());
});

You can find the full implementation in the code example

Biometric validation

Check device has been enrolled

WeavrComponents.psa.isPSAEnrolled(null, null);

Start enrolment

Once, token has been exchanged and push notification enabled, you can use Firebase token as device token for enrolment. After completing login, you need to call startEnrolment to register the user’s device

WeavrComponents.psa.startEnrollment(
 context: context,
 token: userToken!,
 appPnsToken: appPnsToken,
 onSuccess: (res) {
      Fluttertoast.showToast(
      msg: res.toString(),
      backgroundColor: Colors.grey);
     },
   onFailure: (err) {
  debugPrint(err.toString());
});

Un-enrolment

Un-enrolment is required where a user is going to stop using one device, and any other user cannot use this device for Biometric auth in your app until it has been unenrolled from the previous user, so the different user can enrol with it. To un-enrol a user from a previous enrolled device, the user needs to log-in and enrol for biometrics on a new device. In this case, the previous device is automatically unenrolled

Auto Un-Enrolment: to un-enrol a user from a previously enrolled device, the user needs to log-in and enrol biometrics on a new device. In this case, the previous device is automatically unenrolled. Alternatively, you can use Weavr Multi login API to un-enrol the devices via Weavr:Un-Enrolment endpoint.

Android specific setup

In order to have the SDK correctly setup on Android, you are required to override the

__configureFlutterEngine(flutterEngine: FlutterEngine)__

method inside your MainActivity class as shown below.

package com.okaythis.okay_flutter_plugin_example

import com.okaythis.okay_flutter_plugin.OkayFlutterPlugin
import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterFragmentActivity() {
   override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
       super.configureFlutterEngine(flutterEngine)
       OkayFlutterPlugin.registerNativeView(flutterEngine)
   }
}

Example - Initialise challenge full code

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      RemoteNotification? notification = message.notification;
      AndroidNotification? android = message.notification?.android;

      if (Platform.isIOS) {
            NetworkManager.convertAPNSToken(appPnsToken!).then((res) {
                  appPnsToken = res;
                  WeavrComponents.psa.startChallenge(context, message.data, appPnsToken,
                        onSuccess: (res) {
                              Fluttertoast.showToast(
                              msg: res.toString(), backgroundColor: Colors.grey);
                        },
                        onFailure: (err) {
                              debugPrint(err.toString());
                        });
            });
      } else {
            WeavrComponents.psa.startChallenge(context, message.data, appPnsToken,
                  onSuccess: (res) {
                        Fluttertoast.showToast(msg: res.toString(), backgroundColor: Colors.grey);
                  },
                  onFailure: (err) {
                        debugPrint(err.toString());
                  });
      }
});

Get started​

Initialize SDK​

Enrol a device​

Token exchange​

iOS only: APNS to FCM conversion​

Biometric login​

Biometric validation​

Check device has been enrolled​

Start enrolment​

Un-enrolment​

Android specific setup​

Example - Initialise challenge full code​