Merge pull request #186 from fingerprintjs/feat/INTER-1228-expo-support

[INTER-1228] Expo support - pre-release PR

Author: TheUnderScorer

.github/workflows/e2e-tests.yml

@@ -14,7 +14,7 @@ jobs:
       react-native-matrix: ${{ steps.set-matrix.outputs.matrix }}
     steps:
       - id: set-matrix
-        run: echo "matrix=['local', '0.73', '0.74', '0.75', '0.76', '0.78', '0.79']" >> $GITHUB_OUTPUT
+        run: echo "matrix=['local', '0.73', '0.74', '0.75', '0.76', '0.78', '0.79', '0.80', '0.81']" >> $GITHUB_OUTPUT
 
   build-android:
     strategy:
@@ -343,4 +343,43 @@ jobs:
         name: Delete build artifact
         if: success()
         with:
-          name: ios-app-release-${{ matrix.react-native }}
+          name: ios-app-release-${{ matrix.react-native }}
+  
+  e2e-tests-web:
+    name: Web E2E tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: 22.x
+
+      - run: yarn install
+
+      - run: yarn build && rm -rf node_modules
+        if: github.event_name != 'release'
+
+      - name: Install dependencies in e2e-app
+        run: yarn install && yarn playwright install chromium
+        working-directory: e2e-app
+
+      - name: Install ${{github.event.release.tag_name}} version of the package
+        run: yarn add @fingerprintjs/fingerprintjs-pro-react-native@${{github.event.release.tag_name}}
+        if: github.event_name == 'release'
+        working-directory: e2e-app
+      
+      - name: Build web
+        run: yarn build:web
+        working-directory: e2e-app
+
+      - run: yarn test:web
+        working-directory: e2e-app
+        env:
+          MINIMUM_US_DEFAULT_PUBLIC_KEY: ${{ secrets.MINIMUM_US_DEFAULT_PUBLIC_KEY }}
+          MINIMUM_US_DEFAULT_PRIVATE_KEY: ${{ secrets.MINIMUM_US_DEFAULT_PRIVATE_KEY }}
+          DEFAULT_EU_DEFAULT_PUBLIC_KEY: ${{ secrets.DEFAULT_EU_DEFAULT_PUBLIC_KEY }}
+          DEFAULT_EU_DEFAULT_PRIVATE_KEY: ${{ secrets.DEFAULT_EU_DEFAULT_PRIVATE_KEY }}
+          MINIMUM_US_SEALED_ENCRYPTION_KEY: ${{ secrets.MINIMUM_US_SEALED_ENCRYPTION_KEY }}
+          MINIMUM_US_SEALED_PUBLIC_KEY: ${{ secrets.MINIMUM_US_SEALED_PUBLIC_KEY }}

README.md

