# How to obfuscate sensitive config files in React Native

Even with hermes enabled in release build, there is case where APIs, tokens or keys exposed in **index.android.bundle** as readable strings, we definitely want to avoid it.

So here is a simple way to obfuscate such files:

1) Add [javascript-obfuscator](https://github.com/javascript-obfuscator/javascript-obfuscator) package to the project
```
yarn add --dev javascript-obfuscator
```
2) Copy the obfuscator config to the project directory, you can modify it as per your requirement too

%[https://gist.github.com/4j17h/fdfb4c5cf03b50c07fab4de4b69c4fa1]

3) Modify react-native release build script in package.json

```
"obfuscate": "cp secretConfig.js secretConfig.js.orig && yarn javascript-obfuscator secretConfig.js --output secretConfig.js --config obfuscator-config.js",
"restore_obf": "mv secretConfig.js.orig secretConfig.js",
"store_release": "yarn obfuscate && cd android && ./gradlew clean && ./gradlew bundleRelease && cd ../ && yarn restore_obf"
```

### What are we doing ?

> "obfuscate": "cp secretConfig.js secretConfig.js.orig && yarn javascript-obfuscator secretConfig.js --output secretConfig.js --config obfuscator-config.js",

Added obfuscate script to backup the original config file & obfuscate it using obfuscator config file.

> "restore_obf": "mv secretConfig.js.orig secretConfig.js",

Added restore_obf script to restore the original config file (non-obfuscated file), which needs to be executed after building APK/AAB

> "store_release": "yarn obfuscate && cd android && ./gradlew clean && ./gradlew bundleRelease && cd ../ && yarn restore_obf"

Modified release build script to include obfuscation


**BEFORE**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644942520217/caC4LMJ0_.png)

**AFTER**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644942562112/RTFFVVJiK.png)


***Happy Coding* 🥂**