Skip to main content

​
Overview

In this quickstart, you’ll add Fingerprint to a new React Native 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 React Native 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 React Native project. If you already have a project you want to use, you can skip to the next section.
  1. Create a new React Native project using the CLI:
Terminal
npx @react-native-community/cli init FingerprintQuickstart
cd FingerprintQuickstart
  1. Install the project dependencies:
Terminal
npm install
  1. Test that your project runs correctly, run:
Terminal
npx react-native start
And then in another terminal, for iOS run:
Terminal
npx react-native run-ios
or, for Android:
Terminal
npx react-native run-android
You should see the default React Native welcome screen on your simulator or device. If you have trouble running your app, make sure your development environment is properly set up and if using an emulator that it is turned on.

​
3. Install the Fingerprint SDK

To integrate Fingerprint into your React Native app, first add the SDK to your project.
  1. Install the Fingerprint React Native SDK:
Terminal
npm install @fingerprintjs/fingerprintjs-pro-react-native --save
  1. Install iOS dependencies using CocoaPods:
Terminal
cd ios && pod install && cd ..
  1. Add the Fingerprint Maven repository to your Android configuration. Open android/settings.gradle and add the repository to the dependencyResolutionManagement block:
android/settings.gradle
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        google()
        mavenCentral()
        maven {
            url("https://maven.fpregistry.io/releases")
        }
    }
}
If you’re using Gradle 6.0 or older, modify android/build.gradle instead:
android/build.gradle
allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url("https://maven.fpregistry.io/releases")
        }
    }
}

​
4. Initialize the SDK

Now that the SDK is installed, you can import and initialize it in your app.
  1. Open App.tsx and replace the entire file with the following code to set up the Fingerprint provider and basic UI structure:
App.tsx
import React from "react";
import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from "react-native";
import { FingerprintJsProProvider } from "@fingerprintjs/fingerprintjs-pro-react-native";
import CreateAccountScreen from "./CreateAccountScreen.tsx";

function App() {
  return (
    <FingerprintJsProProvider apiKey="<your-public-api-key>" region="us">
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" />
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <CreateAccountScreen />
        </ScrollView>
      </SafeAreaView>
    </FingerprintJsProProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

export default App;
  1. Replace <your-public-api-key> with your actual public API key from the Fingerprint dashboard. Note: For production, consider using React Native Config or environment variables to securely store your API key.

​
5. Create the account creation screen

Now you’ll create a simple account creation form that will trigger device identification when the user submits it.
  1. Create a new file called CreateAccountScreen.jsx in your project root with the following content:
CreateAccountScreen.tsx
import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Alert,
} from "react-native";
import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react-native";

const CreateAccountScreen = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const { isLoading, error, getData } = useVisitorData();

  const handleSubmit = async () => {
    if (!username.trim() || !password.trim()) {
      Alert.alert("Error", "Please fill in all fields");
      return;
    }

    try {
      const visitorData = await getData();
      const { visitorId, requestId } = visitorData;

      console.log("Visitor ID:", visitorId);
      console.log("Request ID:", requestId);

      Alert.alert(
        "Account Created!",
        `Request ID: ${requestId}\nCheck console for details.`,
        [{ text: "OK" }]
      );
    } catch (err) {
      console.error("Fingerprint error:", err);
      Alert.alert("Error", "Failed to identify device");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Create Account</Text>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Username</Text>
        <TextInput
          style={styles.input}
          value={username}
          onChangeText={setUsername}
          placeholder="Enter username"
          autoCapitalize="none"
          autoCorrect={false}
        />
      </View>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Password</Text>
        <TextInput
          style={styles.input}
          value={password}
          onChangeText={setPassword}
          placeholder="Enter password"
          secureTextEntry
          autoCapitalize="none"
          autoCorrect={false}
        />
      </View>

      <TouchableOpacity
        style={[styles.button, isLoading && styles.buttonDisabled]}
        onPress={handleSubmit}
        disabled={isLoading}
      >
        <Text style={styles.buttonText}>
          {isLoading ? "Creating Account..." : "Create Account"}
        </Text>
      </TouchableOpacity>

      {error && <Text style={styles.errorText}>Error: {error.message}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: "center",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#F35B22",
    textAlign: "center",
    marginBottom: 30,
  },
  inputContainer: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "500",
    marginBottom: 8,
    color: "#333",
  },
  input: {
    borderWidth: 1,
    borderColor: "#F35B22",
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  button: {
    backgroundColor: "#F35B22",
    padding: 15,
    borderRadius: 8,
    marginTop: 20,
  },
  buttonDisabled: {
    opacity: 0.6,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
  },
  errorText: {
    color: "red",
    textAlign: "center",
    marginTop: 10,
  },
});

export default CreateAccountScreen;

​
6. Trigger visitor identification

The code you just added uses Fingerprint’s useVisitorData hook to identify the visitor when they submit the form. Let’s break down the key parts:
  1. Import the hook
CreateAccountScreen.tsx
import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react-native";
  1. Initialize the hook
CreateAccountScreen.tsx
const { isLoading, error, getData } = useVisitorData();
This gives you:
  • getData(): A function to trigger visitor identification on demand
  • isLoading: A flag to monitor identification progress
  • error: Any errors that occur during identification
  1. Trigger identification on form submit
CreateAccountScreen.tsx
const handleSubmit = async () => {
  try {
    const visitorData = await getData();
    const { visitorId, requestId } = visitorData;

    console.log("Visitor ID:", visitorId);
    console.log("Request ID:", requestId);

    // const response = await fetch("https://your-api.com/create-account", {
    //   method: "POST",
    //   headers: {
    //     "Content-Type": "application/json",
    //   },
    //   body: JSON.stringify({
    //     username,
    //     password,
    //     requestId,
    //   }),
    // });
  } catch (err) {
    console.error("Fingerprint error:", err);
  }
};
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 to retrieve complete identification data, including the trusted visitor ID and other actionable insights like whether they are using a VPN or are a bot.

​
7. Run and test the app

  1. Start your development server and build your app:
Terminal
npx react-native start
For iOS:
Terminal
npx react-native run-ios
For Android:
Terminal
npx react-native run-android
  1. In your app, enter a username and password, then tap Create Account.
  2. You should see an alert showing the request ID, and in your development console (Metro bundler terminal), you should see output similar to:
Output
Visitor ID: JkLmNoPqRsTuVwXyZaBc
Request ID: 1234566477745.abc1GS
  1. If you’re using a physical device, you can also use remote debugging tools like Flipper or React Native Debugger to view console logs.
You’re now successfully identifying the device and capturing the request ID, 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: