CODEWITHSUNDEEP
javascriptreactjsapisecurityfrontend
Dawesign
Dawesign

Reputation: 753

Best practice to safely store API token in React frontend application?

I am making calls to the Pipedrive API with axios in my React app like this:

axios.post('https://api.pipedrive.com/v1/deals?api_token=123thisissometesttokenblablabla456', {
    name: "test",
    id: 1,
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});

Since this is a frontend application this practice makes the api_token=123thisissometesttokenblablabla456 public to anyone looking at the source code with some browser developer tools for example, thus giving them complete access to my data in Pipedrive.

Is there any way to safely use the API token in a frontend application / without the need to set up my own backend?

I wish Pipedrive would let me configure from which domains it allows calls to the API, unfortunately that's not possible.

Upvotes: 1

Views: 677

Answers (1)

Nitsew
Nitsew

Reputation: 3662

Unfortunately, there is no safe way to do this in your circumstances other than setting up a backend service and storing it there as you mentioned.

Even if you could store the value securely, the issue you face is anyone would still be able to view the network activity happening on your website to get obtain the token.

Upvotes: 3

Related Questions