Securely store and access API keys in a JavaScript snippet

I want to make an API call to an external application from my knack application.

I can write my JavaScript snippet here Settings → API & Code.
The API I am accessing requires authentication, which means I need to supply an API key with the request. I am proficient in JavaScript.

My concern is how can I secure my API key.
The JavaScript is loaded on the client side (user’s web browser), so hard coding the API key in the code would be a security breach.

I came across this JavaScript code in the documentation.


That gave me an idea that a solution might be to allow the user to store the API key as part of his profile, and then I access the API key from the user object (Knack.getUserAttributes().values.field_1;).

I have searched the forum to check if this case has been solved, but I haven’t found anything. Please advice me if there is an existing thread covering this topic. Thank you

What are your ideas to securely store and access API keys in a JavaScript snippet?


Personally, I think secret keys should always be stored in server-side code, ideally in environment variables.

If you don’t want to manage a server, you can use a third-party tool like Pipedream, write your code there, and then invoke it from Knack.

So the flow would go: Knack → Pipedream → Pipedream to External Application → Pipedream receives response from External Application and sends back to Knack.

Please note that users could execute Knack.getUserAttributes().values from the browser console and view the API key if stored there.

Yes, I agree, the server side should contain secret keys. That is the challenge when using a client side solution such as Knack.

Your suggestion of using Pipedream is great so that I dont have to maintain a server myself. I am using Zapier (an alternative to Pipedream as far as I understand Pipedream). That could work.