Flutter

Initial Setup

The LoginID Flutter Plugin SDK enables you to add FIDO-certified authentication in your Flutter application without having to redirect the user to any pages outside your application.

For more robust functionality, it is likely that you will need to also leverage a Server SDK. The Server SDK makes requests to LoginID's API easier by leveraging your API Credential. Check out the LoginID Server SDK for a simplified integration.

The LoginID Flutter Plugin SDK is currently supprted on Flutter version >= 1.12.13+hotfix.5.. You will need additional setups for iOS and Android described below.

Create Application on the Dashboard

An application must be created on the LoginID Dashboard in order to correctly configure the React Native SDK.

Once logged into the dashboard, navigate to the Applications tab in the sidebar, select “Add Application,” then select Native.

In the resulting form, you must create a name for your application. We generate a Client ID and Base URL for your application, which you will use to configure the SDK.

After entering your application name, you will be prompted to create an API credential. If you have a client-side only application, please skip this step. Otherwise, create an API credential in order to make protected API calls.

note

An API service token must be included on all requests once an API credential is assigned to an application.

Add SDK to Existing Application

Add flutter login sdk to your pubspec.yaml dependencies

dependencies:
  flutter:
    sdk: flutter

  flutterpluginfidologinapi:
    hosted:
      name: flutterpluginfidologinapi
      url: https://flutter.dev.loginid.io
    version: 0.61.33

Additional Setup for Android build

Update your project's AndroidManifest.xml file to include the USE_FINGERPRINT permissions:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_FINGERPRINT"/>
<manifest>

This plugin requires the use of FragmentActivity instead of Activity. You need to change your MainActivity to use FlutterFragmentActivity instead of FlutterActivity.

note

Override of configureFlutterEngine is required as of Flutter version (1.12 - 1.17). However, this may not be required in future update

import io.flutter.embedding.android.FlutterFragmentActivity;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.embedding.engine.FlutterEngine;

public class MainActivity extends FlutterFragmentActivity {
    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }
}

import androidx.annotation.NonNull
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterFragmentActivity() {
   override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
     super.configureFlutterEngine(flutterEngine)
     GeneratedPluginRegistrant.registerWith(flutterEngine)
   }
}

danger

The following fix is required for devices running Android API <28. You will received the error: You need to use a Theme.AppCompat theme (or descendant) with this activity while using default flutter LaunchTheme. (found in flutter version 1.12 - 1.17)

To change default LaunchTheme go to your flutter app android/app/src/main/res/values/styles.xml

Change From:

     <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">

To dark theme biometric prompt:

    <style name="LaunchTheme" parent="Theme.AppCompat.NoActionBar">

Or to light theme biometric prompt:

    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">

Additional Setup for iOS build

For IOS build, add NSFaceIDUsageDescription (Privacy - Face ID Usage Description) key/value to app's info.plist. You can find the info.plist file in your project ios/Runner of your Flutter application.

This is a privacy description for accessing FaceID feature on iOS. On device with FaceID like iPhoneX + user will be prompted with permission dialog based on this description about why faceID is needed for the app.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSFaceIDUsageDescription</key>
<string>Privacy description regarding to usage of FaceID feature</string>
...
...
</plist>

Create an SDK Instance

First import Flutter plugin SDK

    import 'package:flutterpluginfidologinapi/flutterpluginfidologinapi.dart';

Configure clientId and baseURL obtained from the developer console. You should configure Fido login at the init state of your flutter application.

// example app
class _MyAppState extends State<MyApp> {

    @override
    void initState() {
        super.initState();
        initializeState();
    }

    // Fido login api plugin are asynchronous, so we initialize in an async method.
    Future<void> initializeState() async {
        String clientId = "032690b3-9bc4-4602-87c1-60c1fae782f2";
        String baseURL = "https://060ce487-b934-43d0-a925-b66e80c7532f.{{brand_native_api}}";
        await FPLoginApi.configure(clientId,baseURL);
        
        // ...
        // ...
    }
    // ...
    // ...
}

API Reference

Create an SDK Instance

// import sdk
import 'package:flutterpluginfidologinapi/flutterpluginfidologinapi.dart';
// ...
// ...
// example app
class _MyAppState extends State<MyApp> {

    @override
    void initState() {
        super.initState();
        initializeState();
    }

    // Fido login api plugin are asynchronous, so we initialize in an async method.
    Future<void> initializeState() async {
        String clientId = "032690b3-9bc4-4602-87c1-60c1fae782f2";
        String baseURL = "https://060ce487-b934-43d0-a925-b66e80c7532f.{{brand_native_api}}";
        await FPLoginApi.configure(clientId,baseURL);
        
        // ...
        // ...
    }
    // ...
    // ...
}

registerWithFido2

Sign up a user for FIDO authentication.

Arguments

static Future<RegisterResponse> registerWithFido2(String username, RegistrationOptions options) async

Where:

class RegistrationOptions {
  String authToken;
}

Parameter	Type	Required	Details
username	string	true	Username of the customer to be registered.
options	RegistrationOptions	optional	API Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

Returns

Example

Errors

registerWithPassword

Creates a user account with a password (not recommended). If leveraging this method, users should be migrating to use a FIDO authenticator, then have their password revoked.

Arguments

static Future<RegisterResponse> registerWithPassword(String username, String password, String confirmationPassword, RegistrationOptions options) async 

Where:

class RegistrationOptions {
  String authToken;
}

Parameter	Type	Required	Details
username	string	true	Username of the customer to be registered.
password	string	true	Password of the customer to be registered.
passwordConfirmation	string	true	It is best practice to have the customer enter their password twice before creating their profile to prevent typos. If desired, you could only require the end user to enter their password once and pass that password in both fields.
options	RegistrationOptions	optional	API Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

Returns

Example

authenticateWithFido2

Authenticate a previously registered user through FIDO2.

Arguments

static Future<AuthenticateResponse> authenticateWithFido2(String username, AuthenticationOptions options) async

Where:

class AuthenticationOptions {
  String authToken;
}

Parameter	Type	Required	Details
username	string	true	Username of the customer to be registered.
options	AuthenticationOptions	optional	API Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

Returns

Example

authenticateWithPassword

Authenticate a previously registered user using username and password.

Arguments

static Future<AuthenticateResponse> authenticateWithPassword(String username, String password, AuthenticationOptions options) async 

Where:

class AuthenticationOptions {
  String authToken;
}

Parameter	Type	Required	Details
username	string	true	Username of the customer to be authenticated.
password	string	true	Password of the customer to be authenticated.
options	AuthenticationOptions	optional	API Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

Returns

Example

confirmTransaction

Confirm the transaction of a text-based payload using registered Fido2 account.

Arguments

static Future<TransactionResponse> transactionConfirmation(String username, TransactionPayload payload, TransactionOptions options) async 

Where:

class TransactionPayload {
  String nonce;
  String data;
}

class TransactionOptions {
  String authToken;
}

Parameter	Type	Required	Details
username	string	true	Username of the customer to be authenticated.
payload	TransactionPayload	true	Require a client side generated nonce value and a text message to display back to user for confirmation.
options	AuthenticationOptions	optional	API Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

Returns

Example

isLoggedIn

Check if a given user is currently logged in.

Arguments

Returns

Example

logout

Arguments

Example