Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions .vscode/settings.json

This file was deleted.

2 changes: 1 addition & 1 deletion FAQ.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ These are some common issues or questions you may have about Approov integration

### Check that your development environment is properly set up

Ensure that you have a recent version of `React Native` (>= 0.71) installed (see [installing react native](https://reactnative.dev/docs/environment-setup)). You also need `yarn` classic (1.x) (see [installing yarn](https://www.npmjs.com/package/yarn)). If you can build the default `react-native init` app, your React Native environment is likely set up properly.
Ensure that you have a recent version of `React Native` (>= 0.81) installed (React 19.1.0, React Native 0.81.4) (see [installing react native](https://reactnative.dev/docs/environment-setup)). You also need `yarn` classic (1.x) (see [installing yarn](https://www.npmjs.com/package/yarn)). If you can build the default `react-native init` app, your React Native environment is likely set up properly.

For Android, you will also want access to `adb` for identifying device IDs and running `logcat` (see [Android Debug Bridge ](https://developer.android.com/studio/command-line/adb)). For iOS, you should also install `ios-deploy` to run on iOS devices (see [installing ios-deploy](https://github.com/ios-control/ios-deploy)).

Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2021 CriticalBlue, Ltd.
Copyright (c) 2025 CriticalBlue, Ltd.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
76 changes: 59 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,67 @@ This quickstart is written specifically for Android and iOS apps that are implem

This page provides all the steps for integrating Approov into your app. Additionally, a step-by-step tutorial guide using our [Shapes App Example](https://github.com/approov/quickstart-react-native/blob/main/SHAPES-EXAMPLE.md) is also available.

To follow this guide you should have received an onboarding email for a trial or paid Approov account and be using a version of ReactNative of 0.71 or above.
To follow this guide you should have received an onboarding email for a trial or paid Approov account and be using a version of React Native of 0.81 or above (React 19.1.0, React Native 0.81.4).

It is possible to use this with [Expo](https://expo.dev/), although not with [Expo Go](https://expo.dev/client) as native library modules are required.

Note that the minimum OS requirement for iOS is 13.4 and for Android the minimum SDK version is 21 (Android 5.0). You cannot use Approov in apps that need to support OS versions older than this.

## CHECK INTEGRATION COMPATIBILITY

The Approov npm package provides a special check command to see if the app is ready for integration. Execute this using [npx](https://www.npmjs.com/package/npx) in the top level directory of your app:
## Quickstart: Step-by-Step Instructions

```
npx @approov/quickstart-react-native check
```
This repository contains 3 example React Native projects. The instructions below apply to all, but for demonstration purposes let's focus on `/examples/shapes_axios`.

1. **Clone the repository and install dependencies:**
```sh
git clone https://github.com/approov/quickstart-react-native.git
cd quickstart-react-native/examples/shapes_axios
npm install
```

2. **Install Approov SDK:**

```sh
npm install @approov/approov-service-react-native
```
_Or, if using a local tarball:_
```sh
npm install ../../approov-quickstart-react-native-3.2.9.tgz
```

✅ Please note that @approov/approov-service-react-native is already listed as a dependency in this project, so running `npm install` will install everything needed for this quickstart.

3. **Install iOS pods (for iOS projects):**
```sh
cd ios
pod install
cd ..
```

4. **Add ApproovProvider to your app:**
- Import Approov components in your main file (e.g., `App.js`):
```js
import { ApproovProvider, ApproovService } from '@approov/approov-service-react-native';
```
- Wrap your app’s root component with `ApproovProvider` and provide your config string (This can be obtained from Approov CLI tool).

Please note that for demonstration purposes, we have already made changes in the code to implement Approov. In `App.js`, please uncomment or comment code sections as instructed in the code comments.

> Note, although the `npx` command may ask to install the package it is not permanently added to your app.
5. **Run the app:**
- For Android:
```sh
npx react-native run-android
```
- For iOS:
```sh
npx react-native run-ios
```

The output provides a checklist and reports any issues. Fix any errors reported, such as version updates or extra permissions. On Android, for example, the minimum SDK is 21, and the additional `ACCESS_NETWORK_STATE` permission is required. Please [read this](https://approov.io/docs/latest/approov-usage-documentation/#targeting-android-11-and-above) section of the reference documentation if targeting Android 11 (API level 30) or above.
6. **Verify Approov integration:**
- Check logs for Approov initialization.
- Test API calls to ensure Approov tokens or secrets are being added.

Once all issues are fixed, you should rerun your app to verify it is working as before. You are now ready to add Approov protection.
7. **Follow additional steps in the repo docs for API or secrets protection as needed.**

## ADDING THE APPROOV PACKAGE

Expand All @@ -32,7 +74,7 @@ Add the Approov service layer to your existing App with the following command:
npm install @approov/approov-service-react-native
```

Note if you experience an error related to peer dependencies, then you can append the `--force` to install with your particular React Native version. The plugin supports version 0.75 or above.
Note if you experience an error related to peer dependencies, then you can append the `--force` to install with your particular React Native version. The plugin supports version 0.81 or above.

If you are installing into an Expo project then use:

Expand All @@ -50,15 +92,15 @@ Note: do not worry if this generates warnings about duplicate UUIDs.

## ACTIVATING APPROOV

In order to use Approov you must include it as a component that wraps your application components. This automatically deals with initializing Approov when the app is started. Import using the following:
In order to use Approov, you must include it as a component that wraps your application components. This automatically deals with initializing Approov when the app is started. Import using the following:

```Javascript
import { ApproovProvider, ApproovService } from '@approov/approov-service-react-native';
```

This defines an `ApproovProvider` component and the `ApproovService` which allows you to make certain calls to Approov from your application.

You should define an initially empty function that is called just before Approov is initialized. You may wish to include certain `ApproovService` calls in this in the future:
You should define an initially empty function that is called just before Approov is initialized. You may wish to include certain `ApproovService` calls in this function in the future:

```Javascript
const approovSetup = () => {
Expand Down Expand Up @@ -94,25 +136,25 @@ Once the initialization is called, it is possible for any network requests to ha

You may use the `ApproovMonitor` component (also imported from `@approov/approov-service-react-native`) inside the `ApproovProvider`. This will output console logging on the state of the Approov initialization.

On Android, you can see logging using [`logcat`](https://developer.android.com/studio/command-line/logcat) output from the device. You can see the specific Approov output using `adb logcat | grep ApproovService`. On iOS, look at the console output from the device using the [Console](https://support.apple.com/en-gb/guide/console/welcome/mac) app from MacOS. This provides console output for a connected simulator or physical device. Select the device and search for `ApproovService` to obtain specific logging related to Approov.
On Android, you can see logging using [`logcat`](https://developer.android.com/studio/command-line/logcat) output from the device. You can see the specific Approov output using `adb logcat | grep ApproovService`. On iOS, look at the console output from the device using the [Console](https://support.apple.com/en-gb/guide/console/welcome/mac) app from macOS. This provides console output for a connected simulator or physical device. Select the device and search for `ApproovService` to obtain specific logging related to Approov.

Your Approov onboarding email should contain a link allowing you to access [Live Metrics Graphs](https://approov.io/docs/latest/approov-usage-documentation/#metrics-graphs). After you've run your app with Approov integration you should be able to see the results in the live metrics within a minute or so. At this stage you could even release your app to get details of your app population and the attributes of the devices they are running upon.
Your Approov onboarding email should contain a link allowing you to access [Live Metrics Graphs](https://approov.io/docs/latest/approov-usage-documentation/#metrics-graphs). After you've run your app with Approov integration, you should be able to see the results in the live metrics within a minute or so. At this stage, you could even release your app to get details of your app population and the attributes of the devices they are running upon.

## NEXT STEPS
To actually protect your APIs and/or secrets there are some further steps. Approov provides two different options for protection:

* [API PROTECTION](https://github.com/approov/quickstart-react-native/blob/main/API-PROTECTION.md): You should use this if you control the backend API(s) being protected and are able to modify them to ensure that a valid Approov token is being passed by the app. An [Approov Token](https://approov.io/docs/latest/approov-usage-documentation/#approov-tokens) is short lived crytographically signed JWT proving the authenticity of the call.
* [API PROTECTION](https://github.com/approov/quickstart-react-native/blob/main/API-PROTECTION.md): You should use this if you control the backend API(s) being protected and are able to modify them to ensure that a valid Approov token is being passed by the app. An [Approov Token](https://approov.io/docs/latest/approov-usage-documentation/#approov-tokens) is a short-lived cryptographically signed JWT proving the authenticity of the call.

* [SECRETS PROTECTION](https://github.com/approov/quickstart-react-native/blob/main/SECRETS-PROTECTION.md): This allows app secrets, including API keys for 3rd party services, to be protected so that they no longer need to be included in the released app code. These secrets are only made available to valid apps at runtime.

Note that it is possible to use both approaches side-by-side in the same app.
Note that it is possible to use both approaches side by side in the same app.

See [FAQ](https://github.com/approov/quickstart-react-native/blob/main/FAQ.md) for answers to common questions about the integration and troubleshooting.

See [REFERENCE](https://github.com/approov/quickstart-react-native/blob/main/REFERENCE.md) for a complete list of all of the Approov related methods.

## RN-FETCH-BLOB
Support is provided for the [rn-fetch-blob](https://github.com/joltup/rn-fetch-blob) networking stack. However, to use this a special fork of the package must be used. This is available at [@approov/rn-fetch-blob](https://www.npmjs.com/package/@approov/rn-fetch-blob). You will need to uninstall the standard package and install the special one as follows:
Support is provided for the [rn-fetch-blob](https://github.com/joltup/rn-fetch-blob) networking stack. However, to use this, a special fork of the package must be used. This is available at [@approov/rn-fetch-blob](https://www.npmjs.com/package/@approov/rn-fetch-blob). You will need to uninstall the standard package and install the special one as follows:

```
npm uninstall rn-fetch-blob
Expand Down
2 changes: 1 addition & 1 deletion SHAPES-EXAMPLE.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This quickstart is written specifically for Android and iOS apps that are implem

## WHAT YOU WILL NEED
* Access to a trial or paid Approov account
* A recent version of `React Native` (>= 0.73) installed (version 0.74.5 used), see [installing react native](https://reactnative.dev/docs/environment-setup).
* A recent version of `React Native` (>= 0.81) installed (version 0.81.4 used), see [installing react native](https://reactnative.dev/docs/environment-setup).
* You also need `yarn` classic (1.x, version 1.2 used in this guide), see [installing yarn](https://www.npmjs.com/package/yarn).
* The `approov` command line tool [installed](https://approov.io/docs/latest/approov-installation/) with access to your account
* [Android Studio](https://developer.android.com/studio) installed (version Coala 2024.1.1 is used in this guide) if you will build the Android app. Note that the `ANDROID_SDK_ROOT` value must be properly defined to allow building.
Expand Down
Binary file added approov-quickstart-react-native-3.2.9.tgz
Binary file not shown.
77 changes: 0 additions & 77 deletions bin/act/config.js

This file was deleted.

30 changes: 0 additions & 30 deletions bin/act/index.js

This file was deleted.

Loading