React Native Expo Environment Variables with EAS

Question

I have a secret key that I need to use in my app. On the web, I would use a .env file, but with React Native and Expo.

I want to use the EAS Build, and found the following documentation EAS variables docs

This gives information about adding the "secret" to your eas.json file, but I am unable to find 2 important things:

What code to use to access the secret variable in the dev and prod environment.

I'm thinking in production the code would be 'process.env.SECRET_KEY' and hoping the same code would apply for the dev environment, but I am not sure how to get the process.env in dev to be populated with the SECRET_KEY.

When I console.log(process.env) in my app, I just get NODE_ENV: "development".

My thought is that many apps need some sort of Secret bit of info, so any ideas on a best practice or at this point just any way to get this to work!

Answer 1

I was able to get the environment (secret) variable working with the eas build process.

I am sure there are other ways to accomplish this, however this is the approach I took:

I chose to use a .env file for the dev environment and the eas secret:create command for eas builds.

First, you need to create a secret for your project with the eas cli. eas secret command

Then, create you .env file with your secret. Make sure this has the same spelling as the secret created for eas.

You will then use the app.config.js file to inject the secret so that your code can access it. NOTE: I found that I needed to remove the app.json file. I moved all the config from app.json to app.config.js.

Also remember to run npm install dotenv on your terminal to add dotenv to your project.

// the dotenv/config will read your .env file 
// and merge it with process.env data
// This is just for the builds that happen outside of eas
import "dotenv/config";

// the secrets created with eas secret:create will
// be merged with process.env during eas builds
const secretKey = process.env.SECRET_KEY;

export default {
  name: "TV Tracker",
  slug: "tv-tracker",
  scheme: "tvtracker",
...
  // THIS IS WHAT WE READ IN THE CODE
  // uses the expo constants package
  extra: {
    secretKey: secretKey,
  },
};

Now we can read the secretKey using the expo-constants module.

import Constants from "expo-constants";
...

let secretKey = Constants.expoConfig.extra.secretKey;

Answer 2

Got my answer here https://github.com/expo/eas-cli/issues/1265#issuecomment-1301525320 I do wish expo simplified/cleaned their documentation a bit and made like one simple example which just works out of the box instead of providing tons of information where it's so easy to miss Constants.expoConfig vs Constants.manifest