Best practice for using API keys server-side and keeping them hidden?

Trying to use hidden API keys when working with CMS in Plasmic. I’ve tried setting process.env.API_KEY_NAME etc as a variable but don’t seem to have any success.

What’s the best practice for storing an API key in my env file and referencing it on-canvas? Is that doable? Do I need to set up an API to access the keys?

Bit new to this but would really appreciate a guide.

Unfortunately that is not possible. If you need to keep a secret key, then you will need to exclusively make use of that key from within your get static props or get server side props functions. Anything that makes it to what you can see on the canvas is going to be visible to clients as well. In

Note however that the CMS API includes both a public key and a private key. The public key is fine to use and include on your page.

Note also that you should not need to construct your own HTTP API calls, specifying headers, etc. There is already a built-in plasmic CMS fetcher in the component store that you can use.

If for any reason you really do just need an HTTP API call that also uses a secret, you can instead use the new integrations/data queries feature. There are some pages on this in the docks, but the key is that when setting up a new HTTP API integration, you can define some secret headers that represent credentials, which will not be visible to clients and will only live on plasmic servers.

Can you please point me in the direction of the new integrations/data queries docs?

1 Like

Apologies for my lack of understanding, but does this mean I could use process.env.MY_CAISY_API_KEY etc as a header based on my env file and I’d be safe?

Oh, if you are asking about setting up an integration, then you need to provide the literal API key, you can’t enter just a JavaScript expression referencing your process.env. The plasmic integration won’t reveal secret credentials to anyone. Let me know if that makes sense.