React Native - Securely storing

Question

I have a React-Native app, and I have a PHP-backend server.
Now I'm trying to use my SMTP Password in my react-native app, so I can send email easily, react-native-smtp-mailer .

As I saw in other questions (How do I hide API key in create-react-app?) , It is not a good idea to store in inside my .env file because React environment variables are embedded in the build and are publicly accessible.

However, there is an option to use my backend server to get my API key/Password .

You should really only save API keys or secrets in your backend such as Node / Express. You can have your client send a request to your backend API, which can then make the actual API call with the API key and send the data back to your client.

But I can't understand how to do it. If I'm creating an API call, but it's very easy to access it from Postman or something similar. For example, I have http://api.com/getPass and it gives me my API key/Password however everyone can access it.

So my question is...

How Do I Do it to work secretly.
(It would be much easier if you can provide a Code example.)
Or should I do the emailing on my server side? (I Have to send Multiple images).
But If I do it on my server side, everyone with the "URL" can access it...

Answer 1

You could add the expo-secure-store module to your application which will give you a place to store the password and access it when needed without having to store it hard-coded in your source code. You could then provide an input element within the application where you could enter it once, saving it under a certain key in the store, and accessing it via that key when needed. It doesn't give you a place to permanently save it as part of the code, but the data would persist across launches.