@@ -41,11 +41,15 @@ application to call the native Fingerprint Pro libraries (Android and iOS) and i
   - [Requirements and limitations](#requirements-and-limitations)
   - [Dependencies](#dependencies)
   - [How to install](#how-to-install)
-    - [1. Install the package using your favorite package manager:](#1-install-the-package-using-your-favorite-package-manager)
-    - [2. Configure iOS dependencies (if developing on iOS)](#2-configure-ios-dependencies-if-developing-on-ios)
-    - [3. Configure Android dependencies (if developing on Android)](#3-configure-android-dependencies-if-developing-on-android)
-      - [Gradle 7 or newer](#gradle-7-or-newer)
-      - [Gradle 6.0 or older](#gradle-60-or-older)
+    - [Expo setup](#expo-setup)
+        - [1. Add config plugin](#1-add-config-plugin)
+        - [2. Rebuild the native code](#2-rebuild-the-native-code)
+        - [3. Rebuild the app](#3-rebuild-the-app)
+    - [Bare react-native](#bare-react-native-setup)
+      - [1. Configure iOS dependencies (if developing on iOS)](#1-configure-ios-dependencies-if-developing-on-ios)
+      - [2. Configure Android dependencies (if developing on Android)](#2-configure-android-dependencies-if-developing-on-android)
+        - [Gradle 7 or newer](#gradle-7-or-newer)
+        - [Gradle 6.0 or older](#gradle-60-or-older)
   - [Usage](#usage)
     - [Hooks approach](#hooks-approach)
     - [API Client approach](#api-client-approach)
@@ -59,6 +63,7 @@ application to call the native Fingerprint Pro libraries (Android and iOS) and i
 ## Requirements and limitations
 
 - React Native versions 0.73 through 0.79 are supported
+- Expo 51.0.0 or higher is supported
 - Android 5.0 (API level 21+) or higher
 - iOS 13+/tvOS 15+, Swift 5.7 or higher (stable releases)
 
@@ -72,7 +77,7 @@ application to call the native Fingerprint Pro libraries (Android and iOS) and i
 
 ## How to install
 
-### 1. Install the package using your favorite package manager:
+Install the package using your favorite package manager:
 
 - [NPM](https://npmjs.org):
 
@@ -90,14 +95,71 @@ application to call the native Fingerprint Pro libraries (Android and iOS) and i
   ```shell
   pnpm add @fingerprintjs/fingerprintjs-pro-react-native
   ```
+  
+## Expo setup
 
-### 2. Configure iOS dependencies (if developing on iOS)
+> ℹ️ Our SDK cannot be used in [Expo Go](https://expo.dev/go) because it requires custom native code.
+
+<details>
+<summary>Web support</summary>
+To use the SDK on the web, install the peer dependency with your preferred package manager:
+
+- [NPM](https://npmjs.org):
+
+  ```shell
+  npm install @fingerprintjs/fingerprintjs-pro-spa --save
+  ```
+
+- [Yarn](https://yarnpkg.com):
+
+  ```shell
+  yarn add @fingerprintjs/fingerprintjs-pro-spa
+  ```
+
+- [PNPM](https://pnpm.js.org):
+  ```shell
+  pnpm add @fingerprintjs/fingerprintjs-pro-spa
+  ```
+  
+Then, use the SDK as you would with the native version.
+</details>
+
+### 1. Add config plugin
+```json
+{
+  "expo": {
+    "plugins": [
+      "@fingerprintjs/fingerprintjs-pro-react-native"
+    ]
+  }
+}
+```
+
+### 2. Rebuild the native code
+```bash
+npx expo prebuild --clean
+```
+
+### 3. Rebuild the app
+For Android:
+```bash
+npx expo run:android
+```
+
+For iOS:
+```bash
+npx expo run:ios
+```
+  
+## Bare react-native setup
+
+### 1. Configure iOS dependencies (if developing on iOS)
 
 ```shell
 cd ios && pod install
 ```
 
-### 3. Configure Android dependencies (if developing on Android)
+### 2. Configure Android dependencies (if developing on Android)
 
 Add the repositories to your Gradle configuration file. The location for these additions depends on your project's structure and the Gradle version you're using:
 

__tests__/FingerprintJsProProvider.test.ts

@@ -3,7 +3,6 @@ import { renderHook } from '@testing-library/react'
 import { createWrapper, getDefaultLoadOptions } from './helpers'
 import { FingerprintJsProContext } from '../src/FingerprintJsProContext'
 import { NativeModules } from 'react-native'
-import * as packageInfo from '../package.json'
 import { FingerprintJsProAgent } from '../src'
 
 const configure = jest.fn()
@@ -24,7 +23,7 @@ const mockedVisitorId = 'some visitor id'
 const mockedRequestId = 'some request id'
 const mockedConfidenceScore = 0.99
 
-const pluginVersion = packageInfo.version
+const pluginVersion = '__VERSION__'
 
 describe(`FingerprintJsProProvider`, () => {
   it('should pass options to agent with regular result', () => {

__tests__/errors.test.ts

@@ -1,4 +1,5 @@
-import { ApiKeyRequiredError, JsonParsingError, UnknownError, unwrapError } from '../src/errors'
+import { ApiKeyRequiredError, JsonParsingError, UnknownError } from '../src/errors'
+import { unwrapError } from '../src/unwrapError'
 
 describe('unwrapError function', () => {
   it('should return ApiKeyRequiredError when TokenRequired error passed', () => {

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/dist/withFingerprint.js')

e2e-app/.env.example

@@ -1,4 +1,4 @@
-# Sub from US region that will be used in tests. Ideally, it should have the least amounf of featires enabled.
+# Sub from US region that will be used in tests. Ideally, it should have the least amount of features enabled.
 MINIMUM_US_DEFAULT_PUBLIC_KEY=<US_SUB_PUBLIC_KEY>
 MINIMUM_US_DEFAULT_PRIVATE_KEY=<US_SUB_PRIVATE_KEY>
 

e2e-app/.gitignore

@@ -41,4 +41,10 @@ yarn-error.*
 *.tsbuildinfo
 
 app-example
-*.env
+*.env
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e-app/App.tsx

@@ -1,18 +1,9 @@
 import { Pressable, SafeAreaView, Text, View } from 'react-native'
-import { LaunchArguments } from 'react-native-launch-arguments'
-import { FingerprintJsProProvider, Region, useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react-native'
+import { FingerprintJsProProvider, useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react-native'
 import { testIds } from '@/e2e/ids'
 import { useEffect } from 'react'
 import { testTags } from '@/e2e/tags'
-
-export type LaunchArgs = {
-  apiKey: string
-  region: Region
-  useTags?: boolean
-  linkedId?: string
-}
-
-const args = LaunchArguments.value<LaunchArgs>()
+import config from '@/src/config'
 
 function InnerApp() {
   const { isLoading, error, data, getData } = useVisitorData()
@@ -33,22 +24,22 @@ function InnerApp() {
           flex: 1,
         }}
       >
-        {isLoading && <Text testID={testIds.loading}>Loading...</Text>}
-        {error && (
+        {isLoading ? <Text testID={testIds.loading}>Loading...</Text> : null}
+        {error ? (
           <View>
             <Text testID={testIds.errorName}>{error.name}</Text>
             <Text testID={testIds.errorMessage}>{error.message}</Text>
-            {error.stack && <Text testID={testIds.errorStack}>{error.stack}</Text>}
-            {Boolean(error.cause) && <Text testID={testIds.errorCause}>{JSON.stringify(error.cause)}</Text>}
+            {error.stack ? <Text testID={testIds.errorStack}>{error.stack}</Text> : null}
+            {error.cause ? <Text testID={testIds.errorCause}>{JSON.stringify(error.cause)}</Text> : null}
           </View>
-        )}
-        {data && <Text testID={testIds.data}>{JSON.stringify(data)}</Text>}
+        ) : null}
+        {data ? <Text testID={testIds.data}>{JSON.stringify(data)}</Text> : null}
         <Pressable
           testID={testIds.getData}
           onPress={async () => {
-            const tags = args.useTags ? testTags : undefined
+            const tags = config.useTags ? testTags : undefined
 
-            await getData(tags, args.linkedId)
+            await getData(tags, config.linkedId)
           }}
           style={{
             paddingBottom: 48,
@@ -64,7 +55,7 @@ function InnerApp() {
 
 export default function App() {
   return (
-    <FingerprintJsProProvider apiKey={args.apiKey} region={args.region}>
+    <FingerprintJsProProvider apiKey={config.apiKey} region={config.region}>
       <InnerApp />
     </FingerprintJsProProvider>
   )

e2e-app/app-config-tools/android.ts

@@ -3,7 +3,7 @@ const androidBuildProperties = {
   compileSdkVersion: 35,
   targetSdkVersion: 35,
   buildToolsVersion: '34.0.0',
-  extraMavenRepos: ['https://maven.fpregistry.io/releases'],
+  enableBundleCompression: false,
 } as Record<string, any>
 
 export function stripAndroidExtraBuildProperties() {

e2e-app/app.config.ts

@@ -1,5 +1,5 @@
 // Required in order to import other .ts files - https://docs.expo.dev/guides/typescript/#appconfigjs
-import 'ts-node/register'
+import 'tsx/cjs'
 import { ExpoConfig } from '@expo/config'
 import { dependencies } from './package.json'
 import * as semver from 'semver'
@@ -40,6 +40,7 @@ const config: ExpoConfig = {
     package: 'com.fingerprint.e2eapp',
   },
   plugins: [
+    '@fingerprintjs/fingerprintjs-pro-react-native',
     [
       'expo-build-properties',
       {