I created a Restful API, a website (ReactJS/Ruby on Rails), and a mobile app(React Native).
I am using the API to show and process data on the website and the mobile app.
In the website, I am using jQuery AJAX requests that somehow looks like this:
...some other code
componentDidMount () {
$.getJSON('https://example.com/api/v1/accounts?key=MASTER-API-KEY', (data) => {
this.setState({
accounts: data.accounts
});
});
}
...some other code
In the mobile app, I am using fetch that somehow looks like this:
...some other code
fetch('https://example.com/api/v1/accounts?key=MASTER-API-KEY', {
method: 'GET',
...some other code
The users also have their own API keys with limited privilege based on their user level.
I already have the validation to process the request if only they have sent a valid API key. But on the website and the app, I am using a master API key that has access to all.
I believe that this can be seen in the source file on the website and it can be reverse engineered in the mobile app.
The possible solution that I have for the website is to make the process in the server instead of using AJAX, but how can I access it on my ReactJS components?
For the mobile app, should I switch to using Swift/Java and make the request there instead of fetch?
