Skip to main content

​
Overview

In this quickstart, you’ll add Fingerprint to a new Flutter project and identify the user’s device. The example use case we’ll use for this quickstart is stopping new account fraud, where attackers create multiple fake accounts to abuse promotions, exploit systems, or evade bans. However, the steps you’ll follow apply to most use cases. By identifying the device behind each sign-up attempt, login, or transaction, you can flag and block suspicious users early. This guide focuses on the front-end mobile integration. You’ll install the Fingerprint Flutter SDK and initialize the client to generate a request ID to send to your back end for analysis. To see how to implement fraud prevention with this ID, continue to one of our back-end quickstarts after completing this quickstart.
Estimated time: < 10 minutes

​
Prerequisites

Before you begin, make sure you have the following:
This quickstart only covers the front-end setup. You’ll need a back-end server to receive and process the device identification event to enable fraud detection. Check out one of our back-end quickstarts after completing this quickstart.

​
1. Create a Fingerprint account and get your API key

  1. Sign up for a free Fingerprint trial if you don’t already have an account.
  2. After signing in, go to the API keys page in the dashboard.
  3. Copy your public API key; you’ll need it to initialize the Fingerprint client agent.

​
2. Set up your project

To get started, create a new Flutter project. If you already have a project you want to use, you can skip to the next section.
  1. Open your terminal and run:
Terminal
flutter create fingerprint_flutter_quickstart
cd fingerprint_quickstart
  1. Open the project in your preferred editor (VS Code, Android Studio, etc.).

​
3. Install the Fingerprint SDK

To integrate Fingerprint into your Flutter app, add the SDK to your project.
  1. Open pubspec.yaml and add the Fingerprint SDK and logger dependencies:
pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  fpjs_pro_plugin: ^4.0.1
  logger: ^2.0.2+1
The logger package provides better formatted console output with timestamps and log levels, making it easier to debug and see results.
  1. Run flutter pub get to install the dependencies.
  2. For web support, add the JavaScript agent loader to web/index.html inside the <head> tag:
web/index.html
<head>
  <!-- Other head content -->
  <script src="assets/packages/fpjs_pro_plugin/web/index.js" defer></script>
</head>
  1. For iOS builds, update the minimum deployment target to iOS 13.0 or higher.
  2. Open ios/Podfile and update the platform line at the top:
ios/Podfile
# Update this line
platform :ios, '13.0'
  1. For Android builds, you may need to install and configure the NDK. If you encounter build issues:
  • Install NDK version 27.0.12077973 through Android Studio (Tools > SDK Manager > SDK Tools > NDK)
  • Set the NDK version in android/app/build.gradle.kts:
android/app/build.gradle.kts
android {
    ndkVersion "27.0.12077973"
    // ... other configuration
}

​
4. Initialize the SDK

Now that the SDK is installed, you can import and initialize it in your app.
  1. Open lib/main.dart, add the following imports, and initialize the logger:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:fpjs_pro_plugin/fpjs_pro_plugin.dart';
import 'package:fpjs_pro_plugin/error.dart';
import 'package:fpjs_pro_plugin/region.dart';
import 'package:logger/logger.dart';

var logger = Logger();
  1. Initialize the Fingerprint client in your main() function before runApp(), make sure your main() function is async:
lib/main.dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await FpjsProPlugin.initFpjs(
    '<your-public-api-key>', // Replace with your actual API key
    region: Region.us, // Ensure this matches your workspace region
  );

  runApp(const MyApp());
}
  1. Replace <your-public-api-key> with your actual public API key from the Fingerprint dashboard. Make sure the correct region is being used to match your workspace.

​
5. Trigger visitor identification

Now that the Fingerprint client is initialized, you can identify the visitor when needed. In this case, that’s when the user taps a Create Account button. When making the visitor identification request, you will receive the visitorId as well as a requestId. Instead of using the visitorId returned directly on the front end (which could be tampered with), you’ll send the requestId to your back end. This ID is unique to each identification event. Your server can then use the Fingerprint Events API and retrieve the complete identification data, including the trusted visitor ID and other actionable insights like whether they are using a VPN or are a bot.

​
Add a basic sign-up UI

  1. Create a simple account creation form in your build method of you MyApp class:
lib/main.dart
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Fingerprint Quickstart'),
        backgroundColor: const Color(0xFFF35B22),
        foregroundColor: Colors.white,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Create account',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 32),
            const TextField(
              decoration: InputDecoration(
                labelText: 'Username',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            const TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed:_createAccount,
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFFF35B22),
                foregroundColor: Colors.white,
              ),
              child: const Text('Create Account'),
            ),
          ],
        ),
      ),
    ),
  );
}
  1. Now add the _createAccount method that calls Fingerprint’s getVisitorData method. This will capture the device’s details and return a requestId, which you can then send to your back end for your fraud detection logic:
lib/main.dart
Future<void> _createAccount() async {
  try {
    final visitorData = await FpjsProPlugin.getVisitorData();
    final requestId = visitorData.requestId;

    logger.i('Request ID: $requestId');
    // Send this request ID to your backend along with username/password
    // final response = await http.post(
    //   Uri.parse('https://yourserver.com/api/create-account'),
    //   headers: {'Content-Type': 'application/json'},
    //   body: jsonEncode({
    //     'username': username,
    //     'password': password,
    //     'requestId': requestId,
    //   }),
    // );

  } on FingerprintProError catch (e) {
    logger.e('Fingerprint error: ${e.message}');
  }
}

​
6. Run the app

  1. If your Flutter app isn’t already running, start it with flutter run
  2. Choose your target device:
    • For mobile: Use a connected physical device for best results (simulators/emulators may have network connectivity issues)
    • For web: Run flutter build web then flutter run -d chrome to test in the browser
  3. If testing on web and you have any ad blockers, turn them off for localhost. For production Flutter web apps, view our documentation to learn how to protect your Fingerprint implementation from ad blockers.
  4. Enter a username and password, then click Create Account.
  5. Check your console output (in your IDE or terminal) and you should see the request ID in the formatted logger output:
Output
Request ID: 1234566477745.abc1GS
You’re now successfully identifying the device and capturing the request ID and are ready to send it to your back end for further fraud prevention logic!

​
Next steps

To use the identification data for fraud detection (like blocking repeat fake account creation attempts), you’ll need to send the requestId to your back end. From there, your server can call the Fingerprint Events API to retrieve the full visitor information and make decisions. Check out these related resources: