CODEWITHSUNDEEP
reactjsshopify
wickywills
wickywills

Reputation: 4204

Securely storing third party API secrets in React & Shopify

Firstly, I am fairly new to both React and Shopify, so please bear that in mind with your answers.

I have created a basic Shopify app using their CLI tools which provide a React app. I now need to connect this app to a third party that manages custom shipping options. I therefore need to authenticate with this third party which then returns a token which I can use in my API calls. I've read many answers here about storing such tokens, some recommend localstorage/cookies, others state never do that but don't provide a clear answer to what one SHOULD do instead.

Currently I have something like the following:

let data = {
  grant_type: 'client_credentials',
  client_id: process.env.REACT_APP_THIRDPARTY_API_KEY,
  client_secret: process.env.REACT_APP_THIRDPARTY_API_SECRET  
}

axios.post('https://oauth.somethirdparty.se/v1/token', data).then(res => {
  if (typeof window !== 'undefined') { // Check for browser
    localStorage.setItem('t', res.data.token);
  }
});

However I receive "undefined" errors for those env vars, and therefore the axios.post fails (works fine if I put in the key/secret directly here instead of the .env). Aside from this being unsecure according to the many posts here, I'm wondering if I can perhaps do something similar to what Shopify is doing, only my lack of knowledge prevents me from understanding exactly it is that they are doing!

The generated Shopify app uses the .env file in it's server.js file, like so:

Shopify.Context.initialize({
  API_KEY: process.env.SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SCOPES.split(","),
  HOST_NAME: process.env.HOST.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.October20,
  IS_EMBEDDED_APP: true,
  // This should be replaced with your preferred storage strategy
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

How can one safely store API credentials in my case? And please provide an actual example.

EDIT I've found that if I modify the Shopify server.js file to console.log(process.env), I see all of the used env vars in the Terminal, and I guess the reason these are "undefined" when I try to log them in my app component is intentional so they are not exposed, which is great. Unfortunately it still doesn't help me when I need to connect to a third party service and get a token etc - how do I do that in this case?

Upvotes: 1

Views: 740

Answers (1)

David Lazar
David Lazar

Reputation: 11427

This is a very easy question to answer. It is true, you always want to store your secrets in something like a dotenv file. Modern advanced frameworks like Rails even let you encrypt those, although eventually, you do need to ensure a secret key is present on your server for that.

So your public hosting service allows you to set environment variables. That is where you ensure they exist. You do not check those values into your public/private GitHub copy of your code.

So now, when your code executes, it has access to your secrets. It seems when you run your code, and you get undefined values, it is due to this, you have failed to set your environment properly. Read the documentation at your hosting service to figure that out.

Note that Shopify is not unique, 99% of all services operate this way. So you should have no trouble finding an answer to your problem.

Upvotes: -1

Related Questions