how can I keep my api keys safe on React Native App

Question

I'm building a Native app with React Native. I was once a web programmer and it's my first time using React Native and making native app especially which is going to be actual product and serve for normal users. During my struggle, I've encountered some issue that I, as a former web programmer, can't find a way out.

In my app, I call some APIs that any other app would/could be using, like Google Maps via react-native-maps library. My API keys are saved at files that are used when actually build the app, info.plist and AppDelegate.m ( building iOS app first by now ). I've thought that would be safe enough. But I recently find out it might not.

After reading some articles about getting rid of secret informations from native apps, I've tried hard to find a way out. Thought about using .env, getting api keys from backend server, etc. couldn't use .env, and can't find a way to call API, sending API keys ( not containing them as a build meta data ).

So here's my question. How can I keep my secrets safe for react native app?

Answer 1

I guess it depends on what kind of secret and API we are talking about.

With Google Maps is it possible to restrict usage to specific apps or domains which makes it safe to bundle the key in the app, read more here: https://developers.google.com/maps/api-key-best-practices#application_restriction

In situations where the app itself does not need the make the request itself, an alternative would be to let the server make the request and forward the result to the app.

In other situations where nothing from above works, you could send the secret from your server to an authorized user. Be aware that the user could then read the key but at least you don't need to bundle the key into the apps which also makes it possible replace the key if needed.