Storing secret keys in your react-native project

Question

When storing api keys in your project you likely want to add them to a separate file and encrypt or ignore that file. Unfortunately, when your client decrypts or uses the key during build, the key gets stored in your build so it might not look like it is available to anyone, but simple scrappers can discover the secret api.

My question is, what is a modestly responsible way to store API keys in your project and try to keep them secure from the public view. It is not possible to be 100% secure according to several sources I've found: https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app

So the question remains, how do I simply but responsibly try to implement the api key without exposing my google firebase server to the public?

Answer 1

You can create a local file in your project folder and store it there, it won't be published on GitHub but it will work on your project.

Comments

The stackoverflow link I posted specifically said this answer does not work, because while the file will not be uploaded, the build will keep a record of your key and then publish that the GitHub.

---

You shouldn’t publish the file containing the API to the public. We created a local file and used it for our group project and it is working fine.

---

Here is what the react docs say,

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

Answer 2

I think you can store any key with .env file, you just need to import react-native-dotenv library

Comments

Similar comment but here it is. In the react docs it says:

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.