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!

Irfan wani · Accepted Answer · 2023-01-12 16:16:06Z

14

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;

edited Jan 12, 2023 at 16:16

Irfan wani

5,2522 gold badges32 silver badges49 bronze badges

answered Nov 18, 2021 at 4:40

markmccoid

2811 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Guille Acosta Over a year ago

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

Ayush Kumar Over a year ago

Instead of usign expo-constants modules. You can use a babel plugin called transform-inline-environment-variables too.

Irfan wani Over a year ago

How to use dotenv with react native as it gives error, fs module not found.

Irfan wani Over a year ago

Thank you so much for this answer. I actually imported dotenv and tried to configure it as dotenv.config() in my entry file, but seems that causes problems (don't know why), this approach works fine

tudor14 Over a year ago

This is the simplest approach based on all other threads and responses.

|

Dmitry Amelchenko · Accepted Answer · 2022-11-03 01:22:33Z

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

edited Nov 3, 2022 at 1:22

answered Nov 3, 2022 at 0:31

Dmitry Amelchenko

3412 silver badges11 bronze badges

Comments

WillSmithTE · Accepted Answer · 2022-09-08 05:02:22Z

0

As a follow-up to @markmccoid's answer, I usually use a bash script to put the .env secrets into eas for the project.

while IFS='=' read -r key value; do
    eas secret:create --scope project --name "$key" --value "$value"
done < .env

answered Sep 8, 2022 at 5:02

WillSmithTE

293 bronze badges

Collectives™ on Stack Overflow

React Native Expo Environment Variables with EAS

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related