2

I have a third party api secret key and according to react native documentation I should not be storing it using .env What is a better way of doing it to protect it from reverse engineering and other attacks? Please share an example /tutorial with your answer as this is a new topic for me.

Yus
  • 124
  • 2
  • 15
  • Some ideas are listed in https://stackoverflow.com/questions/64916923/react-native-storing-api-key – Franck Jul 03 '22 at 08:50
  • simply put - the only way to protect API keys is to store them on the backend, so your React app connects to it and request to perform specific API call. – DINK74 Jul 03 '22 at 08:56

3 Answers3

0

Finally, I found the answer to these kinds of questions. Use the STS AssumeRole or AssumeRoleWithWebIdentity (requires a JavaScript Web Token). The former does not have a way to check AuthN, so it is not secure on the frontend. But the latter has a slot for JWT token, which you can verify against an OpenID Connect Provider for AuthN.

https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-sts/index.html

In the latter case, you setup an IAM role and an OIDC Provider to verify the token (aka. your user is who they say they are). This depends on your organization.

Cognito basically does the same thing, except it helps you by handling all this logic on the backend as a service.

CodeSammich
  • 150
  • 1
  • 2
  • 10
0

react-native-keychain is the best option to store credentials in React-Native mobile apps.

Save credentials

import * as Keychain from 'react-native-keychain';

const Login = props => {
  const username = 'username';
  const password = 'password';
  await Keychain.setGenericPassword(username, password);
}

Get Credentials

import * as Keychain from 'react-native-keychain';

const Screen = props => {
  const getCredentials = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      }
    } catch (error) {
      console.log(error);
    }
  }
 }

Remove credentials

import * as Keychain from 'react-native-keychain';

const Logout = props => {
  const removeCredentials = async () => {
    try {
      const credentials = await Keychain.resetGenericPassword();
      }
    } catch (error) {
      console.log(error);
    }
  }
 }
Mehdi Faraji
  • 2,574
  • 8
  • 28
  • 76
0

To store sensitive data in effective way, we can use keystore file for Android, Keychain service for iOS in React Native. For more detail, please refer below link: https://reactnative.dev/docs/security

Angel Jerry
  • 98
  • 3