#Security

#Plugin Token Protection

Developers may worry that sensitive tokens defined in the hot-updater.config.ts file might be bundled into the app and exposed in production.

Using environment variables is simply for populating the token value in the hot-updater.config.ts file. This is, in fact, unrelated to React Native.

import { metro } from "@hot-updater/metro";
import { supabaseDatabase, supabaseStorage } from "@hot-updater/supabase";
import { defineConfig } from "hot-updater";
import "dotenv/config";

export default defineConfig({
  build: metro({ enableHermes: true }),
  storage: supabaseStorage({
    supabaseUrl: process.env.HOT_UPDATER_SUPABASE_URL!,
    supabaseAnonKey: process.env.HOT_UPDATER_SUPABASE_ANON_KEY!,
    bucketName: process.env.HOT_UPDATER_SUPABASE_BUCKET_NAME!,
  }),
  database: supabaseDatabase({
    supabaseUrl: process.env.HOT_UPDATER_SUPABASE_URL!,
    supabaseAnonKey: process.env.HOT_UPDATER_SUPABASE_ANON_KEY!,
  }),
});

#Clarification

The hot-updater.config.ts file is not included in the app’s build. Instead, it serves as a configuration layer specifically for communicating with the hot-updater CLI. As a result, sensitive tokens defined in this file are not part of the distributed application code.

What is actually included in the app’s build is as follows:

import { HotUpdater } from "hot-updater";

export default HotUpdater.wrap({
  source: "https://<your-update-server-url>",
});

Here, the source URL is included in the app code, but sensitive environment variables, such as HOT_UPDATER_SUPABASE_ANON_KEY tokens, are not bundled.

#Potential Token Exposure

If you’re using tools like react-native-dotenv to read environment variables and inject them into the app during runtime, sensitive tokens might be exposed. To avoid this, ensure that only non-sensitive or publicly safe data is included in your app build.

#Example: If you are usingreact-native-dotenv Babel Configuration

To ensure safe handling of environment variables, you can whitelist only the necessary variables using react-native-dotenv in your Babel configuration:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'hot-updater/babel-plugin',
    [
      'module:react-native-dotenv',
      {
        envName: 'APP_ENV',
        allowlist: ['HOT_UPDATER_SUPABASE_ANON_KEY', 'HOT_UPDATER_CLOUDFLARE_API_TOKEN'], ❌ Do not add private keys to allowlist 
        allowlist: ['HOT_UPDATER_SUPABASE_URL'], // ✅ Only add public keys that are safe to expose to allowlist 
        path: '.env',
      },
    ],
  ],
};

#Best Practices

1. Restrict Exposure: Only include environment variables that are safe for public access in your app build.
2. Use Whitelists: Use tools like react-native-dotenv to define a whitelist of allowed environment variables.
3. Keep Sensitive Data Out of Builds: Store sensitive data securely on your server or backend, and ensure it is only accessed during server-side operations.
4. Use react-native-keys to manage keys.