React Native Quickstart

Overview

In this quickstart, you’ll add Fingerprint to a new React Native project and identify the user’s device. The example use case in 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 frontend mobile integration. You’ll install the Fingerprint React Native SDK and initialize the client agent to generate a request ID to send to your backend for analysis. To see how to implement fraud prevention with this ID, continue to one of the backend quickstarts after completing this quickstart.

Estimated time: < 10 minutes

Prerequisites

Before you begin, make sure you have the following:

Node.js (v16 or later) and npm installed
React Native development environment set up (Expo not yet supported)
Android 5.0 (API level 21+) or higher
iOS 13+/tvOS 15+, Swift 5.7 or higher (stable releases)
Xcode 15.0 or higher
Your favorite code editor
Basic knowledge of React Native and JavaScript

This quickstart only covers the frontend setup. You’ll need a backend server to receive and process the device identification event to enable fraud detection. Check out one of the backend quickstarts after completing this quickstart.

1. Create a Fingerprint account and get your API key

Sign up for a free Fingerprint trial if you don’t already have an account.
After signing in, go to the API keys page in the dashboard.
Copy your public API key; you’ll need it to initialize the 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.

Create a new React Native project using the CLI:

Terminal

npx @react-native-community/cli init FingerprintQuickstart
cd FingerprintQuickstart

Install the project dependencies:

Terminal

npm install

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 client agent

To integrate Fingerprint into your React Native app, first add the Fingerprint React Native SDK to your project.

Install the Fingerprint React Native SDK:

Terminal

npm install @fingerprintjs/fingerprintjs-pro-react-native --save

Install iOS dependencies using CocoaPods:

Terminal

cd ios && pod install && cd ..

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.

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="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;

Replace 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.

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:

Import the hook

CreateAccountScreen.tsx

import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react-native";

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

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 frontend (which could be tampered with), you’ll send the requestId to your backend. 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

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

In your app, enter a username and password, then tap Create Account.
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

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 backend 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 backend. From there, your server can call the Fingerprint Events API to retrieve the full visitor information and make decisions. Check out these related resources:

Getting started

Web

Mobile

Server

Use Case Tutorials

Overview

Prerequisites

1. Create a Fingerprint account and get your API key

2. Set up your project

3. Install the client agent

4. Initialize the SDK

5. Create the account creation screen

6. Trigger visitor identification

7. Run and test the app

Next steps

​Overview

​Prerequisites

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

​2. Set up your project

​3. Install the client agent

​4. Initialize the SDK

​5. Create the account creation screen

​6. Trigger visitor identification

​7. Run and test the app

​Next steps

Overview

Prerequisites

1. Create a Fingerprint account and get your API key

2. Set up your project

3. Install the client agent

4. Initialize the SDK

5. Create the account creation screen

6. Trigger visitor identification

7. Run and test the app

Next steps