fix: adjust mapbox access token usage (#1150)

Co-authored-by: ErikSin <[email protected]>

.cirrus.yml

@@ -14,6 +14,7 @@ task:
       -Dkotlin.compiler.execution.strategy=in-process
     NODEJS_MOBILE_BUILD_NATIVE_MODULES: "0"
     MAPBOX_DOWNLOAD_TOKEN: ENCRYPTED[6c72ef68629d29a9a0d9aa396d1f55badda203ce2d2ce0e21c6f79d6714dc2966db4326efb73d0f6e2082cdf27943d34]
+    MAPBOX_ACCESS_TOKEN: ENCRYPTED[820fc045f961fadebee5d3b9ed6350b26e32ed296f4c0d595b7fc2b92a42f393612af52d07c14abf178f34e428e0cbb4]
   container:
     image: digidem/docker-android:2
     cpu: 8
@@ -30,6 +31,7 @@ task:
       - npm ci
   build_backend_script: npm run build:backend
   build_translations_script: npm run build:translations
+  build_env_script: echo "MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN}" >> .env
   nodejs_mobile_cache:
     folder: android/build/nodejs-native-assets
     fingerprint_script:

.env.example

@@ -0,0 +1,2 @@
+MAPBOX_DOWNLOAD_TOKEN=sk.abc123 # Replace this with a Mapbox secret access token
+MAPBOX_ACCESS_TOKEN=pk.abc123   # Replace this with a Mapbox public access token

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Thank you so much for taking the time to contribute to Mapeo development! Mapeo Mobile is a mobile app written in react-native that currently runs on Android. 
+Thank you so much for taking the time to contribute to Mapeo development! Mapeo Mobile is a mobile app written in react-native that currently runs on Android.
 
 After doing the [Initial Install](#initial-install), for most development you will need Android Studio and the Android SDK installed on your computer as outlined in the [Full App Development](#full-app-development) section.
 
@@ -23,28 +23,23 @@ npm install
 
 ### Pre-requisites
 
-In order to develop the full app you will need the Android Studio, Android SDK, React Native CLI, and other dependencies installed, as per [this guide](https://reactnative.dev/docs/0.66/environment-setup) following the instructions up to *Creating a new application*.
+In order to develop the full app you will need the Android Studio, Android SDK, React Native CLI, and other dependencies installed, as per [this guide](https://reactnative.dev/docs/0.66/environment-setup) following the instructions up to _Creating a new application_.
 
 Once you have done so and have Android Studio open, you may need to open your app's `/android` folder in Android Studio, so that it detects, downloads and configures requirements that might be missing, such as the NDK and CMake to build the native code part of the project. However, the version of NDK to use with Mapeo Mobile needs to be specifically [21.4.7075529](https://developer.android.com/ndk/guides/). You can download this version (as well as CMake if necessary) in Android Studio by navigating to Tools -> SDK Manager -> SDK Tools.
 
+You will also need to have a `.env` file at the project root that defines a couple of necessary environment variables related to Mapbox: `MAPBOX_DOWNLOAD_TOKEN` and `MAPBOX_ACCESS_TOKEN`. You can make a copy of the existing [`.env.example`](./.env.example) file (make sure it is called `.env`) and then replace the existing variables with your tokens. This requires creating a [Mapbox](https://mapbox.com) account.
 
-Due to an [issue](https://github.com/rnmapbox/maps/issues/1572) with installing some Mapbox SDK Android deps, you will also have to complete additional steps before getting the app to build:
+The `MAPBOX_DOWNLOAD_TOKEN` variable is necessary for installing components of Mapbox's native SDK for building the app (see this [issue](https://github.com/rnmapbox/maps/issues/1572) for more context). To set it up:
 
 1. Refer to the [`Configure Credentials`](https://docs.mapbox.com/android/maps/guides/install/#configure-credentials) section and follow the instructions for creating a **secret access token**. This requires creating a [Mapbox](https://mapbox.com) account.
 
-2. With the secret token, you'll need to define the `MAPBOX_DOWNLOAD_TOKEN` environment variable. Although not ideal, there are a couple of options to choose from:
+2. With the secret token, update your `.env` file so that it has line similar to the following: `MAPBOX_DOWNLOAD_TOKEN=<your_token_here>`
 
-- Specify the environment variable when running the `react-native run-android` command (or any command that runs it). For example:
+The `MAPBOX_ACCESS_TOKEN` variable is necessary for using the Mapbox client library to render maps in the app. To set it up:
 
-  ```sh
-  MAPBOX_DOWNLOAD_TOKEN=your_token_here npm run android
-  ```
+1. Follow the instructions listed [here](https://docs.mapbox.com/help/getting-started/access-tokens/) to create a public access token.
 
-- Create a `.env` file in your Mapeo Mobile directory and paste the following in there with your Mapbox access token. This will be utilized when building Mapeo Mobile.
-
-  ```sh
-  MAPBOX_DOWNLOAD_TOKEN=your_token_here
-  ```
+2. With the public access token, update your `.env` file so that it has a line similar to the following: `MAPBOX_ACCESS_TOKEN=<your_token_here>`
 
 We recognize that this extra configuration is not ideal and we intend for this to be temporary.
 
@@ -81,7 +76,8 @@ dev version of the app on your device:
 npm run android
 ```
 
-This process may take a while when you are first building the app. Additionally, to bypass unneeded latency when installing certain dependencies like TypeScript, you can add the following to your `.gitconfig`  file in your home directory (`~`):
+This process may take a while when you are first building the app. Additionally, to bypass unneeded latency when installing certain dependencies like TypeScript, you can add the following to your `.gitconfig` file in your home directory (`~`):
+
 ```sh
 [url "https://"]
         insteadOf = git://
@@ -172,6 +168,7 @@ npm run storybook-native
 
 You will probably need to reload the storybook mobile app for the web app to be
 able to control the mobile app.
+
 ## Release Variants
 
 We generate different variants of the app, each with a different Application ID,

__mocks__/react-native-config.js

@@ -0,0 +1,3 @@
+export default {
+  MAPBOX_ACCESS_TOKEN: "pk.abc123",
+};

android/app/build.gradle

@@ -108,6 +108,9 @@ apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 // Add bugsnag plugin for source map and symbol uploads
 apply plugin: 'com.bugsnag.android.gradle'
 
+// React Native Config
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
+
 /**
  * Set this to true to create two separate APKs instead of one:
  *   - An APK that only works on ARM devices
@@ -227,7 +230,11 @@ android {
 
         // Bugsnag integration
         manifestPlaceholders = [bugsnagReleaseStage: getDefaultBugsnagReleaseStage(myVersionName)]
+
+        // React Native Config
+        resValue "string", "build_config_package", "com.mapeo"
     }
+
     splits {
         abi {
             reset()

bitrise.yml

@@ -281,6 +281,12 @@ workflows:
           inputs:
             - destination: $PROJECT_LOCATION/app/mapeo-release-key.keystore
             - source: $BITRISEIO_ANDROID_KEYSTORE_URL
+      - [email protected]:
+          title: Create .env file
+          inputs:
+            - content: |
+                #!/bin/bash
+                echo "MAPBOX_ACCESS_TOKEN=$MAPBOX_ACCESS_TOKEN" >> .env
       - [email protected]:
           title: Update SDK components
           inputs:

package.json

@@ -88,6 +88,7 @@
     "react-intl": "^5.4.5",
     "react-native": "^0.66.5",
     "react-native-android-open-settings": "^1.3.0",
+    "react-native-config": "^1.5.1",
     "react-native-confirmation-code-field": "^7.3.0",
     "react-native-device-info": "^8.4.8",
     "react-native-fetch-api": "^3.0.0",

src/frontend/hooks/useMapAvailability.ts

@@ -4,12 +4,12 @@ import MapboxGL from "@react-native-mapbox-gl/maps";
 
 import api from "../api";
 import { normalizeStyleURL } from "../lib/mapbox";
-import config from "../../config.json";
+import { config } from "../lib/config";
 
 /** URL used for map style when no custom map and user is online */
 export const onlineStyleURL = normalizeStyleURL(
   MapboxGL.StyleURL.Outdoors + "?" + Date.now(),
-  config.mapboxAccessToken
+  config.MAPBOX_ACCESS_TOKEN
 );
 
 export type MapAvailability = "unknown" | "available" | "unavailable";

src/frontend/lib/config.ts

@@ -0,0 +1,5 @@
+import Config from "react-native-config";
+
+export const config = {
+  MAPBOX_ACCESS_TOKEN: Config.MAPBOX_ACCESS_TOKEN,
+};

src/frontend/sharedComponents/Map/MapView.js

@@ -5,15 +5,14 @@ import MapboxGL, { Logger } from "@react-native-mapbox-gl/maps";
 import ScaleBar from "react-native-scale-bar";
 import CheapRuler from "cheap-ruler";
 import validateColor from "validate-color";
-
 import ConfigContext from "../../context/ConfigContext";
 import { LocationFollowingIcon, LocationNoFollowIcon } from "../icons";
 import IconButton from "../IconButton";
 import type { LocationContextType } from "../../context/LocationContext";
 import type { ObservationsMap } from "../../context/ObservationsContext";
 import { useIsFullyFocused } from "../../hooks/useIsFullyFocused";
 import bugsnag from "../../lib/logger";
-import config from "../../../config.json";
+import { config } from "../../lib/config";
 import { OfflineMapLayers } from "../OfflineMapLayers";
 import { UserLocation } from "./UserLocation";
 
@@ -38,7 +37,7 @@ Logger.setLogCallback(log => {
   );
 });
 
-MapboxGL.setAccessToken(config.mapboxAccessToken);
+MapboxGL.setAccessToken(config.MAPBOX_ACCESS_TOKEN);
 // Forces Mapbox to always be in connected state, rather than reading system
 // connectivity state
 MapboxGL.setConnected(true);