Skip to main content

Get Started - 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.60.43

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)
}
}
warning

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);
// ...
// ...
}
// ...
// ...
}